/* ============================================================
   mobile.css — Comprehensive Mobile & Responsive Overrides
   Breakpoints: 480px (small phones), 640px (large phones),
                768px (tablets), 1024px (small desktop)
   ============================================================ */

/* ── GLOBAL TYPOGRAPHY SCALING ─────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --type-display-size: clamp(2rem, 8vw, 3rem);
    --type-heading-size: clamp(1.5rem, 6vw, 2rem);
    --type-subheading-size: clamp(1.125rem, 4vw, 1.375rem);
  }

  h1, h2, h3 {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ── NAV ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Widen pill to near full-width on tablet/mobile for a more aesthetic bar */
  .nav {
    padding-inline: 0.75rem;
  }

  .nav__pill {
    max-width: 100%;
    padding: 0 0.75rem 0 0.875rem;
    height: 60px;
    border-radius: 100px;
  }

  .nav__logo-img {
    height: 56px !important;
  }
}

@media (max-width: 767px) {
  .nav {
    padding-inline: 0.5rem;
    top: 0.75rem;
  }

  .nav__pill {
    padding: 0 0.625rem 0 0.75rem;
    height: 56px;
    overflow: hidden; /* keep pill slim while logo overflows */
  }

  .nav__logo-img {
    height: 88px !important; /* 2x the base 44px, overflows pill vertically */
    max-height: none !important;
  }

  /* Hide desktop nav links on mobile */
  .nav__list {
    display: none;
  }

  /* Hide the Request More Info CTA button in the nav on mobile */
  .nav__right > .btn {
    display: none;
  }

  /* Show hamburger on mobile */
  .nav__hamburger {
    display: flex;
  }
}

/* ── HERO ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero {
    min-height: 100svh;
    min-height: 100vh;
    background: var(--color-off-black);
  }

  .hero__headline {
    font-size: clamp(1.875rem, 7.5vw, 2.5rem);
    max-width: 20ch;
    text-align: center;
    padding-inline: 1rem;
  }

  .hero__sub {
    font-size: clamp(0.9375rem, 3.5vw, 1.0625rem);
    padding-inline: 1rem;
    max-width: 38ch;
  }

  /* Hero video plays on mobile using the lightweight 590KB mobile WebM source */
  .hero__video {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

/* ── SPLIT SECTIONS ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .split-section {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  /* Image panel stacks above text on mobile */
  .split-section__image {
    min-height: 260px;
    order: 0 !important;
    /* Dark background shown when video is hidden */
    background-color: #1a1a1a;
  }

  .split-section__text {
    order: 1 !important;
    padding: var(--spacing-md) var(--spacing-sm);
  }

  /* Reversed sections: same stacking on mobile */
  .split-section--reversed .split-section__image {
    order: 0 !important;
  }

  .split-section--reversed .split-section__text {
    order: 1 !important;
  }
}

/* ── SECTION LABELS & HEADINGS ──────────────────────────────── */
@media (max-width: 767px) {
  .section-label {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }

  .section-heading {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .section-body {
    font-size: var(--type-body-size);
  }

  .section-inner {
    padding-block: var(--spacing-md);
  }
}

/* ── CARD GRIDS ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .card-grid--2,
  .card-grid--3 {
    grid-template-columns: 1fr;
  }

  .card {
    padding: var(--spacing-md);
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  /* 2-col cards on large phones in landscape */
  .card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── STAT BAR ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .stat-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .stat-item__number {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
}

/* ── TIMELINE ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline-step {
    padding: var(--spacing-md);
  }
}

/* ── FEATURE BLOCK (CTA BAND) ───────────────────────────────── */
@media (max-width: 767px) {
  .feature-block {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    text-align: center;
  }

  .feature-block__content {
    align-items: center;
  }
}

/* ── BUTTONS ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
  }

  /* Button groups stack vertically */
  .btn-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  /* Inline button groups also stack */
  .section-inner .btn + .btn,
  .split-section__text .btn + .btn {
    margin-top: 0.75rem;
  }
}

/* ── FOOTER ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding-block: var(--spacing-lg);
  }

  .footer__logo-img {
    height: 80px !important;
  }

  .footer__tagline {
    max-width: 100%;
  }

  /* Stack footer link columns in 2-col grid on mobile */
  .footer__top > *:not(.footer__brand) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    align-items: start;
  }

  .footer__col-heading {
    grid-column: 1 / -1;
    margin-bottom: 0.25rem;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-start;
    padding-block: var(--spacing-md);
  }

  .footer__legal-links {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
}

/* ── INDUSTRY / SERVICE PAGE HERO ───────────────────────────── */
@media (max-width: 767px) {
  .page-hero {
    padding-block: var(--spacing-lg);
    min-height: 220px;
  }

  .page-hero__label {
    font-size: 0.6875rem;
  }

  .page-hero__title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .page-hero__sub {
    font-size: var(--type-body-size);
  }
}

/* ── CONTACT FORM ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .contact-form {
    padding: var(--spacing-md);
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ── FAQ PAGE ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-item {
    padding: var(--spacing-md);
  }
}

/* ── LEGAL PAGES ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .legal-body {
    padding-inline: var(--spacing-sm);
  }

  .legal-body h2 {
    font-size: 1.25rem;
  }
}

/* ── COMING SOON PAGES ──────────────────────────────────────── */
@media (max-width: 767px) {
  .cs-page {
    min-height: 100svh;
    padding-inline: var(--spacing-sm);
  }

  .cs-page .section-heading {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .cs-page .section-body {
    font-size: var(--type-body-size);
    padding-inline: 0.5rem;
  }

  .cs-page .btn-group {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 320px;
  }

  .cs-page .btn {
    width: 100%;
  }
}

/* ── CONTAINER PADDING ──────────────────────────────────────── */
@media (max-width: 479px) {
  .container {
    padding-inline: 1rem;
  }
}

/* ── PREVENT HORIZONTAL OVERFLOW ───────────────────────────── */
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  img, video {
    max-width: 100%;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── TOUCH TARGETS ──────────────────────────────────────────── */
@media (max-width: 767px) {
  a, button {
    min-height: 44px;
    min-width: 44px;
  }

  .nav__drawer-link {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}