/* =========================================================================
   TAUWEET — Responsive rules
   Mobile-first base lives in style.css; this file layers breakpoints.
   Tested targets: 1920 1440 1280 1024 768 600 480 430 390 375 320
   ========================================================================= */

/* ---------- Base (mobile, < 600px) grid defaults ---------- */
.goal-grid,
.structure-grid,
.services-grid,
.why-grid,
.locations-grid,
.packages-grid,
.testimonial-track,
.blog-grid,
.related-grid,
.trust-grid,
.footer-top {
  grid-template-columns: 1fr;
}
.two-col { grid-template-columns: 1fr; gap: 32px; }
.two-col.reverse .col-media { order: 0; }
.form-grid { grid-template-columns: 1fr; }
.finder-options { grid-template-columns: 1fr; }
.timeline-desktop { display: none; }
.timeline-mobile { display: flex; }
.footer-top { gap: 40px; }
.hero-actions .btn,
.final-cta-actions .btn { width: 100%; }

/* ---------- >= 380px : tiny phones get breathing room already via clamp() ---------- */
@media (min-width: 380px) {
  .hero-actions .btn,
  .final-cta-actions .btn { width: auto; }
}

/* ---------- >= 480px ---------- */
@media (min-width: 480px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-group.full { grid-column: 1 / -1; }
}

/* ---------- >= 600px ---------- */
@media (min-width: 600px) {
  .goal-grid,
  .services-grid,
  .locations-grid,
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .package-features { font-size: 0.94rem; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .finder-options { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- >= 768px (tablet) ---------- */
@media (min-width: 768px) {
  :root { --header-h: 88px; }
  .structure-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .packages-grid { grid-template-columns: repeat(3, 1fr); }
  .testimonial-track { grid-template-columns: repeat(1, 1fr); max-width: 640px; margin-inline: auto; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr 1fr; }
  .two-col.reverse .col-media { order: 2; }
  .package-card.featured { transform: scale(1.02); }
}

/* ---------- >= 900px : switch timeline to horizontal ---------- */
@media (min-width: 900px) {
  .timeline-desktop { display: block; }
  .timeline-mobile { display: none; }
}

/* ---------- >= 1024px (desktop nav kicks in) ---------- */
@media (min-width: 1024px) {
  .main-nav { display: block; }
  .header-actions .btn { display: inline-flex; }
  .hamburger, .mobile-nav { display: none; }

  .goal-grid { grid-template-columns: repeat(3, 1fr); }
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .locations-grid { grid-template-columns: repeat(3, 1fr); }
  .testimonial-track { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1.4fr repeat(3, 1fr); }

  .hero-content { max-width: 640px; }
  .trust-grid { grid-template-columns: repeat(4, 1fr); }

  .final-cta-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }
}

/* ---------- >= 1280px ---------- */
@media (min-width: 1280px) {
  .container, .container-narrow { padding-inline: 32px; }
}

/* ---------- >= 1440px : a touch more breathing room on very wide screens ---------- */
@media (min-width: 1440px) {
  .container { max-width: 1360px; }
}

/* ---------- >= 1920px ---------- */
@media (min-width: 1920px) {
  .container { max-width: 1480px; }
  body { font-size: 17px; }
}

/* ---------- Fine-tuning narrow phones (<= 375px) ---------- */
@media (max-width: 375px) {
  .container, .container-narrow { padding-inline: 16px; }
  .btn { padding: 13px 22px; font-size: 0.88rem; }
  h1 { font-size: 1.9rem; }
  .consultation-card { padding: 20px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .whatsapp-float, .mobile-nav, .final-cta, .site-footer { display: none; }
}