/* ============================================================
   CORTEX STUDIO — RESPONSIVE v3
   ============================================================ */

/* MOBILE (<768px) */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.hero { min-height: 100vh; }
.hero h1 { font-size: clamp(2rem, 7vw, 3rem); }

.hero-actions, .cta-actions { flex-direction: column; align-items: stretch; max-width: 340px; margin-left: auto; margin-right: auto; }
.hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }

.header { height: 60px; }
.header .container { height: 100%; padding: 0 1rem; }
.header nav { position: static; transform: none; height: auto; display: block; }
.nav-links { display: none; position: fixed; inset: 0; transform: none; height: auto; background-color: rgba(7,19,37,0.97); backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: 999; padding: 4rem 1.5rem; }
.nav-links.nav-open { display: flex; }
.nav-links a { font-size: 1.25rem; padding: 0.75rem 1.5rem; width: 100%; max-width: 260px; text-align: center; }
.burger { display: flex; }
.header-actions { display: none; }
/* Mobile-only CTA in nav */
.nav-links .nav-mobile-cta { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; width: 100%; max-width: 260px; align-items: center; }
.nav-links .nav-mobile-cta a { width: 100%; text-align: center; }

@media (max-width: 1023px) {
  /* Mobile: flatten dropdown in mobile menu */
  .nav-dropdown-toggle { display: none !important; }
  .nav-dropdown-menu { display: contents !important; position: static; transform: none; background: none; border: none; box-shadow: none; padding: 0; min-width: 0; }
  .nav-dropdown-menu li a { font-size: 1.25rem; padding: 0.75rem 1.5rem; width: 100%; max-width: 260px; text-align: center; }
}

.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; align-items: flex-start; }

.stats-grid { flex-direction: column; align-items: center; gap: 1rem; }
.stat-item { padding: 1rem 2rem; }
.stat-item + .stat-item::before { display: none; }
.section { padding: var(--spacing-lg) 0; }
.container { padding: 0 1.25rem; }
.form-row { grid-template-columns: 1fr; }
.booking-steps { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.service-details { grid-template-columns: 1fr; }
.svc-grid { grid-template-columns: 1fr; }
.breadcrumb { padding-top: calc(60px + 1rem); }
.hero-mini, .section-hero-mini { padding-top: calc(60px + 3rem); }
.modal { margin: 1rem; padding: 1.5rem; }
.cortex-reveal { height: 55vh; min-height: 360px; }
.section-cta { padding: 3rem 1.5rem; border-radius: var(--radius-lg); margin: 0 1rem; }
.testimonial-card:nth-child(2) { transform: none; }
.hero-scroll-indicator { bottom: 1.5rem; }

/* TABLET (min-width: 768px) */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: row; align-items: center; }
  .stats-grid { flex-direction: row; }
  .stat-item + .stat-item::before { display: block; }
  .hero-actions, .cta-actions { flex-direction: row; max-width: none; align-items: center; justify-content: center; }
  .hero-actions .btn, .cta-actions .btn { width: auto; }
  .section { padding: var(--spacing-xl) 0; }
  .container { padding: 0 2rem; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .booking-steps { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .service-details { grid-template-columns: 1fr 1fr; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-mini, .section-hero-mini { padding-top: calc(72px + var(--spacing-xl)); }
  .breadcrumb { padding-top: calc(72px + 1.5rem); }
  .modal { margin: 0; padding: 2.5rem; }
  .section-cta { padding: 4rem 5rem; margin: 0 auto; }
  .testimonial-card:nth-child(2) { transform: translateY(2rem); }
}

/* DESKTOP (min-width: 1024px) */
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; }
  .header nav { position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 100%; display: flex; align-items: center; }
  .nav-links { display: flex; position: static; transform: none; flex-direction: row; background: transparent; backdrop-filter: none; padding: 0; gap: 0.25rem; height: auto; inset: auto; }
  .nav-links a { font-size: 0.8125rem; padding: 0.5rem 0.75rem; width: auto; max-width: none; text-align: left; }
  .burger { display: none; }
  .header { height: 72px; }
  .header .container { height: 100%; padding: 0 2rem; }
  .header-actions { display: flex; }
  /* Desktop: restore dropdown behavior */
  .nav-dropdown-toggle { display: flex; }
  .nav-dropdown-menu { display: none; position: absolute; transform: translateX(-50%); background-color: var(--surface-container-high); border: 1px solid var(--outline-variant); box-shadow: 0 12px 40px rgba(0,0,0,0.5); padding: 0.375rem; min-width: 160px; border-radius: var(--radius-md); }
  .nav-dropdown-menu.open { display: block; }
  .nav-dropdown-menu li a { font-size: 0.8125rem; padding: 0.625rem 1rem; width: auto; max-width: none; text-align: left; }
  /* Desktop: hide mobile CTA links in nav */
  .nav-links .nav-mobile-cta { display: none; }
  .section-cta { padding: 5rem 6rem; }
}

/* WIDE (min-width: 1440px) */
@media (min-width: 1440px) { .footer-grid { gap: 4rem; } }

/* PRINT */
@media print {
  *, *::before, *::after { background: white !important; color: #000 !important; box-shadow: none !important; }
  @page { size: A4; margin: 20mm 15mm; }
  .header, .footer, nav, .burger, .btn, .modal-overlay, .filter-bar, .lang-toggle, .breadcrumb, .cortex-reveal, .hero-scroll-indicator, .hero-video-wrap { display: none !important; }
  .fade-in { opacity: 1 !important; transform: none !important; }
  .hero { min-height: auto !important; padding: 2rem 0 !important; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .container { max-width: none !important; padding: 0 !important; }
  .section { padding: 1rem 0 !important; }
}