/* ==========================================================================
   سمايل كلينيك — Responsive Stylesheet
   Mobile-first base styles live in style.css / components.css.
   Breakpoints: 640px (sm), 768px (md), 1024px (lg)
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≥ 640px — small tablets
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  /* .hero__stats {
    grid-template-columns: repeat(4, 1fr);
  } */

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .care-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-showcase-media {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .booking-form__actions {
    flex-direction: row;
  }

  .booking-form__actions .btn {
    flex: 1 1 0%;
  }
}

/* --------------------------------------------------------------------------
   ≥ 768px — tablets
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .services-grid,
  .blog-grid,
  .footer-grid,
  .prep-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-showcase-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .compare-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   ≥ 1024px — desktop (matches every other section's breakpoint; nav link
   padding/gaps are trimmed in components.css so all 8 links fit on one
   line without wrapping at this width)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .site-header__bar {
    height: 5rem;
  }

  .site-header__nav {
    display: flex;
  }

  .site-header__actions {
    display: flex;
  }

  .site-header__toggle {
    display: none;
  }

  .site-header__mobile-nav {
    display: none !important;
  }

  .section {
    padding-block: 6rem;
  }

  .about__intro {
    grid-template-columns: repeat(2, 1fr);
  }

  .care-layout {
    grid-template-columns: 1fr 1.1fr;
  }

  .services-grid,
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .prep-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.5rem;
  }

  .journey-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 14rem;
  }

  .gallery-item img {
    height: 100%;
  }

  .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .gallery-item:first-child img {
    height: 100%;
  }

  .gallery-item:first-child .gallery-item__title {
    font-size: 1.0625rem;
  }

  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tech-showcase-features {
    grid-template-columns: repeat(3, 1fr);
  }

  .compare-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}