/* =========================================================
   MOBILE PASS — interior pages only.
   Never loaded on the front page (enqueued conditionally in
   inc/site.php), so the frozen homepage is untouched by design
   rather than by selector-scoping. Covers portrait phones
   (<=600px) and short/landscape phones (<=500px tall, <=900px
   wide, e.g. 844x390) in one combined breakpoint.
========================================================= */

@media (max-width: 600px), (max-height: 500px) and (max-width: 900px) {

  :root {
    --gutter: 20px;
    --space-section: 64px;
    --space-section-tight: 40px;
  }

  /* ---- Header: 64px, logo never wraps ---- */
  .sp-site-header {
    min-height: 64px;
    flex-wrap: nowrap;
  }
  .sp-site-header .sparc-brand-logo,
  .sp-site-header .sparc-brand-logo img {
    flex: none;
    max-width: 150px; /* logo is 270x84 (~3.2:1); 150px keeps the rendered height >=44px */
    height: auto;
  }

  /* ---- Hamburger + close button: 44x44 minimum ---- */
  .sp-navigation .wp-block-navigation__responsive-container-open,
  .sp-navigation .wp-block-navigation__responsive-container-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- Overlay menu: safe-area-inset, scrollable, doesn't trap ---- */
  .sp-navigation .wp-block-navigation__responsive-container.is-menu-open {
    padding-top: calc(var(--space-block) + env(safe-area-inset-top));
    padding-bottom: calc(var(--space-row) + env(safe-area-inset-bottom));
    padding-left: calc(var(--space-element) + env(safe-area-inset-left));
    padding-right: calc(var(--space-element) + env(safe-area-inset-right));
    overscroll-behavior: contain;
  }
  .sp-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
    top: calc(25px + env(safe-area-inset-top));
    right: calc(25px + env(safe-area-inset-right));
  }

  /* ---- Typography floor: h1 34-40, h2 28-32, h3 20, body >=16/1.65, eyebrow stays 10 ----
     $title('h1') is only ever called by the four hero block kinds (page-hero, hero-split,
     hero-editorial, hero-minimal-dark); every other block leaves it at the h2 default, so
     targeting the tag directly covers every hero variant without listing each one. */
  h1.sp-heading {
    font-size: clamp(34px, 8.5vw, 40px) !important;
    line-height: 1.12;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .sp-heading {
    font-size: clamp(28px, 7vw, 32px) !important;
  }
  .sp-section h3 {
    font-size: 20px;
  }
  .sp-section p,
  .sp-prose,
  .sp-section li,
  .sp-section address,
  .sp-lead {
    font-size: 16px !important;
    line-height: 1.65;
  }

  /* Labels, captions and numerals must clear the 14px floor; eyebrows (.sp-eyebrow, .sgc-footer__eyebrow) are the named 10px exception. */
  .sp-number,
  .sp-marquee-item,
  .sp-about-nav a,
  .sp-form label,
  .sp-field-error,
  .sgc-footer__brand p,
  .sgc-footer__email,
  .sgc-footer__phone,
  .sgc-footer__brand address,
  .sgc-footer__column a,
  .sgc-footer__column h3,
  .sgc-footer__copyright,
  .sgc-footer__legal a,
  .sgc-footer__social a,
  .sgc-footer__cta-button,
  .sp-comparison-row h4,
  .sp-comparison-row p,
  .sp-comparison-head h3,
  .sp-breadcrumb li,
  .sgc-market-row__number,
  .sgc-markets__all-link {
    font-size: 14px !important;
  }

  /* The interior `markets` block (assets/css/interior-markets.css) is a separate stylesheet
     from the generic section system, so its own intro paragraph needs its own floor here. */
  .sgc-markets__intro p {
    font-size: 16px !important;
  }
  .sgc-markets__all-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---- Touch targets: 44x44 minimum ---- */
  .sp-about-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-tight);
  }
  .sgc-footer__column a,
  .sgc-footer__email,
  .sgc-footer__phone {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .sgc-footer__legal a,
  .sgc-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
  .sp-office a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .sp-button {
    font-size: 14px !important;
  }

  /* ---- Buttons: full-width, stacked, 10px gap ---- */
  .sp-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sp-actions .sp-button {
    width: 100%;
    box-sizing: border-box;
  }

  /* ---- Images: mobile aspect ratios, nothing taller than 70vh ---- */
  .sp-image {
    aspect-ratio: 3 / 2;
    max-height: 70vh;
  }
  .sp-visual .sp-image,
  .sp-team-grid .sp-image,
  .sp-leader-portrait img {
    aspect-ratio: 4 / 5;
    max-height: 70vh;
  }
  .sp-hero-image,
  .sp-page-hero {
    max-height: 70vh;
  }

  /* ---- Forms: 16px fields (no iOS zoom), 52px height, visible messages ---- */
  .sp-form input:not([type=checkbox]):not([type=hidden]),
  .sp-form textarea,
  .sp-form select {
    font-size: 16px !important;
    min-height: 52px;
  }
  .sp-form-status {
    font-size: 14px;
  }

  /* ---- Horizontal-scroll sections: momentum scroll, snap points, never trap vertical page scroll ---- */
  .sp-timeline {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-y: none;
    padding-bottom: var(--space-small);
  }
  .sp-timeline-stage {
    scroll-snap-align: start;
  }
  .sp-about-nav > .sp-container {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-y: none;
  }
  .sp-about-nav a {
    scroll-snap-align: start;
  }

  /* ---- Tabs become accordions (see site.js): full-width header, panel interleaved directly beneath it ---- */
  .sp-tab-list {
    overflow-x: visible;
  }
  .sp-tab-list button[aria-expanded] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-element);
    width: 100%;
    min-height: 44px;
    min-width: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--sparc-line);
    padding: var(--space-tight) 0;
    color: var(--sparc-navy-950);
    text-align: left;
    font: 600 16px/1.3 Manrope, Arial, sans-serif; /* removing role="tab" drops core's [role=tab] font rule, so restate it explicitly */
    cursor: pointer;
  }
  .sp-tab-list button[aria-expanded]::after {
    content: "+";
    flex: none;
    color: var(--sparc-gold-500);
    font-size: 20px;
  }
  .sp-tab-list button[aria-expanded="true"]::after {
    content: "\2212";
  }
  .sp-tab-panel[role="region"] {
    padding: 0 0 var(--space-element);
  }

  /* ---- Footer: simple stacked list, not a cramped grid ---- */
  .sgc-footer__container {
    grid-template-columns: 1fr !important;
  }
  .sgc-footer__brand,
  .sgc-footer__column:last-child {
    grid-column: auto !important;
  }
}

/* Container gutter: 20px at <=390 (set above), 24px above that, in both the portrait and short-landscape ranges. */
@media (min-width: 391px) and (max-width: 600px), (min-width: 391px) and (max-height: 500px) and (max-width: 900px) {
  :root { --gutter: 24px; }
}

/* Reduced motion: disable parallax/scale/entrance transitions site-wide on interior pages. */
@media (prefers-reduced-motion: reduce) {
  .sp-card:hover img,
  .sp-bento-card:hover img,
  .sp-leader-open:hover img,
  .sp-header-button:hover svg,
  .sp-row-link:hover .sp-arrow {
    transform: none !important;
  }
}