/* ============================================================
   Aleida — Mobile & responsive overrides. Loaded last on every page.

   Strategy: the desktop layouts in the component stylesheets already
   stack their grids at 820/880px. This file (1) builds the mobile
   hamburger nav, (2) rebuilds the pinned product section so its
   fixed-size pieces scale to the viewport with svh units, and
   (3) tightens every section so nothing can exceed the screen width.
   ============================================================ */

/* =========================================================
   0 · GLOBAL SAFETY NET — nothing overflows horizontally.
   NB: not svg — the custom cursor's .cur-arrow is absolutely
   positioned in a 0-width box, so max-width:100% would zero it.
   Site SVGs are all small fixed-size icons that can't overflow.
   ========================================================= */
img, video, image-slot, canvas { max-width: 100%; }

/* =========================================================
   1 · HAMBURGER BUTTON  (hidden on desktop, shown ≤760px)
   ========================================================= */
.mob-burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.5px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.mob-burger span {
  display: block;
  width: 17px;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .26s ease, opacity .18s ease;
  transform-origin: center;
}
.mob-burger.active span:nth-child(1) { transform: translateY(7.1px) rotate(45deg); }
.mob-burger.active span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.mob-burger.active span:nth-child(3) { transform: translateY(-7.1px) rotate(-45deg); }

/* =========================================================
   2 · MOBILE MENU OVERLAY
   ========================================================= */
.mob-menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 28px) clamp(24px, 7vw, 48px) max(32px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility 0s linear .24s;
  pointer-events: none;
}
.mob-menu.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .24s ease, visibility 0s linear 0s;
  pointer-events: all;
}
.mob-nav-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mob-nav-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--disp);
  font-size: clamp(27px, 8vw, 42px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
  text-decoration: none;
  padding: clamp(14px, 3.4vw, 20px) 0;
  border-bottom: 1px solid var(--border);
}
.mob-nav-links a:first-child { border-top: 1px solid var(--border); }
.mob-nav-links a::after {
  content: "→";
  font-size: .58em;
  font-weight: 400;
  color: var(--straw);
  letter-spacing: 0;
  flex-shrink: 0;
}
.mob-nav-links a.current { color: var(--straw); }
.mob-nav-links a.current::after { opacity: 0; }
.mob-foot {
  padding-top: clamp(28px, 6vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mob-lang-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mob-lang-btn::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--stone);
  flex-shrink: 0;
}
.mob-book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--straw);
  color: var(--cream);
  border: none;
  border-radius: 40px;
  padding: 16px 28px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   3 · NAV — fixed, cream, hamburger only (≤760px)
   ========================================================= */
@media (max-width: 760px) {
  /* Homepage nav (absolute by default → force fixed & visible) */
  .hv-d-nav {
    position: fixed !important;
    top: 0 !important;
    z-index: 200 !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: rgba(250,247,242,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    height: var(--nav-h);
    padding: 0 clamp(16px, 5vw, 24px);
  }
  /* Inner-page nav — always solid cream so the burger reads */
  .site-nav {
    background: rgba(250,247,242,.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .site-nav .sn-brand { color: var(--ink) !important; }
  .site-nav .mob-burger span { background: var(--ink) !important; }
  .site-nav .mob-burger { border-color: var(--border) !important; }

  /* Hide the desktop nav pieces; show only the burger */
  .hv-d-pill, .hv-d-eng, .hv-d-book,
  .sn-pill,   .sn-lang,  .sn-book { display: none !important; }
  .mob-burger { display: flex; }

  /* Keep nav solid while menu is open */
  body.mob-menu-open .hv-d-nav,
  body.mob-menu-open .site-nav {
    background: rgba(250,247,242,.96) !important;
  }
}

/* =========================================================
   4 · HOMEPAGE HERO — stack, show framed photo below headline
   (hero-variants.css hides .hv-d-shot ≤820px; we bring it back)
   ========================================================= */
@media (max-width: 820px) {
  .hv-d.hero-live { height: auto; min-height: 100svh; }
  .hv-d-grid {
    grid-template-columns: 1fr;
    padding-top: calc(var(--nav-h) + 30px);
    padding-bottom: 54px;
    gap: clamp(24px, 6vw, 36px);
    align-content: center;
  }
  .hv-d-shot {
    display: block !important;
    aspect-ratio: 3 / 2;
    max-height: 320px;
    outline-width: 4px;
    margin-top: 4px;
  }
}
@media (max-width: 480px) {
  .hv-d-shot { aspect-ratio: 4 / 3; max-height: 260px; }
  .hv-d-cap  { font-size: 9.5px; left: 12px; bottom: 12px; padding: 7px 11px; }
}

/* =========================================================
   5 · MARQUEE — slimmer on mobile
   ========================================================= */
@media (max-width: 760px) {
  .v2-marq { padding: 15px 0; }
  .v2-marq .item { font-size: 13px; }
  .v2-marq .item::before { margin: 0 26px; }
}

/* =========================================================
   6 · PRODUCT SECTION — keep the falling animation, but scale
   every piece to the viewport with svh so it always fits.

   The pieces share one centred spot and REPLACE each other
   (phone → dash → underlag), so the cluster only ever needs to
   hold the tallest single piece (the phone). We size the phone
   off svh and make the cluster a touch taller, so nothing spills
   out of the pinned 100svh viewport on any phone.
   ========================================================= */
@media (max-width: 860px) {
  .prod-scroll { height: 280vh; }

  /* anchor content under the nav, not vertically centred */
  .prod-stage { align-items: flex-start; }
  .prod-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: 100svh;
    padding: calc(var(--nav-h) + 18px) clamp(20px, 5vw, 32px) 24px;
    gap: clamp(14px, 3vw, 24px);
    align-content: start;
  }
  .prod-head { text-align: left; }
  .prod-head h2 { font-size: clamp(30px, 6.6vw, 46px); }
  .prod-head p { font-size: 15.5px; max-width: 46ch; }

  /* the cluster holds whichever piece is on screen. The phone scales
     with svh, but the dash + card are content-height, so give the
     cluster a floor that always clears them (~300px) */
  .ps-cluster {
    height: clamp(300px, 55svh, 446px);
    width: 100%;
    margin: 0 auto;
  }
  /* phone — sized off the viewport height, proportions locked,
     always a touch shorter than the cluster */
  .ps-cluster .hv-phone {
    width: auto;
    height: min(52svh, 424px);
    aspect-ratio: 286 / 580;
    padding: clamp(8px, 2.2vw, 11px);
  }
  .ps-cluster .hv-phone .screen { border-radius: clamp(22px, 6vw, 30px); }

  /* recruiter list + underlag card: cap to viewport width */
  .ps-cluster .hv-dash   { width: min(360px, calc(100vw - 44px)); }
  .ps-cluster .ps-detail { width: min(340px, calc(100vw - 44px)); }
}

/* phones: keep the full underlag card (summary + strengths + follow-up)
   so it actually explains the product — just compact it so it stays
   shorter than the phone and fits the centred cluster */
@media (max-width: 600px) {
  .prod-head p, .prod-stepper { display: none; }
  .prod-inner { padding-top: calc(var(--nav-h) + 10px); gap: clamp(10px, 2.4vw, 18px); }
  .prod-head h2 { font-size: clamp(28px, 6.2vw, 42px); }
  .ps-cluster .ps-detail { width: min(312px, calc(100vw - 40px)); }

  /* compact the recruiter list so 4 rows stay under the cluster floor */
  .ps-cluster .hv-dash { width: min(318px, calc(100vw - 44px)); }
  .ps-cluster .hv-dash-top { padding: 13px 16px; }
  .ps-cluster .hv-rows { padding: 7px; gap: 2px; }
  .ps-cluster .hv-row { padding: 9px 11px; gap: 11px; }
  .ps-cluster .hv-row .mono-i { width: 28px; height: 28px; }
  .ps-cluster .hv-row .nm { font-size: 13.5px; }

  /* full underlag card, compacted to stay shorter than the phone */
  .ps-cluster .ps-detail .head { padding: 14px 15px 11px; gap: 10px; }
  .ps-cluster .ps-detail .head .av { width: 34px; height: 34px; font-size: 13px; }
  .ps-cluster .ps-detail .head .nm { font-size: 14.5px; }
  .ps-cluster .ps-detail .head .ro { font-size: 11.5px; }
  .ps-cluster .ps-detail .verdict .val { font-size: 16px; }
  .ps-cluster .ps-detail .body { padding: 2px 15px 15px; gap: 9px; }
  .ps-cluster .ps-detail .sec .lbl { margin-bottom: 4px; }
  .ps-cluster .ps-detail .sec .txt { font-size: 12px; line-height: 1.4; }
  .ps-cluster .ps-detail .chips { gap: 6px; }
  .ps-cluster .ps-detail .chips span { font-size: 10.5px; padding: 4px 9px; }
  .ps-cluster .ps-detail .fq { font-size: 11.5px; padding: 8px 10px; gap: 6px; }
}

/* =========================================================
   7 · OUR STORY — single column, contained rotated portraits
   ========================================================= */
@media (max-width: 820px) {
  .story-inner { grid-template-columns: 1fr; gap: clamp(40px, 7vw, 56px); }
}
@media (max-width: 600px) {
  .story { padding: clamp(64px, 12vw, 90px) var(--pad); }
  .story-portraits { justify-content: center; }
  .story-portraits image-slot {
    width: clamp(132px, 38vw, 172px);
    height: clamp(176px, 50.7vw, 229px);
  }
  .story-portraits image-slot:nth-child(2) {
    margin-left: clamp(-28px, -6vw, -20px);
    margin-top: 48px;
  }
}
@media (max-width: 380px) {
  .story-portraits image-slot { width: 40vw; height: 53vw; }
}

/* =========================================================
   8 · BOOKING CALENDAR
   ========================================================= */
@media (max-width: 540px) {
  .bc-times { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 18px; min-height: 0; }
  .bc-main  { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .book-card { padding: 14px; }
  .bc-head   { gap: 10px; }
  .bc-day    { font-size: 12.5px; }
}

/* =========================================================
   9 · FOOTERS — stack
   ========================================================= */
@media (max-width: 540px) {
  .v2-foot-inner, .ab-foot-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .v2-foot .meta, .ab-foot .meta { flex-direction: column; gap: 8px; }
}

/* =========================================================
   10 · ABOUT — founders, believe statement, mission spacing
   ========================================================= */
@media (max-width: 820px) {
  /* centre the founder photo so the offset accent block doesn't
     sit on the screen edge (Noa's block offsets left) */
  .founder .fo-photo { justify-content: center !important; }
  .founder .fo-frame { width: clamp(260px, 64vw, 420px); }
}
@media (max-width: 480px) {
  .b-state p { font-size: clamp(32px, 10vw, 54px); }
}
@media (max-width: 600px) {
  .mission-inner { padding-top: clamp(110px, 22vw, 160px); padding-bottom: 60px; }
}

/* =========================================================
   11 · INNER-PAGE HEROES — clear the fixed nav comfortably
   ========================================================= */
@media (max-width: 540px) {
  .kh-hero-inner { padding-top: 8px; }
  .fk-hero { padding-top: calc(var(--nav-h) + 40px); }
}