/* ============================================================
   Atelier Norden — Mobile fixes (additive, non-invasive) v2
   Loaded AFTER the main bundle to override built classes.
   Target: <768px (phones). Tablet/desktop largely unchanged.
   ============================================================ */

/* ============================================================
   IMPORTANT: scope img/video safety rules to NOT clobber
   Tailwind utilities. The bundle uses Tailwind v4 with @layer
   utilities — any unlayered rule wins over layered utilities.
   Using :where() drops specificity to 0 so .h-10, .w-full,
   .h-full etc keep working.
   ============================================================ */
:where(html, body) { max-width: 100vw; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }

/* Only protect images that have NO explicit sizing class — keeps
   logo/signature/video constrained by Tailwind utilities intact. */
:where(img:not([class*="h-"]):not([class*="w-"])) { max-width: 100%; height: auto; }

/* ============================================================
   PERFORMANCE — crystal video shouldn't render at intrinsic size
   if anything ever strips the h-full class. Defensive only.
   ============================================================ */
video[src*="cristalloloop"], video source[src*="cristalloloop"] + * {
  /* no-op placeholder for selector targeting */
}

/* ============================================================
   Mobile-first overrides (<= 900px covers tablets in portrait)
   ============================================================ */
@media (max-width: 900px) {
  /* Container horizontal padding */
  .max-w-\[1200px\].mx-auto.px-6,
  .max-w-\[1200px\].mx-auto.px-10,
  .max-w-\[1400px\].mx-auto.px-10 {
    padding-inline: 1.25rem;
  }

  /* Section vertical padding */
  .py-24, .md\:py-24 { padding-block: 4rem; }
  .py-16 { padding-block: 3rem; }
  .py-12 { padding-block: 2.5rem; }

  /* Hero / page-load: top padding so content isn't hidden under nav */
  .pt-\[50vh\] { padding-top: 22vh; }
  .pt-\[30vh\] { padding-top: 14vh; }

  /* "Atelier Norden" / huge display headings — base mobile size */
  .text-9xl { font-size: clamp(2.75rem, 12vw, 4.5rem); line-height: 0.95; }
  .text-8xl { font-size: clamp(2.5rem, 11vw, 4rem); line-height: 0.95; }
  .text-7xl { font-size: clamp(2.25rem, 10vw, 3.5rem); line-height: 1; }
  .text-6xl { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; }
  .text-5xl { font-size: clamp(1.875rem, 8vw, 2.5rem); line-height: 1.05; }
  .text-4xl { font-size: clamp(1.625rem, 7vw, 2.25rem); line-height: 1.1; }
  .text-3xl { font-size: clamp(1.375rem, 5.5vw, 1.875rem); line-height: 1.15; }
  .text-2xl { font-size: clamp(1.125rem, 4.5vw, 1.5rem); line-height: 1.2; }

  /* CTA buttons — touch friendly, less padding */
  .px-10.py-5 {
    padding-inline: 1.5rem;
    padding-block: 0.95rem;
    min-height: 44px;
    width: 100%;
    max-width: 22rem;
    justify-content: center;
  }

  .grid-cols-2.gap-12 { gap: 0.875rem; }
  .grid-cols-2.gap-12.md\:gap-40 { gap: 0.875rem; }
  .grid-cols-1.gap-12.sm\:grid-cols-3 { gap: 2rem; }

  .mb-12 { margin-bottom: 2rem; }
  .mb-16 { margin-bottom: 2.5rem; }
  .mb-10 { margin-bottom: 1.75rem; }
  .md\:mb-12 { margin-bottom: 2rem; }
  .md\:mb-8 { margin-bottom: 1.5rem; }

  a, button { min-height: 36px; }
  button.h-10, .h-10 { min-height: 44px; }

  .aspect-\[4\/3\] { aspect-ratio: 4 / 5; }
}

/* ============================================================
   Phone-sized refinements (<= 600px)
   ============================================================ */
@media (max-width: 600px) {
  .max-w-\[1200px\].mx-auto.px-6,
  .max-w-\[1200px\].mx-auto.px-10,
  .max-w-\[1400px\].mx-auto.px-10 {
    padding-inline: 1rem;
  }

  .max-w-\[1400px\].mx-auto.px-10.lg\:px-24 { padding-inline: 1rem; }

  .text-6xl { font-size: clamp(1.875rem, 10vw, 2.5rem); }
  .text-5xl { font-size: clamp(1.75rem, 9vw, 2.25rem); }
  .text-4xl { font-size: clamp(1.5rem, 7.5vw, 2rem); }

  .pt-\[50vh\] { padding-top: 18vh; }

  .gap-32 { gap: 2rem; }
  .gap-12 { gap: 1.25rem; }

  .px-10.py-5 { padding-block: 0.875rem; }

  /* ---- Signature image on mobile: cap to a sane height ----
     IMPORTANT: scope to nav/header/footer so we don't shrink venture-card
     images that happen to share alt="Aton De Rosa" (bug v3). */
  nav img[alt="Aton De Rosa signature"],
  header img[alt="Aton De Rosa signature"],
  footer img[alt="Aton De Rosa signature"] { height: 2rem !important; width: auto !important; }
  nav img[alt="Aton De Rosa"],
  header img[alt="Aton De Rosa"],
  footer img[alt="Aton De Rosa"]           { height: 2rem !important; width: auto !important; }

  /* ============================================================
     BUG FIX v3 — "SCROLL" cue overlapping CTA buttons on mobile portrait.
     The hero scroll-cue (absolute .bottom-8 wrapper with "SCROLL" text +
     pulsing line) lands right between Explore Work and Say hello at 375px.
     Hide it on phones — users swipe naturally, no indicator needed.
     ============================================================ */
  section .absolute.bottom-8.left-1\/2.-translate-x-1\/2,
  section .absolute.bottom-8.left-1\/2 {
    display: none !important;
  }

  /* ============================================================
     BUG FIX v3 — Selected ventures: 2nd card image rendered 22x28 px
     because the global img[alt="Aton De Rosa"] rule (signature) was
     also matching the venture card img with the same alt. The scoped
     signature rule above fixes the root cause; this is a safety net to
     force the card image back to its proper absolute-fill sizing.
     ============================================================ */
  section.bg-bg img[alt="Aton De Rosa"].absolute.inset-0 {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* ============================================================
     HAMBURGER MENU (<= 600px)
     ============================================================ */
  /* Hide the original horizontal nav pill — works on <nav> or <header> wrapper */
  nav.fixed.top-0 .inline-flex.items-center.rounded-full,
  header.fixed .inline-flex.items-center.rounded-full {
    display: none !important;
  }

  /* Hamburger button (injected via JS as #an-hamburger) */
  #an-hamburger {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(10,10,10,0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }
  #an-hamburger:hover { background: rgba(20,20,20,0.85); }
  #an-hamburger:active { transform: scale(0.95); }
  #an-hamburger svg { width: 22px; height: 22px; display: block; }

  /* Overlay menu */
  #an-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .28s ease, transform .28s ease;
  }
  #an-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  #an-menu-overlay a {
    color: #fff;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: -0.01em;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    transition: background .2s ease, transform .2s ease;
  }
  #an-menu-overlay a:hover,
  #an-menu-overlay a:active {
    background: rgba(255,255,255,0.06);
    transform: scale(1.02);
  }
  #an-menu-overlay a.is-cta {
    margin-top: 1rem;
    background: #fff;
    color: #0a0a0a;
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
    font-weight: 500;
  }

  body.an-menu-open { overflow: hidden; }
}

/* ============================================================
   Tiny phones (<= 420px) — iPhone SE / older Androids
   ============================================================ */
@media (max-width: 420px) {
  .max-w-\[1200px\].mx-auto.px-6,
  .max-w-\[1200px\].mx-auto.px-10,
  .max-w-\[1400px\].mx-auto.px-10,
  .max-w-\[1400px\].mx-auto.px-10.lg\:px-24 {
    padding-inline: 0.875rem;
  }

  .text-6xl { font-size: clamp(1.75rem, 10.5vw, 2.25rem); }
  .text-5xl { font-size: clamp(1.625rem, 9.5vw, 2rem); }
  .text-4xl { font-size: clamp(1.375rem, 7.5vw, 1.75rem); }

  .tracking-tighter, .tracking-tight { letter-spacing: -0.02em; }

  nav img[alt="Aton De Rosa signature"],
  header img[alt="Aton De Rosa signature"],
  footer img[alt="Aton De Rosa signature"] { height: 1.75rem !important; }
  nav img[alt="Aton De Rosa"],
  header img[alt="Aton De Rosa"],
  footer img[alt="Aton De Rosa"]           { height: 1.75rem !important; }

  #an-menu-overlay a { font-size: 1.625rem; }
  #an-menu-overlay a.is-cta { font-size: 1rem; padding: 0.625rem 1.5rem; }

  .atelier-norden-mobile-marker { display: none; }
}

@media (max-width: 900px) {
  body { overflow-x: hidden; }
}

/* ============================================================
   LANDSCAPE MOBILE (orientation landscape AND short viewport)
   Avoid the hero from being a full 100dvh-tall claustrophobic strip
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
  /* Hide nav pill in landscape phones, show hamburger */
  nav.fixed.top-0 .inline-flex.items-center.rounded-full,
  header.fixed .inline-flex.items-center.rounded-full {
    display: none !important;
  }

  /* Hamburger reuses the same styles defined under <=600px;
     but those don't apply at >600px width. Redeclare here. */
  #an-hamburger {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10000;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(10,10,10,0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
  }
  #an-hamburger svg { width: 18px; height: 18px; display: block; }

  #an-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .28s ease, transform .28s ease;
  }
  #an-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  #an-menu-overlay a {
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 300;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
  }
  #an-menu-overlay a.is-cta {
    margin-top: 0.5rem;
    background: #fff;
    color: #0a0a0a;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
  }
  body.an-menu-open { overflow: hidden; }

  /* Hero: keep side-by-side compact, drop to auto height */
  section.relative.w-full.h-\[100dvh\],
  section.relative.w-full.h-\[100dvh\].md\:h-screen {
    height: auto !important;
    min-height: 100dvh;
  }

  /* Crystal column: half width, full height side-by-side even on phone */
  section.h-\[100dvh\] > div.relative.w-full.h-\[50vh\] {
    position: absolute !important;
    right: 0; top: 0;
    width: 50% !important;
    height: 100% !important;
  }

  /* Text column: occupies left half */
  section.h-\[100dvh\] > div.relative.z-10.w-full {
    width: 50% !important;
    padding-left: 1.5rem !important;
    padding-right: 1rem !important;
    padding-top: 4rem !important;
  }

  /* Cap h1 in landscape phone so it fits the strip */
  section.h-\[100dvh\] h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    margin-bottom: 0.5rem !important;
  }

  section.h-\[100dvh\] p { font-size: 0.8rem !important; margin-bottom: 1rem !important; }

  /* Shrink the SCROLL indicator */
  section.h-\[100dvh\] .bottom-8 { bottom: 0.5rem !important; }

  /* Hamburger stays compact */
  #an-hamburger { width: 38px; height: 38px; top: 0.5rem; right: 0.5rem; }
  #an-hamburger svg { width: 18px; height: 18px; }

  /* Hide overlay anchors smaller */
  #an-menu-overlay { gap: 0.875rem; }
  #an-menu-overlay a { font-size: 1.25rem; padding: 0.375rem 1rem; }
  #an-menu-overlay a.is-cta { font-size: 0.95rem; padding: 0.5rem 1.25rem; margin-top: 0.5rem; }

  /* Stack CTAs side-by-side instead of vertical */
  section.h-\[100dvh\] .blur-in.flex.flex-col {
    flex-direction: row !important;
    gap: 0.5rem !important;
  }
  section.h-\[100dvh\] .blur-in.flex.flex-col button,
  section.h-\[100dvh\] .blur-in.flex.flex-col a {
    width: auto !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
  }
}

/* atelier-norden-mobile-marker v3 — fixes SCROLL/CTA overlap + venture-card image shrinkage */
.__an_mobile_v3__ { content: "mobile-fixes-v3-scroll-cue-and-venture-card"; }

/* ============================================================
   v4 — say-hello clip fix
   Bug: on mobile portrait (especially 360x640), the hero section
   uses h-[100dvh] with overflow:hidden. The CTA stack (Explore Work
   on top, Say hello below in flex-col) extends past 100dvh, so the
   "Say hello" outline button gets visually cut in half by the
   following "SELECTED VENTURES" section (which starts exactly at
   the hero bottom, with no buffer).

   Fix scope: phones in PORTRAIT only (max-width:600px AND NOT
   landscape phones — landscape already has dedicated rules that
   stack CTAs side-by-side).

   Strategy:
   - Convert the hero from a fixed 100dvh height to min-height:100dvh
     so it can grow to contain its content when needed.
   - Drop overflow:hidden on the hero on phones so any tiny overshoot
     can't clip the CTA.
   - Add ample bottom padding inside the hero text column so the CTAs
     sit comfortably above the next section (>= 24px breathing room
     before SELECTED VENTURES).
   - Tighten the CTA vertical gap slightly so both buttons + heading
     all fit on a 640px viewport without being squeezed.
   ============================================================ */
@media (max-width: 600px) and (orientation: portrait) {
  /* Hero shell: allow growth, stop clipping the CTA tail */
  section.relative.w-full.h-\[100dvh\],
  section.relative.w-full.h-\[100dvh\].md\:h-screen {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  /* Hero text column: breathing room under the CTA stack */
  section.h-\[100dvh\] > div.relative.z-10.w-full {
    padding-bottom: 3.5rem !important;
  }

  /* CTA stack: tighter gap so Say hello + Explore Work + heading + intro
     all fit comfortably; reduce button vertical padding a touch. */
  section.h-\[100dvh\] .blur-in.flex.flex-col {
    gap: 0.625rem !important;
  }
  section.h-\[100dvh\] .blur-in.flex.flex-col > a,
  section.h-\[100dvh\] .blur-in.flex.flex-col > button {
    padding-block: 0.75rem !important;
    min-height: 44px;
  }

  /* Belt-and-braces: if the hero still abuts ventures, push ventures
     down a hair to guarantee >=24px gap from the last CTA. */
  section.bg-bg.py-12 { padding-top: 2rem !important; }
}

.__an_mobile_v4__ { content: "mobile-fixes-v4-say-hello-clip-fix"; }