/* =========================================================================
   RESPONSIVE — wszystkie media queries motywu Stylowe Garaże
   Breakpointy zgodne z Faza 9 procesu: 340 · 576 · 768 · 991 · 1200 · 1380 · 1680
   ========================================================================= */

/* ---------- 1680px (XL — base, brak overrides) ---------- */

/* ---------- 1380px ---------- */
@media (max-width: 1380px) {
  :root {
    --container-pad: 40px;
  }
  .sg-header-inner { padding: 0 40px; }
  .sg-usp-grid { grid-template-columns: repeat(2, 1fr); }
  .sg-products-grid { grid-template-columns: repeat(2, 1fr); }
  .sg-swiper-arrow-prev { left: -28px; }
  .sg-swiper-arrow-next { right: -28px; }
  .sg-footer-grid { grid-template-columns: repeat(4, 1fr); }
  .sg-footer-brand { grid-column: 1 / -1; }
  .sg-cta-inner { grid-template-columns: 1fr; gap: 48px; }
  .sg-cta-divider { display: none; }
}

/* ---------- 1200px ---------- */
@media (max-width: 1200px) {
  .sg-hero-panel { padding: 64px 48px; }
  .sg-hero-scroll { left: 48px; }
  .sg-header-contact { gap: 14px; }
  .sg-header-contact-item { font-size: 12px; }
}

/* ---------- 991px ---------- */
@media (max-width: 991px) {
  .section,
  .sg-products,
  .sg-about,
  .sg-materials,
  .sg-howto,
  .sg-gallery,
  .sg-contact {
    padding: var(--space-section-md) 0;
  }

  /* HERO — pionowo: panel góra, slider dół */
  .sg-hero { flex-direction: column-reverse; height: auto; min-height: 100dvh; }
  .sg-hero-panel { width: 100%; padding: 56px 32px 64px; }
  .sg-hero-slider-wrap { position: relative; width: 100%; height: 360px; }
  .sg-hero-seam { display: none; }
  .sg-hero-scroll { display: none; }
  .sg-hero h1 { font-size: clamp(40px, 7vw, 64px); }
  .sg-hero-stats { display: none; }

  .sg-about-inner { grid-template-columns: 1fr; gap: 56px; }
  .sg-tab-content.active { grid-template-columns: 1fr; gap: 40px; }

  .sg-steps { flex-direction: column; gap: 28px; }
  .sg-steps-line { display: none; }
  .sg-step { flex-direction: row; text-align: left; gap: 20px; padding: 0; max-width: 480px; margin: 0 auto; }
  .sg-step-text { max-width: none; margin: 0; }

  .sg-contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .sg-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .sg-footer-brand { grid-column: 1 / -1; }
  .sg-gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .sg-gi { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 4/3; }
}

/* ---------- 768px ---------- */
@media (max-width: 768px) {
  :root {
    --container-pad: 20px;
  }
  .sg-header-inner { padding: 0 20px; gap: 16px; }
  .sg-nav { display: none; }
  .sg-header-contact { display: none; }
  .sg-lang { display: none; }

  .sg-products-grid { grid-template-columns: 1fr; }
  .sg-swiper-arrow { display: none; }
  .sg-products-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sg-gallery-header { flex-direction: column; align-items: flex-start; gap: 16px; }

  .sg-form-row { grid-template-columns: 1fr; }
  .sg-form-group.full { grid-column: span 1; }

  .sg-footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .sg-footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }

  .sg-about-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 140px; }
  .sg-collage-badge { padding: 12px 18px; gap: 10px; }
  .sg-badge-num { font-size: 26px; }
}

/* ---------- 576px ---------- */
@media (max-width: 576px) {
  .sg-hero h1 { font-size: 38px; }
  .sg-hero-panel { padding: 48px 20px 56px; }
  .sg-hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .sg-hero-ctas .btn { justify-content: center; }

  .sg-usp-grid { grid-template-columns: 1fr; }
  .sg-usp-item { padding: 32px 24px; }

  .sg-gallery-grid { grid-template-columns: 1fr; }

  .sg-cta-left h2 { font-size: 38px; }
  .sg-cta-phone-num { font-size: 38px; }
  .sg-cta-actions { flex-direction: column; align-items: stretch; }
  .btn-cta-large, .btn-cta-alt { justify-content: center; }
  .sg-cta-inner { padding: 64px 0; }

  .sg-contact-boxes { grid-template-columns: 1fr; }
  .sg-contact-box { padding: 18px 20px; gap: 14px; }
  .sg-contact-box-value { font-size: 21px; }

  .sg-about-collage { gap: 8px; }
}

/* ---------- 340px ---------- */
@media (max-width: 340px) {
  :root {
    --container-pad: 14px;
  }
  .sg-header-inner { padding: 0 14px; gap: 10px; }
  .sg-logo img { height: 38px; }
  .sg-header-right .btn { font-size: 14px; padding: 8px 14px; }
  .sg-hero h1 { font-size: 32px; }
  .section-title { font-size: 36px; }
  .sg-cta-phone-num { font-size: 30px; }
}