/* ============================================================
   MAXIMILIAN SCHMITT – Responsive Stylesheet
   Mobile-First Breakpoints
   ============================================================ */

/* ── Breakpoints:
   sm:  576px
   md:  768px
   lg:  1024px
   xl:  1200px
   ── */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  :root {
    --space-xl:  3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 6rem;
  }

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

  .grid-split {
    gap: var(--space-lg);
  }

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

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* ── Hamburger Visible (≤ 900px) ── */
@media (max-width: 900px) {
  .nav__menu,
  .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  :root {
    --container-pad: 1rem;
    --space-lg:  2rem;
    --space-xl:  2.5rem;
    --space-2xl: 3.5rem;
    --space-3xl: 5rem;
  }

  /* Grids → single column */
  .grid-2,
  .grid-3,
  .grid-split {
    grid-template-columns: 1fr;
  }

  .grid-split--reverse > *:first-child,
  .grid-split--reverse > *:last-child {
    order: unset;
  }

  /* Hero adjustments */
  .hero__content {
    text-align: center;
    max-width: 100%;
  }

  .hero__actions {
    justify-content: center;
  }

  .stats-row {
    justify-content: center;
    gap: var(--space-lg);
  }

  .hero__visual {
    display: none;
  }

  /* Section headings */
  .section-header {
    text-align: center;
  }

  .divider--left {
    margin-inline: auto;
  }

  /* Cards */
  .card {
    padding: var(--space-md);
  }

  /* CTA section */
  .cta-section {
    padding: var(--space-xl) 0;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .footer__legal {
    justify-content: center;
  }

  /* Page hero – nav is 72px fixed; calc ensures breadcrumb is always below it */
  .page-hero {
    padding: calc(72px + 2.5rem) 0 2.5rem;
  }

  /* Breadcrumb – keep font readable on small screens */
  .breadcrumb {
    font-size: 0.875rem;
    gap: 0.4rem;
    margin-bottom: 1rem;
  }

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

  /* Services list */
  .service-item {
    flex-direction: column;
    text-align: center;
  }

  .service-item__icon {
    margin-inline: auto;
  }
}

/* ── Small Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }

  .nav__logo-text {
    display: none;
  }

  .stats-row {
    flex-direction: column;
    align-items: center;
  }

  .hero .badge-row {
    justify-content: center;
  }

  /* Even on very small screens the breadcrumb must clear the 72px nav */
  .page-hero {
    padding: calc(72px + 2rem) 0 2rem;
  }
}

/* ── Print Styles ── */
@media print {
  .header,
  .nav__hamburger,
  .mobile-menu,
  .cta-section,
  .footer {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  .section {
    padding-block: 2rem;
  }
}

/* ── High Contrast Mode ── */
@media (forced-colors: active) {
  .btn--primary {
    border: 2px solid ButtonText;
  }

  .card {
    border: 1px solid ButtonText;
  }

  .nav__link[aria-current="page"] {
    border-bottom: 2px solid ButtonText;
  }
}