/* responsive.css — tablet + mobile refinements.
 * Kept in its own file (loaded LAST) so a future Claude-design update, which
 * rewrites site.css / theme-override.css, can't wipe these fixes.
 *
 * Fixes addressed here:
 *  1. Hero stayed a 2-column grid on tablet/mobile because Hero.jsx sets
 *     grid-template-columns as an INLINE style, which beats the existing
 *     media query. The portrait column then collapsed to 0px (the 96px gap
 *     plus the headline's min-content width ate all the space), so the
 *     portrait vanished on phones and the copy was squeezed + indented.
 *  2. Headline could run to the very edge on narrow screens.
 *  3. Section rhythm (96px) was too tall for phones, making the page
 *     needlessly long.
 *  4. The ARNEL wordmark was boxed in by side padding on small screens.
 */

/* ---------------------------------------------------------------
   HERO — stack on tablet and below
   --------------------------------------------------------------- */
@media (max-width: 980px) {
  /* !important is required: it overrides the inline style on .hero-grid */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 4vw, 40px) !important;
    align-items: start;
  }

  /* Portrait sits above the copy, centered, at a sane size */
  .hero-portrait-wrap {
    max-width: min(340px, 66vw) !important;
    width: 100%;
    margin: 0 auto;
  }
  .hero-grid > .reveal { width: 100%; min-width: 0; }

  /* The portrait's Reveal wrapper is the first grid child — keep it first */
  .hero-grid > .reveal:has(.hero-portrait-wrap) { order: -1; }

  .hero { padding-top: 88px; }
  .hero-body { max-width: 60ch; }
}

/* ---------------------------------------------------------------
   FLUID TYPE — never let headings touch the edge
   --------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-name { font-size: clamp(34px, 8.5vw, 64px); }
  .h2 { font-size: clamp(26px, 5.6vw, 40px); }
}

@media (max-width: 620px) {
  .hero-name { font-size: clamp(32px, 11vw, 52px); }
  .h2 { font-size: clamp(24px, 7.4vw, 34px); }
  .hero-body { font-size: 17px; }

  /* Tighter vertical rhythm so the page isn't endlessly long on a phone.
     IMPORTANT: .container's override only sets left/right — using the
     `padding: 0 20px` shorthand here would zero out .section's top/bottom
     padding whenever both classes land on the same element (many sections
     are className="section container"), since .container is declared
     later and wins on equal specificity. That bug crushed every section's
     eyebrow label flush against the previous section — sections went to
     0px top/bottom padding on mobile. */
  .section { padding: 64px 20px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .container { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 400px) {
  .section { padding: 56px 16px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .hero { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------
   ARNEL WORDMARK (name-reveal) — give it the full width on small screens
   --------------------------------------------------------------- */
@media (max-width: 980px) {
  .name-reveal-bleed { padding: 0 clamp(8px, 2vw, 24px); }
  .name-reveal-section { padding-top: 56px; }
}

@media (max-width: 620px) {
  .name-reveal-bleed { padding: 0 10px; }
  .name-reveal-section { padding-top: 40px; padding-bottom: 40px; }
  /* Hint is hidden on touch (no cursor to move) — the trail auto-plays */
  .name-reveal-hint { display: none; }
}

/* ---------------------------------------------------------------
   TOUCH ERGONOMICS
   --------------------------------------------------------------- */
@media (hover: none) {
  /* Comfortable tap targets */
  .nav-link, .footer-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* .testi-dot is a real tap target (jumps to that testimonial) but must
     stay visually small — giving it a 44px min-width/height directly blew
     the little indicator up into a giant circle and, on the Lifestyle fan
     carousel, widened that whole row past the screen edge, pushing the
     prev/next arrows off-canvas. Keep the dot's own size untouched and
     give it an invisible 44x44 hit area via ::before instead. .fan-dot
     has no onClick (purely decorative), so it gets no tap target at all. */
  .testi-dot { position: relative; }
  .testi-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Hover-only flourishes shouldn't stick on tap */
  .work-click:hover, .lifestyle-item:hover { transform: none; }
}

/* ---------------------------------------------------------------
   WORK GALLERY — keep the desktop "scroll down, move sideways"
   pin effect on tablet/mobile.

   site.css used to unpin this below 900px (turning it into a swipe
   carousel). Those overrides were removed there, and Work.jsx no longer
   bails out on mobile; this block just retunes the pin for small screens.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .work-scroll-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;          /* avoids mobile browser-chrome jump */
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
  }
  /* Lead-in so the first card clears the left edge.
     Trailing side: with this pin's math, at 100% scroll the outro card's
     LEFT edge lands at (viewport width − padding-right) — i.e. the
     trailing padding must be AT LEAST as large as the outro card's own
     width, or the card can never fully reach the screen no matter how
     far you scroll. The original 62vw trailing pad was smaller than the
     outro's 76vw width, so it sat permanently ~55px past the right edge
     with unreadable, unreachable cut-off text — trailing pad ≈ outro
     width + a little rest margin. */
  .work-scroll-track {
    padding: 0 88vw 0 8vw;
    gap: var(--space-6);
  }
  /* .work-scroll-card is the plain wrapper <div> that's the ACTUAL flex
     item inside .work-scroll-track (.ws-card is one level deeper, inside
     it). It has no CSS of its own anywhere in the site, so it defaults to
     flex-shrink:1 — with track content far wider than the viewport (by
     design, for the horizontal scroll), the browser was silently
     shrinking every card wrapper to fit, which desynced the visually
     rendered card width from track.scrollWidth (the value the pin's JS
     uses to compute how far to translate). Net effect: the last card
     ("and more") never fully reached the viewport by the end of the
     scroll. flex-shrink:0 stops that. */
  .work-scroll-card { flex: 0 0 auto; }
  /* .ws-intro is a SIBLING of .work-scroll-track (not a child), so it gets
     none of the track's 8vw left padding — it needs its own left inset or
     the eyebrow/heading render flush against the raw screen edge. On a
     real phone (rounded corners, screenshot scaling) that reads as
     clipped text even though nothing is actually cut off. */
  .ws-intro {
    flex: 0 0 76vw;
    padding-left: 8vw;
    padding-right: 6vw;
    margin-bottom: 0;
    box-sizing: border-box;
  }
  .ws-intro-title { font-size: clamp(26px, 7vw, 34px); }
  .ws-intro-desc { max-width: 100%; }
  .ws-card { width: 76vw; }
  .ws-card-media { height: 38svh; }
  /* .ws-outro (the "and more" epilogue card, INSIDE the track) had no
     mobile sizing at all — it was stuck at its desktop fixed width
     (320px), inconsistent with the other cards and cramped on narrow
     phones. Match it to .ws-card and give it the same left inset. */
  .ws-outro {
    flex: 0 0 76vw;
    padding-left: 8vw;
    padding-right: 8vw;
    box-sizing: border-box;
  }
}

@media (max-width: 620px) {
  .work-scroll-track { padding: 0 92vw 0 7vw; }
  .ws-intro, .ws-card, .ws-outro { width: 82vw; flex-basis: 82vw; }
  .ws-card-media { height: 34svh; }
}

/* ---------------------------------------------------------------
   MOBILE NAV — slide-in drawer from the right
   (display:none can't animate, so the panel stays in flow and is
   moved off-canvas with a transform instead)
   --------------------------------------------------------------- */
@media (max-width: 980px) {
  /* .mobile-menu is a child of .nav-bar, so it shares that stacking context.
     The nav row must outrank the drawer or the drawer covers the ✕ and the
     menu can't be closed. */
  .nav-inner { position: relative; z-index: 40; }

  .mobile-menu {
    display: flex !important;      /* beats site.css `display:none` */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 330px);
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 96px 30px 40px;
    background: rgba(9, 9, 10, 0.98);
    border-top: none;
    border-left: 1px solid var(--color-border);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
    z-index: 30;                   /* under .nav-bar (40) so the ✕ stays tappable */

    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform .5s cubic-bezier(.16, 1, .3, 1),
      opacity .35s ease,
      visibility .5s linear;
  }

  .mobile-menu.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Links stagger in behind the panel */
  .mobile-menu .nav-link {
    padding: 14px 0;
    font-size: 19px;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
  }
  .mobile-menu.open .nav-link { opacity: 1; transform: translateX(0); }
  .mobile-menu.open .nav-link:nth-child(1) { transition-delay: .10s; }
  .mobile-menu.open .nav-link:nth-child(2) { transition-delay: .16s; }
  .mobile-menu.open .nav-link:nth-child(3) { transition-delay: .22s; }
  .mobile-menu.open .nav-link:nth-child(4) { transition-delay: .28s; }
  .mobile-menu.open .nav-link:nth-child(5) { transition-delay: .34s; }

  /* Quick-contact block: divider + social icons + copyable email, below
     the nav links and the Contact Me button. */
  .mobile-menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: 20px 0 18px;
    opacity: 0;
    transition: opacity .5s ease;
    transition-delay: .3s;
  }
  .mobile-menu.open .mobile-menu-divider { opacity: 1; }

  .mobile-menu-socials {
    display: flex;
    gap: 10px;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
    transition-delay: .34s;
  }
  .mobile-menu.open .mobile-menu-socials { opacity: 1; transform: translateX(0); }

  .mobile-menu-email {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
    transition-delay: .38s;
  }
  .mobile-menu.open .mobile-menu-email { opacity: 1; transform: translateX(0); }
  .mobile-menu-email-text {
    font-size: 14px;
    color: var(--color-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu .nav-link,
  .mobile-menu-divider,
  .mobile-menu-socials,
  .mobile-menu-email { transition: none; }
}

/* NOTE: deliberately NOT setting `overflow-x: hidden` on html/body here.
   It breaks `position: sticky` descendants in several browsers, and the
   work gallery's pin scroll depends on sticky. Audits at 390/768px show
   scrollWidth === clientWidth already, so no guard is needed. */