/* Ali Barber — mobile refinements.
   Loaded after homepage.css and scoped entirely to narrow widths, so the
   desktop layout is untouched. Everything here is a correction or a comfort
   improvement for a phone held in one hand. */

@media (max-width: 700px) {

  /* --- the header must never be covered -------------------------------
     The booking form's submit button is sticky at z-index 12. The header sat
     at 10, so during a scroll through the form the button could ride over the
     logo. The header now sits above everything that scrolls under it. */
  .header { z-index: 30; }

  /* --- touch targets ---------------------------------------------------
     Four utility links were between 13px and 40px tall. The visual size is
     kept; the *touchable* area is padded out to the 44px a fingertip needs. */
  .footer a,
  .footer-note a,
  .text-link,
  .map-card a,
  .powered-credit a,
  a[href*="system.php"],
  a[href^="#top"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 6px;
  }
  .logo { min-height: 48px; display: inline-flex; align-items: center; }
  .menu-toggle { min-height: 44px; min-width: 44px; }

  /* The booking arrow on each service card was a 31px circle. The circle keeps
     its size; the area that responds to a thumb grows around it. */
  .service-item > a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Keep the tiny credit line readable without making it shout. */
  .footer-note { line-height: 1.6; }

  /* --- horizontal card rails ------------------------------------------
     The service and philosophy rails already snap. Two things were missing:
     WebKit still drew a scrollbar under the cards, and a snapped card landed
     flush against the screen edge with no breathing room. */
  .values,
  .service-list {
    scroll-padding-inline: 22px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .values::-webkit-scrollbar,
  .service-list::-webkit-scrollbar { display: none; }

  /* A card should settle where the eye expects it, not halfway off screen. */
  .values > *,
  .service-list > * { scroll-snap-align: start; }

  /* --- photo captions --------------------------------------------------
     Captions sit directly on the photograph. On a bright phone screen the
     lighter images washed the text out, so each caption gets its own gradient
     to sit on rather than relying on the picture being dark enough. */
  .space-card figcaption,
  .space-card .space-card-copy {
    background: linear-gradient(to top, rgba(12, 12, 10, .88) 0%, rgba(12, 12, 10, .55) 55%, rgba(12, 12, 10, 0) 100%);
    padding-top: 42px;
  }

  /* --- focus is visible on a phone too --------------------------------- */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* --- notched phones --------------------------------------------------- */
  .footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* --- the gallery needs width to work ------------------------------------
   Two of the five photographs were sharing a row, leaving each one 115px wide
   on a narrow phone. At that size the picture is unreadable and the caption
   ("Professional finish") breaks mid-word. One photograph per row below 460px:
   each gets the full column, and the captions fit on one line. */
@media (max-width: 460px) {
  .space .space-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .space .space-card--station,
  .space .space-card--treatment,
  .space .space-card--storefront,
  .space .space-card--products {
    grid-column: auto;
    grid-row: auto;
    height: 300px;
  }
}

/* --- small phones ------------------------------------------------------
   Below about 380px the display type stopped being confident and started
   being cramped: "Look sharp." was breaking awkwardly and the section
   headings were pushing the copy far down the page. One step down in scale
   keeps the same character with room to breathe. */
@media (max-width: 380px) {
  .hero h1 { font-size: 52px; }
  .hero-copy { padding: 108px 20px 170px; }
  .story h2, .team h2, .visit h2, .booking h2, .services h2 { font-size: 39px; }
  .story, .team, .visit, .services, .booking { padding: 64px 20px; }
  .section-label { margin-bottom: 32px; }
  .space { padding: 60px 16px; }
}