/* Pattison Stacked Card Deck Rotator */

:root {
    --theme-text: #231f20;
    --theme-muted: #52525c;
    --ease-smooth: cubic-bezier(.62, .16, .13, 1.01);
    /* Spring approximation matching Framer Motion spring(stiffness:260, damping:20) — ~8% overshoot */
    --spring: cubic-bezier(.34, 1.2, .64, 1);
    /* Bouncy spring matching Framer Motion spring(stiffness:300, damping:15) — ~22% overshoot */
    --spring-bounce: cubic-bezier(.34, 1.56, .64, 1);
  }
  
  * { box-sizing: border-box; }
  
  /* width:100vw + the negative margin trick breaks the wrap out of any
     padded/max-width-constrained parent so it spans the full viewport
     regardless of nesting depth (matches .pw-shorts-widget-wrap). */
  .pw-rotator-wrap {
    overflow-x: clip;
    padding: 0 0 2.5rem 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .pw-rotator-widget-heading {
    max-width: 1200px;
    margin: 0 var(--content-margin) 1.5rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--theme-text);
  }

.pw-rotator-container {
  max-width: var(--content-width);
  margin: 0 var(--content-margin);
}
  
  .pw-rotator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    align-items: center;
  }
  

  
  /* LEFT: text panel + thumbnails */
  .pw-rotator-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity .35s ease;
  }
  
  .pw-slide-category {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    /* Background comes from the badge or the active card's colour, set inline */
    color: #ffffff;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: background-color .5s ease;
  }

  /* Hide the pill entirely when there's no badge — covers both the initial
     server-render (empty %FIRST_BADGE%) and JS slide changes (.text('')). */
  .pw-slide-category:empty { display: none; }

  .pw-slide-title {
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    margin: 0;
  }
  
  /* Reads as the headline, not a link: the platform's global a / a:hover rules
     (--highlight-text / --highlight-text-hover) must not recolour it in any state */
  .pw-slide-title-link,
  .pw-slide-title-link:visited,
  .pw-slide-title-link:hover,
  .pw-slide-title-link:focus,
  .pw-slide-title-link:active {
    color: inherit;
    text-decoration: none;
  }

  .pw-slide-title-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }

  .pw-slide-title-link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
  }

  .pw-slide-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--theme-muted);
    margin: 0;
    max-width: 30rem;
  }
  
  .pw-rotator-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
  }
  
  .pw-rotator-thumb {
    width: 56px;
    height: 56px;
    border: 3px solid transparent;
    border-radius: 0.85rem;
    padding: 0;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .35s ease, transform .35s ease;
    flex-shrink: 0;
  }
  
  .pw-rotator-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.55rem;
    display: block;
  }
  
  .pw-rotator-thumb.pw-is-active {
    border-color: var(--active-color);
    outline: 1px solid #ffffff;
    outline-offset: 0;
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
  }
  
  
  /* Phone-only prev/next under the card (see wrapper-default.tpl). The
     thumbnail strip is the control on wider screens. */
  .pw-rotator-nav { display: none; }

  .pw-rotator-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    color: var(--theme-text);
    cursor: pointer;
    transition: opacity .2s ease;
  }
  .pw-rotator-nav-btn:hover { opacity: .6; }
  .pw-rotator-nav-btn svg { width: 24px; height: 24px; display: block; }

  /* RIGHT: stacked card deck */
  .pw-rotator-stage {
    position: relative;
    width: 100%;
    height: 600px;
    /* Vertical scrolling stays the browser's, horizontal is the swipe's. Telling
       it so up front means touchmove events flow immediately instead of after
       the browser has waited to see whether the gesture was a scroll. */
    touch-action: pan-y;
  }

  /* Live swipe offset, set on the stage by featureVideoSlider.js while a finger
     is down. Only the top card reads it (see .pw-stack-0 below): the story on
     top slides out from under the finger while the deck behind it holds still,
     and on release it carries on to the back while the next card takes its
     place. Its transition is off for the duration — the drag IS the animation —
     and comes back on release so it springs from wherever it was let go. */
  .pw-rotator-stage.pw-is-dragging .pw-rotator-slide.pw-stack-0 {
    transition: none;
  }

  .pw-rotator-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 58%;
    max-width: 500px;
    max-height: 600px;
    min-width: 500px;
    aspect-ratio: 5 / 6;
    border-radius: 1.5rem;
    /* Inner border = card color (set inline from the widget's Card Colours); outer border = 2px white ring via outline */
    border: 7px solid var(--card-color);
    outline: 2px solid #ffffff;
    outline-offset: 0;
    background: var(--card-color);
    cursor: pointer;
    /* Individual rotate property; --pw-card-rotate is the per-card random angle
       JS sets (see applyStack in featureVideoSlider.js), left as a variable so
       breakpoints can override it. */
    rotate: var(--pw-card-rotate, 0deg);
    /* Spring-matched transition — transform handles x+scale, rotate is separate */
    transition: transform .65s var(--spring), rotate .5s var(--spring),
                opacity .65s var(--spring), box-shadow .4s ease;
    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.35);
    will-change: transform, rotate;
  }
  
  @media (max-width: 1024px) {
    .pw-rotator-grid { grid-template-columns: 1fr; gap: 2rem; }
    .pw-rotator-stage { order: 1; height: 610px; } /* .pw-rotator-slide's 600px + 10px */
    .pw-rotator-text  { order: 2; }
    .pw-rotator-wrap { padding: 0 0 4rem 0; }
  }
  
  /* Slide media — the inner clipped region (matches reference rounded-4xl overflow-hidden).
     Card itself has no overflow:hidden so stickers can spill past the card edge. */
  .pw-slide-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(1.5rem - 5px);
    overflow: hidden;
    background: #111;
  }
  
  .pw-slide-media img,
  .pw-slide-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pw-slide-media video {
    object-position: top;
  }
  /* Poster image always visible; video overlays it and fades in on active OR hover
     (matches reference: animate opacity = isCurrent || isHovering ? 1 : 0, duration .5s) */
  .pw-slide-media .pw-slide-video {
    opacity: 0;
    /* Out of the accessibility tree while it can't be seen */
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s linear .5s;
  }
  .pw-rotator-slide.pw-stack-0 .pw-slide-media .pw-slide-video,
  .pw-rotator-slide:hover .pw-slide-media .pw-slide-video {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  
  /* Center play button */
  .pw-slide-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: #000000b3;
    border: 2px solid #FFFFFF;
    cursor: pointer;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition:
      transform        .35s cubic-bezier(.22, 1, .36, 1),
      background-color .35s cubic-bezier(.22, 1, .36, 1),
      border-color     .35s cubic-bezier(.22, 1, .36, 1),
      box-shadow       .35s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  
  .pw-slide-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: #000000e6;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  .pw-slide-play-btn svg { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
  .pw-slide-play-btn:hover svg { transform: scale(1.05); }
  .pw-slide-play-btn svg { width: 24px; height: 24px; fill: #FFFFFF!important; margin-left: 3px; }
  
  /* Duration pill bottom-left */
  .pw-slide-duration {
    position: absolute;
    bottom: 0.85rem;
    left: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem 0.35rem 0.55rem;
    background-color: #00000040;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    z-index: 3;
    backdrop-filter: blur(8px);
  }
  
  .pw-slide-duration svg { width: 12px; height: 12px; fill: currentColor; }
  
  /* ── Stack positions verbatim from reference ──
     Base (not hovered): x = 11*l svw, scale = 1 - 0.075*l
     Hovered (non-active): x = (13.5*l - 2*l) svw = 11.5*l svw, scale = 1 - 0.075*l + 0.05
     rotate is handled via the separate `rotate` CSS property, set per-card by JS (random ±5°) */
  .pw-rotator-slide.pw-stack-0 { transform: translateX(var(--pw-drag, 0px)) scale(1);     z-index: 50; rotate: 0deg; }
  .pw-rotator-slide.pw-stack-1 { transform: translateX(11vw)  scale(0.925); z-index: 40; }
  .pw-rotator-slide.pw-stack-2 { transform: translateX(22vw)  scale(0.85);  z-index: 30; }
  .pw-rotator-slide.pw-stack-3 { transform: translateX(33vw)  scale(0.775); z-index: 20; }
  .pw-rotator-slide.pw-stack-4 { transform: translateX(44vw)  scale(0.7);   z-index: 10; }
  
  /* Hover on a behind card: shift slightly forward + scale up by 0.05 (verbatim reference) */
  .pw-rotator-slide.pw-stack-1:hover { transform: translateX(11.5vw) scale(0.975); }
  .pw-rotator-slide.pw-stack-2:hover { transform: translateX(23vw)   scale(0.9);   }
  .pw-rotator-slide.pw-stack-3:hover { transform: translateX(34.5vw) scale(0.825); }
  .pw-rotator-slide.pw-stack-4:hover { transform: translateX(46vw)   scale(0.75);  }
  
  /* Active card always has the deeper shadow (reference applies shadow-2xl to active only) */
  .pw-rotator-slide.pw-stack-0 {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  }
  
  /* Behind cards: hide center play + duration pill so only the active card shows them */
  .pw-rotator-slide:not(.pw-stack-0) .pw-slide-play-btn,
  .pw-rotator-slide:not(.pw-stack-0) .pw-slide-duration { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
  .pw-rotator-slide.pw-stack-0 .pw-slide-play-btn { opacity: 1; }
  .pw-rotator-slide.pw-stack-0 .pw-slide-duration { opacity: 1; transition: opacity .4s ease .2s; }
  
  /* ── Stickers — verbatim reference behavior ──
     Positioned absolutely via inline style top/left (anchor point), then centered with translate -50%/-50%.
     Hidden variant:  scale:0, rotate:-45deg
     Visible variant: scale:1, rotate:0    via spring(300,15) with delayChildren:0.35
     whileHover:      scale:1.15, rotate:5deg          (on the sticker itself)

     Scoped to .pw-rotator-slide: .pw-slide-sticker is shared markup, used by the
     grid and both other sliders too, and this widget's stylesheet loads on any
     page that holds one of these. Unscoped, the hidden variant below (scale:0)
     would hide every sticker on the page — a grid card's stickers would then
     only appear while its own :hover rule scaled them back up. */
  .pw-rotator-slide .pw-slide-sticker {
    position: absolute;
    /* Match reference size-30 (7.5rem ≈ 120px) — scales down on narrower viewports */
    width: clamp(120px, 15%, 120px);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    z-index: 4;
    /* Centre the sticker on its (top, left) anchor — translate is independent of scale/rotate */
    translate: -50% -50%;
    /* Disabled by default so behind-card stickers don't capture hover */
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
    /* Hidden variant — matches reference exactly. visibility as well, so a
       behind card's (linked) sticker is out of the tab order and the
       accessibility tree too, not just scaled to nothing. */
    scale: 0;
    rotate: -45deg;
    visibility: hidden;
    transition:
      scale   .45s var(--spring-bounce),
      rotate  .45s var(--spring-bounce),
      visibility 0s linear .45s;
  }
  .pw-rotator-slide a.pw-slide-sticker { display:block; aspect-ratio: auto; }
  .pw-rotator-slide a.pw-slide-sticker img { width: clamp(120px, 15%, 120px); }
  .pw-rotator-slide a.pw-slide-sticker:hover img { opacity: 1; }

  /* Active (top) card: sticker springs in with 0.35s delay (delayChildren:0.35) */
  .pw-rotator-slide.pw-stack-0 .pw-slide-sticker {
    scale: 1;
    rotate: 0deg;
    pointer-events: auto;
    transition:
      scale   .45s var(--spring-bounce)   .35s,
      rotate  .45s var(--spring-bounce)   .35s,
      visibility 0s;
    visibility: visible;
  }

  /* Hover directly on the sticker (whileHover on the img in the reference) */
  .pw-rotator-slide.pw-stack-0 .pw-slide-sticker:hover {
    scale: 1.15;
    rotate: 5deg;
    transition:
      scale  .25s var(--spring-bounce),
      rotate .25s var(--spring-bounce);
  }

  /* ── Phones: carousel, not a deck ──
     There's no room beside a full-width card for a stack to fan out to the
     right, so below 640px the active story is centred with the previous and
     next cards peeking in from either edge, arrows underneath, and the text
     centred below that. The deck's own .pw-stack-1..4 positions still apply
     above this breakpoint, untouched.

     This block lives at the end of the file on purpose: it restates the same
     .pw-rotator-slide.pw-stack-N selectors the deck uses, at the same
     specificity, so it only wins by coming later in source order. */
  @media (max-width: 640px) {
    .pw-rotator-grid { gap: 1.25rem; }
    .pw-rotator-stage { order: 1; }
    .pw-rotator-nav   { order: 2; }
    .pw-rotator-text  { order: 3; }

    /* The stage breaks out of .pw-rotator-container's side margins to span the
       viewport — the card is measured against the full screen width here, and
       the peeking neighbours are meant to run off both edges rather than stop
       short at the container's gutter. Same full-bleed trick .pw-rotator-wrap
       uses. The text panel below keeps its gutters. */
    .pw-rotator-stage {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      /* Height follows the card: 71% of the viewport at 5/7 is ~0.99x that
         width, plus a little room for the card's shadow. */
      height: auto;
      aspect-ratio: 1 / 1.06;
    }

    .pw-rotator-slide {
      /* 71% card + ~14.5% of each neighbour showing = the full screen width. */
      width: 71%;
      min-width: 0;
      max-width: none;
      max-height: none;
      aspect-ratio: 5 / 7;
      /* Positioned from the stage's centre line, so the three visible cards are
         placed symmetrically about it rather than from the left edge. */
      left: 50%;
    }

    /* Only three cards have a place here; the rest wait off to the right,
       invisible, and fade in as they come round. */
    .pw-rotator-slide.pw-stack-1,
    .pw-rotator-slide.pw-stack-2,
    .pw-rotator-slide.pw-stack-3,
    .pw-rotator-slide.pw-stack-4 {
      transform: translateX(45%) scale(0.9);
      opacity: 0;
    }
    .pw-rotator-slide.pw-stack-0 {
      transform: translateX(calc(-50% + var(--pw-drag, 0px))) scale(1);
      opacity: 1;
      z-index: 50;
    }
    /* Next card — peeks in from the right edge, behind the active one. */
    .pw-rotator-slide.pw-stack-1 {
      opacity: 1;
      z-index: 40;
    }
    /* Previous card — the deck has no left-hand position, so it gets one here.
       JS adds this class alongside the card's usual .pw-stack-N (which is what
       still positions it on desktop); this rule follows those, so it wins. */
    .pw-rotator-slide.pw-stack-prev {
      transform: translateX(-145%) scale(0.9);
      opacity: 1;
      z-index: 40;
    }

    /* Fanned out from the card in front, mirrored left and right, in place of
       the per-card random tilt the deck uses. */
    .pw-rotator-slide.pw-stack-prev { rotate: -8deg; }
    .pw-rotator-slide.pw-stack-1    { rotate: 8deg;  }

    /* Touch devices don't hover, and the deck's hover offsets would fight the
       positions above if one ever stuck. */
    .pw-rotator-slide.pw-stack-1:hover,
    .pw-rotator-slide.pw-stack-2:hover,
    .pw-rotator-slide.pw-stack-3:hover,
    .pw-rotator-slide.pw-stack-4:hover {
      transform: translateX(45%) scale(0.9);
    }
    .pw-rotator-slide.pw-stack-prev:hover {
      transform: translateX(-145%) scale(0.9);
    }

    .pw-rotator-nav {
      display: flex;
      justify-content: center;
      gap: 2.5rem;
    }

    .pw-rotator-text {
      align-items: center;
      text-align: center;
      gap: 0.85rem;
    }
    .pw-slide-category { align-self: center; }
    .pw-slide-description { margin: 0 auto; }
    /* Thumbnails give way to the arrows above. */
    .pw-rotator-thumbs { display: none; }

    /* 40% off the deck's 120px sticker. That size is fixed rather than fluid
       (the clamp's floor and ceiling are the same value), so on a card this
       much narrower it covered a good third of the artwork. */
    .pw-rotator-slide .pw-slide-sticker { width: 72px; }
    .pw-rotator-slide a.pw-slide-sticker img { width: 72px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .pw-rotator-slide { transition: opacity .3s linear; }
    .pw-rotator-slide .pw-slide-sticker { transition: none; scale: 1; rotate: 0deg; visibility: visible; }
  }