/* Phone and tablet refinements for the public site. Loaded last, so these win over the
   base breakpoints in styles.css and theme.css without editing their minified rules. */

/* ---------- Tall portrait tablets (iPad Pro and similar) ----------
   A full-viewport hero on a 1024×1366 screen leaves a huge empty band above the
   headline, so it sizes to its content instead. */

@media (min-width: 801px) and (orientation: portrait) {
  .hero {
    height: auto;
    min-height: calc(100dvh - 120px);
    padding-top: clamp(90px, 10vh, 150px);
    padding-bottom: 120px;
  }

  /* The sideways "EST. 2026 · MAURITIUS" rule is twelve pixels wide but was
     given a whole fractional column, around 164px on an iPad in portrait. The
     stats paid for it: squeezed into 260px, every label broke in two —
     "Countries / connected", "On-time / milestones". The column sizes to its
     contents now, and the room goes where there are words to read. */
  .intro { grid-template-columns: auto 1.5fr 1fr; gap: 3vw; }
  .intro-stats strong { font-size: 32px; }
  .intro-stats span { font-size: 10px; }

  /* The animated scene that used to occupy the right of the hero is gone, so on
     a portrait tablet the headline sat small in a wide empty band. It scales
     with the viewport here instead of stopping at the desktop ceiling, and the
     copy is let out to the full width it is given. */
  .hero h1 { font-size: clamp(64px, 9vw, 104px); }
  .hero-copy { max-width: none; }
  .hero-sub { width: min(470px, 100%); font-size: 16px; }
}


/* ---------- Tablets and phones ---------- */

@media (max-width: 800px) {
  /* The hero fills the first screen. 102px is the strip above it: a 34px status
     bar and a 68px header.

     dvh rather than vh: on a phone 100vh is the height with the browser's own
     address bar hidden, so a vh-sized hero runs under it and pushes the scroll
     cue off the bottom until you scroll — exactly when it is no longer needed.
     dvh tracks what is actually visible. */
  .hero {
    min-height: calc(100dvh - 102px);
    /* A column, so the extra height is shared out rather than left trailing
       below the last line. Equal auto margins put the copy in the middle of
       what is free and press the scroll cue to the floor, where it means
       something. Left as a block, the content stacked from the top and the
       hero ended in nearly 200px of nothing. */
    display: flex;
    flex-direction: column;
  }
  .hero-copy { margin-top: auto; margin-bottom: auto; }

  /* Room between the theme switch and the menu button. */
  .site-header { gap: 12px; }
  .menu-toggle { width: 44px; height: 44px; padding: 13px 6px; margin-right: -6px; }

  /* 44px is the size a fingertip reliably hits. Anything smaller is a link that
     takes two goes, which on a phone reads as the site being broken rather than
     the tap being near-missed. Applied to everything someone taps to get
     somewhere: the menu, the calls to action, and the phone and email lines most
     of all, because those are tapped with intent to ring or write. */
  .site-header nav.open a,
  .topbar a,
  a.contact-line {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* .text-link carries its own underline, so height has to come from padding
     above the text. min-height would centre the text in a 44px box and leave
     the rule stranded at the bottom, reading as a stray line. */
  .text-link { padding-top: 18px; padding-bottom: 5px; }

  /* Three more that were under 44px, given the room without changing how they
     look. The language button sits 4px from the theme switch's own tap area
     (theme.css), so it may only grow by 2px on that side; the 12px gap to the
     logo on its left takes the rest. */
  .site-header .lang-picker > summary::before {
    content: '';
    position: absolute;
    inset: -8px -2px -8px -4px;
  }
  .site-header .brand,
  .footer-logo { position: relative; }
  .site-header .brand::after,
  .footer-logo::after {
    content: '';
    position: absolute;
    inset: -4px 0;
  }

  /* The office line wraps onto its own row rather than squeezing "Mauritius" onto
     two lines, and the scroll cue follows the copy instead of sitting on top of it. */
  .hero-live { flex-wrap: wrap; row-gap: 6px; }
  .hero-live b { font-size: 11px; white-space: nowrap; }
  .hero-live small { flex-basis: 100%; padding-left: 16px; font-size: 10px; line-height: 1.5; }
  .hero-bottom { position: static; margin-top: 0; }

  /* iPhone zooms the page into any field under 16px when it is tapped. */
  .track-form input,
  .quote-form input,
  .quote-form select,
  .quote-form textarea { font-size: 16px; }

  /* The smallest mono labels, nudged up to a readable size on small screens. */
  .tracking-note { font-size: 11px; line-height: 1.6; }
  .intro-stats span { font-size: 10px; }
  .map-live { font-size: 9px; }
  .contact-label { font-size: 10px; }

}

/* ---------- Tablet portrait (between phone and desktop layouts) ---------- */

@media (min-width: 600px) and (max-width: 800px) {
  .intro-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .intro-stats div {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .portal-grid { grid-template-columns: 1fr 1fr; }
  .portal-grid article { padding: 32px 24px 36px; }
}