/* mobile.css — responsive layer (skill 04). Loaded LAST, after home.css.
   Desktop CSS is NEVER edited; every rule here overrides downward.
   `!important` is used ONLY where services.js writes inline styles each frame
   (the pinned scroll-scrub) and there is no other way to neutralise it. */

/* ============================ TABLET (<= 1024px) ============================ */
@media (max-width: 1024px) {
  .page { width: 100%; }                         /* root fix: unlock fluid width */

  /* type steps down one notch */
  .gate__title    { font-size: 40px; }
  .heading-2      { font-size: 34px; }
  .svc-card__title { font-size: 34px; }

  /* about: two columns collapse to one */
  .about { grid-template-columns: 1fr; gap: var(--space-lg); }

  /* the sideways mosaic is anchored to the pinned services panel; once that
     panel is unwound (phone layer) it can't be placed sanely — hide from tablet
     down so nothing overflows at any small width. */
  .services-section__bg { display: none; }
}

/* ============================= PHONE (<= 768px) ============================= */
@media (max-width: 768px) {

  /* ---------------- Gate ---------------- */
  /* fill the whole visible viewport so only the gate is seen until the user
     scrolls. svh = small viewport height: it matches the visible area exactly,
     unlike 100vh which includes the space behind the mobile browser chrome and
     overshoots (that was the earlier "too tall" feel). Content stays centered
     (justify-content on .gate), and the intro animation covers the full height. */
  .gate {
    height: auto;
    min-height: 100vh;                            /* fallback for browsers without svh */
    min-height: 100svh;
    padding: 40px var(--gutter) 40px;
  }
  .gate > .gate__nav { display: none; }          /* approved mobile design has no nav bar */
  .gate__logo         { width: 168px; }
  .gate__intro-symbol { width: 152px; }
  .gate__title        { font-size: 30px; }
  .heading-2          { font-size: 28px; }       /* section headings (about/services/contact) */

  /* lead form: constrained + centered (not edge-to-edge), field over a
     full-width submit. Applies to the contact form too (same class). */
  .gate__form        { max-width: 320px; }
  .lead-form__row    { flex-direction: column; align-items: stretch; }
  .lead-form__phone  { width: 100%; }
  .lead-form__submit { width: 100%; }

  /* ---------------- About: centered + constrained column ---------------- */
  .about-section { min-height: auto; padding: 56px 0; }
  .about { text-align: center; justify-items: center; }
  .about .accent-rule { margin-inline: auto; }
  .about__body { max-width: 360px; margin-inline: auto; }
  .about-continue { display: none; }             /* cue tied to the scrub; not in mobile design */

  /* ---------------- Services: unwind the pinned scroll-scrub ----------------
     services.js sets inline transform/opacity on these every frame, so the
     overrides must be !important. Result: a normal full-width card stack. */
  .services-section { height: auto !important; }
  .services-pin {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    padding: 60px 0 44px;
  }
  .services-section__head {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    padding-top: 0;
    text-align: center;                          /* centre the heading on mobile */
  }
  .services-section__head .accent-rule { margin-inline: auto; }
  .svc-stack {
    position: static !important;
    inset: auto !important;
    box-sizing: border-box;
    padding-inline: var(--gutter);
    margin-top: 28px;
  }
  .svc-card {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 44px 22px 28px;
    margin-bottom: 16px;
  }
  .svc-card:last-child { margin-bottom: 0; }
  .svc-card__tab   { top: 20px; right: 22px; }
  .svc-card__title { font-size: 26px; max-width: 100%; margin-bottom: 10px; }
  .svc-card__desc  { max-width: 100%; }
  .svc-card__media {
    position: relative !important;
    transform: none !important;
    left: auto;
    top: auto;
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 22px auto 0 !important;
    order: 5;                                     /* image drops below the text */
  }

  /* ---------------- Contact ---------------- */
  .contact__logo { width: 190px; }

  /* ---------------- Footer ---------------- */
  .footer__row   { flex-direction: column; gap: 18px; text-align: center; }
  .footer__brand { justify-content: center; }
  .footer__links { gap: 24px; }
  .footer__links a { padding: 8px 0; display: inline-block; }  /* 44px tap target */
}