/* ─────────────────────────────────────────────
   RESPONSIVE
   Mobile / tablet adaptations. Loaded LAST so it
   overrides layout.css + components.css.

   Breakpoints
     > 1200px  desktop  — full nav row (unchanged)
     ≤ 1200px  hamburger nav (row can't fit 10 items)
     ≤ 1024px  roomier hero sidebar, tighter padding
     ≤ 820px   single-column stack (hero/about/services/contact)
     ≤ 600px   phone tuning — shrink photo strip, min padding
───────────────────────────────────────────── */

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 9px;
  margin-left: 16px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
#main-nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#main-nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
#main-nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── DESKTOP: tighten gap so 10 items clear the 1200px boundary ── */
@media (min-width: 1201px) {
  #main-nav ul { gap: 28px; }
}

/* ══════════════════════════════════════════════
   ≤ 1200px — collapse nav into hamburger drawer
══════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .nav-toggle { display: flex; }
  #main-nav .logo-wrap { margin-right: auto; }

  /* the existing <ul> becomes a full-width dropdown drawer */
  #main-nav ul {
    position: fixed;
    top: calc(var(--strip-max) + var(--nav-h));
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--strip-max) - var(--nav-h));
    overflow-y: auto;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid rgba(26, 20, 16, 0.08);
    box-shadow: 0 14px 28px rgba(26, 20, 16, 0.14);
    padding: 8px 28px 24px;
    /* hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  #main-nav.menu-open ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  #main-nav ul li { width: 100%; }
  #main-nav ul li a {
    display: block;
    padding: 15px 2px;
    font-size: 15px;
    border-bottom: 1px solid rgba(26, 20, 16, 0.07);
  }
  #main-nav ul li:last-child a { border-bottom: none; }
  /* keep the Kontakt CTA as a pill, not a full-width row */
  #main-nav ul li a.nav-cta {
    display: inline-block;
    margin: 14px 0 6px;
    padding: 12px 26px !important;
    border-bottom: none;
  }
}

/* ══════════════════════════════════════════════
   ≤ 1024px — roomier hero sidebar, tighter padding
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #hero { grid-template-columns: 1fr 38%; }
  .section-inner { padding: 0 48px; }
  .about-inner,
  .contact-inner { gap: 48px; }
  .hero-left { padding: 64px 48px; }
}

/* ══════════════════════════════════════════════
   ≤ 820px — single-column stack
══════════════════════════════════════════════ */
@media (max-width: 820px) {
  #hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-left { padding: 48px 40px; }
  .hero-right {
    padding: 40px;
    min-height: auto;
  }
  /* simplify decorative extras once the panel is full-width */
  .ghost-cr,
  .geo-circle,
  .geo-square,
  .scroll-hint { display: none; }
  .personal-quote { max-width: none; }
  .subline { max-width: none; }

  .about-inner,
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .services-grid { grid-template-columns: 1fr; }
  .section { padding: 72px 0; }
}

/* ══════════════════════════════════════════════
   ≤ 600px — phone
══════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --strip-max: 60px; }

  nav { padding: 0 20px; }
  .section-inner { padding: 0 22px; }
  .section { padding: 56px 0; }
  .hero-left { padding: 40px 22px 36px; }
  .hero-right { padding: 32px 24px; }
  .svc-card { padding: 32px 24px; }

  footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 28px 24px;
  }
}

/* ══════════════════════════════════════════════
   Respect reduced-motion (stops the infinite loops)
══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}