/* ─── Mobile overrides ──────────────────────────────────────────────
   Everything below max-width:1024px handles the mobile layout, so
   desktop (1024px and up) is untouched. Loaded after styles.css so
   these rules win the cascade without editing anything in styles.css.

   The rules just below are the necessary exceptions: they establish a
   desktop-safe default for new elements before the mobile-only
   behavior kicks in inside the media query. ─── */
.nav-toggle-checkbox,
.nav-burger { display: none; }

/* .discipline-tags-wrap (built in main.js's buildDisciplinesGrid) only
   exists for mobile's collapse/expand UI. display:contents makes it
   invisible to layout on desktop — its tag-pill children act as direct
   children of .disciplines-grid, exactly as if this wrapper weren't
   there, so desktop's tag flow is completely unaffected. The summary
   label ("N Creative Tags") is mobile-only too. */
.discipline-tags-summary { display: none; }
.discipline-tags-wrap { display: contents; }

@media (max-width: 1024px) {

  /* ─── Nav → burger menu (CSS-only, via hidden checkbox) ──────────── */
  .nav-toggle-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .nav-burger {
    order: 1;
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 1.25rem;
    cursor: pointer;
    z-index: 1001;
    background-color: #FDC214;
    -webkit-mask-image: url('/icons/menu.png');
    mask-image: url('/icons/menu.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.25s ease;
  }
  #navToggle:checked ~ .nav-burger {
    transform: rotate(90deg);
  }

  .nav-cta { order: 3; }

  /* Logo moves inside the flyout menu instead of sitting in the top bar.
     Scoped to .page-home — .nav-logo is shared with terms/privacy/
     club-rules, which have no #navToggle checkbox to reveal it again. */
  .page-home .nav-logo { display: none; }
  #navToggle:checked ~ .nav-logo {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 2rem;
    right: 0;
    width: min(78vw, 300px);
    z-index: 1002;
  }

  .nav-links {
    order: 4;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 300px);
    margin: 0;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(12px);
    border-left: 1px solid var(--text-20, rgba(245,245,240,0.2));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2rem;
    padding: 6rem 2.5rem 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
  }
  .nav-links li { width: 100%; }
  .nav-links a { font-size: 1.05rem; }

  #navToggle:checked ~ .nav-links {
    display: flex;
    transform: translateX(0);
  }

  /* ─── Hero ─────────────────────────────────────────────────────────
     Desktop uses a rigid height:100vh + min-height:680px box with a
     side-by-side headline/stats row. That doesn't fit small viewports
     (content gets clipped by the fixed height, or the row runs out of
     width), so it's rebuilt here to grow with its content instead. ── */
  .hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: 7rem 1.5rem 2.5rem;
  }

  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .hero-headline {
    font-size: clamp(1.9rem, 8.5vw, 3.5rem);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .hero-accent {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
  }

  .hero-sub {
    max-width: 100%;
  }

  .hero-actions {
    width: 100%;
  }
  .hero-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 1.5rem;
    padding-bottom: 0;
  }
  .stat-item { text-align: left; }

  /* Single column of full-width "landscape" cards instead of the
     cramped 2-column grid — that narrow width was the root cause of
     every pill-fitting issue. A full-width card gives the discipline
     pill plenty of room, so it goes back to matching desktop's badge
     styling exactly instead of needing special mobile treatment. */
  .members-grid {
    grid-template-columns: 1fr;
  }

  /* ─── Member cards: grow to fit content ─────────────────────────────
     Desktop's 3D flip-card technique needs a *fixed*-height .card-wrap
     with both faces absolutely positioned on top of each other (only
     one visible at a time via backface-visibility + a hover rotateY).
     Fitting content into that fixed box on a narrow card kept surfacing
     bugs (garbled ellipsis, clipped text, off-center text, edge-
     crowding/overlap). The hover-flip doesn't meaningfully work on
     touch anyway, so it's disabled here entirely: the back face is
     hidden, the front face joins normal document flow instead of being
     absolutely positioned, and the card grows to fit whatever content
     it has. Still kept even with the wider single-column card, since a
     long bio or name could still overflow a fixed height regardless of
     width. */
  .card-wrap {
    height: auto;
    perspective: none;
  }
  .creator-card {
    height: auto;
  }
  .card-wrap:hover .creator-card {
    transform: none;
  }
  .card-face {
    position: static;
    min-height: 200px;
  }
  .card-back {
    display: none;
  }

  .card-name {
    max-width: 100%;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* "Active member" was wrapping to 2 lines next to the avatar on the
     narrow mobile card — shrink it and force one line. */
  .card-status {
    font-size: 0.6rem;
    white-space: nowrap;
  }

  /* Every Creative Tag: potentially ~100 tags dumped on screen at once
     doesn't work on mobile. "All" is the activator/closer — tapping it
     reveals the full list below, and hides the "N Tags" label that
     sits next to it while collapsed.

     .disciplines-grid has no explicit align-items (defaults to
     stretch), so the big "100" text tallens its flex row and stretches
     every sibling in it — including the "All" pill — to match. Center
     instead so "All" keeps its normal size. All the individual tag
     pills live nested inside .discipline-tags-wrap (not as direct
     children), so .disciplines-grid itself only ever has "All" +
     the summary (or "All" + the open wrap) as visible row items —
     space-between pins them to opposite edges. */
  .disciplines-grid {
    align-items: center;
    justify-content: space-between;
  }
  .discipline-tags-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
  }
  .discipline-tags-summary.hidden {
    display: none;
  }
  .discipline-tags-summary .tags-count {
    font-family: var(--ff-head);
    font-size: 3rem;
    color: white;
  }
  .discipline-tags-summary .tags-label {
    font-family: var(--ff-body);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: var(--text-20);
  }
  .discipline-tags-wrap {
    display: none;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
  }
  .discipline-tags-wrap.open {
    display: flex;
  }

  /* "Meet the Creatives" → Filter button dropdown: fixed at
     max-height:300px + overflow:hidden on desktop, which clips
     anything beyond that. The same filter items wrap into far more
     rows on a narrow mobile width than on desktop, so 300px runs out
     much sooner — give it real room and let it scroll internally
     instead of hard-clipping. */
  .discipline-filters.open {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Locked-card CTA: "Apply for Access →" was just barely too wide for
     the narrow mobile card, so the arrow alone dropped to its own line. */
  .card-locked {
    padding: 1.25rem;
  }
  .lock-cta {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  /* Download CTA: there's already a <br> splitting the headline into
     "Your next collab" / "is one click away", but the desktop font-size
     was too large for mobile width, so each half wrapped again into
     extra lines. Shrinking it (and the section's side padding) lets
     each half sit on its own single line as intended. */
  .download-section {
    padding: 5rem 1.5rem;
  }
  .download-headline {
    font-size: clamp(1.2rem, 6.5vw, 2rem);
    letter-spacing: 0.5px;
  }

  /* Download CTA watermark: clamp(8rem, 18vw, 18rem) has an 8rem
     (128px) floor, so on a narrow phone the vw value (which would
     shrink it correctly) never gets to apply — it's stuck at 128px,
     wider than the screen, and clipped by .download-section's
     overflow:hidden. Let it actually shrink with the viewport. */
  .download-watermark {
    font-size: clamp(3.5rem, 22vw, 18rem);
  }

  /* Terms of Use: the title forces white-space:nowrap + width:max-content
     (plus a desktop-tuned translateX(-60px) nudge) so it never wraps —
     but "Blkuzz Terms & Conditions" as one line is simply wider than a
     phone screen, pushing it off the right edge regardless of centering.
     Letting it wrap on mobile keeps it fully in view and centered. */
  .legal h1 {
    white-space: normal;
    width: auto;
    max-width: 100%;
    margin: 0 auto 0.5rem;
    text-align: center;
    transform: none;
    line-height: 1.15;
  }
  .legal h1 .h1-text {
    display: inline;
  }

  /* Club Rules: nudge the smallest circle down a little on mobile.
     Scoped to .page-club-rules — .bg-circle-4 is a shared class name
     across terms/privacy/club-rules, and all three now load this file. */
  .page-club-rules .bg-circle-4 {
    top: 200px;
  }

  /* Ticker: broken on mobile Safari with no confirmed root cause found
     in code — removed from mobile view entirely rather than leave a
     blank gold bar. */
  .ticker {
    display: none;
  }

  /* Apply for Access form: .form-input sets background:transparent, but
     without -webkit-appearance:none, iOS Safari renders text/email/tel/
     password inputs with native white chrome regardless of custom CSS —
     that's why fields showed solid white instead of transparent. */
  .form-input,
  .form-select {
    -webkit-appearance: none;
    appearance: none;
  }

}