/* ============================================================
   RESPONSIVE.CSS — Tablet & Mobile Breakpoints
   ============================================================ */

/* ── Tablet: 1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --container-px: 28px;
    --text-4xl: 40px;
    --text-3xl: 34px;
  }

  /* Header */
  .header-nav { display: none; }
  .header-phone { display: none; }
  .header-burger { display: flex; }

  /* Hero */
  .hero { max-height: none; }
  .hero-content { padding: 56px 32px 56px var(--container-px); }
  .hero-stats { right: 20px; bottom: 24px; }

  /* Products layout */
  .products-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .products-grid { grid-template-columns: repeat(2, 1fr); }
  /* Catalog */
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Process */
  .process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
  .process-steps::before { display: none; }

  /* Projects */
  .projects-grid { grid-template-columns: repeat(2, 1fr); }

  /* Trust */
  .trust-grid { grid-template-columns: repeat(2, 1fr); }

  /* Calculator */
  .calculator-layout { grid-template-columns: 1fr; }
  .calculator-fields { grid-template-columns: 1fr; }

  /* Quote */
  .quote-layout { grid-template-columns: 1fr; }

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

/* ── Mobile: 768px ──────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --container-px: 20px;
    --text-4xl: 32px;
    --text-3xl: 28px;
    --text-2xl: 24px;
    --space-2xl: 64px;
    --space-xl: 40px;
  }

  /* Hero: stack vertically */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-content {
    padding: 40px var(--container-px);
    max-width: 100%;
    order: 1;
  }

  .hero-title { font-size: 30px; }

  .hero-visual {
    order: 2;
    height: 280px;
  }

  .hero-image { height: 280px; }

  .hero-stats {
    position: static;
    border-radius: 0;
    padding: 20px var(--container-px);
    flex-direction: row;
    gap: var(--space-md);
    flex-wrap: wrap;
  }

  .stat-row { flex: 1; min-width: 140px; }

  /* Sectors: 2 columns on mobile */
  .sectors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sector-item {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .sector-item:nth-child(2n) { border-right: none; }
  .sector-item:nth-last-child(-n+2) { border-bottom: none; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  /* Process */
  .process-steps { grid-template-columns: 1fr 1fr; }

  /* Projects */
  .projects-grid { grid-template-columns: 1fr; }
  /* Catalog */
  .catalog-grid { grid-template-columns: 1fr; }
  .projects-header { flex-direction: column; align-items: flex-start; }

  /* Trust */
  .trust-grid { grid-template-columns: 1fr 1fr; }

  /* Certifications */
  .certifications-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  /* Clients */
  .clients-logos { gap: 28px; }

  /* Quote */
  .quote-form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}

/* ── Small mobile: 480px ────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --text-4xl: 28px;
    --text-3xl: 24px;
  }

  .sectors-grid { grid-template-columns: 1fr; }
  .sector-item { border-right: none; border-bottom: 1px solid var(--border); }
  .sector-item:last-child { border-bottom: none; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; justify-content: center; }

  .process-steps { grid-template-columns: 1fr; }

  .trust-grid { grid-template-columns: 1fr; }

  .whatsapp-float { bottom: 18px; right: 18px; width: 50px; height: 50px; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .site-header,
  .whatsapp-float,
  .mobile-menu { display: none !important; }
  .hero { margin-top: 0; }
}
/* ── Product Modal responsive ───────────────────────────── */
@media (max-width: 768px) {
  .pmodal { padding: 0; align-items: flex-end; }

  .pmodal-container {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .pmodal-inner { grid-template-columns: 1fr; }

  .pmodal-img-wrap {
    min-height: 220px;
    padding: var(--space-md);
  }

  .pmodal-body { padding: var(--space-md); }

  .pmodal-actions { flex-direction: column; }
}

@media (max-width: 480px) {
  .pmodal-name { font-size: var(--text-lg); }
  .pmodal-img-wrap { min-height: 180px; }
}

/* ── Catalog img-wrap mobile ────────────────────────────── */
@media (max-width: 768px) {
  .catalog-card-img-wrap { height: 220px; }
}

@media (max-width: 480px) {
  .catalog-card-img-wrap { height: 200px; }
  .catalog-grid { grid-template-columns: 1fr; }
}

/* ── Hero image mobile — no cropping ────────────────────── */
@media (max-width: 768px) {
  .hero-visual {
    height: auto;
    min-height: 260px;
    max-height: 320px;
  }
  .hero-image {
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    object-position: center center;
  }
}

@media (max-width: 480px) {
  .hero-visual { min-height: 220px; max-height: 260px; }
  .hero-image  { min-height: 220px; }
}