/* featured.css — round 3 "As Featured In" band (DESIGN-SPEC §2.3 glass recipe + §6 geometry/motion).
   Markup is built by round2-shell.js: section.r2-featured > .r2-featured__heading(h2) + .r2-featured__viewport > .r2-featured__track > ul.r2-featured__logos ×2 + button.r2-featured__pause.
   Heading and logos share one in-flow glass surface. Positive outer spacing separates it from the hero.
   Logo glide, keyboard focus pause, dragging and inertia remain owned by round2-shell.js.
   Scoped rules override the older band geometry in round2-shell.css, polish.css, refine.css and template.css.
   Uses --featured-r / --ease-std / --shadow-glass tokens with fallbacks below. */

/* ---------- 1. One self-contained glass chapter, separated from the hero ---------- */
section.r2-featured{
  position:relative;z-index:3;isolation:isolate;box-sizing:border-box;
  width:calc(100% - 48px);max-width:1280px;height:auto;margin:24px auto 0;padding:22px 24px 14px;
  border-radius:var(--featured-r,16px);overflow:visible;color:#0C1D55;
  background:
    radial-gradient(ellipse 60% 45% at 18% 0%,rgba(255,255,255,.36) 0%,rgba(255,255,255,0) 60%),
    var(--g-featured,linear-gradient(180deg,rgba(204,225,246,.72) 0%,rgba(241,248,255,.86) 100%));
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(12,29,85,.06),var(--shadow-glass,0 24px 48px -24px rgba(8,19,56,.5));
  animation:r2-featured-in .6s var(--ease-std,cubic-bezier(.2,.7,.2,1)) .45s both;
}
@keyframes r2-featured-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- 2. Heading stays in the panel flow; translated copy can wrap ---------- */
section.r2-featured .r2-featured__heading{
  position:relative;left:auto;right:auto;top:auto;height:auto;min-height:24px;max-width:none;
  display:flex;justify-content:flex-start;align-items:center;margin:0 0 8px;padding:0 12px;
}
section.r2-featured h2{font:700 20px/1 var(--f-primary,"Barlow Condensed",sans-serif);color:#153453;text-transform:uppercase;letter-spacing:.04em;margin:0;padding:0;line-height:1.3}
section.r2-featured h2::after{content:":"}
[dir=rtl] section.r2-featured h2{letter-spacing:0}

/* ---------- 3. Viewport + track: continuous linear glide, 10 slots per 30 s (= live Swiper, one slide / 3 s) ---------- */
section.r2-featured .r2-featured__viewport{
  position:relative;height:104px;overflow:hidden;direction:ltr;display:flex;align-items:center;
  padding:0;margin:0;border:0;border-radius:12px;background:transparent;box-shadow:none;
  -webkit-mask-image:none;mask-image:none;
}
section.r2-featured .r2-featured__track{
  display:flex;width:max-content;margin:0;padding:0;
  animation:r2-featured-glide 30s linear infinite;transform:translate3d(0,0,0);will-change:transform;
}
section.r2-featured .r2-featured__logos{display:flex;flex:0 0 auto;align-items:center;gap:0;margin:0;padding:0;list-style:none}
section.r2-featured .r2-featured__logos li{flex:0 0 194px;width:194px;height:104px;margin:0;padding:0 10px;box-sizing:border-box;display:grid;place-items:center}
section.r2-featured .r2-featured__logos img{
  width:174px;max-width:none;height:calc(var(--lh,90px) * var(--lscale,1));max-height:none;
  object-fit:contain;filter:none!important;opacity:1;display:block;transition:none;
}
/* live per-logo heights (REFERENCE-SPEC §3); DOM order CBS, Fox, NBC, Bloomberg, ABC, USA Today, Yahoo, AP, Benzinga, PWG — both lists */
section.r2-featured .r2-featured__logos li:nth-child(1) img{--lh:55px}
section.r2-featured .r2-featured__logos li:nth-child(2) img{--lh:80px}
section.r2-featured .r2-featured__logos li:nth-child(3) img{--lh:90px}
section.r2-featured .r2-featured__logos li:nth-child(4) img{--lh:100px}
section.r2-featured .r2-featured__logos li:nth-child(5) img{--lh:90px}
section.r2-featured .r2-featured__logos li:nth-child(6) img{--lh:90px}
section.r2-featured .r2-featured__logos li:nth-child(7) img{--lh:55px}
section.r2-featured .r2-featured__logos li:nth-child(8) img{--lh:110px}
section.r2-featured .r2-featured__logos li:nth-child(9) img{--lh:90px}
section.r2-featured .r2-featured__logos li:nth-child(10) img{--lh:75px}
/* exactly one list (10 × 194 px); the duplicate list takes over at the wrap, so there is no seam */
@keyframes r2-featured-glide{to{transform:translate3d(-1940px,0,0)}}

/* edge fade over the viewport */
section.r2-featured::after{
  content:"";position:absolute;z-index:1;inset:54px 24px 14px;pointer-events:none;border-radius:12px;opacity:.9;
  background:linear-gradient(90deg,rgba(241,248,255,1) 0,rgba(241,248,255,0) 60px,rgba(241,248,255,0) calc(100% - 60px),rgba(241,248,255,1) 100%);
}

/* play state: ONE declaration on the track, fed by --r2-play. Specificity 0,3,1 beats the legacy
   `.r2-featured:focus-within .r2-featured__track{paused}` (0,3,0) in round2-shell.css, which is what kept the glide frozen
   after a mouse click on Play (the button keeps focus; :focus-within matched). Triggers set --r2-play on the section (inherited)
   or on the viewport. */
section.r2-featured .r2-featured__viewport .r2-featured__track{animation-play-state:var(--r2-play,running)}
/* Pointer hover and ordinary clicks do not pause. The shared controller owns
   horizontal dragging and bounded inertia after a deliberate gesture. */
section.r2-featured[data-drag-ready=true] .r2-featured__track{animation:none}
section.r2-featured[data-drag-ready=true] .r2-featured__viewport{cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
section.r2-featured[data-dragging=true] .r2-featured__viewport{cursor:grabbing}
section.r2-featured[data-reduced=true] .r2-featured__viewport,
section.r2-featured.r2-featured--static .r2-featured__viewport{cursor:default;touch-action:auto;user-select:auto;-webkit-user-select:auto}
section.r2-featured .r2-featured__viewport:focus-visible{outline:3px solid #17699d;outline-offset:3px}
section.r2-featured .r2-featured__logos a:focus-visible{outline:3px solid #17699d;outline-offset:4px;border-radius:4px}
/* the control (data-paused), hidden tab (data-paused), band fully out of view (IntersectionObserver), keyboard focus mirror (JS) */
section.r2-featured[data-paused=true],
section.r2-featured.is-offscreen,
section.r2-featured.is-kb-focus{--r2-play:paused}
/* keyboard focus inside pauses; pointer focus (mouse/touch click on the control) does not. Standalone rule: browsers without
   :has() drop it and rely on .is-kb-focus from round2-shell.js instead. */
section.r2-featured:has(:focus-visible){--r2-play:paused}

/* ---------- 4. Legacy keyboard control, placed within the heading row.
   The shared motion preference treatment controls its visibility. ---------- */
section.r2-featured .r2-featured__pause{
  position:absolute;z-index:2;inset-inline-end:24px;top:12px;bottom:auto;transform:none;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border-radius:50%;
  border:1px solid #829db6;background:#ffffff80;color:#153453;
  display:grid;place-items:center;cursor:pointer;font-size:0;line-height:0;
  transition:background-color .18s ease,border-color .18s ease;
}
section.r2-featured .r2-featured__pause:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.9)}
section.r2-featured .r2-featured__pause:focus-visible{outline:3px solid #F9E900;outline-offset:3px}   /* yellow ring: 3:1+ against the navy (blue #0072C7 is only 2.2:1 there) */
section.r2-featured .r2-featured__pause svg{width:16px;height:16px;fill:currentColor;display:block;pointer-events:none}
section.r2-featured .r2-featured__pause .r2-featured__ico-play,
section.r2-featured .r2-featured__pause[aria-pressed=true] .r2-featured__ico-pause{display:none}
section.r2-featured .r2-featured__pause[aria-pressed=true] .r2-featured__ico-play{display:block}

/* ---------- 5. Tablet 768–1024: 3 visible (242 slots, 222 logos), panel inset 10 ---------- */
@media (max-width:1024px){
  section.r2-featured{width:calc(100% - 40px);margin:24px auto 0;max-width:none;height:auto;padding:20px 20px 12px}
  section.r2-featured::after{inset:52px 20px 12px}
  section.r2-featured .r2-featured__pause{inset-inline-end:10px}
  section.r2-featured .r2-featured__logos li{flex-basis:242px;width:242px}
  section.r2-featured .r2-featured__logos img{width:222px}
  @keyframes r2-featured-glide{to{transform:translate3d(-2420px,0,0)}}
}
/* ---------- 6. Mobile: two logo slots, heading and track in one surface ---------- */
@media (max-width:767px){
  section.r2-featured{width:calc(100% - 24px);margin:20px auto 0;height:auto;padding:18px 12px 12px;border-radius:20px}
  section.r2-featured::after{inset:46px 12px 12px;background:linear-gradient(90deg,rgba(241,248,255,1) 0,rgba(241,248,255,0) 32px,rgba(241,248,255,0) calc(100% - 32px),rgba(241,248,255,1) 100%)}
  section.r2-featured .r2-featured__heading{top:auto;height:auto;min-height:22px;margin-bottom:8px;padding-inline:8px}
  section.r2-featured h2{font-size:18px}
  section.r2-featured .r2-featured__viewport{height:88px}
  section.r2-featured .r2-featured__logos li{flex-basis:174px;width:174px;height:88px}
  section.r2-featured .r2-featured__logos img{width:154px;--lscale:.8}
  section.r2-featured .r2-featured__pause{inset-inline-end:12px;top:8px;width:44px;height:44px;min-width:44px;min-height:44px}   /* 44 px target */
  @keyframes r2-featured-glide{to{transform:translate3d(-1740px,0,0)}}
}

/* ---------- 7. Reduced motion: complete, static, wrapped grid (two rows of five at desktop) ---------- */
section.r2-featured[data-reduced=true],
section.r2-featured.r2-featured--static{height:auto;animation:none}
section.r2-featured[data-reduced=true]::after,
section.r2-featured.r2-featured--static::after{display:none}
section.r2-featured[data-reduced=true] .r2-featured__viewport,
section.r2-featured.r2-featured--static .r2-featured__viewport{height:auto;display:block;overflow:visible}
section.r2-featured[data-reduced=true] .r2-featured__track,
section.r2-featured.r2-featured--static .r2-featured__track{animation:none;transform:none;width:auto;display:block;will-change:auto}
section.r2-featured[data-reduced=true] .r2-featured__logos,
section.r2-featured.r2-featured--static .r2-featured__logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-content:center;gap:0}
section.r2-featured[data-reduced=true] .r2-featured__duplicate,
section.r2-featured.r2-featured--static .r2-featured__duplicate{display:none}
section.r2-featured[data-reduced=true] .r2-featured__pause,
section.r2-featured.r2-featured--static .r2-featured__pause{display:none}
@media (prefers-reduced-motion:reduce){
  section.r2-featured{height:auto;animation:none}
  section.r2-featured::after{display:none}
  section.r2-featured .r2-featured__viewport{height:auto;display:block;overflow:visible}
  section.r2-featured .r2-featured__track{animation:none;transform:none;width:auto;display:block;will-change:auto}
  section.r2-featured .r2-featured__logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-content:center;gap:0}
  section.r2-featured .r2-featured__duplicate{display:none}
  section.r2-featured .r2-featured__pause{display:none}
}
@media (max-width:1024px){
  section.r2-featured[data-reduced=true] .r2-featured__logos,section.r2-featured.r2-featured--static .r2-featured__logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){section.r2-featured .r2-featured__logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){
  section.r2-featured[data-reduced=true] .r2-featured__logos,section.r2-featured.r2-featured--static .r2-featured__logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){section.r2-featured .r2-featured__logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 8. Fallbacks (same set as every glass surface, DESIGN-SPEC §2) ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  section.r2-featured{background:linear-gradient(180deg,#CCE1F6 0%,#F1F8FF 100%);border-color:rgba(12,29,85,.12)}
}
@media (prefers-reduced-transparency:reduce){
  section.r2-featured{background:linear-gradient(180deg,#CCE1F6,#F1F8FF);-webkit-backdrop-filter:none;backdrop-filter:none}
}
html[data-glass=fallback] section.r2-featured,html[data-glass=opaque] section.r2-featured{background:linear-gradient(180deg,#CCE1F6 0%,#F1F8FF 100%);border-color:rgba(12,29,85,.12);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (forced-colors:active){
  section.r2-featured{background:Canvas;color:CanvasText;border:1px solid CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  section.r2-featured::after{display:none}
  section.r2-featured h2{color:CanvasText}
  section.r2-featured .r2-featured__pause{background:ButtonFace;color:ButtonText;border:1px solid ButtonText}
}