/* ==========================================================================
   APK STATION LANJOUW — RESPONSIVE OVERRIDES
   Breakpoints: 1280 / 1024 / 900 / 768 / 640 / 480 / 375 / 320
   ========================================================================== */

/* ---------- ≤1280px : tighten hero HUD placement slightly ---------- */
@media (max-width: 1280px) {
  .hero__hud--1 { right: 4vw !important; }
}

/* ---------- ≤1180px : collapse full nav link row to hamburger early
   (9 nav items + phone + CTA need real breathing room) ---------- */
@media (max-width: 1180px) {
  .navbar__links { display: none; }
  .navbar__call { display: none; }
  .navbar__toggle { display: flex; }
}

/* ---------- ≤1024px : grids stack to 2-up ---------- */
@media (max-width: 1024px) {
  .hero__hud { display: none; }

  .apk-section__grid,
  .about__grid,
  .assurance__grid,
  .starfield__grid {
    grid-template-columns: 1fr;
  }
  .apk-section__media { order: -1; max-width: 480px; margin-inline: auto; width: 100%; }
  .about__media { max-width: 480px; margin-inline: auto; width: 100%; }
  .assurance__panel { order: -1; }
  .starfield__photos { max-width: 480px; margin-inline: auto; }

  .services-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-10); }
  .footer__brand { max-width: 100%; grid-column: span 2; }

  .bento-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; }
  .bento-item--wide { grid-column: span 2; grid-row: span 1; }

  .contact-details { gap: var(--space-4); }
}

/* ---------- ≤900px : services go 2-up, contact 1-col ---------- */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .contact-details { grid-template-columns: 1fr; }
  .stat-float { left: 1rem; bottom: -1.25rem; padding: var(--space-3) var(--space-4); }
  .hero__scroll { display: none; }
}

/* ---------- ≤768px : mobile shell, single columns, sticky CTA ---------- */
@media (max-width: 768px) {
  :root { --section-pad-y: clamp(3.25rem, 2.6rem + 3vw, 5rem); }

  .fab-menu { display: none; }
  .mobile-sticky-cta { display: block; }
  body { padding-bottom: 78px; } /* room for sticky cta */

  .hero { min-height: 100svh; align-items: flex-end; }
  .hero__content { padding-block: calc(var(--nav-height) + var(--space-6)) var(--space-10); }
  .hero__title { max-width: 100%; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .hero__trust { gap: var(--space-3); }
  .hero__scroll { display: none; }

  .trust-bar__inner { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-block: var(--space-4); }
  .trust-bar__inner::-webkit-scrollbar { display: none; }

  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: var(--space-6) var(--space-5); }

  .assurance__quote { max-width: 100%; }
  .assurance__panel { padding: var(--space-8) var(--space-6); }

  .about__facts { grid-template-columns: 1fr 1fr; gap: var(--space-5); }

  .workshop-exp__media { aspect-ratio: 4/5; border-radius: var(--radius-lg); }
  .workshop-exp__caption { position: static; color: var(--navy-800); margin-bottom: var(--space-6); max-width: 100%; }
  .workshop-exp__caption .eyebrow { color: var(--blue-600); }
  .workshop-exp__caption h3 { color: var(--navy-800); }
  .workshop-exp__tags { padding: var(--space-5); }

  .starfield__photos { grid-template-columns: 1fr 1fr; }
  .starfield__photo:nth-child(2) { margin-top: 0; }

  .bento-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; }
  .bento-item--wide { grid-column: span 2; grid-row: span 1; }
  .bento-item--tall { grid-row: span 1; }

  .review-card { flex-basis: 88vw; padding: var(--space-6); }
  .reviews__top { align-items: flex-start; flex-direction: column; }

  .contact-cta__ctas { flex-direction: column; align-items: stretch; }
  .contact-cta__ctas .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: span 1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .lightbox__prev { left: var(--space-3); }
  .lightbox__next { right: var(--space-3); }
  .lightbox__close { top: var(--space-3); right: var(--space-3); }
}

/* ---------- ≤640px : type & spacing tighten further ---------- */
@media (max-width: 640px) {
  .apk-section__list { gap: var(--space-3); }
  .assurance__panel-steps { gap: var(--space-4); }
  .contact-details { margin-top: var(--space-10); }
  .about__facts { grid-template-columns: 1fr 1fr; }
  .glass-card { padding: var(--space-5); }
  .stat-float { position: static; margin-top: -2.5rem; margin-inline: var(--space-4); box-shadow: var(--shadow-md); }
  .media-frame { margin-bottom: 0; }
}

/* ---------- ≤480px : smallest phones ---------- */
@media (max-width: 480px) {
  .container, .navbar__inner, .hero__inner,
  .feature-transparent__inner, .starfield-section__inner { padding-inline: 1.1rem; }
  .hero__eyebrow { font-size: 0.66rem; }
  .btn { padding: 0.85rem 1.4rem; font-size: 0.86rem; }
  .service-card__icon, .apk-point__icon { width: 44px; height: 44px; }
  .bento-grid { grid-auto-rows: 46vw; }
  .navbar__logo-text span { display: none; }
  .footer__social a { width: 34px; height: 34px; }
}

/* ---------- ≤375px : compact ---------- */
@media (max-width: 375px) {
  .hero__trust-item { font-size: 0.8rem; }
  .contact-card { padding: var(--space-5); }
  .mobile-nav__link { font-size: 1.35rem; }
}

/* ---------- ≤320px : minimum supported width ---------- */
@media (max-width: 320px) {
  :root { --container-pad: 0.9rem; }
  .btn { padding: 0.8rem 1.1rem; font-size: 0.82rem; }
  .hero__title { font-size: clamp(2.1rem, 1.7rem + 3vw, 2.6rem); }
}

/* ---------- Larger desktop refinement ---------- */
@media (min-width: 1440px) {
  .hero__title { max-width: 17ch; }
}