/* =============================================================
   responsive.css — All Responsive Breakpoints (max-width)
   Dr. Swathi Skin & Cosmetic Clinic
   
   Breakpoints used:
     max-width: 1279px  → below large desktop
     max-width: 1023px  → below desktop / tablet landscape
     max-width: 767px   → below tablet / large mobile
     max-width: 479px   → small mobile (phones ≤ 480px)
   ============================================================= */

/* =============================================================
   ── LARGE DESKTOP ADJUSTMENTS (≤ 1279px)
   ============================================================= */
@media (max-width: 1279px) {
  .container {
    padding: 0 3rem;
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
  }
}

/* =============================================================
   ── TABLET LANDSCAPE / DESKTOP BREAKPOINT (≤ 1023px)
   ============================================================= */
@media (max-width: 1023px) {

  /* Container */
  .container {
    padding: 0 2rem;
  }

  /* Section padding */
  .section-padding {
    padding: 5rem 0;
  }

  /* Nav — switch to mobile menu */
  .nav-links {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
  }

  /* Hero */
  .hero-swiper,
  .hero-swiper .swiper-wrapper,
  .hero-swiper .swiper-slide {
    height: 620px;
  }
  .hero-stats {
    gap: 1.5rem;
  }

  /* Expertise */
  .expertise-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Why Choose */
  .why-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .why-image-wrapper {
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 4/3;
  }

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

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

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
  }
  .footer {
    padding: 4rem 0 2rem;
  }

  /* Map */
  .map-wrapper {
    aspect-ratio: 4/3;
    border-radius: 1.5rem;
  }

  /* Schedule Card */
  .schedule-card {
    padding: 2rem;
  }
}

/* =============================================================
   ── TABLET / LARGE MOBILE (≤ 767px)
   ============================================================= */
@media (max-width: 767px) {

  /* Container */
  .container {
    padding: 0 1.25rem;
  }

  /* Section padding */
  .section-padding {
    padding: 4rem 0;
  }

  /* Nav */
  .brand {
    font-size: 1.1rem;
  }

  /* Hero — single column, shorter height on mobile */
  .hero-swiper,
  .hero-swiper .swiper-wrapper,
  .hero-swiper .swiper-slide {
    height: auto;
    min-height: 520px;
  }
  .hero-swiper .swiper-slide {
    padding-top: 2.5rem;
    padding-bottom: 4rem; /* room for pagination */
    align-items: flex-start;
  }
  /* Service page hero padding on mobile */
  .hero:not(:has(.hero-swiper)) {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .hero-content-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-desc {
    max-width: 100%;
  }
  .hero-buttons {
    justify-content: flex-start;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    text-align: left;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1.5rem;
  }

  /* Section Header */
  .section-header {
    margin-bottom: 2.5rem;
  }

  /* Expertise */
  .expertise-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .glass-card {
    padding: 2rem;
  }

  /* Treatments */
  .treatments-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  .treatments-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .treatment-card {
    padding: 1.75rem;
  }

  /* Filter tabs — scrollable on mobile */
  .filter-tabs {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .filter-btn {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
  }

  /* Why Choose */
  .why-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .why-image-wrapper {
    max-width: 100%;
    aspect-ratio: 4/3;
  }
  .why-accordion-header {
    padding: 1.25rem;
    gap: 1rem;
  }
  .why-accordion-content p {
    padding: 0 1.25rem 1.25rem 1.25rem;
  }
  .why-accordion-item .why-icon {
    width: 3rem;
    height: 3rem;
  }
  .why-list {
    margin-top: 2rem;
  }

  /* Gallery */
  .gallery-grid {
    gap: 1.5rem;
  }

  /* Testimonials */
  .test-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .test-card {
    padding: 2rem;
    min-height: auto;
  }

  /* CTA */
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .cta-buttons .btn {
    width: 100%;
    max-width: 320px;
  }

  /* Location */
  .location-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .map-wrapper {
    aspect-ratio: 4/3;
    border-radius: 1rem;
  }
  .schedule-card {
    padding: 1.25rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
  }
  .footer {
    padding: 3rem 0 1.5rem;
  }
  .footer-brand {
    font-size: 1.25rem;
  }
  .footer-desc {
    max-width: 100%;
  }

  /* Buttons */
  .btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
  }
}

@media (max-width:575px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* =============================================================
   ── SMALL MOBILE (≤ 479px)
   ============================================================= */
@media (max-width: 479px) {

  /* Container */
  .container {
    padding: 0 1rem;
  }

  /* Section padding */
  .section-padding {
    padding: 3rem 0;
  }

  /* Nav */
  .brand {
    font-size: 1rem;
  }

  /* Hero */
  .hero-swiper,
  .hero-swiper .swiper-wrapper,
  .hero-swiper .swiper-slide {
    min-height: 480px;
  }
  .hero-swiper .swiper-slide {
    padding-top: 2rem;
    padding-bottom: 3.5rem;
  }
  .hero:not(:has(.hero-swiper)) {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .hero-stats {
    gap: 0.75rem 0.5rem;
  }
  .hero-stat-value {
    font-size: 1.4rem;
  }

  /* Buttons */
  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-buttons .btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  /* Expertise cards */
  .glass-card {
    padding: 1.5rem;
  }
  .card-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  /* Treatment card */
  .treatment-card {
    padding: 1.5rem;
  }
  .treatment-icon-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.25rem;
  }

  /* Why Choose */
  .why-accordion-header {
    padding: 1rem;
    gap: 0.75rem;
  }
  .why-accordion-item .why-icon {
    width: 2.75rem;
    height: 2.75rem;
  }
  .why-accordion-item .why-icon .material-symbols-outlined {
    font-size: 24px;
  }
  .why-accordion-content p {
    padding: 0 1rem 1rem 1rem;
  }

  /* Testimonials */
  .test-card {
    padding: 1.5rem;
  }

  /* Footer */
  .footer {
    padding: 2.5rem 0 1.25rem;
  }
  .footer-grid {
    gap: 1.5rem;
  }
  .footer-bottom {
    font-size: 0.8rem;
  }

  /* Schedule table */
  .schedule-table td {
    font-size: 0.9rem;
    padding: 0.6rem 0;
  }

  /* Section header */
  .section-header {
    margin-bottom: 2rem;
  }

  /* Filter tabs */
  .filter-btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.85rem;
  }
}

/* =============================================================
   ── NAV LINKS — Desktop only (enforced via JS, aided by CSS)
   ============================================================= */
@media (min-width: 1024px) {
  .nav-links {
    display: flex;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .mobile-menu-btn {
    display: none;
  }

  /* Expertise — 3 column */
  .expertise-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Treatments — 3 column */
  .treatments-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Why Choose — 2 column with image */
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }
  .why-image-wrapper {
    aspect-ratio: 3/4;
    max-width: none;
    margin: 0;
  }

  /* Gallery — 3 column */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Testimonials — 3 column */
  .test-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Location — 2 column */
  .location-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 4rem;
  }

  /* Map full height */
  .map-wrapper {
    aspect-ratio: auto;
    height: 100%;
    min-height: 400px;
    border-radius: 1.5rem;
  }

  /* Schedule card */
  .schedule-card {
    padding: 2rem;
  }

  /* Footer — 4 column */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
  }
  .footer {
    padding: 5rem 0 2rem;
  }

  /* Section padding */
  .section-padding {
    padding: 6rem 0;
  }
}