/* =========================================================
   OptimaStom — responsive.css (all breakpoints / media queries)
   Mobile-first is NOT applied during design phase per CLAUDE.md
   (dental-medical skill). This file is kept for future mobile phase.
   Desktop refinements at 1920px+ are included.
   ========================================================= */

/* --- 1440px+ (large desktop) ----------------------------- */
@media (min-width: 1440px) {
  .container { max-width: 1360px; }
  .navbar__inner { height: 80px; }
  .hero__content { max-width: 700px; }
  .gallery__grid { grid-template-rows: 300px 300px; }
}

/* --- 1920px+ (full HD) ----------------------------------- */
@media (min-width: 1920px) {
  .container { max-width: 1600px; }
  body { font-size: 17px; }
  .services { padding: 120px 0; }
  .about { padding: 120px 0; }
  .gallery { padding: 120px 0; }
  .testimonials { padding: 120px 0; }
  .contact { padding: 120px 0; }
  .gallery__grid { grid-template-rows: 340px 340px; }
}

/* --- 2560px+ (2K) ---------------------------------------- */
@media (min-width: 2560px) {
  .container { max-width: 2000px; }
  body { font-size: 18px; }
}

/* =========================================================
   MOBILE PHASE — to be implemented after desktop approval
   Breakpoints:
   375px  — small phones
   480px  — large phones
   768px  — tablets portrait
   1024px — tablets landscape / small laptops
   ========================================================= */

/* Mobile sticky CTA pill */
@media (max-width: 1023px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: var(--brand-teal);
    color: var(--white);
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0.875rem 2rem;
    border-radius: 100px;
    box-shadow: 0 8px 24px rgba(10,138,138,0.5);
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
  }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding: 0 32px; }

  /* Navbar */
  .navbar__nav,
  .navbar__phone { display: none; }
  .navbar__hamburger { display: flex; }
  .navbar__cta { display: none; }

  /* Hero */
  .hero { min-height: 80vh; }
  .hero__content { max-width: 520px; }

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

  /* About */
  .about__grid { grid-template-columns: 1fr; gap: 3rem; }
  .about__image img { height: 380px; }
  .about__image-wrap::before { display: none; }

  /* Gallery */
  .gallery__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 220px; }
  .gallery__item--main { grid-column: 1 / 3; grid-row: 1; }

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

  /* Contact */
  .contact__grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
  .container { padding: 0 20px; }

  /* Navbar */
  .navbar__nav,
  .navbar__phone,
  .navbar__cta { display: none; }
  .navbar__hamburger { display: flex; }
  .navbar__inner { height: 64px; }

  /* Hero */
  .hero { min-height: 100svh; }
  .hero__content { padding: 100px 0 120px; max-width: 100%; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero__actions { gap: 0.75rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__hours-badge { font-size: 0.72rem; }

  /* Trust bar */
  .trust-bar__stats { gap: 1.5rem; }
  .trust-bar__divider { display: none; }
  .trust-bar__logos { gap: 0.75rem; }
  .insurer-badge { min-width: 90px; padding: 0.75rem 1rem; }
  .insurer-badge img { height: 24px; }

  /* Services */
  .services { padding: 64px 0; }
  .services__grid { grid-template-columns: 1fr; gap: 1rem; }

  /* About */
  .about { padding: 64px 0; }
  .about__grid { grid-template-columns: 1fr; gap: 2rem; }
  .about__image img { height: 280px; }
  .about__image-wrap::before { display: none; }

  /* Gallery */
  .gallery { padding: 64px 0; }
  .gallery__grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 220px); }
  .gallery__item--main { grid-column: 1; grid-row: 1; }

  /* Testimonials */
  .testimonials { padding: 64px 0; }
  .testimonials__grid { grid-template-columns: 1fr; }

  /* Contact */
  .contact { padding: 64px 0; }
  .contact__grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
  .footer__legal { flex-direction: column; gap: 0.5rem; align-items: center; }

  /* Sections */
  .services,
  .about,
  .gallery,
  .testimonials,
  .contact { padding: 64px 0; }
}

/* Small phones (375px) */
@media (max-width: 420px) {
  .hero h1 { font-size: 1.9rem; }
  .btn--primary,
  .btn--outline-white { font-size: 0.875rem; padding: 0.75rem 1.25rem; }
}