/* ==========================================================================
   N&B EDUCATIONAL ADVISORS - RESPONSIVE DESIGN SYSTEM (FIXED MOBILE HERO)
   Full Breakpoint Optimization: Mobile, iPhone, Android, iPad, Tablet & Desktop
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAPTOPS & DESKTOPS (Max 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .container {
    max-width: 1050px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .nav-menu {
    gap: 1rem;
    margin-left: 1.5rem;
  }

  .nav-link {
    font-size: 0.82rem;
  }

  .logo-emblem-img {
    height: 52px;
  }

  .logo-title {
    font-size: 0.95rem;
  }

  .logo-nb {
    font-size: 1.15rem;
  }

  .logo-tagline {
    font-size: 0.56rem;
    letter-spacing: 1.2px;
  }

  .hero-title {
    font-size: 3.2rem;
  }

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

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

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

/* --------------------------------------------------------------------------
   2. TABLETS & SMALL LAPTOPS (Max 992px) - FIXED HERO STACK & PHOTO DISPLAY
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  :root {
    --header-height: 75px;
  }

  body.no-scroll {
    overflow: hidden;
  }

  /* Mobile Hamburger Toggle Icon */
  .mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    z-index: 10002;
    background: none;
    border: none;
    padding: 0;
    position: relative;
    flex-shrink: 0;
  }

  /* FIX: on mobile the logo was set to never shrink (flex-shrink: 0 on
     desktop), so its full-width text pushed the hamburger icon off-screen
     and body's overflow-x:hidden clipped it, making the menu button vanish.
     Let the logo shrink and truncate instead, and lock the action icons
     (login/cart/hamburger) so they never get squeezed. */
  .logo-link {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  .logo-text-block {
    min-width: 0;
    overflow: hidden;
  }

  .logo-title,
  .logo-tagline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-action {
    flex-shrink: 0;
  }

  .mobile-toggle span {
    width: 100%;
    height: 2.5px;
    background-color: var(--primary-navy);
    border-radius: 3px;
    transition: all 0.35s ease;
    transform-origin: center;
  }

  /* When drawer is OPEN, morph into a bright glowing gold X icon.
     NOTE: kept in normal flow (no position:fixed) so it stays in its
     place next to the login/cart icons instead of shifting them right.
     z-index still lifts it above the drawer overlay. */
  .mobile-toggle.active {
    z-index: 10002;
  }

  .mobile-toggle.active span {
    background-color: var(--secondary-gold) !important;
    box-shadow: 0 0 12px rgba(214, 168, 79, 0.9);
  }

  .mobile-toggle.active span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
  }

  .mobile-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-toggle.active span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
  }

  /* Slide-in Mobile & Tablet Drawer Navigation Menu */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    margin: 0;
    background: rgba(7, 26, 61, 0.98);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.6);
    z-index: 10000;
    padding: 2.5rem 1.25rem 2rem 1.25rem;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Mobile Drawer Logo - Vertical Centered Stack */
  .mobile-nav-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    text-align: center;
    width: 100%;
  }

  .mobile-nav-logo-img {
    height: 98px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto -8px auto;
    filter: drop-shadow(0 0 18px rgba(214, 168, 79, 0.55));
  }

  .mobile-nav-logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .mobile-nav-logo-title {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.15;
    white-space: nowrap;
    text-align: center;
  }

  .mobile-nav-logo-title .logo-nb {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-right: 0.2rem;
  }

  .mobile-nav-logo-tagline {
    font-size: 0.6rem;
    font-weight: 600;
    color: #94A3B8;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 0.2rem;
    white-space: nowrap;
    text-align: center;
  }

  /* Get In Touch Golden Button inside Mobile Drawer */
  .btn-mobile-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-gradient);
    color: var(--dark-navy);
    padding: 0.75rem 2.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(214, 168, 79, 0.45);
    margin-top: 0.75rem;
    transition: all 0.3s ease;
    white-space: nowrap;
  }

  .btn-mobile-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(214, 168, 79, 0.65);
    color: var(--dark-navy);
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-link {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .nav-link.active, .nav-link:hover {
    color: var(--secondary-gold);
  }

  .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .nav-dropdown-toggle {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
  }

  .nav-dropdown-toggle.active, .nav-dropdown-toggle:hover {
    color: var(--secondary-gold);
  }

  .nav-dropdown-toggle .dropdown-arrow {
    transition: transform 0.3s ease;
  }

  .nav-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
  }

  .nav-dropdown-menu {
    position: static;
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    max-height: 120px;
    padding-top: 0.5rem;
  }

  .nav-dropdown-menu a {
    color: var(--secondary-gold);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.35rem 1.1rem;
    border-radius: var(--radius-full);
    background: rgba(214, 168, 79, 0.12);
    border: 1px solid rgba(214, 168, 79, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: all 0.2s ease;
  }

  .nav-dropdown-menu a:hover {
    background: var(--gold-gradient);
    color: var(--dark-navy);
    border-color: var(--secondary-gold);
    box-shadow: 0 4px 12px rgba(214, 168, 79, 0.4);
    padding-left: 1.1rem;
  }

  .btn-header {
    padding: 0.55rem 1.25rem;
    font-size: 0.8rem;
  }

  .logo-emblem-img {
    height: 48px;
  }

  .logo-title {
    font-size: 1rem;
  }

  .logo-tagline {
    font-size: 0.6rem;
  }

  /* Hero Section Mobile/Tablet Stack */
  .hero {
    min-height: auto;
    padding-top: 1.5rem;
    padding-bottom: 3.5rem;
    display: flex;
    flex-direction: column;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 1.5rem 0;
    min-height: auto;
  }

  /* Text Content comes FIRST */
  .hero-content-slider {
    order: 1;
    /* FIX: .hero-grid becomes a column flexbox on mobile (it's a CSS Grid
       with fixed column widths on desktop). Every .hero-content child is
       position:absolute (for the crossfade slide effect), so it has no
       in-flow content, and without an explicit width a flex item shrinks
       to 0px here. That collapsed 0-width box forced every single word of
       the heading onto its own line, blew out the section height, and
       made the fill-in text animation look broken/frozen on mobile only.
       Locking the width fixes the wrap, the overlap with the image/
       WhatsApp button below, and lets the fill-line animation read
       correctly, matching how it already behaves on desktop. */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  /* FIX: each .hero-content slide is position:absolute; left:0 but still
     carried a desktop-only max-width:600px. On phones the slider is
     already narrower than 600px so this never showed, but on iPad widths
     the slider is wider than 600px -- the slide box capped at 600px and,
     since it's pinned to left:0 instead of centered, hugged the left edge
     of the (centered) slider. That dragged the whole heading/subtitle/
     buttons/features block off-center on iPad only. Letting it fill the
     already-centered parent fixes the alignment. */
  .hero-content {
    max-width: 100%;
  }

  .hero-title {
    font-size: 2.8rem;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  /* Student Photo comes SECOND below text - PERFECT IPAD & TABLET CARD DISPLAY */
  .hero-bg-wrapper {
    position: relative;
    width: 100%;
    max-width: 460px;
    height: 520px;
    margin: 2rem auto 1rem auto;
    border-radius: 28px;
    overflow: hidden;
    border: 4px solid var(--secondary-gold);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
    background: var(--dark-navy);
  }

  .hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }

  /* FIX: on mobile the box is much shorter/narrower than on desktop, so the
     vertically-centered book carousel + its 5 selector dots were landing
     right underneath the "Uraan Urdu Series" badge pill -- the badge (same
     z-index, later in the DOM) painted over the dots and hid them
     completely. Reserve extra bottom space so the centered frame settles
     higher and the dots clear the badge instead of sitting behind it.
     Background/animation/everything else here is untouched. */
  .hero-books-photo-slide {
    padding-bottom: 4.75rem;
  }

  .hero-book-dots {
    position: relative;
    z-index: 5;
  }

  .hero-books-badge {
    z-index: 6;
    bottom: 6%;
    max-width: calc(100% - 2.5rem);
    font-size: 0.68rem;
    padding: 0.5rem 0.85rem;
    gap: 0.45rem;
    white-space: normal;
    line-height: 1.3;
  }

  .hero-gold-separator {
    display: none;
  }

  /* Stats Bar */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  /* Services Grid */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  /* CTA Box */
  .cta-box {
    flex-direction: column;
    text-align: center;
    padding: 2.5rem 2rem;
  }

  .cta-left {
    flex-direction: column;
    text-align: center;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* --------------------------------------------------------------------------
   3. PHONES & SMALL TABLETS (Max 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .section {
    padding: 4rem 0;
  }

  .section-title {
    font-size: 2.15rem;
  }

  .subpage-hero {
    padding: 5rem 0 2.5rem 0;
  }

  .subpage-title {
    font-size: 2.1rem;
  }

  .hero-title {
    font-size: 2.35rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

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

  .hero-bg-wrapper {
    max-width: 380px;
    height: 440px;
  }

  .hero-books-badge {
    bottom: 6%;
    max-width: calc(100% - 2.25rem);
    font-size: 0.64rem;
    padding: 0.48rem 0.75rem;
    gap: 0.4rem;
    white-space: normal;
    line-height: 1.3;
  }

  .hero-books-badge i {
    font-size: 0.7rem;
  }

  .about-cards-row {
    grid-template-columns: 1fr;
  }

  .about-card-img-wrap {
    height: 220px;
  }

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

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

  /* Preloader Mobile Scaling */
  .loader-logo-wrap {
    width: 90px;
    height: 90px;
    margin-bottom: 0.35rem;
  }

  .loader-logo-img {
    width: 60px;
    height: 60px;
  }

  .loader-text-base, .loader-text-fill {
    font-size: 1.1rem;
    letter-spacing: 1.5px;
  }

  .loader-tagline-fill {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
  }

  .loader-bar-wrap {
    width: 150px;
    height: 3.5px;
  }

  .loader-percent {
    font-size: 0.8rem;
    margin-top: 0.4rem;
  }
}

/* --------------------------------------------------------------------------
   4. SMALL MOBILE PHONES (Max 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .loader-logo-wrap {
    width: 75px;
    height: 75px;
    margin-bottom: 0.25rem;
  }

  .loader-logo-img {
    width: 50px;
    height: 50px;
  }

  .loader-text-base, .loader-text-fill {
    font-size: 0.95rem;
    letter-spacing: 1px;
  }

  .loader-tagline-fill {
    font-size: 0.52rem;
    letter-spacing: 1px;
  }

  .loader-bar-wrap {
    width: 130px;
  }

  :root {
    --header-height: 70px;
  }

  .container {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .logo-emblem-img {
    height: 56px;
  }

  .logo-link {
    gap: 0.28rem;
  }

  .logo-title {
    font-size: 0.68rem;
    letter-spacing: 0.1px;
  }

  .logo-nb {
    font-size: 0.8rem;
    margin-right: 0.1rem;
  }

  .logo-tagline {
    font-size: 0.46rem;
    letter-spacing: 0.6px;
    margin-top: 0.1rem;
  }

  .btn-header {
    display: none; /* Hide header CTA button on small screen so logo fits cleanly */
  }

  .header-action {
    gap: 0.4rem !important;
  }

  .auth-trigger-btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  .cart-trigger-btn {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  .mobile-toggle {
    width: 24px;
    height: 17px;
  }

  .cart-count-badge {
    width: 17px;
    height: 17px;
    font-size: 0.6rem;
    top: -4px;
    right: -4px;
  }

  .hero-title {
    font-size: 1.95rem;
  }

  .hero-bg-wrapper {
    max-width: 300px;
    border-width: 3px;
  }

  .hero-books-badge {
    bottom: 6%;
    max-width: calc(100% - 1.75rem);
    font-size: 0.56rem;
    padding: 0.4rem 0.65rem;
    gap: 0.35rem;
    white-space: normal;
    line-height: 1.25;
  }

  .hero-books-badge i {
    font-size: 0.62rem;
  }

  .stat-item {
    flex-direction: column;
    text-align: center;
  }

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

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

  .cta-box {
    padding: 2rem 1.25rem;
  }

  .cta-text h3 {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   FOOTER RESPONSIVE
   ========================================================================== */

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

  .footer-brand {
    grid-column: 1 / -1;
    padding-right: 0;
    text-align: center;
  }

  .footer-logo {
    justify-content: center;
  }

  .footer-about-text {
    text-align: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25rem;
  }

  .social-links {
    justify-content: center;
  }

  .footer-links-col,
  .footer-contact-col {
    text-align: left;
  }

  .footer-heading::after {
    left: 0;
  }

  .footer-contact-col .footer-contact-item {
    text-align: left;
  }

  .footer-logo-title {
    font-size: 1.15rem;
  }

  .footer-nb {
    font-size: 1.3rem;
  }

  .footer-logo-img {
    height: 68px;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 2.5rem 0 2rem 0;
  }

  .footer-brand {
    text-align: center;
  }

  .footer-logo {
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    margin-bottom: 0.85rem;
  }

  .footer-logo-text {
    text-align: center;
    width: 100%;
  }

  .footer-logo-img {
    height: 98px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto -8px auto;
    filter: drop-shadow(0 0 18px rgba(214, 168, 79, 0.55));
  }

  .footer-logo-title {
    font-size: 1.15rem;
    white-space: nowrap;
    text-align: center;
  }

  .footer-logo-tagline {
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
  }

  .footer-nb {
    font-size: 1.3rem;
  }

  .footer-about-text {
    text-align: center;
    font-size: 0.85rem;
  }

  .social-links {
    justify-content: center;
  }

  .footer-links-col,
  .footer-contact-col {
    text-align: left;
    padding-left: 1rem;
  }

  .footer-heading::after {
    left: 0;
    transform: none;
  }

  .footer-contact-col .footer-contact-item {
    justify-content: flex-start;
    text-align: left;
  }

  .footer-bottom {
    font-size: 0.75rem;
    padding: 1rem 0;
  }
}

/* Responsive grid rules for Process, Destinations & Testimonials */
@media (max-width: 992px) {
  .process-grid,
  .destinations-grid,
  .shop-products-grid,
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

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

  .pillar-item::after {
    display: none;
  }

  .cart-drawer {
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 576px) {
  .process-grid,
  .destinations-grid,
  .shop-products-grid,
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

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

  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .modal-box {
    padding: 1.75rem 1.25rem;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-md);
  }

  .modal-close {
    top: 1rem;
    right: 1rem;
  }
}

@media (max-width: 768px) {
  .footer-bottom-container {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.65rem;
  }

  .footer-legal-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .testimonial-card-marquee {
    width: 310px;
    padding: 1.5rem;
  }

  .testimonials-marquee-wrapper {
    gap: 1rem;
    margin-top: 2rem;
  }
}

/* Product image lightbox — keep close button on-screen on small devices */
@media (max-width: 576px) {
  .image-lightbox {
    padding: 1.25rem;
  }

  .image-lightbox-close {
    top: 8px;
    right: 8px;
  }

  .image-lightbox-nav.image-lightbox-prev {
    left: 4px;
  }

  .image-lightbox-nav.image-lightbox-next {
    right: 4px;
  }
}