/* ============================================================
   MTC SPACES — MOBILE / iOS REFINEMENTS
   Loaded LAST on every page so it wins over main.css,
   responsive.css and the per-page stylesheets.

   SCOPE RULE — the desktop ("web") layout must not change.
   Every rule in this file is therefore either:
     a) inside @media (max-width: 767px) / (max-width: 860px), or
     b) a safe-area env() inset, which resolves to 0px on any
        device without a notch / home indicator (i.e. all desktops).
   Nothing here alters the ≥1024px rendering.

   Reference devices (CSS px, portrait):
     iPhone SE / 8            375 x 667
     iPhone 13 mini           375 x 812
     iPhone 14 / 15 / 16      390 x 844
     iPhone 15 / 16 Pro       393 x 852
     iPhone 16 Pro Max        440 x 956
   ============================================================ */


/* ============================================================
   1. SAFE AREAS — notch, Dynamic Island, home indicator
   The <meta name="viewport"> now carries viewport-fit=cover so the
   hero art runs edge to edge instead of being letterboxed in
   landscape. That makes the page responsible for keeping its own
   UI out from under the hardware, which is what these rules do.
   max() is used so the existing spacing is the floor and the inset
   only ever adds to it.
   ============================================================ */

@media (max-width: 767px) {

  nav {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  nav.scrolled {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* Drawer: clear the island at the top and the home indicator at the
     bottom, and keep links off the notch when the phone is sideways. */
  .mobile-nav-drawer {
    padding-top: max(80px, calc(env(safe-area-inset-top) + 56px));
    padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 32px));
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(40px, env(safe-area-inset-right));
  }

  /* The close button sat at top:24px — underneath the Dynamic Island
     on the 14/15/16 Pro, where it could not be tapped. */
  .mobile-nav-close {
    top: max(24px, calc(env(safe-area-inset-top) + 12px));
    right: max(24px, calc(env(safe-area-inset-right) + 12px));
  }

  /* Room pages (bedroom.html, kitchen.html, …) float this over the photo. */
  .back-btn {
    top: max(14px, calc(env(safe-area-inset-top) + 10px));
    left: max(14px, calc(env(safe-area-inset-left) + 10px));
  }

  /* Nothing should end up beneath the home indicator. */
  footer {
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
  }
}


/* ============================================================
   2. iOS VIEWPORT HEIGHT
   Mobile Safari resolves 100vh against the viewport with the
   toolbars *collapsed*, so a 100vh block is taller than what the
   user can actually see on load and its lower content is hidden
   behind the toolbar. svh = smallest viewport height, which is the
   stable, always-visible measurement.
   ============================================================ */

@media (max-width: 767px) {

  .space-chooser {
    min-height: calc(100svh - 100px);
  }

  /* client-expectation.html */
  .quiz-page,
  .quiz-wrap {
    min-height: 100svh;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 767px) {
    /* dvh tracks the toolbar as it collapses, so the hero fills the
       screen at rest without ever overflowing it. */
    #hero {
      height: 100dvh;
    }
  }
}


/* ============================================================
   3. HOME PAGE (index.html) — the space chooser
   This page was added after responsive.css was written and had no
   mobile rules of its own, which is where the header collision came
   from. Fixes below, in order of severity.
   ============================================================ */

@media (max-width: 767px) {

  /* (a) The header CTA was rendering at full desktop size on top of
     the logo AND under the hamburger — three overlapping elements in
     an 86px bar. The drawer already carries "Book Consultation" as a
     full-width button, so the header copy is redundant on phones. */
  .home-nav-cta {
    display: none;
  }

  /* (b) With the CTA gone the bar is logo + toggle only, so the
     chooser needs just enough clearance to sit under it. It was
     starting at y=50 — behind the fixed nav. */
  .space-chooser {
    padding: calc(96px + env(safe-area-inset-top)) 20px 56px;
    gap: 20px;
    justify-content: center;
  }

  .chooser-intro {
    padding-top: 0;
  }

  /* (c) 7px with 4px of letter-spacing is unreadable on a phone and
     below Apple's 11pt guidance. */
  .chooser-intro .section-label {
    font-size: 11px;
    letter-spacing: 2.5px;
    margin-bottom: 14px;
  }

  .chooser-title {
    font-size: clamp(30px, 8.5vw, 40px);
    line-height: 1.18;
    margin: 10px 0 8px;
  }

  .chooser-sub {
    font-size: 14px;
  }

  /* (d) 44px of padding inside a ~335px card left the text in a
     167px column. */
  .space-content {
    padding: 24px 20px 26px;
  }

  .space-eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 8px;
  }

  .space-name {
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.15;
  }

  .space-desc {
    font-size: 13px;
    max-width: 100%;
    margin-bottom: 16px;
  }

  /* Underlined text link → a real 44px-tall target. */
  .space-cta {
    font-size: 11px;
    letter-spacing: 2px;
    min-height: 44px;
    align-items: center;
    padding-bottom: 0;
  }

  /* The desktop overlay only darkens the bottom quarter of the frame
     (transparent above 75%), which is fine on a tall card where the
     copy sits in that band. On a phone the same copy fills most of a
     much shorter card and rides up into the clear area — white text
     over a sunlit wall. Carry the gradient all the way up instead. */
  .space-overlay {
    background: linear-gradient(
      0deg,
      rgba(10, 8, 6, 0.92) 0%,
      rgba(10, 8, 6, 0.78) 38%,
      rgba(10, 8, 6, 0.52) 68%,
      rgba(10, 8, 6, 0.30) 100%
    );
  }

  .space-frame {
    inset: 6px;
  }

  .home-stats {
    padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
    gap: 20px 28px;
  }

  .home-stat-label {
    font-size: 11px;
    letter-spacing: 1.5px;
  }
}


/* ============================================================
   3b. LANDING HERO (residential / commercial)
   ============================================================ */

@media (max-width: 767px) {

  /* 12vw made the longest line ("Meets Precision") land exactly on the
     24px padding edge at every iPhone width — centred, but with no air
     around it. Easing the scale factor gives the block a real margin
     without changing the desktop clamp. */
  .hero-title {
    font-size: clamp(36px, 10.6vw, 60px);
    line-height: 1.1;
    margin-bottom: 20px;
  }

  /* The vignette is transparent through the middle 40% — which is where
     the headline sits. Over a bright frame of the hero video (a sunlit
     marble wall) the white type loses its contrast. Adding a vertical
     scrim behind the copy keeps the type readable whatever frame the
     video happens to be paused on, without flattening the image. */
  .hero-vignette {
    background:
      linear-gradient(
        180deg,
        rgba(10, 8, 5, 0.55) 0%,
        rgba(10, 8, 5, 0.30) 30%,
        rgba(10, 8, 5, 0.30) 70%,
        rgba(10, 8, 5, 0.60) 100%
      ),
      radial-gradient(ellipse at center, transparent 35%, rgba(10, 8, 5, 0.7) 100%);
  }
}


/* ============================================================
   3c. ANCHOR LANDING POSITION
   The nav is position:fixed and 76px tall on every iPhone width
   (69px once .scrolled shrinks it). Every link in the drawer is an
   in-page anchor, and without a scroll margin each jump parked the
   section's heading underneath that bar — the user landed on a
   section whose title they could not see. blog.css and commercial.css
   already do this for their own headings; these are the sections that
   were missed.
   ============================================================ */

@media (max-width: 767px) {

  #hero, #services, #projects, #factory, #experience, #leadership,
  #booking, #process, #testimonials, #style-quiz, #quiz-style,
  #brands, #reels, #philosophy, #journal,
  section[id],
  .article-body h2,
  .article-body h3 {
    scroll-margin-top: calc(92px + env(safe-area-inset-top));
  }
}


/* ============================================================
   4. TAP TARGETS — Apple HIG minimum is 44 x 44 pt
   Measured on-device: the newsletter/consent checkboxes rendered at
   15-16px and the file input at 21px tall.
   ============================================================ */

@media (max-width: 767px) {

  input[type="checkbox"],
  input[type="radio"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
    /* Extends the touchable area to 44px without moving the box. */
    outline-offset: 0;
  }

  /* The label is the real target — make the whole row tappable. */
  .checkbox-row,
  label.checkbox-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 0;
    line-height: 1.4;
    cursor: pointer;
  }

  input[type="file"] {
    min-height: 44px;
    padding: 11px 0;
    width: 100%;
    box-sizing: border-box;
  }

  input[type="file"]::-webkit-file-upload-button {
    min-height: 36px;
    padding: 8px 14px;
  }

  /* Inline text links that act as buttons. */
  .view-all,
  .blog-card__more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Footer / utility link lists: give rows real vertical separation
     so neighbouring links can't be mis-tapped. */
  footer a,
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}


/* ============================================================
   5. LEGIBLE TYPE
   The eyebrow/label style is 9-11px by design on desktop, where it
   reads fine at arm's length. On a phone held closer but at a much
   higher pixel density, anything under ~11px with wide tracking
   turns to mush. These lift only the smallest cases.
   ============================================================ */

@media (max-width: 767px) {

  .section-label,
  .booking-eyebrow,
  .stat-label,
  .lb-role,
  .blog-label,
  .blog-card__cat,
  .step-num,
  .c-meta-k,
  .c-label {
    font-size: 11px;
    letter-spacing: 2.5px;
  }

  .btn-primary,
  .btn-secondary,
  .home-nav-cta,
  .form-submit,
  .quiz-submit {
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .hero .hero-content p,
  .c-shot-cap,
  .blog-card__meta,
  .blog-card__meta span {
    font-size: 11px;
  }

  /* Room-page hero kicker ("MTC SPACES") was 10px. */
  .hero-content p {
    font-size: 11px;
    letter-spacing: 2.5px;
  }

  /* "Scroll" cue under the landing hero was 9px. */
  .hero-scroll span {
    font-size: 11px;
    letter-spacing: 2.5px;
  }

  /* Breadcrumb links rendered 16px tall — too small to hit reliably
     when they sit next to a "/" separator and each other. */
  .article-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .article-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
  }
}


/* ============================================================
   6. FORM ERGONOMICS
   16px on focusable fields is what stops iOS from zooming the whole
   page when the keyboard opens (responsive.css already does this for
   text/email/tel — these are the ones it missed).
   ============================================================ */

/* Nested inside the phone breakpoint on purpose: desktop Safari also
   supports -webkit-touch-callout, so the @supports test alone would
   match there and change desktop field sizing. */
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    input[type="date"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="password"],
    .form-field,
    .quiz-input,
    .quiz-textarea {
      font-size: 16px;
    }
  }
}

@media (max-width: 767px) {

  .form-field,
  .quiz-input,
  .quiz-textarea {
    min-height: 48px;
    padding: 12px 14px;
    box-sizing: border-box;
  }

  textarea.form-field,
  .quiz-textarea {
    min-height: 110px;
  }

  .form-submit,
  .quiz-submit {
    width: 100%;
    min-height: 52px;
  }
}


/* ============================================================
   7. HORIZONTAL CAROUSELS
   These tracks are meant to overflow their container. Give them
   momentum scrolling, hide the bar, and let the first/last card
   clear the screen edge instead of being cut in half by it.
   ============================================================ */

@media (max-width: 767px) {

  .services-scroll-track,
  .c-strip-track,
  .brands-track,
  .reels-track {
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 20px;
    scrollbar-width: none;
  }

  .services-scroll-track::-webkit-scrollbar,
  .c-strip-track::-webkit-scrollbar,
  .brands-track::-webkit-scrollbar,
  .reels-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}


/* ============================================================
   8. LANDSCAPE — short viewports
   A 100svh hero on a phone turned sideways is ~390px tall; the
   headline and CTA can't both fit, so let the section grow to its
   content instead of clipping it.
   ============================================================ */

@media (max-width: 926px) and (orientation: landscape) and (max-height: 500px) {

  #hero {
    height: auto;
    min-height: 100svh;
    padding-top: 84px;
    padding-bottom: 48px;
  }

  .space-chooser {
    min-height: 0;
    padding-top: calc(88px + env(safe-area-inset-top));
  }

  .space-box,
  .space-box:link,
  .space-box:visited {
    min-height: 58vh;
  }

  .mobile-nav-drawer {
    gap: 14px;
    padding-top: max(56px, calc(env(safe-area-inset-top) + 44px));
    overflow-y: auto;
  }

  .mobile-nav-link {
    font-size: 22px;
  }
}


/* ============================================================
   9. MOTION / RENDERING
   ============================================================ */

@media (max-width: 767px) {

  /* Hover transforms have no meaning on touch and leave cards stuck
     in their hovered state after a tap on iOS. */
  .space-box:hover,
  .gallery-card:hover,
  .gallery-card:hover img,
  .project-card:hover {
    transform: none;
  }

  /* Fixed/parallax backgrounds are not composited on iOS and cause
     visible tearing while scrolling. */
  [style*="background-attachment: fixed"],
  .parallax,
  .hero-bg {
    background-attachment: scroll;
  }
}