/* ==========================================================================
   WIASC — responsive.css
   Breakpoints only. Everything above 1100px uses the base rules unchanged.
   Tested at 1920 / 1600 / 1440 / 1366 / 1280 / 1024 / 768 / 480 / 414 / 390 /
   375 / 360.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤1180px — nav starts to crowd the logo, so tighten it before it wraps
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .nav-link,
  .dropdown-toggle { padding-inline: 10px; font-size: 0.9375rem; }

  .main-nav > ul { gap: 0; }
}

/* --------------------------------------------------------------------------
   ≤1024px — tablet. Two-column content blocks stack.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --gutter: 32px; }

  .intro-grid,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  .intro-figure { max-inline-size: 520px; }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .footer-brand { grid-column: 1 / -1; }

  .hero h1 { max-inline-size: 18ch; }
}

/* --------------------------------------------------------------------------
   ≤880px — the desktop nav is swapped for the drawer
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
  .main-nav { display: none; }

  .nav-toggle { display: inline-flex; }

  :root {
    --header-h: 68px;
    --header-h-sm: 58px;
  }

  .hero-inner { min-block-size: clamp(380px, 56vh, 500px); }

  .page-head-inner { min-block-size: 196px; }
}

/* --------------------------------------------------------------------------
   ≤768px — phone landscape and small tablets
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root { --gutter: 24px; }

  .spec-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding-block: 14px;
  }

  .spec-name { font-size: var(--fs-small); }

  .detail-list > div { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }

  .wall-docs { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .wall-photos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  .lightbox-stage { grid-template-columns: minmax(0, 1fr); }

  .lightbox-nav {
    position: fixed;
    inset-block-end: 18px;
    z-index: 2;
  }

  .lightbox-prev { inset-inline-start: 18px; }
  .lightbox-next { inset-inline-end: 18px; }

  .lightbox-caption { padding-block-end: 62px; }
}

/* --------------------------------------------------------------------------
   ≤560px — phones
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  :root { --gutter: 20px; }

  body { font-size: 1rem; }

  .hero-inner { min-block-size: 400px; }

  .hero h1 { max-inline-size: 100%; }

  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(13, 21, 51, 0.72) 0%, rgba(13, 21, 51, 0.9) 58%, var(--dark-color) 100%);
  }

  .hero-standards { gap: 6px 10px; }

  .hero-standards li + li::before { margin-inline-end: 10px; }

  .hero-dots { inset-block-end: 14px; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }

  .footer-base { flex-direction: column; gap: 8px; }

  .register th,
  .register td { padding: 13px 15px; }

  .register { min-inline-size: 540px; }

  .wall-docs { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
  .wall-photos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  .plate-caption { padding: 11px 12px; }

  .range-plate { padding: 15px 17px; }

  .capability-list { grid-template-columns: minmax(0, 1fr); }

  .process-line { gap: 10px; }
}

/* --------------------------------------------------------------------------
   ≤380px — the smallest supported width
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {
  :root { --gutter: 16px; }

  .brand img { block-size: 32px; }

  .nav-toggle { padding: 8px 10px; }

  .nav-toggle .label { display: none; }

  .wall-docs,
  .wall-photos { grid-template-columns: minmax(0, 1fr); }

  .detail-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --------------------------------------------------------------------------
   Print — the certificate and project pages are the ones people print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .drawer,
  .hero-dots,
  .nav-toggle,
  .lightbox,
  .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }

  .band { padding-block: 18pt; }

  .page-head,
  .hero {
    background: #fff;
    color: #000;
  }

  .page-head::before,
  .page-head-media,
  .hero-media,
  .hero-scrim { display: none; }

  .page-head h1,
  .hero h1 { color: #000; }

  .card,
  .table-wrap,
  .plate { box-shadow: none; border-color: #999; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}