/* home_ads.css — the slideshow of image cards above the search bar.
 *
 * The card is a rounded image with a page margin either side, and the dots sit
 * ON the artwork so the rail costs no extra height. Everything here is drawn
 * around one rule: we never put our own text on the card. The words are in the
 * picture, which is why there are two of them at two fixed sizes. */

.wg-hads { position: relative; margin: 4px 0 18px; }

/* The viewport clips; the TRACK moves. The clip has to sit on a parent, or it
   would travel along with the thing it is meant to be clipping. */
.wg-hads-viewport {
  position: relative; overflow: hidden; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 22px rgba(16,24,40,.08);
  background: var(--wg-tint);
}
.wg-hads-track { position: relative; }

/* Before the script runs, only the first card is in the document flow (the
   rest carry `hidden` from the server), so a visitor with scripts off sees one
   complete advert. The script removes `hidden` and adds .is-live, which turns
   the track into the sliding row. */
.wg-hads.is-live .wg-hads-track {
  display: flex;
  /* NOT --wg-ease-spring: that token is a playful OVERSHOOT
     (cubic-bezier(.34, 1.56, .64, 1)), which shoots past the target and snaps
     back. On a chip or a small button that reads as lively; on a full-width
     photograph it reads as a jolt.
     Measured over one slide, four curves: the quint-out was 54% of the way
     within 100ms, which is the lurch. This one is 4% at 100ms and 67% at
     400ms, so it eases in as well as out, and still spends its last 267ms
     covering the final tenth. An inout-cubic was smoother again but only 1%
     done at 100ms, which reads as lag rather than calm. */
  transition: transform .9s cubic-bezier(.45, 0, .25, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .wg-hads.is-live .wg-hads-track { transition: none; }
}

.wg-hads-card {
  position: relative; display: block; overflow: hidden;
  text-decoration: none;
  background: var(--wg-tint);
  aspect-ratio: 2 / 1;
}
/* Only while the script has not taken over: once .is-live is on, every card
   stays in the row and the track's position decides what is seen. */
.wg-hads:not(.is-live) .wg-hads-card[hidden] { display: none; }
.wg-hads.is-live .wg-hads-card { flex: 0 0 100%; }
.wg-hads-card picture, .wg-hads-card img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Paid placement. Small, but never hidden: a member has to be able to tell
   what we chose to show them from what somebody paid to show them. */
.wg-hads-sponsored {
  position: absolute; top: 9px; right: 10px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(8,14,22,.58); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .03em;
  backdrop-filter: saturate(140%) blur(2px);
}

/* ── dots, on the artwork ────────────────────────────────────────────────── */
.wg-hads-dots {
  position: absolute; left: 0; right: 0; bottom: 9px; z-index: 2;
  display: flex; justify-content: center; gap: 6px;
}
.wg-hads-dot {
  width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.45); cursor: pointer;
  transition: width .2s var(--wg-ease-out, ease), background .2s ease;
}
.wg-hads-dot.is-on { width: 18px; border-radius: 999px; background: #fff; }
.wg-hads-dot:focus-visible { outline: var(--wg-focus-ring, 2px solid #fff); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wg-hads-dot { transition: none; } }

/* ── with the rail on, the greeting comes off ────────────────────────────── */
.wg-hads-on .wg-home-greet-row,
.wg-hads-on #wg-hpf-greet,
.wg-hads-on #wg-hpf-sub { display: none !important; }

/* The hero loses its tinted card and its illustration, so the artwork is the
   only colour at the top and the search bar is a plain pill under it. */
.wg-hads-on .wg-home-hero {
  background: none; border: none; box-shadow: none; padding: 0; margin: 10px 0 18px;
}
.wg-hads-on .wg-home-illus { display: none !important; }
/* The rail is the last thing in the hero now that search sits above it, so its
   own bottom margin stacked on top of the hero's and left a double gap. */
.wg-hads-on .wg-home-hero > .wg-hads:last-child { margin-bottom: 0; }

/* Storyline keeps its search in a pinned strip. The rail sits BELOW that strip
   and outside it: the strip is position:sticky, so an advert inside it would
   ride down the screen with the reader and never go away.
   .wg-main-slf drops ALL padding and the feed re-centres its own column
   (.wg-slf-col, 720px), so the rail has to take the same column treatment or
   it bleeds to both screen edges while everything else is inset. */
.wg-slf .wg-hads {
  max-width: 720px; margin: 10px auto 14px; padding: 0 16px;
}

/* ── wide screens ────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  /* The card fills the content column and gets much wider with it: the 2:1
     that suits a phone would be a 400px slab here. The wide artwork is a
     separate 5:1 upload, swapped by <picture>. */
  /* 3:1, matching the wide artwork exactly, so nothing is ever cropped on a
     desktop. It was 5:1, which meant cutting a 434px band out of 724px of
     picture and losing the tops of people's heads. */
  .wg-hads-card { aspect-ratio: 3 / 1; }
  .wg-hads-dots { bottom: 14px; }
  /* The search keeps a readable width even though the card does not, and it
     sits CENTRED under the card. Capped and left-aligned it read as though it
     had come loose from the full-width banner above it. */
  .wg-hads-on .wg-home-hero { flex-direction: column; align-items: center; gap: 14px; }
  .wg-hads-on .wg-home-searchwrap { width: 100%; max-width: 640px; margin-inline: auto; }
  /* align-items:center would otherwise shrink the rail to its content. */
  .wg-hads-on .wg-hads { width: 100%; }
}

/* ── prev / next, desktop only ───────────────────────────────────────────── */
/* A phone has a finger for this, and an arrow there would sit on the artwork.
   Hidden by default and brought back at 720px, which is also where the card
   changes shape. */
.wg-hads-arrow { display: none; }

@media (min-width: 720px) {
  .wg-hads-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: none; border-radius: 50%; cursor: pointer;
    background: rgba(8, 14, 22, .42); color: #fff;
    backdrop-filter: saturate(140%) blur(3px);
    transition: background .18s var(--wg-ease-out, ease);
    z-index: 2;
  }
  .wg-hads-arrow:hover { background: rgba(8, 14, 22, .62); }
  .wg-hads-arrow:focus-visible { outline: var(--wg-focus-ring, 2px solid #fff); outline-offset: 2px; }
  .wg-hads-arrow .wg-ico { width: 20px; height: 20px; }
  /* At the far edges, just inside the rounded corner. */
  .wg-hads-arrow.is-prev { left: 12px; }
  .wg-hads-arrow.is-next { right: 12px; }
  /* One chevron glyph, mirrored rather than shipping a second icon. */
  .wg-hads-arrow.is-next .wg-ico { transform: scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) { .wg-hads-arrow { transition: none; } }