/* =============================================
   MEDIA QUERIES — The Allergy Clinic
   Breakpoints:
     Laptop : max-width 1024px
     Tablet : max-width 768px
     Mobile : max-width 480px
   ============================================= */

/* =========================================
   ACCESSIBILITY — Respect reduced motion
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .floating-book-btn {
    transition: background-color 0.2s ease;
  }
}

/* =========================================
   LAPTOP (≤ 1024px)
   ========================================= */

@media (max-width: 1024px) {
  /* Nav */
  .nav-links {
    gap: 2rem;
  }

  /* Hero */
  .main-header {
    font-size: 4rem;
  }

  /* What We Do */
  .what-we-do-section {
    margin: 7rem auto 4rem;
  }

  .img-circle-wrapper {
    width: 68%;
  }

  /* Stats */
  .stats-container {
    gap: 2.4rem;
  }

  .stat-number {
    font-size: 4.8rem;
  }

  /* Founder */
  .founder-section {
    margin: 4rem 3rem 6rem;
  }

  .founder-box {
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
  }

  /* Other Doctors */
  .other-doctors-box {
    gap: 2rem;
  }

  /* Services */
  .treatments-grid {
    gap: 2rem;
  }

  /* Pricing */
  .pricing-section-cards {
    gap: 2rem;
  }

  /* Footer */
  .footer-container {
    gap: 3.6rem;
  }
}

/* =========================================
   TABLET (≤ 768px)
   ========================================= */

@media (max-width: 768px) {

  /* ---- NAVIGATION ---- */

  .nav-hamburger {
    display: flex;
  }

  .main-nav {
    padding: 1.4rem 2rem;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 0.8rem 0;
    z-index: 99;
  }

  .nav-links.nav-open {
    display: flex;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    color: var(--color-text-dark) !important;
    display: block;
    padding: 1.4rem 3rem;
    font-size: 1.6rem;
    border-bottom: 1px solid rgba(240, 101, 149, 0.08);
  }

  .nav-links a::after {
    display: none;
  }

  /* ---- HERO SECTIONS ---- */

  .section-landing-page,
  .information-page-section,
  .pricing-page-section {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100svh;
    padding: 12rem 2.4rem 6rem;
    align-items: flex-end;
  }

  .hero-box,
  .information-box,
  .pricing-box {
    grid-column: 1;
    padding: 0;
  }

  .section-landing-page::after,
  .information-page-section::after,
  .pricing-page-section::after {
    background: linear-gradient(
      to top,
      rgba(30, 10, 20, 0.75) 0%,
      rgba(30, 10, 20, 0.45) 55%,
      transparent 100%
    );
  }

  .main-header {
    font-size: 3.4rem;
  }

  .hero-description,
  .info-page-description {
    font-size: 1.6rem;
    max-width: 100%;
    margin-bottom: 3rem;
  }

  /* ---- SHARED SECTION HEADINGS ---- */

  .header {
    font-size: 3rem;
    margin: 0.8rem 0 3rem;
  }

  /* ---- WHAT WE DO ---- */

  .what-we-do-section {
    margin: 6rem auto 4rem;
    padding: 0 2rem;
  }

  .what-we-do-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 3.6rem;
  }

  .what-we-do-container > .img-circle-wrapper:nth-child(1) { grid-column: 1; grid-row: 1; }
  .what-we-do-container > .img-circle-wrapper:nth-child(3) { grid-column: 1; grid-row: 3; }
  .what-we-do-container > .img-circle-wrapper:nth-child(5) { grid-column: 1; grid-row: 5; }

  .WWD-description-one   { grid-column: 1; grid-row: 2; }
  .WWD-description-two   { grid-column: 1; grid-row: 4; }
  .WWD-description-three { grid-column: 1; grid-row: 6; }

  .img-circle-wrapper {
    width: 58%;
  }

  /* ---- STATS ---- */

  .stats-section {
    padding: 6rem 2rem;
  }

  .stats-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 2rem;
  }

  .stat-number {
    font-size: 4.4rem;
  }

  /* ---- DOCTORS ---- */

  .doctors-section-header {
    padding: 7rem 2rem 0;
  }

  .founder-section {
    margin: 3.2rem 2rem 5rem;
    padding: 2.8rem;
  }

  .founder-box {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .founder-img-box {
    justify-content: center;
  }

  .founder-img {
    width: 55%;
    max-width: 260px;
  }

  .other-doctors-section {
    padding: 0 2rem;
    margin: 0 auto 7rem;
  }

  .other-doctors-box {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  /* ---- SERVICES ---- */

  .our-services-section {
    padding: 7rem 2rem;
  }

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

  /* ---- CTA ---- */

  .cta-section {
    min-height: 440px;
    padding: 4rem 2rem;
  }

  .cta-box {
    padding: 3.2rem 2.4rem;
  }

  .cta-heading {
    font-size: 2.8rem;
  }

  .cta-description {
    font-size: 1.5rem;
    margin-bottom: 3rem;
  }

  /* ---- FOOTER ---- */

  .footer {
    padding: 5rem 2rem 2.4rem;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }

  .footer-tagline {
    max-width: 100%;
  }

  /* ---- PRICING ---- */

  .pricing-section-container {
    padding: 0 2rem;
    margin: 7rem auto 4rem;
  }

  .pricing-section-cards {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* ---- INFORMATION PAGE ---- */

  .faq-section {
    padding: 0 2rem;
    margin: 6rem auto 4rem;
  }

  .search-bar-header {
    font-size: 3rem;
    margin: 0.8rem 0 3rem;
  }

  .what-to-expect-section {
    padding: 0 2rem;
    margin: 7rem auto 4rem;
  }

  .information-section {
    padding: 2.4rem;
  }

  /* ---- FLOATING BUTTON (icon only on tablet) ---- */

  .floating-label {
    display: none;
  }

  .floating-book-btn {
    padding: 0;
    border-radius: 50%;
    bottom: 2.4rem;
    right: 2.4rem;
    width: 5.6rem;
    height: 5.6rem;
    justify-content: center;
  }
}

/* =========================================
   MOBILE (≤ 480px)
   ========================================= */

@media (max-width: 480px) {

  /* ---- HERO ---- */

  .section-landing-page,
  .information-page-section,
  .pricing-page-section {
    padding: 10rem 1.8rem 5rem;
  }

  .main-header {
    font-size: 2.8rem;
  }

  .hero-description,
  .info-page-description {
    font-size: 1.5rem;
    margin-bottom: 2.6rem;
  }

  .btn-box {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
  }

  .btn {
    text-align: center;
  }

  /* ---- SECTION HEADINGS ---- */

  .header,
  .search-bar-header,
  .what-to-expect-header {
    font-size: 2.6rem;
  }

  /* ---- WHAT WE DO ---- */

  .img-circle-wrapper {
    width: 72%;
  }

  /* ---- STATS ---- */

  .stats-section {
    padding: 5rem 1.8rem;
  }

  .stats-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem 1.4rem;
  }

  .stat-number {
    font-size: 3.8rem;
  }

  .stat-suffix {
    font-size: 2.4rem;
  }

  .stat-label {
    font-size: 1.2rem;
  }

  /* ---- DOCTORS ---- */

  .other-doctors-box {
    grid-template-columns: 1fr;
  }

  .founder-img {
    width: 70%;
    max-width: 240px;
  }

  .header--founder {
    font-size: 2.4rem;
    text-align: center;
  }

  .founder-description a:link,
  .founder-description a:visited {
    align-self: stretch;
    text-align: center;
  }

  /* ---- SERVICES ---- */

  .treatments-grid {
    grid-template-columns: 1fr;
  }

  .our-services-section {
    padding: 6rem 1.8rem;
  }

  /* ---- CTA ---- */

  .cta-heading {
    font-size: 2.4rem;
  }

  .cta-box {
    padding: 2.8rem 1.8rem;
  }

  /* ---- FOOTER ---- */

  .footer {
    padding: 4rem 1.8rem 2rem;
  }

  .footer-container {
    gap: 2.8rem;
  }

  /* ---- PRICING ---- */

  .pricing-group-title {
    font-size: 1.5rem;
  }

  .pricing-section-container {
    margin: 5rem auto 3rem;
    padding: 0 1.8rem;
  }

  /* ---- INFORMATION ---- */

  .faq-section {
    margin: 5rem auto 3rem;
    padding: 0 1.8rem;
  }

  .what-to-expect-section {
    margin: 5rem auto 3rem;
    padding: 0 1.8rem;
  }

  .information-section {
    padding: 2rem 1.6rem;
  }

  .pdf-link {
    font-size: 1.4rem;
  }

  /* ---- FLOATING BUTTON ---- */

  .floating-book-btn {
    bottom: 1.8rem;
    right: 1.8rem;
    width: 5rem;
    height: 5rem;
  }
}