/* ============================================================
   LAYOUT.CSS — Responsive Grid & Breakpoints
   ============================================================
   PURPOSE:
     Controls the overall page structure at different screen
     sizes. This is where mobile/tablet/desktop layout rules
     live. Think of this as the skeleton of every section.

   SAFE TO EDIT:
     - Breakpoint pixel values (768px, 480px) if you want
       the layout to switch at a different screen width
     - gap values between columns to adjust spacing

   DO NOT MODIFY:
     - grid-template-columns for two-column sections unless
       you want to redesign the section layout entirely.
       Changing 1fr 1fr to something else will shift both
       the About and Contact sections simultaneously.
============================================================ */


/* ── Two-column sections (About, Contact) ────────────────────
   Both #about and #contact use a 50/50 two-column grid.
   The large gap creates the visual breathing room between
   the image/info column and the text/form column.
────────────────────────────────────────────────────────────── */
#about,
#contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center; /* vertically center columns */
}

/* `1fr` columns default to an implicit minimum of `auto`, not `0` —
   meaning a track won't shrink past its content's min-content width.
   On narrow phones (confirmed ≤340px in a real browser), the contact
   form column's content pushed the track wider than the viewport,
   overflowing #contact (and everything inside it) by 5-20px. Setting
   min-width: 0 on the direct grid-item children removes that implicit
   floor so the column can shrink to fit, same as the well-known fix
   for this CSS Grid behavior. Applies at every breakpoint — harmless
   at desktop widths since there's no shortage of space to trigger it. */
#about > *,
#contact > * {
  min-width: 0;
}


/* ── Mobile Nav Toggle — default (desktop) state ─────────────
   Hidden by default; flipped to display:flex inside the ≤768px
   media query below. Declared here (not in hero.css, which loads
   AFTER this file) so the cascade order is unambiguous — see the
   comment on .nav-toggle in hero.css for why this split exists.
────────────────────────────────────────────────────────────── */
.nav-toggle {
  display: none;
}


/* ── IMPORTANT — Why some selectors below are prefixed with `body` ──
   index.html loads this file BEFORE components.css and every
   sections/*.css file. When a media-query rule here and an
   unconditional rule in one of those later files target the same
   selector with equal CSS specificity, the LATER-LOADED file wins
   the tie — regardless of viewport width. That silently disabled
   most of this file's responsive overrides (confirmed by rendering
   the site at mobile widths: services grid, trust bar, form rows,
   process steps, nav, sticky bar, etc. all stayed in their desktop
   state). Prefixing a selector with `body` adds one type-selector's
   worth of specificity — just enough to win outright, in any load
   order, without !important and without reordering the documented
   CSS load sequence. Selectors that already win on their own (same
   file as their base rule, or already higher-specificity via
   :nth-child) are left unprefixed.
────────────────────────────────────────────────────────────── */


/* ── Tablet Breakpoint — 1024px and below ────────────────────
   Reduce the large gap between columns on medium screens.
   Columns still remain side-by-side.
────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #about,
  #contact {
    gap: 3rem;
  }

  /* Services grid: 3 columns feels cramped on tablets — step down to 2.
     Base rule lives in services.css (loads after this file) — needs
     the `body` specificity bump, see note above. */
  body .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Process steps: same tablet step-down as services grid above.
     Base rule lives in contact.css (loads after this file) — needs
     the `body` bump too. Border fix below already wins on its own
     because :nth-child adds specificity. */
  body .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-step:nth-child(2) {
    border-right: none;
  }
}


/* ── Mobile Breakpoint — 768px and below ─────────────────────
   Stack all two-column layouts into single columns.
   Nav secondary items are hidden; mobile sticky bar appears.
────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Mobile nav toggle (hamburger): hidden on desktop, shown here.
     No prefix needed — the default display:none for .nav-toggle
     lives earlier in THIS file (not in hero.css), so there's no
     cross-file tie to break. */
  .nav-toggle {
    display: flex;
  }

  /* Nav links become a dropdown panel instead of a horizontal list.
     Hidden by default; .nav-open on <nav> (set by navigation.js when
     the hamburger is clicked) reveals it. position: absolute is
     relative to <nav>, which is already position: fixed.
     #main-nav prefix: base rule (display:flex) is in hero.css. */
  #main-nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 0.75rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  }

  /* Must use the SAME #main-nav-ID specificity tier as the closed-state
     rule above — a plain "nav.nav-open .nav-links" (class+type, no ID)
     would lose to "#main-nav .nav-links" (ID+class) regardless of
     source order, since ID always outranks class in CSS specificity.
     With both at ID+class, this rule wins because it comes later in
     the same file. */
  #main-nav.nav-open .nav-links {
    display: flex;
  }

  .nav-links li {
    width: 100%;
    list-style: none;
  }

  /* #main-nav prefix: hero.css sets a competing font-size on the
     same compound selector (.nav-links a). */
  #main-nav .nav-links a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
  }

  .nav-links li:last-child a {
    border-bottom: none;
  }

  /* Hide nav-cta on mobile instead of just resizing it. Measured in
     a real browser: with the logo lockup (~206-224px) + nav-cta
     ("Consultation gratuite", ~160-176px) + the hamburger all in one
     unwrapped flex row, the hamburger gets pushed past the right edge
     of the nav below ~430px wide — i.e. on every real phone, the menu
     button you came here to add is the thing that goes missing. The
     mobile sticky bar (components.css) already shows this exact same
     CTA text + destination, so dropping it from the nav here costs
     nothing functionally and leaves the hamburger comfortably on-screen
     with room to spare even at 320px.
     #main-nav prefix: hero.css sets display on the same selector. */
  #main-nav .nav-cta {
    display: none;
  }

  /* Form inputs: 16px (1rem) minimum prevents iOS Safari from
     auto-zooming the page when a field is focused.
     `body` prefix: components.css sets a competing font-size. */
  body input,
  body select,
  body textarea {
    font-size: 1rem;
  }

  /* Stack two-column grid sections */
  #about,
  #contact {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Stack services grid to single column. `body` prefix: base rule
     is in services.css. */
  body .services-grid {
    grid-template-columns: 1fr;
  }

  /* Show mobile sticky CTA bar. `body` prefix: components.css sets
     display:none on the same selector with equal specificity. */
  body .mobile-sticky-bar {
    display: flex;
  }

  /* Lift the floating language toggle above the mobile sticky bar —
     both are bottom-fixed, so without this offset they'd overlap.
     Uses --sticky-bar-height (see components.css / navigation.js)
     instead of a fixed rem value: a hardcoded offset undershoots
     whenever the bar grows a second line (narrow phones, larger
     font/zoom, or simply the longer French CTA text), letting the
     bar cover the toggle button underneath it. */
  body .lang-toggle-float {
    bottom: calc(var(--sticky-bar-height, 80px) + 0.8rem);
    transition: bottom 0.2s ease;
  }

  /* Add bottom padding to footer so the fixed mobile-sticky-bar never
     overlaps real footer content. `body` prefix: footer.css sets a
     competing padding shorthand.
     Uses --sticky-bar-height (kept in sync with the bar's ACTUAL
     rendered height by a ResizeObserver in navigation.js) instead of a
     hardcoded number — the bar's height varies with FR/EN text length,
     text wrapping on narrow screens, and font-size/zoom settings, so a
     fixed value can under-shoot it and hide the last footer links. */
  body footer {
    padding-bottom: var(--sticky-bar-height, 80px);
  }

  /* Tighten form card padding on small screens. `body` prefix:
     hero.css sets a competing padding value. */
  body .hero-form-card {
    padding: 1.8rem 1.4rem;
  }

  /* Stack form rows to single column on mobile. `body` prefix:
     components.css sets a competing grid-template-columns. */
  body .form-row {
    grid-template-columns: 1fr;
  }

}


/* ── Small Mobile Breakpoint — 480px and below ───────────────
   Further adjustments for very small phone screens.
────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Process steps: single column on small phones. `body` prefix:
     base rule is in contact.css. */
  body .process-steps {
    grid-template-columns: 1fr;
  }

  /* Replace right borders with bottom borders for vertical stack.
     `body` prefix on the plain .process-step rule: contact.css's
     base rule sets a competing border-right with equal specificity.
     (border-bottom has no competing declaration, so it already
     worked, but border-right: none did not — keeping both under
     the same prefixed rule for clarity.) */
  body .process-step {
    border-right: none;
    border-bottom: 1px solid rgba(197,217,231,0.2);
  }
  .process-step:last-child {
    border-bottom: none;
  }

  /* Hero project type tabs: 2 across (already default, explicit here) */
  .project-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}