/* ==========================================================================
   Mobile Nav/Hero v2 — tester-gated rollout
   ==========================================================================
   Scope: default, minimal, vinyl, editorial, underground, broadsheet, premium
   (prefixes: sync, epk-min, vl, ed, ug, bs, pm)

   How it's gated:
   - The new markup (.epk-v2 …) is rendered by epk-view-unified.php ONLY when
     $epk_mobile_nav_v2_enabled is true (profile owner has the tester
     capability AND the EPK's theme is one of the 7 above).
   - This stylesheet keeps .epk-v2 hidden everywhere by default, and only
     reveals it — while hiding the legacy nav/hero for that same theme —
     inside the mobile breakpoint AND when #myepk carries .epk-mobile-v2.
   - Non-tester owners: #myepk never gets .epk-mobile-v2, so nothing here
     ever applies to them, on any viewport.
   - Desktop viewers of a tester's EPK: outside the media query, so legacy
     desktop nav/hero renders exactly as it does today.

   Color system: everything below derives from the two tokens already set
   per-theme on .epk-layout-{theme} — --nav-bg (background) and
   --nav-accent (accent). Swap the theme's own hero tokens in here later if
   you'd rather the mobile bg/accent diverge from the nav's.
   ========================================================================== */

.epk-v2 { display: none; }
.epk-v2-video-grid { display: none; }

@media (max-width: 767.98px) {

  #myepk.epk-mobile-v2 .epk-v2 {
    display: block;
    width: 100%;
    background: var(--nav-bg);
  }

  /* Hide the legacy per-theme nav + hero once v2 is showing, scoped to the
     7 gated themes only. Every other theme's mobile nav/hero is untouched. */
  #myepk.epk-mobile-v2.epk-layout-default .sync-nav,
  #myepk.epk-mobile-v2.epk-layout-default .sync-hero,
  #myepk.epk-mobile-v2.epk-layout-minimal .epk-min-nav,
  #myepk.epk-mobile-v2.epk-layout-minimal .epk-min-hero,
  #myepk.epk-mobile-v2.epk-layout-vinyl .vl-nav,
  #myepk.epk-mobile-v2.epk-layout-vinyl .vl-hero,
  #myepk.epk-mobile-v2.epk-layout-editorial .ed-nav,
  #myepk.epk-mobile-v2.epk-layout-editorial .ed-hero,
  #myepk.epk-mobile-v2.epk-layout-underground .ug-nav,
  #myepk.epk-mobile-v2.epk-layout-underground .ug-hero,
  #myepk.epk-mobile-v2.epk-layout-broadsheet .bs-nav,
  #myepk.epk-mobile-v2.epk-layout-broadsheet .bs-hero,
  #myepk.epk-mobile-v2.epk-layout-premium .pm-nav,
  #myepk.epk-mobile-v2.epk-layout-premium .pm-hero {
    display: none !important;
  }

  /* ── Nav + Hero: merged full-bleed photo block ──────────────────
     Nav sits transparent over a top scrim; artist name/location/genre/
     Book Me sit transparent over a bottom scrim. Both are absolutely
     positioned within this single photo wrapper so the image fills the
     entire block behind them. */
  .epk-v2-navhero {
    position: relative;
    width: 100%;
    background: var(--nav-bg);
  }
  .epk-v2-navhero--hero {
    /* svh (small viewport height), not dvh/vh: sizes the hero to the
       SMALLEST possible viewport — i.e. with the browser's address bar/
       toolbar fully shown. dvh can report a taller "large viewport" value
       on first paint before the person scrolls, which would push this
       bottom-anchored text block below what's actually visible. svh
       guarantees the whole block, including the Book Me button, is on
       screen without scrolling, on any device/browser state. */
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
  }
  .epk-v2-navhero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .epk-v2-navhero__scrim-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 170px;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--nav-bg) 85%, transparent) 0%,
      transparent 100%
    );
    z-index: 1;
    pointer-events: none;
  }
  .epk-v2-navhero__scrim-bottom {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 40%,
      var(--nav-bg) 88%
    );
    z-index: 1;
    pointer-events: none;
  }

  /* ── Nav (transparent, overlaid on the photo's top scrim) ───────── */
  .epk-v2-nav {
    position: relative;
    z-index: 2;
    background: transparent;
    padding: 18px 0 14px;
    text-align: center;
  }
  .epk-v2-navhero--hero .epk-v2-nav {
    position: absolute;
    top: 0; left: 0; right: 0;
  }

  .epk-v2-nav__logo {
    color: var(--nav-text);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    margin:0 auto;
    padding: 0 20px;
  }
  .epk-v2-nav__logo img {
    max-height: 70px;
    width: auto;
    display: inline-block;
  }

  .epk-v2-nav__links {
    /* nowrap + horizontal scroll from page load — not just once stuck.
       (Previously this only wrapped-to-a-second-line here and switched
       to scroll on .is-stuck; now it scrolls in both states so a fully
       active nav — every item + Book Me — never stacks multiple rows
       over the hero photo either.) JS (initMobileNavSticky in
       epk-public.js) adds .is-stuck once the logo has scrolled past a
       15px-from-top threshold, which is what actually pins/fixes it —
       see that rule below. A pure CSS position:sticky can't do the
       pinning part here: the hero has overflow:hidden for its full-bleed
       photo, which clips a sticky descendant the instant it needs to
       escape that box, so it can't stay pinned once you've scrolled into
       the rest of the page. */
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    align-items: center;
    gap: 6px 10px;
    padding: 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .epk-v2-nav__links::-webkit-scrollbar { display: none; }
  .epk-v2-nav__links a,
  .epk-v2-nav__links .epk-v2-nav__book {
    /* Keep every pill at full size and on one line — without this,
       flexbox would shrink and/or wrap pill text to fit, which is
       exactly what nowrap + overflow-x is meant to avoid. */
    flex-shrink: 0;
    white-space: nowrap;
  }
  .epk-v2-nav__links.is-stuck {
    /* 20000: clears every public-facing z-index in the codebase (the
       photo lightbox is the highest at 9999) with headroom to spare,
       but stays well below the 99999–200000 range reserved for owner/
       edit-mode chrome (save bar, edit banner, modals) — so if a tester
       previews their own EPK in edit mode on mobile, this never covers
       actionable editor UI. */
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 20000;
    padding: 15px 20px;
  }
  .epk-v2-nav__links.is-stuck::before {
    /* Full-width backdrop behind the pills. Starts at the true top of the
       browser (top:-15px here + the row's own top:15px = 0) and eases
       out smoothly over ~120px — several gradient stops rather than a
       couple of big linear jumps, so there's no visible seam where it
       ends; by the last stop it's fully transparent, not just very
       faint, so it reads as a soft lift behind the pills rather than a
       visible bar. */
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--nav-bg) 60%, transparent) 0%,
      color-mix(in srgb, var(--nav-bg) 30%, transparent) 15%,
      color-mix(in srgb, var(--nav-bg) 15%, transparent) 35%,
      color-mix(in srgb, var(--nav-bg) 0%, transparent) 60%,
      transparent 100%)
    z-index: -1;
    pointer-events: none;
  }
  .epk-v2-nav__links a {
    color: var(--nav-text);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 999px;
    padding: 9px 20px;
    background: rgba(0, 0, 0, 0.575);
  }
  .epk-v2-nav__links a.epk-v2-nav__link--accent {
    color: var(--nav-accent);
  }
  .epk-v2-nav__book {
    /* Hidden by default — JS (initMobileNavBookSticky in epk-public.js)
       adds .show-book to .epk-v2-nav__links once the ORIGINAL Book Me
       button (the one overlaid on the photo, .epk-v2-info__book--overlay)
       has scrolled up far enough to disappear behind the stuck nav. Same
       size/shape as the other pills, but keeps its own accent color
       instead of the translucent dark pill background — it's a CTA, not
       a nav link. */
    display: none;
    color: #fff;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    padding: 9px 20px;
    background: var(--nav-accent);
  }
  .epk-v2-nav__links.show-book .epk-v2-nav__book {
    display: inline-flex;
    align-items: center;
  }

  /* ── Hero text (transparent, overlaid on the photo's bottom scrim) ── */
  .epk-v2-hero__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 0 20px calc(22px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .epk-v2-hero__name {
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.05;
    color: #fff;
  }
  .epk-v2-hero__meta-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .epk-v2-hero__meta {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
  }

  /* ── Info section ────────────────────────────────────────────── */
  .epk-v2-info {
    background: var(--nav-bg);
    padding: 0px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  #video .video-carousel-btn.next {
        right: -1rem;
        z-index:1;
    }

  .epk-v2-info__book {
    display: block;
    width: 100%;
    background: var(--nav-accent);
    color: #fff;
    text-align: center;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 0;
    border-radius: 999px;
  }
  /* Overlay variant: same button, sitting on the photo inside the bottom
     scrim rather than in the solid info section below it. */
  .epk-v2-info__book--overlay {
    margin-top: 4px;
    box-shadow: 0 4px 14px color-mix(in srgb, #000 35%, transparent);
  }

  .epk-v2-info__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .epk-v2-info__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13px;
  }
  .epk-v2-info__label {
    color: color-mix(in srgb, var(--nav-text) 55%, transparent);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 14px;
    white-space: nowrap;
  }
  .epk-v2-info__value {
    color: var(--nav-text);
    font-weight: 400;
    text-align: right;
    font-size: 15px;
  }

  .epk-v2-info__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 10px 0px;
  }
  .epk-v2-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: color-mix(in srgb, #ffffff 14%, transparent);
    text-decoration: none;
  }
  .epk-v2-badge svg {
    /* White for now, per request — was var(--nav-text) before. Since every
       icon uses fill/stroke="currentColor", switching this back to
       var(--nav-text) (or any other value) later is a one-line change,
       no per-icon edits needed. */
    width: 30px;
    height: 30px;
    color: #ffffff;
  }

  /* ── Video grid (replaces the horizontal-scroll carousel) ────────
     Matches .epk-photos--tile's mobile grid exactly (24px side padding,
     2 columns, 4px gap) so it lines up with the photos section above/
     below it regardless of which photo layout style is chosen. */
  #myepk.epk-mobile-v2 .video-carousel {
    /* .video-carousel is shared markup across every theme (not prefixed
       per-theme like nav/hero were), and .epk-mobile-v2 is only ever
       present for the 7 gated themes + tester owners in the first place
       — so unlike the nav/hero hide rules above, no per-theme repetition
       is needed here. */
    display: none !important;
  }
  #myepk.epk-mobile-v2 .epk-v2-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 0 24px 24px;
  }
  .epk-v2-video-cell {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.12);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .epk-v2-video-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .epk-v2-video-cell__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
  }
  .epk-v2-video-cell__play svg {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  }

  /* ── Video lightbox inner wrap ────────────────────────────────────
     The modal chrome itself (backdrop, close/prev/next, counter) reuses
     .epk-photos-lightbox and its child classes directly from
     epk-styles.css — that file loads for every visitor, so the styling
     is free and automatically stays visually identical to the photo
     viewer. Only this content wrap is new: sized to fit both the video's
     own 9:16 ratio and the modal's existing 90vw/82vh constraints at once
     (whichever is tighter), instead of the img's plain object-fit rule. */
  .epk-v2-video-lightbox__wrap {
    position: relative;
    width: min(90vw, calc(82vh * 9 / 16));
    aspect-ratio: 9 / 16;
    max-height: 82vh;
  }
  .epk-v2-video-lightbox__player {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
  }
}

/* ==========================================================================
   Audio player artwork sizing (mobile)
   ==========================================================================
   NOTE: not scoped to .epk-mobile-v2 / .epk-v2 like everything above — this
   targets .epk-audio-art, part of the general audio player, not the v2
   nav/hero rollout. Because this file is currently enqueued only for
   tester profiles (class-epk-plugin.php), this rule only takes effect for
   testers' mobile view, not every visitor's. Move it into epk-styles.css
   or epk-front.css instead if it should apply site-wide.
   ========================================================================== */
@media (max-width: 600px) {
  .epk-audio-art {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 480px) {
  .epk-audio-art {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
  }
}