/* ==========================================================================
   LUMINA PREPARATORY SCHOOL - UNIFIED MEDIA QUERIES
   ========================================================================== */

/* ==========================================================================
   1. TABLET DEVICES 
   (min-width: 768px) and (max-width: 992px)
   Goal: Utilize 2-column grids wherever possible, adjust overlapping elements.
========================================================================== */
@media (min-width: 768px) and (max-width: 992px) {
  /* --- GLOBAL & NAVBAR --- */
  .drawer-logo {
    max-width: 12rem;
  }
  .close-btn {
    font-size: 4rem;
  }
  .promo-banner .banner-content p {
    font-size: 1.5rem;
  }
  .navbar .navbar-menu,
  .navbar .navbar-bottom,
  .navbar .btn-nav-apply,
  .navbar .btn-nav-contact {
    display: none;
  }
  .navbar .hamburger-btn {
    display: block;
  }
  .navbar .navbar-top,
  .navbar.scrolled .navbar-top {
    grid-template-columns: auto 1fr auto;
    border-bottom: none;
    padding-bottom: 0;
  }
  .navbar .nav-brand {
    grid-column: 1;
    text-align: left;
  }
  .navbar .nav-brand img,
  .navbar.scrolled .nav-brand img {
    height: 8rem;
  }
  .navbar .nav-actions {
    grid-column: 3;
  }
  .nav-links a {
    font-size: 2rem;
  }
  .navbar .nav-spacer {
    display: none;
  }
  .navbar .dropdown-menu.mega-menu {
    min-width: 100%;
    grid-template-columns: 1fr;
  }
  .page-hero {
    min-height: 60vh;
  }
  .page-hero .page-hero-title,
  .about-hero-title {
    font-size: 8rem;
    line-height: 0.9;
  }
  .page-hero .page-hero-subtitle {
    font-size: 2rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .footer-col:nth-of-type(3) {
    padding-left: 3rem;
  }
  /* .footer-col.brand-col .center {
    text-align: left;
  }
  .footer-socials {
    justify-content: start;
  } */

  /* --- HOMEPAGE --- */
  .hero-logo {
    max-width: 20rem;
    margin-bottom: 1rem;
  }
  .headline {
    font-size: 6rem;
    margin-bottom: 2rem;
  }
  .sub-headline {
    font-size: 2.5rem;
    line-height: 1.25;
    margin-bottom: 3rem;
  }
  .opening-line {
    font-size: 1.5rem;
    margin-bottom: 3rem;
  }
  .btn {
    font-size: 2rem;
  }
  .intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
  }
  .image-stack {
    height: 350px;
  }
  .floating-badge {
    right: -10px;
    bottom: -20px;
    width: 240px;
  }
  .features-grid {
    grid-template-columns: 1fr 1fr; /* 2 Column layout */
    gap: 2rem;
  }
  /* Center the 3rd feature card on tablet */
  .feature-card:nth-child(3) {
    grid-column: span 2;
    max-width: 50%;
    margin: 0 auto;
  }

  /* --- ABOUT PAGE --- */
  .about-mv .about-mv-row,
  .about-mv .about-mv-row.reverse {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .values-section .values-grid {
    grid-template-columns: 1fr 1fr;
  }
  .founder-section .founder-layout {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  /* --- OUR APPROACH & ADMISSIONS PAGE --- */
  .approach-grid {
    grid-template-columns: 1fr 1fr;
  }
  .approach-card:nth-child(3) {
    grid-column: span 2;
    max-width: 50%;
    margin: 0 auto;
  }
  .age-groups-grid {
    grid-template-columns: 1fr 1fr;
  }
  .support-layout {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .support-pills-grid {
    grid-template-columns: 1fr;
  }
  .timeline-container {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .timeline-container::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
  }
  .timeline-step {
    width: 70%;
    background: var(--bg-surface);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
  }

  /* --- THERAPY & SUPPORT PAGE --- */
  .therapy-pillars .pillars-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  /* --- PROGRAMS PAGE --- */
  .programs-lite .lite-title,
  .programs-growers .growers-title,
  .programs-holiday .holiday-title,
  .programs-extracurricular .extra-title {
    font-size: 5rem;
    line-height: 1;
    margin: 0 0 2rem 0;
  }
  .programs-lite .lite-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .programs-lite .lite-layout .lite-content {
    order: 2;
  }

  .programs-lite .lite-quote-box {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: -30px auto 0 auto;
    z-index: 5;
  }
  .programs-growers .growers-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .programs-growers .growers-layout .growers-image {
    width: 50vw;
  }
  .programs-growers .integrated-badge {
    position: relative;
    top: 0;
    right: 0;
    width: max-content;
    margin: -30px auto 0 auto;
    z-index: 5;
  }
  .programs-extracurricular .extra-grid {
    grid-template-columns: 1fr 1fr;
  }
  .programs-extracurricular .extra-card:nth-of-type(3) {
    grid-column: span 2;
    max-width: 50%;
    margin: 0 auto;
  }
  .programs-holiday .holiday-layout {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  /* --- WONDER WAREHOUSE PAGE --- */
  .wonder-activities-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mechanics-layout,
  .parents-layout {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  /* --- CONTACT & APPLY ONLINE PAGES --- */
  .contact-layout {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
  .upload-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* --- GALLERY PAGE (TABLET) --- */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 uniform columns */
    grid-auto-rows: 280px; /* Slightly shorter on tablet */
  }
}

/* ==========================================================================
   2. MOBILE DEVICES
   (max-width: 767px)
   Goal: 1-column layouts, stacked elements, adjusted typography.
========================================================================== */
@media (max-width: 767px) {
  /* --- GLOBAL & NAVBAR --- */
  .navbar .navbar-menu,
  .navbar .navbar-bottom,
  .navbar .btn-nav-apply,
  .navbar .btn-nav-contact {
    display: none;
  }
  .navbar .hamburger-btn {
    display: block;
    width: 2rem;
    height: 2rem;
  }
  .navbar .navbar-top,
  .navbar.scrolled .navbar-top {
    grid-template-columns: auto 1fr auto;
    border-bottom: none;
    padding-bottom: 0;
  }
  .navbar .nav-brand {
    grid-column: 1;
    text-align: left;
  }
  .navbar .nav-brand img,
  .navbar.scrolled .nav-brand img {
    height: 5rem;
  }
  .navbar .nav-actions {
    grid-column: 3;
  }
  .navbar .nav-spacer {
    display: none;
  }
  .navbar .dropdown-menu.mega-menu {
    min-width: 100%;
    grid-template-columns: 1fr;
  }

  body.banner-active .menu-toggle {
    top: calc(1.5rem + 50px);
  }
  .container {
    padding: 1.5rem;
  }
  .page-hero {
    min-height: 50vh;
  }
  .page-hero-gradient {
    background: linear-gradient(
      to bottom,
      rgba(5, 20, 19, 0.95) 0%,
      rgba(5, 20, 19, 0.75) 40%,
      rgba(5, 20, 19, 0.98) 100%
    );
  }
  .page-hero-content {
    text-align: center;
    margin: 0 auto;
  }
  .headline,
  .page-title,
  .page-hero .page-hero-title,
  .about-hero-title {
    font-size: 3.5rem;
    word-wrap: break-word;
  }
  .section-title,
  .fancy-heading,
  .lite-title,
  .growers-title,
  .extra-title,
  .holiday-title {
    font-size: 2.2rem;
  }
  .sub-headline,
  .page-subtitle,
  .page-hero-subtitle {
    font-size: 1.1rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-col:nth-of-type(1) {
    justify-self: start;
  }
  .footer-socials {
    justify-content: start;
  }
  .footer-col.brand-col .center {
    text-align: left;
  }

  /* --- HOMEPAGE --- */
  .cta-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .btn {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box; /* PREVENTS OVERFLOW: Forces padding to stay inside the 100% width */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .image-stack {
    height: 300px;
    margin-top: 1rem;
    margin-bottom: 3rem; /* Adds space below the image so the badge has room to hang down */
  }

  .floating-badge {
    right: 5%;
    width: 60%;
    bottom: -5rem; /* Pulls the badge down so it only overlaps the bottom edge */
    padding: 1.2rem; /* Reduces the bulky padding */
  }

  .floating-badge .badge-text {
    font-size: 0.9rem; /* Scales the quote down for mobile readability */
    line-height: 1.5;
  }

  .floating-badge .badge-icon {
    width: 30px; /* Shrinks the icon slightly */
    height: 30px;
    margin-bottom: 0.5rem;
  }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .feature-card {
    max-width: 100%;
  }
  .lumina-about,
  .lumina-features,
  .lumina-cta {
    padding: 4rem 0;
  }
  .cta-card-bright {
    padding: 2.5rem 1.5rem;
  }
  .bright-heading {
    font-size: 2.5rem;
  }
  .btn-bright-primary {
    width: 100%;
    justify-content: center;
  }

  /* --- ABOUT PAGE --- */
  .about-mv .about-mv-row,
  .about-mv .about-mv-row.reverse {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .about-mv .about-mv-row.reverse .about-mv-image-col {
    order: 1;
  }
  .about-mv .about-mv-row.reverse .about-mv-text-col {
    order: 2;
  }
  .about-mv .about-mv-img {
    height: 300px;
  }
  .values-section .values-grid {
    grid-template-columns: 1fr;
  }
  .founder-section .founder-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* --- OUR APPROACH & ADMISSIONS PAGE --- */
  .approach-grid {
    grid-template-columns: 1fr;
  }
  .age-groups-grid {
    grid-template-columns: 1fr;
  }
  .support-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .support-pills-grid {
    grid-template-columns: 1fr;
  }
  .timeline-container {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .timeline-container::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
  }
  .timeline-step {
    width: 100%;
    background: var(--bg-surface);
    padding: 2rem 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
  }
  .urgency-banner {
    flex-direction: column;
    text-align: center;
    border-radius: 16px;
  }

  /* --- THERAPY & SUPPORT PAGE --- */
  .therapy-pillars .pillars-grid {
    grid-template-columns: 1fr;
  }
  .therapy-closing .closing-text {
    font-size: 2rem;
  }
  .therapy-closing .closing-banner {
    padding: 4rem 1.5rem;
  }

  /* --- PROGRAMS PAGE --- */
  .programs-lite,
  .programs-extracurricular {
    padding: 4rem 0;
  }
  .programs-growers,
  .programs-holiday {
    padding: 5rem 0;
  }
  .programs-lite .lite-layout {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .programs-lite .lite-quote-box {
    position: relative;
    width: 100%;
    left: 0;
    bottom: 0;
    margin: -30px auto 0 auto;
    padding: 1.5rem;
    z-index: 5;
  }
  .programs-growers .growers-layout {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .programs-growers .growers-image {
    order: -1;
  }
  .programs-growers .integrated-badge {
    position: relative;
    top: 0;
    right: 0;
    width: max-content;
    margin: -30px auto 0 auto;
    z-index: 5;
  }
  .programs-growers .growers-grid {
    grid-template-columns: 1fr;
  }
  .programs-extracurricular .extra-grid {
    grid-template-columns: 1fr;
  }
  .programs-extracurricular .showcase-banner {
    flex-direction: column;
    text-align: center;
  }
  .programs-extracurricular .showcase-icon {
    display: none;
  }
  .programs-holiday .holiday-layout {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .programs-holiday .holiday-image {
    order: -1;
  }
  .programs-holiday .holiday-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .programs-holiday .holiday-footer .dot {
    display: none;
  }

  /* --- WONDER WAREHOUSE PAGE --- */
  .wonder-hero {
    padding: 240px 0 0 0;
  }
  .wonder-hero .page-title {
    font-size: 3rem;
  }
  .wonder-offerings {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  .wonder-concept-card {
    padding: 3rem 1.5rem;
  }
  .wonder-descriptors {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  .wonder-activities-grid {
    grid-template-columns: 1fr;
  }
  .no-pressure-banner h3 {
    font-size: 1.8rem;
  }
  .mechanics-layout,
  .parents-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .mechanics-image {
    order: -1;
  }
  .parent-benefits {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* --- CONTACT & APPLY ONLINE PAGES --- */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact-form-wrapper {
    padding: 2rem 1.2rem;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .form-section {
    padding: 2rem 1.5rem;
  }
  .form-header h1 {
    font-size: 2rem;
  }
  .upload-grid {
    grid-template-columns: 1fr;
  }
  .radio-group {
    flex-wrap: wrap;
    gap: 1rem;
  }
  /* Fix for overflowing emails/numbers on mobile */
  .info-card {
    padding: 1.5rem 1.2rem;
    gap: 1rem;
  }
  .info-details p,
  .info-details a {
    font-size: 1.1rem;
    word-break: break-word;
    overflow-wrap: break-word;
    display: inline-block;
    max-width: 100%;
  }
  .milestone-card {
    padding: 2rem 1.2rem;
  }

  /* --- GALLERY PAGE (MOBILE) --- */
  .gallery-grid {
    grid-template-columns: 1fr; /* 1 uniform column */
    grid-auto-rows: 250px;
    gap: 1rem;
  }
  .gallery-caption {
    font-size: 1.2rem;
  }
  /* Show captions permanently on mobile since there is no 'hover' */
  .gallery-overlay {
    opacity: 1;
    background: linear-gradient(
      to top,
      rgba(5, 20, 19, 0.9) 0%,
      transparent 60%
    );
  }
  .gallery-caption {
    transform: translateY(0);
  }
}

/* ==========================================================================
   3. SMALL MOBILE DEVICES
   (max-width: 480px)
   Goal: Tighter paddings, smaller text for very small screens.
========================================================================== */
@media (max-width: 480px) {
  .headline,
  .page-title,
  .page-hero-title,
  .about-hero-title {
    font-size: 2.4rem;
  }

  .section-title,
  .fancy-heading,
  .lite-title,
  .growers-title,
  .extra-title,
  .holiday-title {
    font-size: 2rem;
  }

  .promo-banner {
    font-size: 0.75rem;
  }

  .feature-card .card-content {
    padding: 1.5rem;
  }

  .milestone-card h4 {
    font-size: 1.5rem;
  }

  .therapy-pillars .pillar-card {
    padding: 2rem 1.2rem;
  }

  .wonder-hero .page-title {
    font-size: 2.5rem;
  }
}