/* ============================================================
   Atypisch — Responsive CSS
   All media queries for the entire theme in one file.
   ============================================================ */

/* ─── Homepage: section H2s wrap on small screens (nowwrap is desktop-only) ─── */
@media (max-width: 720px) {
  .ax2-h2--mid { white-space: normal; }
}

/* ─── Homepage: hero 2-column ─── */
@media (min-width: 1000px) {
  .home-hero__inner { grid-template-columns: 1.5fr 1fr; }
}

/* ─── Homepage: trust strip 2-column ─── */
@media (min-width: 800px) {
  .home-trust__inner { grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
}

/* ─── Homepage: product grid breakpoints ─── */
@media (min-width: 720px) {
  .home-products__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .home-products__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Homepage: featured product banner 2-column ─── */
@media (min-width: 920px) {
  .home-feat-prod { grid-template-columns: 0.92fr 1.08fr; align-items: stretch; }
}
@media (max-width: 919px) {
  .home-feat-prod__body { padding: 40px 32px 32px; }
  .home-feat-prod__stage { min-height: 0; padding: 0 0 36px; justify-content: center; }
  .home-feat-prod__screen { width: 86%; margin-right: 0; border-radius: 14px; border-right: 1px solid rgba(255,255,255,0.12); }
}

/* ─── Homepage: featured project bento grid ─── */
@media (min-width: 860px) {
  .home-featured__bento {
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: 300px 184px;
    gap: 14px;
  }
  .home-featured__slider { grid-row: 1 / 3; grid-column: 1; min-height: 0; }
  .home-featured__slider img { min-height: 0; }
  .home-featured__info { grid-row: 1; grid-column: 2; }
  .home-featured__shot { grid-row: 2; grid-column: 2; }
}

/* ─── Homepage: EU spotlight side-by-side ─── */
@media (min-width: 1000px) {
  .home-eu { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .home-eu__body { padding: 110px 64px 110px 56px; }
}

/* ─── Homepage: statement footer 3-column ─── */
@media (min-width: 800px) {
  .home-statement__foot { grid-template-columns: repeat(3, 1fr); gap: 56px; }
}

/* ─── Homepage: CTA 2-column ─── */
@media (min-width: 900px) {
  .home-cta__inner { grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
}

/* ─── Homepage: footer columns ─── */
@media (min-width: 720px) {
  .home-footer__inner { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 56px; }
}

/* ─── Components: grids breakpoints ─── */
@media (min-width: 720px) {
  .ax2-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .ax2-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .ax2-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
  .ax2-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .home-hero,
  .home-hero::before,
  .home-masthead,
  .home-masthead::before { animation: none !important; }
  .home-trust__track { animation: none; }
  .homepage_hero_split_word_current.is-exiting,
  .homepage_hero_split_word_next.is-entering {
    animation: none !important; opacity: 1; transform: none;
  }
  .homepage_hero_split_col { clip-path: none; height: auto; }
}

/* ─── List rows: stack on mobile ─── */
@media (max-width: 640px) {
  .ax2-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ax2-row__tag { justify-self: start; }
}

/* ─── Homepage hero: stack on mobile ─── */
@media (max-width: 999px) {
  .home-hero { padding-top: 130px; padding-bottom: 80px; }
  .home-hero__inner { gap: 48px; }
  .home-facts { margin-top: 16px; }
}

/* ─── Homepage EU body: less padding on mobile ─── */
@media (max-width: 999px) {
  .home-eu__body { padding: 64px 32px; }
}

/* ─── Homepage sections: less vertical padding on mobile ─── */
@media (max-width: 720px) {
  .home-products,
  .home-featured,
  .home-services,
  .home-updates { padding: 72px 0 64px; }
  .home-products__head,
  .home-products__inner { padding-left: 20px; padding-right: 20px; }
  .home-feat-prod__body { padding: 28px 20px 24px; }
  .home-feat-prod__screen { width: calc(100% - 24px); margin-right: 0; }
  .home-feat-prod__stats { flex-wrap: wrap; }
  .home-feat-prod__stat { margin-right: 16px; padding-right: 16px; }
  .home-tagline-section { padding: 96px 0; }
  .home-statement { padding: 64px 0 80px; }
  .home-cta { padding: 72px 0; }
  .homepage_hero_splitline { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
}

/* ─── Site header + homepage topbar: hamburger on mobile ─── */
@media (max-width: 900px) {
  .site-nav, .site-header__cta { display: none; }
  .site-header__burger { display: block; }
  .home-topbar__nav, .home-topbar__cta { display: none; }
}

/* ─── Small screens: tighter spacing ─── */
@media (max-width: 480px) {
  .site-header__inner,
  .home-topbar__inner { padding: 0 20px; }
  .site-drawer__panel { padding: 20px 24px 24px; }
  .site-drawer__nav a { font-size: 1.6rem; padding: 12px 0; }
}