/* ═══════════════════════════════════════════════════════
   IWTMYL Sponsor-Logo Rotation — shared component
   Location: css/mow-sponsors.css
   Loaded sitewide (homepage + non-homepage) via enqueue guard.

   Used by BOTH footer sponsor surfaces through one template part
   (template-parts/sponsor-strip.php):
     • .mow-sponsors--single  → non-home compact footer (iw-supporters):
                                 one centered five-position row.
     • .mow-sponsors--stacked → homepage "Backed By" area (hp-backed):
                                 two rows (2 over 3).

   Five FIXED slots. Only slots 2 & 4 rotate (Walmart↔AARP,
   Milwaukee↔Yankees). Slot geometry is fixed and never derived from
   the active logo, so a rotation never moves, resizes, or reflows any
   slot. Neutral grayscale + muted opacity is the whole visual system;
   the opacity cross-fade is the only motion. No hover color, no
   shadows/boxes/badges — deliberately understated.
   ═══════════════════════════════════════════════════════ */

.mow-sponsors,
.mow-sponsors *,
.mow-sponsors *::before,
.mow-sponsors *::after { box-sizing: border-box; }

.mow-sponsors {
  --mow-fade: 1.4s;            /* opacity hand-off (1.25–1.5s window) */
  --mow-logo-opacity: 0.6;     /* muted neutral treatment */
}

/* Row(s). Single variant = one wrapping row; stacked = two rows. */
.mow-sponsors__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Slot = fixed-size positioning box. Width & height NEVER depend on the
   currently active logo, which is what keeps neighbours from shifting. */
.mow-sponsors__slot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--mow-slot-h, 36px);
  width: var(--mow-slot-w, auto);
}

/* A logo layer (either an <a> link or an unlinked <span>). */
.mow-sponsors__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  text-decoration: none;
  border: 0;
  background: none;
}
a.mow-sponsors__logo { cursor: pointer; }
span.mow-sponsors__logo { cursor: default; }

/* Rotating slots layer their two options in the SAME box; only opacity
   animates. Incoming/outgoing overlap ONLY inside this fixed slot. */
.mow-sponsors__slot--rotating .mow-sponsors__logo {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mow-fade, 1.4s) ease;
}
.mow-sponsors__slot--rotating .mow-sponsors__logo.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Before JS marks the strip ready, disable transitions so the initial
   session-selected slate is applied with no visible fade/flash. */
.mow-sponsors:not(.mow-sponsors--ready) .mow-sponsors__logo { transition: none !important; }

/* Images: original aspect preserved, neutral grayscale, muted opacity.
   object-fit:contain is a safety net; per-brand max-height does the
   optical sizing. Fixed slot dimensions reserve space → zero CLS. */
.mow-sponsors__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: var(--mow-logo-opacity, 0.6);
}

/* Deliberately NO hover animation and NO full-colour-on-hover. */
.mow-sponsors__logo:hover img,
.mow-sponsors__logo:focus img {
  filter: grayscale(100%);
  opacity: var(--mow-logo-opacity, 0.6);
}

/* Accessible keyboard focus ring (no brand colour introduced). */
.mow-sponsors__logo:focus-visible {
  outline: 2px solid var(--iw-green-500, #52b788);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .mow-sponsors__logo { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════
   Variant: SINGLE centered row  (non-home iw-supporters)
   Desktop target ≈ 34–38px for the taller Yankees crest.
   ═══════════════════════════════════════════════════════ */
.mow-sponsors--single { --mow-logo-opacity: 0.65; }
.mow-sponsors--single .mow-sponsors__row { gap: 24px; }
.mow-sponsors--single .mow-sponsors__slot { --mow-slot-h: 36px; }
.mow-sponsors--single .mow-sponsors__slot[data-slot="1"] { --mow-slot-w: 88px;  }
.mow-sponsors--single .mow-sponsors__slot[data-slot="2"] { --mow-slot-w: 140px; }
.mow-sponsors--single .mow-sponsors__slot[data-slot="3"] { --mow-slot-w: 100px; }
.mow-sponsors--single .mow-sponsors__slot[data-slot="4"] { --mow-slot-w: 64px;  }
.mow-sponsors--single .mow-sponsors__slot[data-slot="5"] { --mow-slot-w: 112px; }
.mow-sponsors--single .mow-sponsors__logo--google    img { max-height: 28px; }
.mow-sponsors--single .mow-sponsors__logo--walmart   img { max-height: 25px; } /* −~11% to tame optical mass */
.mow-sponsors--single .mow-sponsors__logo--aarp      img { max-height: 23px; } /* ≈92px wide */
.mow-sponsors--single .mow-sponsors__logo--kubota    img { max-height: 28px; }
.mow-sponsors--single .mow-sponsors__logo--milwaukee img { max-height: 28px; }
.mow-sponsors--single .mow-sponsors__logo--yankees   img { max-height: 30px; opacity: 0.72; } /* interlocking NY mark: ~27-31px + slightly stronger (smaller footprint) */
.mow-sponsors--single .mow-sponsors__logo--stihl     img { max-height: 28px; }

/* ═══════════════════════════════════════════════════════
   Variant: STACKED two rows (2 over 3)  (homepage hp-backed)
   Slightly smaller — the "compact" surface.
   ═══════════════════════════════════════════════════════ */
.mow-sponsors--stacked { --mow-logo-opacity: 0.45; }
.mow-sponsors--stacked .mow-sponsors__row { gap: 36px; }
.mow-sponsors--stacked .mow-sponsors__row + .mow-sponsors__row { margin-top: 20px; }
.mow-sponsors--stacked .mow-sponsors__row--primary   .mow-sponsors__slot { --mow-slot-h: 32px; }
.mow-sponsors--stacked .mow-sponsors__row--secondary .mow-sponsors__slot { --mow-slot-h: 30px; }
.mow-sponsors--stacked .mow-sponsors__slot[data-slot="1"] { --mow-slot-w: 88px;  }
.mow-sponsors--stacked .mow-sponsors__slot[data-slot="2"] { --mow-slot-w: 138px; }
.mow-sponsors--stacked .mow-sponsors__slot[data-slot="3"] { --mow-slot-w: 80px;  }
.mow-sponsors--stacked .mow-sponsors__slot[data-slot="4"] { --mow-slot-w: 54px;  }
.mow-sponsors--stacked .mow-sponsors__slot[data-slot="5"] { --mow-slot-w: 92px;  }
.mow-sponsors--stacked .mow-sponsors__logo--google    img { max-height: 28px; }
.mow-sponsors--stacked .mow-sponsors__logo--walmart   img { max-height: 25px; }
.mow-sponsors--stacked .mow-sponsors__logo--aarp      img { max-height: 23px; }
.mow-sponsors--stacked .mow-sponsors__logo--kubota    img { max-height: 22px; }
.mow-sponsors--stacked .mow-sponsors__logo--milwaukee img { max-height: 22px; }
.mow-sponsors--stacked .mow-sponsors__logo--yankees   img { max-height: 28px; opacity: 0.53; } /* interlocking NY mark: ~27-31px + slightly stronger */
.mow-sponsors--stacked .mow-sponsors__logo--stihl     img { max-height: 22px; }

/* ═══════════════════════════════════════════════════════
   Responsive — proportional shrink, generous breathing room,
   never any horizontal scroll, never all seven in one line.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* single: wraps to two centred lines rather than scrolling */
  .mow-sponsors--single .mow-sponsors__row { gap: 14px 18px; }
  .mow-sponsors--single .mow-sponsors__slot { --mow-slot-h: 30px; }
  .mow-sponsors--single .mow-sponsors__slot[data-slot="1"] { --mow-slot-w: 70px;  }
  .mow-sponsors--single .mow-sponsors__slot[data-slot="2"] { --mow-slot-w: 116px; }
  .mow-sponsors--single .mow-sponsors__slot[data-slot="3"] { --mow-slot-w: 82px;  }
  .mow-sponsors--single .mow-sponsors__slot[data-slot="4"] { --mow-slot-w: 52px;  }
  .mow-sponsors--single .mow-sponsors__slot[data-slot="5"] { --mow-slot-w: 92px;  }
  .mow-sponsors--single .mow-sponsors__logo--google    img { max-height: 22px; }
  .mow-sponsors--single .mow-sponsors__logo--walmart   img { max-height: 20px; }
  .mow-sponsors--single .mow-sponsors__logo--aarp      img { max-height: 18px; }
  .mow-sponsors--single .mow-sponsors__logo--kubota    img { max-height: 22px; }
  .mow-sponsors--single .mow-sponsors__logo--milwaukee img { max-height: 22px; }
  .mow-sponsors--single .mow-sponsors__logo--yankees   img { max-height: 26px; }
  .mow-sponsors--single .mow-sponsors__logo--stihl     img { max-height: 22px; }

  /* stacked: keep the 2-over-3 composition, just smaller */
  .mow-sponsors--stacked .mow-sponsors__row { gap: 24px; }
  .mow-sponsors--stacked .mow-sponsors__row + .mow-sponsors__row { margin-top: 16px; }
  .mow-sponsors--stacked .mow-sponsors__row--primary   .mow-sponsors__slot { --mow-slot-h: 28px; }
  .mow-sponsors--stacked .mow-sponsors__row--secondary .mow-sponsors__slot { --mow-slot-h: 26px; }
  .mow-sponsors--stacked .mow-sponsors__slot[data-slot="1"] { --mow-slot-w: 76px;  }
  .mow-sponsors--stacked .mow-sponsors__slot[data-slot="2"] { --mow-slot-w: 118px; }
  .mow-sponsors--stacked .mow-sponsors__slot[data-slot="3"] { --mow-slot-w: 66px;  }
  .mow-sponsors--stacked .mow-sponsors__slot[data-slot="4"] { --mow-slot-w: 46px;  }
  .mow-sponsors--stacked .mow-sponsors__slot[data-slot="5"] { --mow-slot-w: 78px;  }
  .mow-sponsors--stacked .mow-sponsors__logo--google    img { max-height: 24px; }
  .mow-sponsors--stacked .mow-sponsors__logo--walmart   img { max-height: 21px; }
  .mow-sponsors--stacked .mow-sponsors__logo--aarp      img { max-height: 19px; }
  .mow-sponsors--stacked .mow-sponsors__logo--kubota    img { max-height: 18px; }
  .mow-sponsors--stacked .mow-sponsors__logo--milwaukee img { max-height: 18px; }
  .mow-sponsors--stacked .mow-sponsors__logo--yankees   img { max-height: 24px; }
  .mow-sponsors--stacked .mow-sponsors__logo--stihl     img { max-height: 18px; }
}

/* Very narrow phones — trim a little more so nothing crowds an edge. */
@media (max-width: 400px) {
  .mow-sponsors--single .mow-sponsors__row { gap: 12px 14px; }
  .mow-sponsors--single .mow-sponsors__slot[data-slot="2"] { --mow-slot-w: 104px; }
  .mow-sponsors--single .mow-sponsors__slot[data-slot="5"] { --mow-slot-w: 84px;  }
  .mow-sponsors--stacked .mow-sponsors__row { gap: 18px; }
}