/* ==========================================================================
   FROZLY EGYPT — RESPONSIVE RULES
   Breakpoints tested: 360 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================================== */

/* ---- ≤1280px : tighten large editorial spans ---- */
@media (max-width: 1280px) {
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-col:nth-child(4) { grid-column: 2 / 3; }
}

/* ---- ≤1024px : collapse nav, stack two-up editorial layouts ---- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }

  .portfolio-featured { grid-template-columns: 1fr; }
  .split-banner { grid-template-columns: 1fr; min-height: auto; }
  .split-banner-media { min-height: 320px; }
  .form-row { grid-template-columns: 1fr; gap: var(--space-m); }
  .form-row:nth-child(even) { direction: ltr; }
  .form-row .media-frame { order: -1; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .pillar-list { grid-template-columns: 1fr; }
  .process-item { grid-template-columns: 60px 1fr; }
}

/* ---- ≤768px : single column, mobile art direction ---- */
@media (max-width: 768px) {
  :root { --header-h: 64px; }

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

  .hero { min-height: 92svh; align-items: flex-end; }
  .hero-content { padding-bottom: var(--space-xl); }
  .hero-facts { gap: var(--space-m); }
  .hero-actions .btn { width: 100%; }
  .hero-actions { flex-direction: column; }

  .form-grid { grid-template-columns: 1fr; }
  .rfq-progress { flex-wrap: wrap; }

  .mobile-nav a { font-size: 2.2rem; }
}

/* ---- ≤430px : compact phones ---- */
@media (max-width: 430px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .doc-item { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .hero-fact dd { font-size: 1.1rem; }
  .process-item { grid-template-columns: 42px 1fr; gap: var(--space-m); }
}

/* ---- Guard against overflow on very narrow (360px) ---- */
@media (max-width: 360px) {
  :root { --container-pad: 1rem; }
  .btn { padding: 0.85rem 1.3rem; }
}