/**
 * GCP — Responsive
 * Mobile-first overrides. Grids collapse before content ever forces
 * horizontal scroll; overflow-x is also hardened on html/body.
 * Breakpoints tested: 320 / 360 / 390 / 414 / 480 / 640 / 768 / 1024 / 1440 / 1920
 */

html, body { overflow-x: hidden; max-width: 100%; }

/* ===================================================================
   BASE MOBILE (< 480px): single column, touch-friendly
   =================================================================== */

/* Navbar */
.navbar__links,
.navbar__cta { display: none; }
.navbar__toggle { display: inline-flex; }

/* Mobile menu — better touch spacing */
.navbar__mobile {
  padding: 5rem var(--space-md) var(--space-xl);
  gap: var(--space-md);
  overflow-y: auto;
}
.navbar__mobile a {
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-gray-200);
  width: 100%;
  text-align: center;
}
.navbar__mobile .btn {
  margin-top: var(--space-sm);
  padding: 1rem 2rem;
  width: 100%;
  max-width: 320px;
}

/* Grids — all single column */
.grid--services,
.grid--fleet,
.grid--advantages { grid-template-columns: 1fr; }

/* Service cards — stack icon, title, and description on mobile */
.service-card {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-md);
}
.service-card h3 {
  margin: 0;
  line-height: 1.35;
}
.service-card p {
  margin: 0;
}
.service-card__icon {
  flex: none;
  width: 44px;
  height: 44px;
}
.service-card__icon svg { width: 22px; height: 22px; }
.service-card h3 { font-size: var(--fs-sm); }

/* Gallery */
.grid--gallery {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 160px;
}
.gallery-item--wide { grid-column: span 2; }
.gallery-item--tall { grid-row: span 1; } /* Don't span tall on tiny screens */

/* About */
.about { grid-template-columns: 1fr; gap: var(--space-lg); }
.about__media { aspect-ratio: 16 / 9; max-height: 260px; }
.vision-mission { grid-template-columns: 1fr; }
.about__pillars { grid-template-columns: 1fr; }

/* Contact — stack form below info */
.contact { grid-template-columns: 1fr; gap: var(--space-lg); }
.contact__map { aspect-ratio: 4/3; }

/* Footer */
.footer__grid { grid-template-columns: 1fr; gap: var(--space-md); }
.footer__desc { max-width: 100%; }

/* Hero stats — compact row on tiny screens */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}
.stat-chip {
  align-items: center;
  text-align: center;
  padding: var(--space-xs) var(--space-3xs);
}
.stat-chip__value { font-size: var(--fs-md); }
.stat-chip__label { font-size: 0.6875rem; line-height: 1.3; }
.stat-chip + .stat-chip { border-left: 1px solid rgba(255,255,255,0.14); border-top: none; }

/* Hero actions — stack vertically on tiny */
.hero__actions { flex-direction: column; gap: var(--space-xs); }
.hero__actions .btn { width: 100%; justify-content: center; }

/* Lightbox nav */
.lightbox__nav--prev { left: var(--space-2xs); }
.lightbox__nav--next { right: var(--space-2xs); }

/* Section padding tighter on mobile */
.section { padding-block: var(--space-xl) var(--space-xl); }
.section-head { margin-bottom: var(--space-lg); }
.section-title { font-size: clamp(1.5rem, 5vw, 2rem); }

/* VM cards padding */
.vm-card { padding: var(--space-md); }

/* Contact form full width */
.contact > .card { padding: var(--space-md) !important; }

/* Advantage items – better touch hit area */
.advantage-item { gap: var(--space-xs); }
.advantage-item__icon { width: 40px; height: 40px; }

/* FAQ touch friendly */
.faq-item__question { padding: var(--space-sm) var(--space-sm); }

/* ===================================================================
   ≥ 480px: Small phones landscape / large phones
   =================================================================== */
@media (min-width: 480px) {
  .hero__actions { flex-direction: row; flex-wrap: nowrap; }
  .hero__actions .btn { width: auto; }

  .hero__stats { display: flex; flex-direction: row; width: fit-content; }
  .stat-chip {
    align-items: flex-start;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
  }
  .stat-chip__value { font-size: var(--fs-lg); }
  .stat-chip__label { font-size: var(--fs-xs); }
  .stat-chip + .stat-chip { border-left: 1px solid rgba(255,255,255,0.14); border-top: none; }

  /* Service cards — 2 columns at 480 */
  .grid--services { grid-template-columns: repeat(2, 1fr); }

  /* Service card back to vertical */
  .service-card {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-md);
  }
  .service-card__icon { width: 52px; height: 52px; }
  .service-card__icon svg { width: 26px; height: 26px; }
  .service-card h3 { font-size: var(--fs-md); }

  .gallery-item--tall { grid-row: span 2; }

  .lightbox__nav--prev { left: max(var(--space-md), calc(50% - 480px)); }
  .lightbox__nav--next { right: max(var(--space-md), calc(50% - 480px)); }
}

/* ===================================================================
   ≥ 640px: Tablet portrait
   =================================================================== */
@media (min-width: 640px) {
  .grid--fleet { grid-template-columns: repeat(2, 1fr); }
  .grid--advantages { grid-template-columns: repeat(2, 1fr); }

  .footer__grid { grid-template-columns: repeat(2, 1fr); }

  .grid--gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  .about__media { aspect-ratio: 4/3; max-height: 360px; }

  /* Contact side by side */
  .contact { grid-template-columns: 1fr; }
}

/* ===================================================================
   ≥ 768px (tablet landscape): 2-col grids
   =================================================================== */
@media (min-width: 768px) {
  .grid--services { grid-template-columns: repeat(2, 1fr); }
  .grid--fleet { grid-template-columns: repeat(2, 1fr); }
  .grid--advantages { grid-template-columns: repeat(2, 1fr); }
  .grid--gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 210px;
  }

  .about {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .about__media { aspect-ratio: 4 / 3; max-height: 480px; }
  .vision-mission { grid-template-columns: 1fr 1.3fr; }

  .contact { grid-template-columns: 1fr 1.1fr; gap: var(--space-xl); }
  .contact__map { aspect-ratio: 16/10; }

  .footer__grid { grid-template-columns: 1fr 1fr; }

  .navbar__cta { display: inline-flex; }
}

/* ===================================================================
   ≥ 1024px (desktop): full nav, multi-col grids
   =================================================================== */
@media (min-width: 1024px) {
  .navbar__links { display: flex; }
  .navbar__toggle { display: none; }
  .navbar__mobile { display: none !important; }

  /* Restore navbar cta to default */
  .navbar__cta { display: inline-flex; }

  .grid--services { grid-template-columns: repeat(4, 1fr); }
  .grid--fleet { grid-template-columns: repeat(3, 1fr); }
  .grid--advantages { grid-template-columns: repeat(3, 1fr); }
  .grid--gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
  }

  .about { grid-template-columns: 1fr 1.1fr; }
  .about__media { max-height: 560px; }
  .about__pillars { grid-template-columns: 1fr 1fr; }

  .contact { grid-template-columns: 1fr 1.1fr; }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }

  /* Restore service card vertical layout */
  .service-card {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-md);
  }
}

/* ===================================================================
   ≥ 1440px: roomier container
   =================================================================== */
@media (min-width: 1440px) {
  :root { --container-max: 1320px; }
}

/* ===================================================================
   ≥ 1920px: cap line-length growth
   =================================================================== */
@media (min-width: 1920px) {
  :root { --container-max: 1440px; }
}

/* ===================================================================
   Fine-grained phone tiers (320 / 360 / 374)
   =================================================================== */
@media (max-width: 374px) {
  .hero__headline { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .grid--gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }
  .gallery-item--wide { grid-column: span 1; }
  .hero__actions .btn { font-size: 0.8rem; padding: 0.75rem 1rem; }
  .stat-chip__value { font-size: 0.95rem; }
  .navbar__mobile { gap: var(--space-sm); }
}

@media (min-width: 375px) and (max-width: 479px) {
  .grid--gallery { grid-auto-rows: 180px; }
}