/* ═══════════════════════════════════════════════════════════════════════
   IWTMYL — Yankees HOPE Week featured module (newsroom page ID 249)
   MOW_HOPE_WEEK_MODULE

   Sits between row 0 and row 1 of .iw-press-wall via the
   `iw_press_after_row` filter.

   ── Why every selector is written `.hw .hw-thing`, never `.hw-thing` ────
   The module renders inside `.vp`, and css/vp-system.css styles bare
   ELEMENTS under that class:

     .vp p   { margin:0 0 14px!important; font-size:16px!important;
               line-height:1.65!important; color:#2f2f2f!important }
     .vp h3  { font-size:18px!important; color:#1c3a2a!important }
     .vp a   { display:inline!important; color:#2f7d4d!important;
               background:none!important; border:none!important }
     .vp a:hover   { text-decoration:underline!important }
     .vp ul, .vp ol{ list-style:none!important; margin:0!important }
     .vp img { max-width:100%!important }   ← NO height:auto → squashed <img>
     .vp em, .vp i { font-family:inherit!important } ← kills <i class="fa">

   `.vp p` is specificity (0,1,1). A single class like `.hw__lede` is
   (0,1,0) — LOWER — so it loses even with !important on both sides. That is
   not theoretical: it silently forced this module's body copy to 16px/1.65
   and its heading to 18px until the scope was added. `.hw .hw__lede` is
   (0,2,0) and wins.

   So: every rule below carries the `.hw` ancestor. !important is used only
   where the competing vp-system declaration is itself !important.
   Markup counters the rest: <span class="fa"> never <i class="fa">, and
   role="list" on both lists to survive list-style:none.

   ── Naming ─────────────────────────────────────────────────────────────
   Bootstrap 4.3.1 CSS *and* JS load globally on this page. Never use
   .carousel*, .slide, .active, .card, .row, .col-*, .btn, .badge, or any
   data-slide / data-ride / data-toggle attribute — Bootstrap has live
   delegated handlers for those. Prefix is `hw-`; active state `.is-current`.
   ═══════════════════════════════════════════════════════════════════════ */

.hw {
  /* Official Yankees palette — the same values as the site-wide
     .hope-week-topbar in header.php, so the module reads as one system
     with that banner rather than a second, slightly-off interpretation. */
  --hw-navy:    #0C2340;
  --hw-blue:    #003087;
  --hw-red:     #E4002C;
  --hw-silver:  #d8dde3;
  --hw-ink:     #152033;
  --hw-muted:   #5a6673;
  --hw-surface: #ffffff;
  --hw-tint:    #f7f8fa;

  position: relative;
  margin: 8px 0;                       /* matches .iw-press-row's 8px rhythm */
  background: var(--hw-surface);
  border: 1px solid var(--hw-navy);
  border-radius: var(--iw-radius-md, 10px);
  overflow: hidden;
  font-family: var(--iw-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Thicker navy top rule carrying one short red segment. */
.hw .hw__rule {
  height: 4px;
  background: linear-gradient(90deg, var(--hw-red) 0 84px, var(--hw-navy) 84px);
}

.hw .hw__inner { padding: 17px 22px 18px; }

.hw .hw__cols {
  display: grid;
  /* minmax(0,…) is mandatory: a bare 1fr has min-width:auto, and the
     carousel's overflow-x child would blow the track out to 15 slides wide. */
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: 26px;
  /* `start`, deliberately not `stretch`. Stretching drove the photo frame to
     the editorial column's height — a 392×529 portrait box holding landscape
     photos — and it would resize the frame every time the More coverage
     disclosure opened. With `start` the frame keeps a fixed 3:2 and expanding
     only grows the right column. */
  align-items: start;
}
.hw .hw__cols > * { min-width: 0; }


/* ═══ LEFT — carousel ═══════════════════════════════════════════════════ */

.hw .hw-car__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
  background: #e9edf1;                 /* holds the box while an image warms */
}

.hw .hw-car__viewport {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hw .hw-car__viewport::-webkit-scrollbar { display: none; }
.hw .hw-car__viewport:focus-visible { outline: 3px solid var(--hw-navy); outline-offset: -3px; }

.hw .hw-car__track {
  display: flex;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.hw .hw-car__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;            /* or a fast flick skips several slides */
  margin: 0;
}

.hw .hw-car__slide picture { display: block; height: 100%; }

/* .vp img sets max-width:100% !important with NO height:auto, so an
   <img width="1600" height="1067"> keeps its 1067px attribute height and
   renders squashed. Both dimensions have to be forced back. */
.hw .hw-car__slide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  /* object-position arrives as a per-slide inline style — the four portraits
     and the square need their focal point held near the faces. */
}

.hw .hw-car__credit {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  margin: 0 !important;
  padding: 4px 9px !important;
  border-radius: 4px;
  background: rgba(12, 35, 64, .78);
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* ── transport ── */

.hw .hw-car__ui {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.hw .hw-car__ui[hidden] { display: none; }

.hw .hw-car__btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--hw-silver);
  border-radius: 50%;
  background: #fff;
  color: var(--hw-navy);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Transparent 44×44 hit area — meets the touch target without growing the row. */
.hw .hw-car__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.hw .hw-car__btn:hover { background: var(--hw-navy); border-color: var(--hw-navy); color: #fff; }
.hw .hw-car__btn:focus-visible { outline: 3px solid var(--hw-navy); outline-offset: 2px; }

.hw .hw-car__rail {
  flex: 1 1 auto;
  display: flex;
  gap: 2px;
  min-width: 0;
}
.hw .hw-car__seg {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 2px;
  background: var(--hw-silver);
  transition: background-color .2s ease;
}
.hw .hw-car__seg.is-current { background: var(--hw-navy); }

.hw .hw-car__count {
  flex: 0 0 auto;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums;
  color: var(--hw-muted) !important;
  letter-spacing: .03em;
}

.hw .hw__credit-full {
  margin: 6px 0 0 !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  color: var(--hw-muted) !important;
}


/* ═══ RIGHT — editorial ═════════════════════════════════════════════════ */

.hw .hw__body {
  position: relative;
  /* Vertical pinstripe — a Yankees cue meant to sit at the edge of perception.
     At a 10px pitch and .022 alpha it read as a striped background rather than
     a texture, so: wider pitch, lower alpha (~1.6%). */
  background-image: repeating-linear-gradient(90deg, transparent 0 13px, rgba(12, 35, 64, .016) 13px 14px);
  background-clip: padding-box;
}

.hw .hw__eyebrow {
  display: flex !important;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 7px !important;
  padding-bottom: 4px !important;
  /* the one small red accent — a 2px underline beneath the eyebrow only */
  border-bottom: 2px solid var(--hw-red);
}
.hw .hw__mark {
  display: block !important;
  flex: 0 0 auto;
  width: auto !important;
  height: 20px !important;
  max-width: none !important;
}
.hw .hw__eyebrow-txt {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hw-navy) !important;
}

.hw .hw__title {
  margin: 0 0 6px !important;
  font-size: 24px !important;          /* beats .vp h3 { font-size:18px!important } */
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -.01em !important;
  color: var(--hw-navy) !important;
}

.hw .hw__lede {
  margin: 0 0 7px !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
  color: #2f2f2f !important;
}

/* Subhead and its note share one baseline-aligned row — two stacked blocks
   cost ~22px of module height for one short sentence. Wraps to two lines on
   narrow screens rather than overflowing. */
.hw .hw__subhead-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 10px 0 6px;
}
.hw .hw__subhead {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  color: var(--hw-ink);
}
.hw .hw__subnote {
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  color: var(--hw-muted) !important;
}


/* ═══ Coverage cards — stretched-link pattern ═══════════════════════════

   The <li> is the containing block. The primary <a> MUST stay
   position:static — making it position:relative re-roots its ::after to the
   anchor's own text box and the card silently stops being clickable outside
   the text. Secondary icon links are position:relative z-index:2, so they
   sit above the z-index:1 overlay.

   Two columns, not three. At three the track is ~176px and outlet names wrap
   to three lines — measured card heights came out 46 / 69 / 95px, a ragged
   grid. Two columns give ~267px, which holds every name on one line.        */

.hw .hw-cov-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Equalise ROWS, not just the cards within a row. Grid already stretches
     siblings in the same row; without this, a row holding a wrapped name is
     taller than the row below it and the block reads ragged (measured 46 vs
     42px at 1024). Costs nothing when nothing wraps. */
  grid-auto-rows: 1fr;
  gap: 7px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* `hidden` is a UA-sheet display:none, which an author `display:grid` beats.
   Without this the collapsed cards would still render AND stay tabbable. */
.hw .hw-cov[hidden] { display: none !important; }

/* Single-line cards: outlet name and type sit on ONE row, separated by a
   middot. Two-line cards forced a 44px min-height and three grid rows; this is
   ~36px and, with two of the six cards moved behind the disclosure, takes the
   card block from 146px to 79px. Still far above the WCAG 2.5.8 AA target
   minimum (24px), and the secondary icons keep their full 44x44 hit overlays. */
.hw .hw-cov {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 5px 9px;
  background: var(--hw-surface);
  border: 1px solid var(--hw-silver);
  border-radius: 7px;
  /* left accent rail — transparent by default, red only on hover/focus */
  border-left: 2px solid transparent;
  transition: border-left-color .15s ease;
}

/* Widens the one card whose rail carries three icons, so a long outlet name
   still fits on a single line beside them. */
.hw .hw-cov--wide { grid-column: span 2; }

.hw .hw-cov__link {
  display: flex !important;            /* beats .vp a { display:inline!important } */
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--hw-ink) !important;     /* beats .vp a { color:#2f7d4d!important } */
  text-decoration: none !important;
  font-weight: 600 !important;
}
.hw .hw-cov__link:hover { text-decoration: none !important; }  /* beats .vp a:hover */

/* The overlay IS the card's hit area and the card's focus ring. */
.hw .hw-cov__link::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  border-radius: 7px;                  /* border-radius:inherit would resolve
                                          against the anchor, which has none */
  background: transparent;
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* Card affordance is rooted at the ANCHOR's hover, never .hw-cov:hover —
   :hover propagates up the DOM, so a card-rooted rule would light the card up
   while the pointer is aiming at a secondary icon. The icons are not
   descendants of the anchor, so .hw-cov__link:hover is false over them. */
.hw .hw-cov__link:hover::after {
  background: rgba(12, 35, 64, .045);
  box-shadow: inset 0 0 0 1px rgba(12, 35, 64, .45);
}
.hw .hw-cov:has(.hw-cov__link:hover) { border-left-color: var(--hw-red); }

.hw .hw-cov__link:focus-visible::after {
  background: rgba(12, 35, 64, .045);
  outline: 3px solid var(--hw-navy);
  outline-offset: 2px;
}
/* Safe ONLY because the rule above always draws a ring on the ::after. */
.hw .hw-cov__link:focus-visible { outline: none; }

.hw .hw-cov__outlet {
  min-width: 0;
  font-size: 13.5px !important;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.hw .hw-cov__type {
  flex: 0 0 auto;                      /* the name wraps before the type does */
  white-space: nowrap;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hw-muted) !important;
}
.hw .hw-cov__type::before { content: "\00b7\00a0"; }   /* middot separator */

.hw .hw-cov__rail { display: flex; align-items: center; gap: 14px; }  /* 30+14 = 44px pitch */

/* Static external-link affordance on cards with no secondary links. Purely
   decorative — the anchor already announces itself, and the note above the
   list says once that links open in a new tab. */
.hw .hw-cov__out {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  color: #9aa4b0;
}

.hw .hw-cov__x {
  position: relative;
  z-index: 2;                          /* above the ::after overlay */
  display: inline-flex !important;     /* beats .vp a { display:inline!important } */
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hw-tint) !important;         /* beats .vp a { background:none!important } */
  border: 1px solid var(--hw-silver) !important; /* beats .vp a { border:none!important } */
  color: var(--hw-navy) !important;
  text-decoration: none !important;
  font-size: 13px;
  line-height: 1;
}
.hw .hw-cov__x::before {               /* 44×44 hit area at zero layout cost */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.hw .hw-cov__x:hover {
  background: var(--hw-navy) !important;
  border-color: var(--hw-navy) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.hw .hw-cov__x:focus-visible { outline: 3px solid var(--hw-navy); outline-offset: 2px; }

.hw .hw-cov__x--chip {
  width: auto;
  min-width: 30px;
  padding: 0 8px;
  border-radius: 15px;
  font-size: 10px;
  font-weight: 700 !important;
  letter-spacing: .04em;
}

/* Understated disclosure for the remaining coverage. A text control, not a
   button-looking CTA — the coverage links themselves are the calls to action.
   Not a modal: the cards reveal inline, in place, still keyboard-reachable. */
.hw .hw-cov__more {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  margin-top: 6px;
  padding: 4px 2px;
  background: none;
  border: 0;
  color: var(--hw-navy) !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.hw .hw-cov__more:hover { text-decoration-thickness: 2px; }
.hw .hw-cov__more:focus-visible { outline: 3px solid var(--hw-navy); outline-offset: 2px; border-radius: 3px; }
.hw .hw-cov__more .fa { font-size: 11px; transition: transform .15s ease; }

/* Defence in depth: if anyone ever converts <span class="fa"> back to
   <i class="fa">, .vp em,.vp i{font-family:inherit!important} would render
   italic tofu instead of glyphs. */
.hw .fa { font-family: FontAwesome !important; font-style: normal !important; }


/* ═══ Utility ═══════════════════════════════════════════════════════════ */

.hw .hw-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;                 /* else a long label wraps into a 1px
                                          column and some AT spells it out */
  border: 0;
}

/* Without JS the viewport is still a swipeable, scrollable gallery, so the
   transport is hidden rather than shipped dead. JS removes --nojs. */
.hw .hw-car--nojs .hw-car__ui { display: none; }


/* ═══ Responsive — theme convention is desktop-first 900 → 600 ═══════════ */

@media (max-width: 900px) {
  .hw .hw__inner { padding: 18px 18px 20px; }
  .hw .hw__cols { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 18px; }
  .hw .hw__title { font-size: 22px !important; }
  /* the editorial track is too narrow for two card columns here */
  .hw .hw-cov-list { grid-template-columns: minmax(0, 1fr); }
  .hw .hw-cov--wide { grid-column: auto; }
}

@media (max-width: 760px) {
  /* Stack: carousel above the editorial content. */
  .hw .hw__cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hw .hw-cov-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw .hw-cov--wide { grid-column: span 2; }
  .hw .hw__body { background-image: none; }  /* pinstripe reads as noise here */
}

@media (max-width: 600px) {
  .hw { border-radius: 8px; }
  .hw .hw__inner { padding: 15px 14px 17px; }
  .hw .hw__rule { background: linear-gradient(90deg, var(--hw-red) 0 56px, var(--hw-navy) 56px); }
  .hw .hw__title { font-size: 20px !important; }
  .hw .hw__lede { font-size: 13.5px !important; }
  .hw .hw-cov-list { grid-template-columns: minmax(0, 1fr); }
  .hw .hw-cov--wide { grid-column: auto; }   /* span 2 would overflow a 1-col grid */
  .hw .hw-cov { min-height: 44px; padding: 7px 11px; }   /* roomier where it's a thumb target */
  .hw .hw-cov__outlet { font-size: 14px !important; }
  .hw .hw-car__credit { left: 8px; bottom: 8px; font-size: 11px !important; }
}

/* No aspect-ratio support (older Safari): keep the frame from collapsing. */
@supports not (aspect-ratio: 3 / 2) {
  .hw .hw-car__frame { height: 0; padding-top: 66.667%; }
}


/* ═══ Reduced motion ════════════════════════════════════════════════════
   JS also honours this: passing {behavior:'smooth'} to scrollTo OVERRIDES
   the CSS scroll-behavior below, so hope-week.js picks the value from
   matchMedia rather than relying on this block alone.                      */

@media (prefers-reduced-motion: reduce) {
  .hw .hw-car__viewport { scroll-behavior: auto !important; }
  .hw .hw-car__seg,
  .hw .hw-car__btn,
  .hw .hw-cov,
  .hw .hw-cov__more .fa,
  .hw .hw-cov__link::after { transition: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   MOW_HOPE_WEEK_ANCHOR - target for the global top bar's "2026 New York
   Yankees HOPE Week Honoree" link (header.php -> /news/#hope-week).

   #hp-header is position:sticky;top:0 and 65px tall on /news/, so without a
   scroll offset the anchor jump parks the module UNDERNEATH it. scroll-margin-top
   is the modern fix - no phantom offset element, and it applies to any jump
   (link click, back/forward, or a manual location.hash).

   WordPress's admin bar is a further 32px (46px under 782px) and is only
   present for logged-in users, hence the body.admin-bar variants - Brian is
   always logged in, so without these HE would see it land wrong while logged-out
   visitors saw it correctly.
   ─────────────────────────────────────────────────────────────────────────── */
#hope-week{scroll-margin-top:84px}
body.admin-bar #hope-week{scroll-margin-top:116px}
@media screen and (max-width:782px){
	body.admin-bar #hope-week{scroll-margin-top:130px}
}