/* ═══════════════════════════════════════════════════════════════════════
   IWTMYL — AARP Community Challenge Grant press card   MOW_AARP_GRANT_CARD

   One wide card in the newsroom wall: TAPinto photo on top, AARP-red strip
   across the bottom carrying the outlet + headline on the left and the social
   mentions on the right.

   ⚠️ Every rule carries the `.mow-aarp` ancestor for the same reason the HOPE
   Week module does: vp-system.css styles bare ELEMENTS under `.vp`
   (`.vp p`, `.vp a`, `.vp img` …) all with !important, and `.vp p` is
   specificity (0,1,1) — HIGHER than a lone class. A single-class rule loses
   silently even with !important on both sides.

   ⛔ Bootstrap 4.3.1 CSS + JS load globally here. No `.card`, `.row`, `.btn`,
      `.badge`, `.active`, or any `data-slide`/`data-toggle` attribute.
   ═══════════════════════════════════════════════════════════════════════ */

.mow-aarp {
  --aarp-red:  #E4002B;   /* AARP brand red */
  --aarp-ink:  #1a1a1a;
  --aarp-line: #d8dde3;

  /* A FULL-WIDTH row of its own, two columns, both the same height: the
     existing 'AARP - Real People Real Stories' card on the left, the TAPinto
     grant card on the right. Brian's spec, 2026-08-04.

     This replaced an earlier float-at-65% version. The float did fill the
     gutter, but it did so by squeezing three ordinary rows down to 344px and
     shrinking cards that should not have been small. Every other row is back
     to full width now. */
  display: flex;
  align-items: stretch;      /* the two columns match heights */
  gap: 8px;                  /* same gutter .iw-press-row uses between cards */
  width: 100%;
  margin: 8px 0;
}

/* Left column — the companion press card. flex-basis 38% keeps the TAPinto
   card dominant while giving this one real presence. */
.mow-aarp .mow-aarp__mate {
  flex: 0 0 38%;
  display: flex !important;
  flex-direction: column;
  min-width: 0;
}
/* The image takes whatever height the row has; the title keeps its own. */
.mow-aarp .mow-aarp__mate .iw-press-card__img {
  flex: 1 1 auto;
  min-height: 0;
}
.mow-aarp .mow-aarp__mate .iw-press-card__img img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center 30%;   /* keeps faces off the crop line */
}
.mow-aarp .mow-aarp__mate .iw-press-card__title { flex: 0 0 auto; }

/* Title is the stretched link over the photo — the card is a <div> now that it
   holds several links, so this restores the one-big-click-target behaviour every
   other press card has. Stays position:static: making it relative would re-root
   the ::after to its own text box and the photo would stop being clickable. */
.mow-aarp .mow-aarp__matelink {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  background: none !important;
  border: none !important;
}
.mow-aarp .mow-aarp__matelink::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}
.mow-aarp .mow-aarp__matelink:hover { text-decoration: underline !important; }
.mow-aarp .mow-aarp__matelink:focus-visible::after {
  outline: 3px solid var(--aarp-red);
  outline-offset: -3px;
  border-radius: var(--iw-radius-sm, 6px);
}
.mow-aarp .mow-aarp__matelink:focus-visible { outline: none; }

/* "Watch it on" row: site / Facebook / Instagram, beneath the photo.
   flex:0 0 auto so it never steals height from the photo, which is what keeps
   this column exactly level with the grant card on the right. */
.mow-aarp .mow-aarp__links {
  position: relative;
  z-index: 2;                 /* above the stretched overlay */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;                  /* 30 + 14 = 44px pitch between hit areas */
  padding: 0 8px 9px;
}

.mow-aarp .mow-aarp__watch {
  position: relative;
  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(--aarp-red) !important;   /* beats .vp a { background:none!important } */
  border: 1px solid var(--aarp-red) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}
.mow-aarp .mow-aarp__watch::before {   /* 44x44 hit area, zero layout cost */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.mow-aarp .mow-aarp__watch:hover {
  background: #fff !important;
  color: var(--aarp-red) !important;
}
.mow-aarp .mow-aarp__watch:focus-visible { outline: 3px solid var(--aarp-red); outline-offset: 2px; }

/* Right column — the TAPinto card fills the rest of the row. */
.mow-aarp .mow-aarp__card { flex: 1 1 auto; min-width: 0; }

.mow-aarp .mow-aarp__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--aarp-line);
  border-radius: var(--iw-radius-sm, 6px);
}

/* ── photo ── */

.mow-aarp .mow-aarp__figure {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  line-height: 0;
}

/* .vp img sets max-width:100% !important with NO height:auto, so an
   <img width height> keeps its attribute height and renders squashed. */
.mow-aarp .mow-aarp__figure img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}

.mow-aarp .mow-aarp__credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  margin: 0 !important;
  padding: 3px 7px !important;
  border-radius: 3px;
  background: rgba(0, 0, 0, .62);
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  pointer-events: none;
}

/* ── red strip ── */

.mow-aarp .mow-aarp__strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: var(--aarp-red);
  /* ~18% of the card height at the rendered width, per spec; a min-height
     rather than a percentage so it cannot collapse on a narrow viewport.
     Measured live at 65% wall width: card 439px, strip 80px = 18.2%. */
  min-height: 80px;
  flex: 0 0 auto;   /* pinned to the bottom; the photo takes the slack */
  box-sizing: border-box;
}

.mow-aarp .mow-aarp__text { flex: 1 1 auto; min-width: 0; }

/* The strip's right end is the socials cluster — ~20-25% of the strip. */
.mow-aarp .mow-aarp__socials {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;                /* 30 + 14 = 44px pitch between hit areas */
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .28);
}

.mow-aarp .mow-aarp__kicker {
  display: flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 0 0 3px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.mow-aarp .mow-aarp__also { color: rgba(255, 255, 255, .6); }

.mow-aarp .mow-aarp__head {
  margin: 0 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.005em;
}

/* ── links ──────────────────────────────────────────────────────────────
   Stretched link: the card body is clickable through .mow-aarp__link's
   ::after overlay. That anchor MUST stay position:static — making it
   relative re-roots the ::after to its own text box and the card silently
   stops being clickable outside the text. Patch and the socials are
   position:relative z-index:2, so they sit above the overlay and stay
   independently clickable. No nested <a>, which would be invalid HTML.  */

.mow-aarp .mow-aarp__link {
  color: #fff !important;              /* beats .vp a { color:#2f7d4d!important } */
  text-decoration: none !important;
  font-weight: 700 !important;
  background: none !important;
  border: none !important;
}
.mow-aarp .mow-aarp__link::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}
.mow-aarp .mow-aarp__link:hover { text-decoration: underline !important; }

.mow-aarp .mow-aarp__card:has(.mow-aarp__link:hover) { border-color: var(--aarp-red); }

.mow-aarp .mow-aarp__link:focus-visible::after {
  outline: 3px solid var(--aarp-red);
  outline-offset: 3px;
  border-radius: var(--iw-radius-sm, 6px);
}
/* Safe ONLY because the rule above always draws the ring on the ::after. */
.mow-aarp .mow-aarp__link:focus-visible { outline: none; }

.mow-aarp .mow-aarp__patch {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, .92) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 700 !important;
  background: none !important;
  border: none !important;
}
.mow-aarp .mow-aarp__patch:hover { color: #fff !important; }
.mow-aarp .mow-aarp__patch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mow-aarp .mow-aarp__soc {
  position: relative;
  z-index: 2;
  display: inline-flex !important;     /* beats .vp a { display:inline!important } */
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .5) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  line-height: 1;
}
/* 44x44 hit area at zero layout cost. */
.mow-aarp .mow-aarp__soc::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.mow-aarp .mow-aarp__soc:hover {
  background: #fff !important;
  color: var(--aarp-red) !important;
  border-color: #fff !important;
}
.mow-aarp .mow-aarp__soc:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ── Facebook group: one icon that expands to 1 | 2 | 3 ────────────────── */

.mow-aarp .mow-aarp__fbgroup {
  position: relative;
  z-index: 2;                 /* above the card's stretched-link overlay */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mow-aarp .mow-aarp__fbtoggle {
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.mow-aarp .mow-aarp__fbtoggle[hidden] { display: none !important; }
.mow-aarp .mow-aarp__fbgroup.is-open .mow-aarp__fbtoggle {
  background: #fff !important;
  color: var(--aarp-red) !important;
  border-color: #fff !important;
}

.mow-aarp .mow-aarp__fblist {
  display: inline-flex;
  align-items: center;
  /* 10px, not 8: measured chip-centre pitch was 42px at 8px, just under the
     44px touch minimum, so the transparent hit overlays overlapped. */
  gap: 10px;
}
.mow-aarp .mow-aarp__fblist[hidden] { display: none !important; }

.mow-aarp .mow-aarp__fbsep { color: rgba(255, 255, 255, .45); font-size: 12px; }

.mow-aarp .mow-aarp__fbitem {
  position: relative;
  display: inline-flex !important;   /* beats .vp a { display:inline!important } */
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700 !important;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* 44x44 hit area at zero layout cost; 24 + 8 gap + 24 keeps centres ~44 apart
   once the ::before overlays are accounted for. */
.mow-aarp .mow-aarp__fbitem::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.mow-aarp .mow-aarp__fbitem:hover {
  background: #fff !important;
  color: var(--aarp-red) !important;
  border-color: #fff !important;
}
.mow-aarp .mow-aarp__fbitem:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Defence in depth: .vp em,.vp i{font-family:inherit!important} renders
   <i class="fa"> as italic tofu. Markup uses <span class="fa"> already. */
.mow-aarp .fa { font-family: FontAwesome !important; font-style: normal !important; }

.mow-aarp .mow-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;
  border: 0;
}


/* ═══ Responsive ════════════════════════════════════════════════════════ */

@media (max-width: 1024px) { .mow-aarp .mow-aarp__mate { flex-basis: 34%; } }

@media (max-width: 760px) {
  /* Stack the two columns; a 34% companion card is unreadable at this width. */
  .mow-aarp { flex-direction: column; }
  .mow-aarp .mow-aarp__mate { flex: 0 0 auto; }
  .mow-aarp .mow-aarp__mate .iw-press-card__img img { height: auto !important; object-fit: cover; }
  .mow-aarp .mow-aarp__strip { gap: 10px; padding: 10px 12px; min-height: 66px; }
  .mow-aarp .mow-aarp__head { font-size: 14px !important; }
  .mow-aarp .mow-aarp__socials { gap: 10px; padding-left: 10px; }
}

@media (max-width: 480px) {
  /* Stack so the headline keeps its full width and the icons stay 44px apart. */
  .mow-aarp .mow-aarp__strip { flex-direction: column; align-items: flex-start; gap: 9px; }
  .mow-aarp .mow-aarp__socials {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .28);
    padding-top: 9px;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mow-aarp .mow-aarp__card,
  .mow-aarp .mow-aarp__soc { transition: none !important; }
}