/* =========================================================
   v53 — VIEWPORT-AWARE FLOATING CARD STANDARD
   Goal: every front/coverflow card fits inside the user's
   current visible area while leaving neighbouring cards visible.
   Applies to desktop, short laptop screens, iPad/tablet, mobile.
   ========================================================= */

/* Shared sizing tokens. Height is deliberately part of the equation:
   a short laptop screen now reduces cards even when the viewport is wide. */
:root {
  --float-safe-top: 118px;
  --float-safe-bottom: 76px;
  --float-usable-h: calc(100dvh - var(--float-safe-top) - var(--float-safe-bottom));
}

/* Never allow a showcase/deck to widen the modal or page. */
.video-coverflow,
#artist-feature-series .artist-series-stage,
.campaign-coverflow-stage,
.subsidy-coverflow-stage,
.additional-campaign-stage,
.faq-support-layout {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---------- SELECTED EVENT EDITS ----------
   The phone is tall, so size its WIDTH from available HEIGHT. */
.video-coverflow {
  --deck-card-width: min(
    350px,
    30vw,
    calc(var(--float-usable-h) * .50)
  ) !important;
  width: 100% !important;
  max-width: min(980px, 100%) !important;
  padding-top: clamp(14px, 2.2dvh, 28px) !important;
}

.video-coverflow-stage {
  min-height: clamp(510px, 72dvh, 700px) !important;
  height: auto !important;
  max-height: none !important;
}

.video-coverflow-card,
.video-coverflow-card .social-phone {
  max-width: 100% !important;
}

/* If the browser is short, pull the whole deck upward and reduce the peeks a bit. */
@media (min-width: 901px) and (max-height: 820px) {
  .video-coverflow {
    --deck-card-width: min(318px, 28vw, calc((100dvh - 180px) * .47)) !important;
  }
  .video-coverflow-stage {
    min-height: clamp(470px, 68dvh, 610px) !important;
  }
  .video-coverflow-card:not(.is-active) {
    --event-float-step: clamp(128px, 14vw, 190px);
  }
}

@media (min-width: 901px) and (max-height: 700px) {
  .video-coverflow {
    --deck-card-width: min(275px, 25vw, calc((100dvh - 146px) * .44)) !important;
  }
  .video-coverflow-stage { min-height: 455px !important; }
}

/* ---------- ARTIST FEATURE FLOATING DECK ---------- */
#artist-feature-series .artist-series-stage {
  min-height: clamp(650px, 78dvh, 900px) !important;
  overflow: hidden !important;
}

#artist-feature-series .artist-series-panel .artist-feature-layout {
  min-height: 0 !important;
}

#artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
  width: min(
    350px,
    31vw,
    calc(var(--float-usable-h) * .51)
  ) !important;
}

#artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
  width: min(
    310px,
    27vw,
    calc(var(--float-usable-h) * .45)
  ) !important;
}

@media (min-width: 901px) and (max-height: 820px) {
  #artist-feature-series .artist-series-stage {
    min-height: clamp(560px, 73dvh, 690px) !important;
  }
  #artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
    width: min(305px, 28vw, calc((100dvh - 180px) * .47)) !important;
  }
  #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
    width: min(265px, 24vw, calc((100dvh - 180px) * .41)) !important;
  }
}

/* ---------- CAMPAIGN LINEUP REVEALS ---------- */
.campaign-coverflow-stage {
  height: clamp(380px, 61dvh, 585px) !important;
  overflow: hidden !important;
}

.campaign-coverflow-card {
  width: min(
    330px,
    30vw,
    calc(var(--float-usable-h) * .58)
  ) !important;
}

/* ---------- SUBSIDY PROGRAM ---------- */
.subsidy-coverflow-stage {
  height: clamp(445px, 67dvh, 625px) !important;
  overflow: hidden !important;
}

.subsidy-coverflow-card {
  width: min(
    345px,
    31vw,
    calc(var(--float-usable-h) * .54)
  ) !important;
}

/* ---------- ADDITIONAL CAMPAIGN / SUPPORTING FLOATING MEDIA ---------- */
.additional-campaign-stage,
.additional-campaign-media,
.additional-campaign-card,
.campaign-project-media,
.campaign-project-card {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Common social/phone frames inside floating experiences should never exceed
   the current viewport even if an older rule gives them a larger fixed width. */
.video-coverflow-card .social-phone,
#artist-feature-series .artist-feature-phone,
.subsidy-phone,
.faq-phone {
  max-width: min(100%, calc(100vw - 48px)) !important;
}

/* ---------- TABLET / iPAD ---------- */
@media (max-width: 1024px) {
  :root {
    --float-safe-top: 128px;
    --float-safe-bottom: 90px;
  }

  .video-coverflow {
    --deck-card-width: min(330px, 48vw, calc(var(--float-usable-h) * .49)) !important;
  }
  .video-coverflow-stage {
    min-height: clamp(500px, 69dvh, 670px) !important;
  }

  #artist-feature-series .artist-series-stage {
    min-height: clamp(690px, 78dvh, 850px) !important;
  }
  #artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
    width: min(320px, 48vw, calc(var(--float-usable-h) * .48)) !important;
  }
  #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
    width: min(270px, 40vw, calc(var(--float-usable-h) * .41)) !important;
  }

  .campaign-coverflow-card {
    width: min(300px, 46vw, calc(var(--float-usable-h) * .55)) !important;
  }
  .subsidy-coverflow-card {
    width: min(315px, 48vw, calc(var(--float-usable-h) * .51)) !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
  :root {
    --float-safe-top: 122px;
    --float-safe-bottom: 92px;
  }

  /* Active card stays comfortably inside the screen and leaves tappable peeks. */
  .video-coverflow {
    --deck-card-width: min(
      70vw,
      286px,
      calc(var(--float-usable-h) * .48)
    ) !important;
    padding-inline: 0 !important;
  }
  .video-coverflow-stage {
    min-height: clamp(485px, 67dvh, 610px) !important;
    overflow: hidden !important;
  }

  #artist-feature-series .artist-series-stage {
    min-height: clamp(760px, 88dvh, 880px) !important;
    overflow: hidden !important;
  }
  #artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
    width: min(69vw, 274px, calc(var(--float-usable-h) * .47)) !important;
  }
  #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
    width: min(57vw, 224px, calc(var(--float-usable-h) * .39)) !important;
  }

  .campaign-coverflow-stage {
    height: clamp(350px, 56dvh, 450px) !important;
  }
  .campaign-coverflow-card {
    width: min(68vw, 252px, calc(var(--float-usable-h) * .52)) !important;
  }

  .subsidy-coverflow-stage {
    height: clamp(445px, 64dvh, 545px) !important;
  }
  .subsidy-coverflow-card {
    width: min(70vw, 270px, calc(var(--float-usable-h) * .50)) !important;
  }

  .faq-phone {
    width: min(76vw, 300px, calc(var(--float-usable-h) * .54)) !important;
  }
}

/* Short phones: reduce once more rather than letting the browser crop the card. */
@media (max-width: 760px) and (max-height: 720px) {
  :root {
    --float-safe-top: 108px;
    --float-safe-bottom: 70px;
  }
  .video-coverflow {
    --deck-card-width: min(62vw, 242px, calc(var(--float-usable-h) * .44)) !important;
  }
  .video-coverflow-stage { min-height: 445px !important; }

  #artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
    width: min(62vw, 240px, calc(var(--float-usable-h) * .43)) !important;
  }
  #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
    width: min(52vw, 198px, calc(var(--float-usable-h) * .35)) !important;
  }

  .subsidy-coverflow-card {
    width: min(64vw, 235px, calc(var(--float-usable-h) * .46)) !important;
  }
}

/* Modal-specific guardrails: the open case study itself is the viewport context. */
.case-study-modal .showcase-piece,
.case-study-modal .video-deck-piece,
.case-study-modal #artist-feature-series,
.case-study-modal .subsidy-series-piece,
.case-study-modal .campaign-coverflow-piece {
  max-width: 100% !important;
  overflow-x: clip !important;
}

@media (prefers-reduced-motion: reduce) {
  .video-coverflow-card,
  #artist-feature-series .artist-series-panel .artist-feature-phone,
  .campaign-coverflow-card,
  .subsidy-coverflow-card {
    transition-duration: .01ms !important;
  }
}