/* ==========================================================================
   Mechanica — homepage mobile adaptation
   File:  /styles/homepage-mobile.css
   Docs:  dev/homepage-mobile.md

   Scope and rules
   ---------------
   - ADDITIVE ONLY. Every rule lives inside a max-width / landscape-motion
     guard, so the approved 1440px desktop layout is byte-for-byte untouched.
   - Loaded last, after every inline <style> block at the end of <head>.
   - No new metrics that fight the logo band: the client logo row (grid,
     slot count, stagger fade, controls) is owned elsewhere. Nothing here
     selects .spotlight-trust__marks / .hero-trust-list columns, and nothing
     here animates a logo.
   - No boxes, borders, cards, gradients or rules are introduced. Type,
     spacing, gutters and hit areas only. Palette is inherited.
   - Motion: only the two short transitions for colour/opacity that already
     exist elsewhere on the page, and both are switched off under
     prefers-reduced-motion at the foot of this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. One gutter for the whole phone page.
   The inline sheet uses 22px, 24px, 28px and 32px in different blocks, so
   headings and body copy start on slightly different verticals as you scroll.
   A single custom property, applied to the sections that carry body copy,
   puts everything back on one line. The smallest phones get a slightly
   narrower gutter on purpose: 320px needs the extra text width more than it
   needs the margin.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --mob-gutter: max(22px, env(safe-area-inset-left, 0px));
    --mob-gutter-r: max(22px, env(safe-area-inset-right, 0px));
  }

  #hero,
  .sect,
  #how,
  #footer,
  .services-sect,
  #services.spotlight-services,
  #trust-band.spotlight-trust,
  #solutions,
  .cta-sect {
    padding-left: var(--mob-gutter);
    padding-right: var(--mob-gutter-r);
  }
}

@media (max-width: 380px) {
  :root {
    --mob-gutter: max(18px, env(safe-area-inset-left, 0px));
    --mob-gutter-r: max(18px, env(safe-area-inset-right, 0px));
  }
}

/* --------------------------------------------------------------------------
   2. Touch targets — measured, not guessed.
   The Mechanica OS scenario buttons in the "latest use case" block render
   36px tall at 375px because their only height comes from 8px padding plus a
   small line box. They are the control that swaps the OS scene, so they are
   the one thing on the phone that must clear 44px. Height only: the buttons
   keep their existing padding, colour, casing and states, and the row keeps
   wrapping the way it already does.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .solutions-capture-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* The row is left-aligned below 700px already; a slightly larger gap keeps
     two 44px buttons from touching when they wrap onto the same line. */
  .solutions-capture-controls {
    gap: 8px;
    width: 100%;
  }

  .solutions-capture-toolbar {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* --------------------------------------------------------------------------
   3. The Aldous Huxley citation link.
   "Brave New World" is a real outbound link sitting inside the credit line.
   At 375px it measures 124 x 18px: too short to hit comfortably. It becomes
   its own 44px-tall inline box. The phrase is held on one line (nowrap) so
   the enlarged box never pushes the title onto two lines, and the negative
   inline margin pulls the wider box back so the surrounding sentence still
   reads as one credit line rather than a broken row.
   Same 1024px guard as the buttons: at 844 x 390 this link measured 124 x 17.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #trust-band .hero-quote figcaption a,
  #trust-band .spotlight-trust__cite a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    white-space: nowrap;
    text-underline-offset: 4px;
  }

  #trust-band .hero-quote figcaption,
  #trust-band .spotlight-trust__cite {
    align-items: center;
    row-gap: 0;
    line-height: 1.35;
  }
}

/* --------------------------------------------------------------------------
   4. Phone held sideways (844 x 390 and friends).
   The integration block sets `#hero{min-height:max(740px,100svh)}` with no
   media guard, and it is written after the short-viewport block, so on a
   390px-tall landscape phone the hero is nearly two screens tall and the
   motto, the plain line and both buttons start below the fold. Here the hero
   is allowed to size to its content again, keeping the same top padding and
   the same vertical order. Desktop is never in this query.
   -------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 1024px) {
  #hero {
    min-height: auto;
    height: auto;
    justify-content: flex-start;
    padding-bottom: max(56px, env(safe-area-inset-bottom, 0px));
  }

  #hero::after {
    height: 62%;
  }

  /* shorter headline step-down so the three hero lines plus buttons fit in
     the 390px-tall viewport without the artwork being cropped */
  #hero h1 {
    font-size: clamp(1.9rem, 5.2vw, 2.6rem);
    max-width: 22ch;
  }

  #hero .hero-line {
    margin-top: 14px;
    max-width: 46ch;
  }

  .hero-btns {
    margin-top: 16px;
  }
}

/* Mobile anchors use one header offset instead of stacking two offsets. */
@media (max-width: 700px) {
  html { scroll-padding-top: 0; }
  section[id], #how, .sect[id] {
    scroll-margin-top: calc(69px + env(safe-area-inset-top, 0px) + 8px);
  }
}

/* --------------------------------------------------------------------------
   6. Reduced motion — nothing in this file animates.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .solutions-capture-control {
    transition: none;
  }
}
