/* Ad creative examples. Shared: this section renders on /scroll-wrx/ and on the
   home page, and home does not load scroll-wrx.css, so the rules cannot live
   there. Both pages list this file. */
.wrx-creative { position: relative; overflow: hidden; isolation: isolate; }
.wrx-creative > .container { position: relative; z-index: 1; }
.wrx-creative .wrx-deco { position: absolute; z-index: 0; pointer-events: none; user-select: none; height: auto; }
.wrx-deco--creative { top: 8%; right: -34%; width: 96%; max-width: 1300px; opacity: .05; transform: rotate(6deg); }

/* ── Ad creative examples ── */
.wrx-creative .section-head { margin-inline: auto; }
.wrx-creative__filter { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 40px; }
/* centred while the chips fit; on a phone the row is a scroller and centring
   inside the widened box pushed the first chip off the left edge */
@media (min-width: 621px) { .chip-row--center { justify-content: center; } }
.adx-star { color: var(--coral); }
.chip[aria-pressed="true"] .adx-star { color: var(--ink); }  /* the active chip is coral: a coral star would vanish */
.adx-note { font-size: 13px; color: var(--slate); }

/* The rail shows four cards and pages by four. It is a real scroller, so with no
   JS (or none yet) it still swipes; the arrows are added by the carousel module.
   --adx-per is the only number to change per breakpoint: the card width falls out
   of it, so the last visible card always lands flush with the right edge. */
.adx-carousel { --adx-per: 4; --adx-gap: 22px; position: relative; }
.adx-grid {
  display: flex; gap: var(--adx-gap); margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.adx-grid::-webkit-scrollbar { display: none; }
.adx-grid:focus-visible { outline: 2px solid var(--coral); outline-offset: 6px; border-radius: 14px; }
.adx-grid > .adx {
  flex: 0 0 calc((100% - (var(--adx-per) - 1) * var(--adx-gap)) / var(--adx-per));
  scroll-snap-align: start;
}
.adx-nav {
  position: absolute; top: calc(50% - 26px); z-index: 2;
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(242,241,237,0.18); background: rgba(26,26,26,0.82);
  backdrop-filter: blur(6px); color: var(--cream); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.adx-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adx-nav:hover:not(:disabled) { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.adx-nav:disabled { opacity: 0; pointer-events: none; }
.adx-nav--prev { left: -23px; }
.adx-nav--next { right: -23px; }
/* nothing to page through: the filter left four or fewer cards */
.adx-carousel.is-static .adx-nav { display: none; }
@media (max-width: 1280px) { .adx-nav--prev { left: 6px; } .adx-nav--next { right: 6px; } }
.adx { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.adx__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.adx__shot {
  position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16;
  border-radius: 14px; background: #000; border: 1px solid rgba(149,173,197,0.16);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,0.75);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.adx__shot--square { aspect-ratio: 1 / 1; }
.adx__shot img { width: 100%; height: 100%; object-fit: cover; }
.adx__btn:hover .adx__shot { transform: translateY(-3px); box-shadow: 0 34px 70px -28px rgba(0,0,0,0.85); }
.adx__btn:focus-visible .adx__shot { outline: 2px solid var(--coral); outline-offset: 3px; }
.adx__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(17,17,17,0.62); border: 1px solid rgba(242,241,237,0.35); backdrop-filter: blur(4px);
  transition: background .22s ease, transform .22s var(--ease-out);
}
.adx__play svg { width: 21px; height: 21px; margin-left: 3px; fill: var(--cream); }
.adx__btn:hover .adx__play { background: var(--coral); transform: translate(-50%, -50%) scale(1.07); }
.adx__btn:hover .adx__play svg { fill: var(--ink); }
.adx__time {
  position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: 6px;
  background: rgba(17,17,17,0.7); font: 600 11px/1 var(--font-body); color: var(--cream);
}
.adx__frame { width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 14px; background: #000; }
.adx__client { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--cream); }
.adx.is-filtered-out { display: none; }

@media (max-width: 1100px) { .adx-carousel { --adx-per: 3; --adx-gap: 18px; } }
@media (max-width: 760px) { .adx-carousel { --adx-per: 2; --adx-gap: 14px; } }
/* a sliver of the next card is the swipe affordance where the arrows are tightest */
@media (max-width: 520px) { .adx-carousel { --adx-per: 1.35; } }
@media (max-width: 620px) {
  .wrx-creative__filter { margin-bottom: 28px; }
  .adx__play { width: 46px; height: 46px; }
  .adx__play svg { width: 17px; height: 17px; }
  .adx__client { font-size: 13px; }
  .wrx-deco--creative { width: 160%; right: -60%; }
}

.adx__shot--pending { display: grid; place-items: center; aspect-ratio: 9 / 16; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(234,165,114,0.4); }

/* same as /proof/: without this the centred scroller grows past the viewport */
.wrx-creative__filter { min-width: 0; }
.wrx-creative__filter > * { min-width: 0; max-width: 100%; }