/* =====================================================================
   Joff Plas — Responsive (mobile-first → tablet → desktop)
   Breakpoints: 640 / 768 / 1024 / 1280
   ===================================================================== */

/* Mobile nav default (off-canvas drawer) */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 86vw);
    background: #fff;
    box-shadow: var(--shadow-lg);
    padding: calc(var(--header-h) + var(--space-4)) var(--space-6) var(--space-6);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    overflow-y: auto;
    z-index: var(--z-sticky);
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }
  .nav__link {
    width: 100%;
    padding: 14px;
    min-height: 48px;
    font-size: var(--fs-16);
  }
  .nav__item--has-children .nav__dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: var(--color-metal-50);
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 6px 8px 6px 16px;
    margin: 4px 0 8px;
    display: none;
  }
  .nav__item--has-children.is-open .nav__dropdown { display: block; }
  .nav__item--has-children > .nav__link::after {
    content: "▾";
    margin-left: auto;
    font-size: 0.85em;
    color: var(--color-metal-500);
  }
  .nav__cta { width: 100%; }
  .nav__cta .btn { width: 100%; }

  /* Body lock when menu open */
  body.has-menu-open { overflow: hidden; }
  body.has-menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: calc(var(--z-sticky) - 1);
  }
}

/* Tablet (≥ 640px) */
@media (min-width: 640px) {
  .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .trust-strip__grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .fab-whatsapp__label { display: inline; }
}

/* Tablet large (≥ 768px) */
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .hero__inner { padding-block: var(--space-24); }
  .contact-grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-10); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .mvv-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.1fr 1fr; }
  /* Text stays in left column; right column shows the background image */
  .hero__content { grid-column: 1; }
  /* Overlay: solid blue on the left (over text) → transparent on the right (image visible) */
  .hero::before {
    background:
      radial-gradient(800px 400px at 5% 20%, rgba(255, 107, 26, 0.16) 0%, transparent 65%),
      linear-gradient(
        90deg,
        rgba(11, 42, 74, 0.98) 0%,
        rgba(11, 42, 74, 0.95) 35%,
        rgba(11, 42, 74, 0.82) 50%,
        rgba(11, 42, 74, 0.35) 72%,
        rgba(11, 42, 74, 0.10) 100%
      );
  }
  .container { padding-inline: var(--space-6); }
}

/* Desktop wide (≥ 1280px) */
@media (min-width: 1280px) {
  .hero h1 { font-size: clamp(var(--fs-48), 2vw + 1rem, var(--fs-60)); }
}

/* Very small screens (< 360px) — safe net */
@media (max-width: 359px) {
  .btn { padding: 10px 18px; font-size: var(--fs-14); }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
}