/* ============================
   BWB Front Page Widgets – Shared
   ============================ */

/* --- Grids --- */
.usw-grid,
.nrw-grid,
.drw-grid,
.crw-grid,
.tusw-grid,
.urw-grid,
.bnw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* --- Cards --- */
.usw-card,
.nrw-card,
.drw-card,
.crw-card,
.tusw-card,
.urw-card,
.bnw-card {
  position: relative;
  background: #232323;
  border-radius: 8px;
  padding: 10px;
  color: #c4c4c4;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
  transition: transform .2s ease-out, background-color .3s ease;
  overflow: hidden;
}

.usw-card:hover,
.nrw-card:hover,
.drw-card:hover,
.crw-card:hover,
.tusw-card:hover,
.urw-card:hover,
.bnw-card:hover {
  background: #313131;
  transform: scale(1.03);
}

/* --- Thumbs (full-bleed top, rounded only at top) --- */
.usw-thumbwrap,
.nrw-thumbwrap,
.drw-thumbwrap,
.crw-thumbwrap,
.tusw-thumbwrap,
.urw-thumbwrap,
.bnw-thumbwrap {
  display: block;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  margin: -10px -10px 0; /* full-bleed by default */
}

.usw-thumb,
.nrw-thumb,
.drw-thumb,
.crw-thumb,
.tusw-thumb,
.urw-thumb,
.bnw-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0 !important;
}

/* --- Meta row under image (for widgets that use it) --- */
.usw-meta,
.nrw-meta,
.drw-meta,
.crw-meta,
.tusw-meta,
.urw-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}

/* --- Score badge (shape/typography) --- */
.usw-score,
.nrw-score,
.drw-score,
.crw-score,
.tusw-score,
.urw-score {
  display: inline-block;
  padding: 4px 8px;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  border-radius: 6px;
  color: #000;        /* text on badge */
  background: #aeb0b3;/* fallback if no color class applied */
  flex-shrink: 0;
}

/* --- Score colors (shared palette) --- */
.usw-rating-box--red,
.nrw-rating-box--red,
.drw-rating-box--red,
.crw-rating-box--red,
.tusw-rating-box--red,
.urw-rating-box--red {
  background: #ff6874;
}

.usw-rating-box--amber,
.nrw-rating-box--amber,
.drw-rating-box--amber,
.crw-rating-box--amber,
.tusw-rating-box--amber,
.urw-rating-box--amber {
  background: #f39c12;
}

.usw-rating-box--green,
.nrw-rating-box--green,
.drw-rating-box--green,
.crw-rating-box--green,
.tusw-rating-box--green,
.urw-rating-box--green {
  background: #27ae60;
}

/* “N/A” score (light grey). Not used by all widgets, harmless if present */
.usw-rating-box--na,
.nrw-rating-box--na,
.drw-rating-box--na,
.tusw-rating-box--na {
  background: #b8b8b8;
  color: #000;
}

/* --- Text column (title + meta lines) --- */
.usw-text,
.nrw-text,
.drw-text,
.crw-text,
.tusw-text,
.urw-text,
.bnw-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* --- Titles (single-line by default, overridden per-widget below) --- */
.usw-title,
.nrw-title,
.drw-title,
.crw-title,
.tusw-title,
.urw-title {
  display: block;
  margin: 0;
  line-height: 1.1;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usw-title:hover,
.nrw-title:hover,
.drw-title:hover,
.crw-title:hover,
.tusw-title:hover,
.urw-title:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* --- Tag / Date lines --- */
.usw-tag,
.nrw-tag,
.drw-tag,
.crw-tag,
.tusw-tag,
.urw-tag {
  margin: 0;
  line-height: 1;
  font-size: 12px;
  color: #c4c4c4;
}

.usw-date,
.nrw-date,
.tusw-date {
  margin-top: 0px;
  line-height: 1;
  font-size: 11px;
  color: #c4c4c4;
}

/* --- “See all” link to the right of headings (shared across widgets) --- */
.usw-title-link,
.nrw-title-link,
.bnw-title-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-left: .4em;
  font-size: .9em;
  font-weight: 700;
  color: #ccc !important;
  text-decoration: none;
  white-space: nowrap;
}

.usw-title-link:hover,
.nrw-title-link:hover,
.bnw-title-link:hover {
  color: #ccc !important;
  text-decoration: underline;
}

.usw-title-sep,
.nrw-title-sep,
.bnw-title-sep {
  display: inline-block;
  color: #ccc;
  font-size: 1.15em;
  line-height: 1;
  margin-left: .4em;
  vertical-align: middle;
  position: relative;
  top: .02em; /* tiny optical nudge */
}

/* --- Responsive: keep 2-up on phones/tablets --- */
@media (max-width: 980px) {
  .usw-grid,
  .nrw-grid,
  .drw-grid,
  .crw-grid,
  .tusw-grid,
  .urw-grid,
  .bnw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .usw-grid,
  .nrw-grid,
  .drw-grid,
  .crw-grid,
  .tusw-grid,
  .urw-grid,
  .bnw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================
   Widget-specific tweaks
   ============================ */

/* Latest News: add a small gap below the full-bleed image and a soft top pad on text */
.bnw-card .bnw-thumbwrap {
  margin-bottom: 8px;              /* creates spacing below the image */
}

.bnw-text {
  padding-top: 2px;                /* tiny breathing room above the title */
}

/* Latest News titles: allow ~2 lines (clamp) */
.bnw-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;           /* show up to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;             /* allow wrapping when clamped */
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.1;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

/* Force white + underline on hover (beat theme rules) */
.bnw-grid .bnw-card a.bnw-title,
.bnw-grid .bnw-card a.bnw-title:visited {
  color: #fff !important;
  text-decoration: none !important;
}

.bnw-grid .bnw-card a.bnw-title:hover,
.bnw-grid .bnw-card a.bnw-title:focus,
.bnw-grid .bnw-card a.bnw-title:active {
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* ============================
   Critics Latest – Hero + 3 + Bottom Row
   ============================ */

/* Unified 4-col wrapper: hero spans cols 1–2, side list spans 3–4 */
.crw-wrap{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;                 /* match global gap */
  margin-bottom:12px;
}

/* HERO = a normal .crw-card that spans two columns (keeps same look/shadow) */
.crw-hero{ grid-column:1 / span 2; }
.crw-hero .crw-hero-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.crw-hero .crw-hero-title{ font-size:1.45rem; line-height:1; margin-top:6px; }

/* Shared excerpt style (hero + side) */
.crw-excerpt{
  margin:.0rem 0 0;
  color:#cfd3d7;
  font-size:.92rem;
  line-height:1.4;
}

/* Right column: stack three cards in the right half */
.crw-side3{
  grid-column:3 / span 2;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* Side cards keep the same card visuals */
.crw-side .crw-side-inner{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:10px;
  align-items:center;
  padding-right:10px;              /* base right inset */
  box-sizing:border-box;
}

/* Override the full-bleed behavior for side thumbnails only */
.crw-side .crw-thumbwrap{
  margin:0;                 /* remove global -10px margins */
  border-radius:6px;        /* neat rounding on contained thumb */
  overflow:hidden;
}
.crw-side .crw-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Titles inherit .crw-title; just tighten spacing */
.crw-side-title{ margin-bottom:2px; }

/* Make sure side text can shrink (for clamps/ellipsis) */
.crw-side .crw-side-text{ min-width:0; }

/* Optional clamp for side excerpts */
.crw-side-excerpt{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===== Responsive tweaks for the new critics layout ===== */
@media (max-width:1060px){
  .crw-wrap{ grid-template-columns:repeat(2, 1fr); }
  .crw-hero{ grid-column:1 / span 2; }
  .crw-side3{ grid-column:1 / span 2; }
  .crw-side .crw-side-inner{ grid-template-columns:120px 1fr; }
}

@media (max-width:780px){
  .crw-side .crw-side-inner{ grid-template-columns:130px 1fr; gap:12px; padding-right:0; }
  .crw-excerpt{ font-size:.9rem; }
  
  /* Clamp hero title to 2 lines on mobile */
  .crw-hero-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    white-space:normal;     /* override base nowrap */
    text-overflow:ellipsis;
    line-height:1.2;
  }

  /* Mobile: give side text a clear right inset and clamp titles */
  .crw-side3 .crw-side .crw-side-text{
    padding-right:6px;
    box-sizing:border-box;
    min-width:0;
  }

  /* Single-line truncate for the three small titles on mobile */
  .crw-side-title{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.2;
  }

  /* Bottom row already drops to 2 columns via your global media queries */
}

/* ===== Critics Latest – thumbnail score badge ===== */
.crw-card .crw-thumbwrap{ position: relative; } /* localize positioning */
.crw-badge{
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 5px 9px;         /* bumped up a bit */
  font-weight: 700;
  font-size: 18px;          /* bigger base for side badges */
  line-height: 1;
  border-radius: 6px;
  color: #000;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  /* background color comes from existing .crw-rating-box--* classes */
}

/* Make the HERO (left big post) badge larger */
.crw-hero .crw-badge{
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  font-size: 30px;          /* notably larger for hero */
}

/* Optional: small mobile tweak so badges aren’t oversized */
@media (max-width:780px){
  .crw-badge{ font-size: 17px; padding: 4px 8px; left: 6px; bottom: 6px; }
  .crw-hero .crw-badge{ font-size: 34px; padding: 5px 9px; left: 8px; bottom: 8px; }
}

/* ===== Critics Latest – Tag Pill under excerpt ===== */
.crw-tagpill{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:2px 2px;
  border:1px solid #3a3a3a;   /* subtle outline instead of shading */
  border-radius:3px;         /* pill */
  color:#ddd;
  font-size:12px;
  line-height:1;
  text-decoration:none;
  margin-top:0px;              /* sits below excerpt/title */
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Mobile: slightly tighter pill */
@media (max-width:780px){
  .crw-tagpill{
    font-size:11px;
    padding:3px 8px;
    margin-top:6px;
  }
}

/* === Fix: hero tag pill should not stretch across the container === */
.crw-tagpill {
  /* existing styles remain; just add the line below */
  align-self: flex-start; /* prevents full-width stretching inside flex column */
}

/* === Tighten spacing for the three side posts (title ↔ excerpt) === */
.crw-side-title {
  margin-bottom: 0; /* was 2px; tighter */
}

.crw-side-excerpt {
  margin-top: 2px;    /* was ~4px via .crw-excerpt default */
  line-height: 1.35;  /* slightly tighter text block */
}




















/* ============================
   BWB – Top Upcoming Slots (two-col list) — scoped overrides
   ============================ */

/* Layout: two columns for this widget */
.tusw-grid.tusw-grid--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* We render our own numbers */
.tusw-col .tusw-list { list-style: none; margin: 0; padding: 0; }

/* Row grid: rank | thumb | text (legacy rank col – kept harmless) */
.tusw-row {
  display: grid;
  grid-template-columns: 34px minmax(78px,96px) 1fr;
  column-gap: 14px;
  align-items: center;
}

/* Rank (no longer used visually, harmless to keep) */
.tusw-rank {
  background: none !important;
  color: #ddd;
  padding: 0;
  min-width: auto;
  text-align: left;
  font: 600 24px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Remove full-bleed margins from shared styles */
.tusw-grid.tusw-grid--two-col .tusw-thumbwrap {
  margin: 0 !important;
  border-radius: 4px !important;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}

/* True 16:9 thumbnails */
.tusw-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* Text */
.tusw-info { display: grid; row-gap: 4px; }
.tusw-title { font-weight: 700; font-size: 20px; line-height: 1.2; }
.tusw-title:hover { text-decoration: underline; }
.tusw-tag { font-size: 12px; opacity: .85; margin-right: 8px; }
.tusw-date { font-size: 12px; opacity: .72; }

/* Responsive */
@media (max-width: 720px) {
  .tusw-grid.tusw-grid--two-col { grid-template-columns: 1fr; }
  .tusw-row { grid-template-columns: 36px minmax(82px,100px) 1fr; }
  .tusw-rank { font-size: 20px; }
}

/* === TUSW: subtle card hover zoom (no image zoom) === */
.tusw-item { position: relative; overflow: visible; }

.tusw-row {
  position: relative;
  padding: 8px;
  transform-origin: center;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
  z-index: 0;
}

.tusw-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #232323;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  z-index: -1;
  transition: background-color .18s ease, box-shadow .18s ease;
}

.tusw-item:hover { z-index: 2; }
.tusw-row:hover {
  transform: scale(1.02);
}
.tusw-row:hover::before {
  background: #313131;
  box-shadow: 0 6px 14px rgba(0,0,0,.55);
}

/* No image zoom */
.tusw-thumb { transition: none !important; }
.tusw-row:hover .tusw-thumb { transform: none !important; }

/* Restore vertical spacing now that borders are gone */
.tusw-item {
  padding: 0px 0;          /* top/bottom space */
}
.tusw-item + .tusw-item {
  margin-top: 6px;          /* subtle gap between cards */
}

/* === TUSW: thumbnail badge numbering + +10% thumb === */

/* Hide old number column */
.tusw-rank { display: none !important; }
.tusw-rank::after { content: none !important; }

/* Numbering on thumbnails */
.tusw-col .tusw-list { counter-reset: tusw-rank; }
.tusw-item { counter-increment: tusw-rank; }

.tusw-thumbwrap { position: relative; }
.tusw-thumbwrap::before {
  content: counter(tusw-rank);
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #e60023;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

/* Slightly larger thumbnails */
.tusw-row {
  grid-template-columns: minmax(86px,106px) 1fr;
  column-gap: 14px;
}

/* Responsive */
@media (max-width: 720px) {
  .tusw-row { grid-template-columns: minmax(90px,110px) 1fr; }
}

/* Global counter fix (1–10 across both cols) */
.tusw-grid.tusw-grid--two-col { counter-reset: tusw-rank; }
.tusw-col .tusw-list { counter-reset: none !important; }

@media (max-width: 720px) {
  /* Collapse to one column AND remove the inter-column gap */
  .tusw-grid.tusw-grid--two-col{
    grid-template-columns: 1fr;
    gap: 0;                     /* <-- fixes the big space between 5 and 6 */
  }

  /* Optional: add the same tiny rhythm between columns as between items */
  .tusw-col--right{
    margin-top: 6px;            /* matches .tusw-item + .tusw-item spacing */
  }

  /* keep your existing rules */
  .tusw-row { grid-template-columns: minmax(90px,110px) 1fr; }
  .tusw-rank { font-size: 20px; }
}