/* V32 — mobile balance / tap-the-peek navigation
   Loaded after the main stylesheet. Desktop is intentionally untouched. */

@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y pinch-zoom;
  }

  body {
    margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  main,
  section,
  article,
  .work,
  .work-grid,
  .work-card,
  .showcase-piece,
  .artist-feature-piece,
  .event-edit-piece,
  .subsidy-series-piece,
  .campaign-coverflow-piece {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep ordinary text/content visually centered in the viewport. */
  .showcase-piece,
  .artist-feature-piece,
  .event-edit-piece,
  .subsidy-series-piece,
  .campaign-coverflow-piece {
    overflow: hidden !important;
  }

  /* Prevent tag rows or long labels from creating a horizontal page width. */
  .work-tags,
  .artist-feature-role,
  .artist-feature-artist-row,
  .campaign-coverflow-card-meta {
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .work-tags span,
  .artist-profile-link,
  .artist-feature-bio,
  .artist-feature-block p,
  .video-coverflow-description,
  .subsidy-series-info p,
  .campaign-coverflow-info small {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Headings: less oversized, more balanced, no forced side overflow. */
  .showcase-heading h5,
  .artist-feature-heading h5,
  .subsidy-series-heading h5,
  .campaign-coverflow-piece h5 {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 11.4vw, 3.55rem) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    overflow-wrap: anywhere;
  }

  /* =====================================================
     OUTER COVERFLOW STANDARD — MOBILE
     No outside arrows. Tap the visible blurred card instead.
     ===================================================== */
  .mobile-artist-switcher,
  #artist-feature-series .artist-series-controls,
  .video-coverflow-nav,
  .campaign-coverflow-nav,
  .subsidy-series-nav {
    display: none !important;
  }

  .video-coverflow-stage,
  #artist-feature-series .artist-series-stage,
  .campaign-coverflow-stage,
  .subsidy-coverflow-stage {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior-x: contain !important;
  }

  /* ---------------- EVENT EDITS ---------------- */
  .video-coverflow {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    overflow: hidden !important;
  }

  .video-coverflow-stage {
    min-height: 590px !important;
  }

  .video-coverflow-card {
    width: min(68vw, 282px) !important;
    left: 50% !important;
    transform:
      translateX(calc(-50% + var(--mobile-coverflow-shift, 0px)))
      translateY(var(--coverflow-y, 34px))
      scale(var(--coverflow-scale, .82)) !important;
    rotate: none !important;
  }

  .video-coverflow-card.is-active {
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }

  .video-coverflow-meta {
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    margin-inline: auto !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 0 !important;
  }

  .video-coverflow-meta > .video-coverflow-nav { display: none !important; }

  /* ---------------- ARTISTS ---------------- */
  #artist-feature-series .artist-series-stage {
    min-height: 820px !important;
    height: auto;
    isolation: isolate;
  }

  #artist-feature-series .artist-series-panel,
  #artist-feature-series .artist-series-panel .artist-feature-layout {
    width: 100% !important;
    max-width: 100% !important;
  }

  #artist-feature-series .artist-series-panel .artist-feature-layout {
    display: block !important;
    min-height: 0 !important;
    margin-inline: auto !important;
  }

  #artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
    width: min(68vw, 276px) !important;
    max-width: 276px !important;
    margin-inline: auto !important;
    left: auto !important;
    transform: none !important;
  }

  #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
    left: 50% !important;
    top: 14px !important;
    width: min(58vw, 236px) !important;
    max-width: 236px !important;
    transform:
      translateX(calc(-50% + (var(--artist-slot) * 104px)))
      translateY(calc(var(--artist-depth) * 5px))
      scale(calc(.86 - (var(--artist-depth) * .035))) !important;
    opacity: calc(.64 - (var(--artist-depth) * .08)) !important;
    filter: brightness(calc(.62 - (var(--artist-depth) * .045))) blur(calc(var(--artist-depth) * .7px)) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #artist-feature-series .artist-feature-copy {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    margin: 28px auto 0 !important;
    padding: 20px 0 0 !important;
    box-sizing: border-box !important;
  }

  #artist-feature-series .artist-feature-artist-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  #artist-feature-series .artist-feature-artist-row > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #artist-feature-series .artist-profile-link {
    position: static !important;
    margin: 4px 0 0 !important;
    flex: 0 0 auto !important;
  }

  .artist-coverflow-hint { display: none !important; }

  /* ---------------- CAMPAIGN GRAPHICS ---------------- */
  .campaign-coverflow-stage {
    height: 405px !important;
  }

  .campaign-coverflow-card {
    width: min(68vw, 276px) !important;
    left: 50% !important;
    transform:
      translateX(calc(-50% + (var(--cslot) * 106px)))
      scale(.86) !important;
  }

  .campaign-coverflow-card.is-active {
    transform: translateX(-50%) scale(1) !important;
  }

  .campaign-coverflow-info {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  /* ---------------- SUBSIDY BATCHES ---------------- */
  .subsidy-coverflow-stage {
    height: 535px !important;
  }

  .subsidy-coverflow-card {
    width: min(70vw, 286px) !important;
    left: 50% !important;
    transform:
      translateX(calc(-50% + (var(--sub-slot) * 108px)))
      translateY(calc(var(--sub-depth) * 7px))
      scale(calc(1 - (var(--sub-depth) * .085))) !important;
  }

  .subsidy-coverflow-card.is-active {
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }

  .subsidy-series-info {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    padding: 0 !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  /* Internal carousels still swipe/drag, but the page itself won't shift sideways. */
  .artist-feature-viewport,
  .social-phone-carousel,
  [data-carousel],
  .carousel-track,
  .reel-media-stage {
    max-width: 100% !important;
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior-x: contain !important;
  }

  /* Keep actual social frames centered and a little smaller than desktop. */
  .artist-feature-phone,
  .video-coverflow-card .social-phone,
  .subsidy-phone,
  .campaign-coverflow-frame {
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 390px) {
  .video-coverflow-card { width: min(66vw, 258px) !important; }
  #artist-feature-series .artist-series-panel.is-active .artist-feature-phone { width: min(66vw, 254px) !important; }
  #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone { width: min(56vw, 216px) !important; }
  .campaign-coverflow-card { width: min(66vw, 252px) !important; }
  .subsidy-coverflow-card { width: min(68vw, 264px) !important; }
}


/* V33: Portfolio-wide campaign coverflow standard — no outside arrows on desktop or mobile.
   Background/blurred cards remain the navigation target. */
.campaign-coverflow-nav { display: none !important; }

/* V34 — mobile breathing room + swipeable campaign coverflow */
@media (max-width: 760px) {
  :root { --mobile-page-gutter: 18px; }

  /* Give text and case-study content a consistent mobile safe gutter. */
  .nav,
  .hero,
  .intro,
  .section-header,
  .work-card > .work-info,
  .work-card > .work-story > p,
  .work-card > .work-story > h4,
  .work-card > .work-story > .work-role,
  .work-card > .work-story > .work-tags,
  .nowhere-identity,
  .showcase-heading,
  .campaign-coverflow-info,
  .subsidy-series-info,
  .video-coverflow-meta,
  #artist-feature-series .artist-feature-copy,
  .services > .section-label,
  .services-intro,
  .process > .section-label,
  .process-grid,
  .about > .section-label,
  .about-grid,
  .intro-video > .section-label,
  .contact,
  footer {
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Don't double-pad nested blocks that already have their own inset. */
  .work-card > .work-story > .work-role p,
  .work-card > .work-story > .work-role strong,
  .work-card > .work-story > .work-role > span {
    max-width: 100% !important;
  }

  /* Campaign: slightly smaller active card = more visible side peeks / tap targets. */
  .campaign-coverflow-stage {
    height: 390px !important;
    overflow: hidden !important;
    touch-action: pan-y pinch-zoom !important;
  }

  .campaign-coverflow-card {
    width: min(64vw, 264px) !important;
    transform:
      translateX(calc(-50% + (var(--cslot) * 112px)))
      scale(.84) !important;
  }

  .campaign-coverflow-card.is-active {
    transform: translateX(-50%) scale(1) !important;
  }

  /* Keep the coverflow itself full-bleed while its heading/info have gutters. */
  .campaign-coverflow-piece,
  .campaign-coverflow-stage,
  .subsidy-coverflow-stage,
  .video-coverflow-stage,
  #artist-feature-series .artist-series-stage {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Prevent any long row from forcing horizontal page movement. */
  .work-tags,
  .services-intro,
  .process-grid,
  .about-grid,
  .campaign-coverflow-card-meta {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 390px) {
  :root { --mobile-page-gutter: 16px; }
  .campaign-coverflow-card { width: min(62vw, 246px) !important; }
}