/* Pattison Featured Stories — Feature Slider */

:root {

    --ease-smooth:      cubic-bezier(.62, .16, .13, 1.01);
    --spring:           cubic-bezier(.34, 1.2,  .64, 1);
    --spring-bounce:    cubic-bezier(.34, 1.56, .64, 1);
  }
  
  /* ── Outer wrap ── */
  .pw-feature-slider-wrap {
    position: relative;
    padding: 0 0 5rem;
  }
  
  /* ── Header ── */
  .pw-feature-slider-header {
    margin: 0 0 3rem;
    position: relative;
    z-index: 1;
  }
  
  .pw-feature-slider-heading {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    color: var(--body-text);
    margin: 0;
    line-height: 1.1;
    max-width: 36rem;
  }
  
  /* ── Stack container ── */
  .pw-feature-slider-stack {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Trailing spacer, after the last real card — gives it the same
     downstream scroll "room" every other card gets from its own
     followers, so it can stick and overlay properly instead of releasing
     the instant it arrives (there's nothing after the real last card to
     draw that room from otherwise). This is the *only* room the last
     card gets — its own margin-bottom is cancelled below, since that
     margin exists purely to pace the next card's arrival, and there is
     no next card. */
  .pw-feature-slider-tail {
    height: 45vh;
  }

  /* ── Each card ──
     `top` is driven per-card by verticalSlider.js (updateCards), which
     rests the current/upcoming card lowest and pulls each card that's
     fallen behind progressively higher/smaller — see that file for the
     exact depth → top/scale/rotate mapping. */
  .pw-feature-slider-card {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    aspect-ratio: 1600 / 640;
    /* floor so the media + text columns never outgrow the ratio-derived height */
    min-height: 26rem;
    /* aspect-ratio transfers min-height into an automatic min-width, which would widen the card past the viewport */
    min-width: 0;
    max-width: 100%;
    border-radius: 2rem;
    border: 8px solid white;
    overflow: visible;
    margin-bottom: 50px;
    transform-origin: center top;
    transition: top 0.5s var(--spring), transform 0.5s var(--spring);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
  }

  /* Explicit z-index so each successive card always paints on top of the one before it */
  .pw-feature-slider-card:nth-child(1) { z-index: 1; }
  .pw-feature-slider-card:nth-child(2) { z-index: 2; }
  .pw-feature-slider-card:nth-child(3) { z-index: 3; }
  .pw-feature-slider-card:nth-child(4) { z-index: 4; }
  .pw-feature-slider-card:nth-child(5) { z-index: 5; }
  .pw-feature-slider-card:nth-child(6) { z-index: 6; }

  /* Cancel the pacing margin on the real last card (2nd-to-last child —
     .pw-feature-slider-tail is the actual last child now) so its only
     downstream room is the dedicated tail above, not tail + a redundant
     gap margin on top of it. */
  .pw-feature-slider-card:nth-last-child(2) { margin-bottom: 0; }

  /* Card color variants */
  .pw-feature-slider-card[data-color="sky"]     { background: #0284c7; }
  .pw-feature-slider-card[data-color="violet"]  { background: #7c3aed; }
  .pw-feature-slider-card[data-color="rose"]    { background: #e11d48; }
  .pw-feature-slider-card[data-color="orange"]  { background: #ea580c; }
  .pw-feature-slider-card[data-color="emerald"] { background: #059669; }
  .pw-feature-slider-card[data-color="indigo"]  { background: #4f46e5; }
  
  /* ── Image side ── */
  /* Holds the media card plus its stickers; not clipped, so stickers can
     overhang the media card's corners like the horizontal slider's */
  .pw-fs-card-media-wrap {
    flex: 0 0 50%;
    position: relative; /* positioning context for stickers */
    display: flex;
  }

  .pw-fs-card-media {
    flex: 1 1 auto;
    position: relative;
    border-radius: calc(2rem - 8px);
    overflow: hidden;
    border: 6px solid white;
    margin:25px;
    /* fills the card's height (flex stretch) rather than forcing one */
    min-height: 0;
  }
  
  /* Stretched, invisible link over the media area — makes the whole image
     clickable without disturbing the poster/video underneath. Sits above
     the plain poster/video (z-index:auto) but below the play button,
     duration pill, and stickers so those stay independently interactive.
     Hidden from assistive tech/keyboard nav since the "Read More" CTA
     below already covers that with real link text. */
  .pw-fs-card-media .pw-fs-card-media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
  }

  .pw-fs-card-media img:not(.pw-slide-sticker),
  .pw-fs-card-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .pw-fs-card-media .pw-slide-video { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
  .pw-feature-slider-card:hover .pw-fs-card-media .pw-slide-video,
  .pw-feature-slider-card.pw-is-playing .pw-fs-card-media .pw-slide-video { opacity: 1; visibility: visible; transition-delay: 0s; }

  /* ── Play button ── */
  .pw-fs-card-media .pw-slide-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    overflow: hidden;
    width: 64px; height: 64px;
    border-radius: 999px;
    background-color: #000000B3;
    border: 2px solid #FFFFFF;
    /* Decorative only — no click handler — so let clicks fall through to the card link. */
    pointer-events: none;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    transition: transform .35s var(--spring), background-color .35s var(--spring), box-shadow .35s var(--spring);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
  }
  .pw-feature-slider-card:hover .pw-slide-play-btn { transform: translate(-50%,-50%) scale(1.08); background-color: #000000e6; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
  .pw-fs-card-media .pw-slide-play-btn svg { width: 24px; height: 24px; fill: #FFFFFF!important; margin-left: 3px; }

  /* ── Duration pill ── */
  .pw-fs-card-media .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-fs-card-media .pw-slide-duration svg { width: 12px; height: 12px; fill: currentColor; }

  /* ── Stickers on image ── */
  /* Same size and corner-centred placement as the horizontal slider */
  .pw-fs-card-media-wrap .pw-slide-sticker {
    position: absolute;
    width: 100px;
    height: 100px;
    object-fit: contain;
    translate: -50% -50%;
    z-index: 4; /* above the media card and its link */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
    pointer-events: auto;
    transition: scale .25s var(--spring-bounce), rotate .25s var(--spring-bounce);
  }
  .pw-feature-slider-card:hover .pw-fs-card-media-wrap .pw-slide-sticker { scale: 1.15; rotate: 5deg; }

  .pw-fs-card-media-wrap a.pw-slide-sticker { display: block; }
  .pw-fs-card-media-wrap a.pw-slide-sticker img { width: 100px; height: 100px; object-fit: contain; display: block; }
  
  /* Sponsor sticker positioned in body side */
  .pw-fs-card-body {
    position: relative; /* needed for absolute-positioned sponsor sticker */
  }
  
  .pw-fs-card-sponsor {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
  }
  
  /* ── Text side ── */
  .pw-fs-card-body {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 3.5rem);
    color: white;
    gap: 1rem;
  }
  
  .pw-fs-card-category {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    background: white;
    color: #111;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    align-self: flex-start;
  }

  /* Hide the pill entirely when there's no badge label */
  .pw-fs-card-category:empty { display: none; }

  .pw-fs-card-title {
    font-size: clamp(1.15rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }
  .pw-fs-card-title a,
  .pw-fs-card-title a:hover { color: inherit; text-decoration: none; }
  
  .pw-fs-card-desc {
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    line-height: 1.65;
    opacity: 0.88;
    margin: 0;
    max-width: 40ch;
  }

  /* ── Read More CTA ── same pill + icon-box setup as the header's
     "Listen Live" button (.header-nav-listen-live): white pill wrapper,
     bold label, separate rounded icon box that both morph to fully round
     on hover. Icon box uses the card's own accent (%SLIDE_COLOR%) instead
     of the fixed brand color so it matches whichever card it's on. */
  .pw-fs-card-cta {
    align-self: flex-start;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    border:2px solid #000000;
    background: #fff;
    color: #111;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-radius 300ms var(--ease-smooth);
  }
  .pw-fs-card-cta:hover {
    border-radius: 100px;
    color: #111;
  }

  .pw-fs-card-cta-label {
    padding: 0.7rem 1.1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    transition: border-radius 300ms var(--ease-smooth);
  }

  .pw-fs-card-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    flex-shrink: 0;
    transition: border-radius 300ms var(--ease-smooth);
  }
  .pw-fs-card-cta:hover .pw-fs-card-cta-icon { border-radius: 100px; }

  .pw-fs-card-cta-icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px solid #000000;
    border-radius: inherit;
    background: radial-gradient(165% 165% at 50% -65%,
      transparent 72%, rgba(0,0,0,.20) 73%, rgba(0,0,0,.20) 100%);
  }

  .pw-fs-card-cta-arrow {
    width: 1.1rem;
    height: 1.1rem;
    color: #fff;
  }

  /* ── Sidebar nav ── */
  .pw-feature-slider-nav {
    position: fixed;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-smooth);
    max-height: calc(100svh - 2rem);
  }
  
  .pw-feature-slider-nav.pw-is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Round nav buttons */
  .pw-feature-slider-nav-btn {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(234, 234, 240, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #231f20;
    transition: background 0.2s, scale 0.2s var(--spring-bounce);
  }
  .pw-feature-slider-nav-btn:hover {
    background: rgba(200, 200, 210, 0.95);
    scale: 1.1;
  }
  .pw-feature-slider-nav-btn svg {
    vertical-align: middle;
    display: block;
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
    fill: none !important;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  /* Dots wrapper — flexible so it can shrink on small viewports */
  .pw-feature-slider-dots-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: 999px;
  }
  
  .pw-feature-slider-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 1.25rem 1.25rem;
    background: rgba(234, 234, 240, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    width: 100%;
  }
  
  .pw-feature-slider-dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(35, 31, 32, 0.35);
    border: none;
    cursor: pointer;
    transition: height 0.3s var(--ease-smooth), background 0.3s var(--ease-smooth), scale 0.2s var(--spring-bounce);
  }
  
  .pw-feature-slider-dot.pw-is-active {
    height: 2rem;
    background: #231f20;
  }
  
  .pw-feature-slider-dot:not(.pw-is-active):hover {
    scale: 1.5;
    background: rgba(35, 31, 32, 0.6);
  }
  
  /* ── Responsive ── */
  @media (max-width: 1024px) {
    .pw-feature-slider-nav { left: 1%; }
    .pw-fs-card-media-wrap { flex: 0 0 40%; }
    .pw-fs-card-body { flex: 0 0 49%; }
  }
  /* Stacked card: media on top, text below */
  @media (max-width: 980px) {
    .pw-fs-card-media { min-height: 30svh; }
    .pw-feature-slider-card {
      flex-direction: column;
      aspect-ratio: auto;
      height: auto;
      min-height: 40svh;
      margin-bottom: 50px;
    }

    .pw-fs-card-media-wrap { flex: 0 0 auto; }
    .pw-fs-card-body  { flex: 1 1 auto; }
  }
  @media (max-width: 700px) {
    .pw-feature-slider-tail { height: 35vh; }

    /* The sidebar nav (scroll-to-top/prev/dots/next/end) is position:fixed at
       the left of the viewport, which on a phone puts it on top of the cards
       themselves. Dropped entirely here — scrolling is the control at this
       width. display:none rather than opacity, so it also can't take taps when
       verticalSlider.js adds .pw-is-visible (that class only restores opacity
       and pointer-events, so it can't bring this back). */
    .pw-feature-slider-nav { display: none; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .pw-feature-slider-card { transition: none; }
    .pw-feature-slider-dot  { transition: none; }
    .pw-feature-slider-nav  { transition: none; }
    .pw-slide-sticker { transition: none; }
  }