/* ============================================================ GDB INTERNATIONAL SCHOOL — MOBILE RESPONSIVE OVERRIDES Covers: home, about, academics, admissions, contact, news, gallery — all pages Must be loaded LAST in the so it wins specificity. ============================================================ */ /* ══════════════════════════════════════════════════════════ 1. GLOBAL — TAP HIGHLIGHT REMOVAL + TOUCH BASICS ══════════════════════════════════════════════════════════ */ *, *::before, *::after { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } /* Keep text selectable but remove the blue flash on links/buttons */ a, button, [role="button"], label, .fb-btn, .nfb-btn, .alt-tab, .pt-tab, .mob-link, .mob-apply, .hero-btn, .nav-apply, .nav-portal, .ticker-cta, .gm-item, .gf-item, .vs-card, .ng-card, .mosaic-tile, .faq-q, .stab, .sec-tab, .testi-btn, .hctrl-btn, .lb-nav, .lb-close, .vm-close, .gf-zoom, .gm-zoom, .back-top, .cal-dl-btn, .ue-dl-btn, .adm-cta-btn, .adm-cta-ghost, .gcs-btn-primary, .gcs-btn-ghost, .cp-apply-btn, .ac-apply-btn, .af-submit, .btn-submit, .btn-cta-primary, .btn-cta-outline, .ncs-btn-primary, .ncs-btn-ghost, .nl-submit, .ng-reset-btn, .btn-see-all { -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none; } /* Restore focus ring for keyboard nav only */ a:focus-visible, button:focus-visible { outline: 2px solid var(--green, #1A7A1A); outline-offset: 3px; } /* ══════════════════════════════════════════════════════════ 2. TICKER — hide CTA on small screens ══════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .ticker-cta { display: none; } .ticker-label { padding: 0 10px; font-size: 0.58rem; } } /* ══════════════════════════════════════════════════════════ 3. NAVBAR — mobile hamburger & menu ══════════════════════════════════════════════════════════ */ @media (max-width: 880px) { .nav-links { display: none !important; } /* Hide apply button but keep Portal visible at tablet */ .nav-actions .nav-apply { display: none !important; } .hamburger { display: flex !important; } } /* On small phones, hide Portal too — logo + hamburger only, no overflow */ @media (max-width: 600px) { .nav-actions { display: none !important; } /* Keep nav-inner from overflowing */ .nav-inner { gap: 0; justify-content: space-between; } /* Move Portal link into mobile nav instead */ .mob-portal-link { display: flex !important; } } /* Portal link only visible in mobile nav drawer */ .mob-portal-link { display: none; } /* Smooth mobile-nav open/close */ .mobile-nav { transition: max-height 0.35s ease, opacity 0.3s ease; max-height: 0; overflow: hidden; opacity: 0; } .mobile-nav.open { max-height: 600px; opacity: 1; } /* Hamburger X animation */ .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 600px) { .nav-inner { padding: 0 16px; height: 60px; overflow: hidden; } .nav-logo img { width: 38px; height: 38px; } .nav-school-name { font-size: 0.8rem; } .nav-school-tag { font-size: 0.52rem; letter-spacing: 1.5px; } } @media (max-width: 480px) { .nav-inner { padding: 0 14px; height: 56px; } .nav-logo img { width: 34px; height: 34px; } .nav-school-name { font-size: 0.75rem; } .nav-school-tag { font-size: 0.48rem; } } /* ══════════════════════════════════════════════════════════ 4. PAGE HERO (shared across about/gallery/contact/news) ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .page-hero { height: 52vh; min-height: 360px; } .page-hero-content { padding: 0 clamp(20px, 5vw, 40px); } .ph-title { font-size: clamp(2.2rem, 8vw, 3.5rem); } .ph-sub { font-size: 0.92rem; } .ph-tags { gap: 10px; } .ph-tags span { font-size: 0.65rem; padding: 6px 12px; } .page-hero-scroll { display: none; } } @media (max-width: 480px) { .page-hero { height: 48vh; min-height: 300px; } .ph-title { font-size: clamp(1.9rem, 9vw, 3rem); } } /* ══════════════════════════════════════════════════════════ 5. HOME PAGE ══════════════════════════════════════════════════════════ */ /* Hero */ @media (max-width: 768px) { .hero { height: 100svh; min-height: 560px; max-height: none; } .hero-float-card, .hero-scroll-hint, .slide-label { display: none; } .slide-content { padding: 0 20px; padding-bottom: 100px; } .title-line { font-size: clamp(2.6rem, 10vw, 4.5rem); letter-spacing: -0.5px; } .slide-body { font-size: 0.9rem; margin-bottom: 28px; } .slide-actions { gap: 12px; } .hero-btn { padding: 13px 22px; font-size: 0.78rem; } .hero-controls { bottom: 24px; gap: 14px; } .hctrl-btn { width: 38px; height: 38px; font-size: 0.8rem; } .hdot { width: 7px; height: 7px; } .hdot.active { width: 22px; } } @media (max-width: 480px) { .title-line { font-size: clamp(2.2rem, 11vw, 3.5rem); } .slide-actions { flex-direction: column; align-items: flex-start; } .hero-btn { width: 100%; justify-content: center; } } /* Marquee band */ @media (max-width: 480px) { .marquee-inner span { font-size: 0.65rem; letter-spacing: 2px; } } /* School levels */ @media (max-width: 1100px) { .levels-grid { grid-template-columns: 1fr 1fr; } .levels-grid .level-card:last-child { grid-column: 1 / 3; } } @media (max-width: 700px) { .levels-grid { grid-template-columns: 1fr; } .levels-grid .level-card:last-child { grid-column: auto; } .level-card-img { height: 200px; } } @media (max-width: 480px) { .levels-section { padding: 60px 16px; } .levels-header { margin-bottom: 40px; } } /* About split */ @media (max-width: 880px) { .about-split { grid-template-columns: 1fr; min-height: auto; } .about-img-side { height: 320px; } .about-img-accent { display: none; } .about-content-side { padding: 40px 24px; } } /* Gallery mosaic (home preview) */ @media (max-width: 700px) { .mosaic-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px 180px; } .mosaic-tall { grid-row: auto; grid-column: span 2; } .mosaic-wide { grid-column: auto; } } @media (max-width: 480px) { .gallery-mosaic { padding: 60px 16px; } .gallery-header { flex-direction: column; align-items: flex-start; gap: 14px; } } /* Why GDB */ @media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; } .why-section { padding: 60px 20px; } .why-card { padding: 24px 20px; } } /* Principal */ @media (max-width: 880px) { .principal-section { grid-template-columns: 1fr; } .principal-img-side { min-height: 300px; } .principal-img-side::after { background: linear-gradient(to top, var(--black-2, #1A1A1A) 0%, transparent 60%); } .principal-content { padding: 36px 24px; } } /* News grid (home) */ @media (max-width: 1100px) { .news-grid { grid-template-columns: 1fr 1fr; } .news-card--featured { grid-column: 1 / 3; } } @media (max-width: 700px) { .news-grid { grid-template-columns: 1fr; } .news-card--featured { grid-column: auto; } .news-section { padding: 60px 20px; } .news-header { flex-direction: column; align-items: flex-start; gap: 14px; } } /* Testimonials */ @media (max-width: 880px) { .testi-card { width: calc(100% - 0px); } } @media (max-width: 480px) { .testi-section { padding: 60px 16px; } } /* CTA section */ @media (max-width: 480px) { .cta-section { padding: 60px 20px; } .cta-actions { flex-direction: column; align-items: center; } .cta-btn-primary, .cta-btn-ghost { width: 100%; justify-content: center; } .cta-meta { flex-direction: column; gap: 12px; } } /* Footer (home) */ @media (max-width: 1100px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 700px) { .footer-top { grid-template-columns: 1fr; gap: 32px; padding: clamp(40px,7vw,60px) 20px; text-align: center; } .footer-brand p { max-width: 100%; } /* Centre logo row */ .footer-logo { justify-content: center; } /* Centre brand block */ .footer-brand { display: flex; flex-direction: column; align-items: center; } /* Centre social icons */ .footer-brand .social-links { justify-content: center; } /* Centre footer column headings & remove hover indent */ .footer-col h5 { text-align: center; } .footer-col a { padding-left: 0 !important; } /* Keep contact items readable: icon + text left-aligned but block centred */ .footer-contact .fc-item { justify-content: center; text-align: left; } /* Footer bottom: stack and centre */ .footer-bottom { flex-direction: column; align-items: center; text-align: center; padding: 20px; gap: 10px; } .footer-bottom p { font-size: 0.72rem; } .footer-bottom-links { justify-content: center; } } /* ══════════════════════════════════════════════════════════ 6. ABOUT PAGE ══════════════════════════════════════════════════════════ */ /* Stats bar */ @media (max-width: 600px) { .qs-inner { flex-wrap: wrap; justify-content: center; } .qs-divider { display: none; } .qs-item { width: 50%; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 20px 12px; } .qs-num { font-size: clamp(1.8rem, 6vw, 2.4rem); } } /* Story section */ @media (max-width: 1100px) { .sd-inner { grid-template-columns: 1fr; gap: 48px; } .sd-img-stack { height: 360px; } .sd-main-img { width: 85%; height: 90%; } .sd-accent-img { width: 50%; height: 48%; } } @media (max-width: 768px) { .sd-img-stack { height: 280px; } .section-dark { padding: 60px 20px; } .sd-heading { font-size: clamp(1.6rem, 5vw, 2.2rem); } } @media (max-width: 480px) { .sd-accent-img { display: none; } .sd-img-stack { height: 240px; } .sd-years-badge { display: none; } } /* Timeline */ @media (max-width: 768px) { .timeline-section { padding: 60px 20px; } .timeline::before { left: 20px; } .tl-item { flex-direction: column !important; padding: 0 0 48px 60px !important; } .tl-dot { left: 20px; top: 0; width: 38px; height: 38px; font-size: 0.78rem; } .tl-content { width: 100%; } .tl-year { font-size: 1.6rem; } } @media (max-width: 480px) { .tl-item { padding: 0 0 40px 52px !important; } .tl-dot { width: 32px; height: 32px; font-size: 0.7rem; } } /* Vision/Mission */ @media (max-width: 1100px) { .vm-cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .vm-cards { grid-template-columns: 1fr; } .vm-section { padding: 60px 20px; } } /* Values */ @media (max-width: 1100px) { .vals-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .vals-grid { grid-template-columns: 1fr; } .values-section { padding: 60px 20px; } } /* Leadership */ @media (max-width: 1100px) { .ls-principal { grid-template-columns: 1fr; } .lsp-img-wrap { min-height: 320px; } .leaders-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .leaders-grid { grid-template-columns: 1fr; } .lsp-stats { flex-wrap: wrap; gap: 20px; } .leadership-section { padding: 60px 20px; } } @media (max-width: 480px) { .lsp-img-wrap { min-height: 260px; } .lsp-content { padding: 28px 20px; } .lsp-name { font-size: 1.5rem; } } /* Awards */ @media (max-width: 1100px) { .aw-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .aw-grid { grid-template-columns: 1fr; } .awards-section { padding: 60px 20px; } } /* Photo strip */ @media (max-width: 768px) { .photo-strip { grid-template-columns: repeat(3, 1fr); height: 180px; } } @media (max-width: 480px) { .photo-strip { grid-template-columns: 1fr 1fr; height: auto; } .ps-item { height: 160px; } .ps-caption { transform: translateY(0); } } /* ══════════════════════════════════════════════════════════ 7. ACADEMICS PAGE ══════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .ac-inner { grid-template-columns: 1fr; gap: 48px; } .ac-inner--reverse { direction: ltr; } .ac-img-wrap { height: 320px; } } @media (max-width: 768px) { .prog-tabs { top: 0; } .pt-inner { padding: 0 12px; } .pt-tab { padding: 12px 12px; font-size: 0.68rem; gap: 5px; } .ac-section { padding: 60px 20px; } .ac-img-wrap { height: 260px; } .ac-sub-imgs { grid-template-columns: 1fr 1fr; } .ac-sub-imgs img { height: 130px; } .sec-tabs { gap: 6px; flex-wrap: wrap; } .sec-tab { padding: 8px 14px; font-size: 0.7rem; } .sec-checklist { grid-template-columns: 1fr; } .fac-grid { grid-template-columns: 1fr 1fr; } .act-grid { grid-template-columns: 1fr 1fr; } .cal-grid { grid-template-columns: 1fr; } .curriculum-section { padding: 60px 20px; } .curr-table-wrap { -webkit-overflow-scrolling: touch; border-radius: 10px; -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%); mask-image: linear-gradient(to right, black 88%, transparent 100%); } .curr-table-wrap::-webkit-scrollbar { height: 4px; } .curr-table-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; } .curr-table-wrap::-webkit-scrollbar-thumb { background: var(--green); border-radius: 4px; } .curr-table th, .curr-table td { padding: 11px 12px; font-size: 0.78rem; white-space: nowrap; } .curr-scroll-hint { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--green); margin-bottom: 10px; font-family: var(--font-sans); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; opacity: 0.85; } .curr-scroll-hint i { font-size: 0.9rem; animation: scrollHintAnim 1.2s ease-in-out infinite alternate; } @keyframes scrollHintAnim { from { transform: translateX(0); } to { transform: translateX(5px); } } } @media (max-width: 480px) { .fac-grid { grid-template-columns: 1fr; } .act-grid { grid-template-columns: 1fr; } .ac-sub-imgs { grid-template-columns: 1fr; } .sec-tabs { flex-direction: column; } .ss-inner { flex-direction: column; align-items: flex-start; } .ss-pills { flex-wrap: wrap; } .facilities-section, .activities-section { padding: 60px 16px; } } /* ══════════════════════════════════════════════════════════ 8. ADMISSIONS PAGE ══════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .criteria-panel { grid-template-columns: 1fr; padding: 60px 20px; } .cp-img-col { padding-right: 0; flex-direction: row; flex-wrap: wrap; gap: 20px; } .cp-img-wrap { flex: 1; min-width: 260px; height: 280px; } .cp-quick-facts { flex: 1; min-width: 240px; } .apply-inner { grid-template-columns: 1fr; gap: 40px; } .faq-inner { grid-template-columns: 1fr; } .fees-grid { grid-template-columns: 1fr; max-width: 460px; } } @media (max-width: 768px) { .adm-level-tabs { top: 0; } .alt-inner { overflow-x: auto; scrollbar-width: none; padding: 0 12px; } .alt-inner::-webkit-scrollbar { display: none; } .alt-tab { padding: 16px 16px; flex: none; min-width: 120px; } .alt-tab .alt-name { font-size: 0.8rem; } .alt-tab .alt-ages { display: none; } .alt-tab > i { font-size: 1.2rem; } .adm-cta-inner { flex-direction: column; text-align: left; } .adm-cta-actions { flex-direction: column; width: 100%; } .adm-cta-btn, .adm-cta-ghost { justify-content: center; } .af-row { grid-template-columns: 1fr; } .apply-form { padding: 24px 20px; } .dates-section { padding: 60px 20px; } .fees-section { padding: 60px 20px; } } @media (max-width: 480px) { .alt-tab { padding: 14px 12px; min-width: 100px; } .cp-img-col { flex-direction: column; } .cp-img-wrap { min-width: 100%; height: 240px; } .stream-pills { flex-direction: column; } .stream-pill { min-width: 100%; } .faq-inner { gap: 0; } .faq-a.open { max-height: 400px; } } /* ══════════════════════════════════════════════════════════ 9. CONTACT PAGE ══════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .contact-cards-inner { grid-template-columns: 1fr 1fr; } .c-card:nth-child(2) { border-right: none; } .c-card:nth-child(3), .c-card:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.07); } .c-card:nth-child(4) { border-right: none; } .contact-main-inner { grid-template-columns: 1fr; gap: 40px; } .contact-info-panel { position: static; } .faq-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .contact-cards-inner { grid-template-columns: 1fr; } .c-card { border-right: none !important; } .c-card:first-child { border-top: none !important; } .form-row { grid-template-columns: 1fr; } .dept-grid { grid-template-columns: 1fr; } .contact-main-section { padding: 60px 0; } .contact-main-inner { padding: 0 20px; } .map-placeholder { height: 280px; } .map-overlay-card { left: 12px; top: 12px; padding: 12px 14px; gap: 10px; } .moc-body strong { font-size: 0.75rem; } } @media (max-width: 480px) { .subject-tabs { gap: 6px; flex-wrap: wrap; } .stab { padding: 7px 12px; font-size: 0.65rem; } .social-row { grid-template-columns: 1fr 1fr; } .cta-actions { flex-direction: column; align-items: stretch; } .btn-cta-primary, .btn-cta-outline { text-align: center; justify-content: center; } .contact-cta-inner h2 { font-size: clamp(1.8rem, 7vw, 2.8rem); } } /* ══════════════════════════════════════════════════════════ 10. NEWS PAGE ══════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .ng-inner { grid-template-columns: 1fr 1fr; } .nl-inner { grid-template-columns: 1fr; gap: 40px; } .nl-form-wrap { max-width: 540px; } } @media (max-width: 900px) { .nf-card { grid-template-columns: 1fr; } .nf-img-wrap { min-height: 260px; } .nf-content { padding: 28px 24px; } .ue-item { grid-template-columns: 70px 36px 1fr; } .ue-day { font-size: 1.6rem; } } @media (max-width: 680px) { /* Filter bar: stack tabs above search, both full-width */ .news-filter-bar { overflow: hidden; } .nfb-inner { height: auto; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px; overflow: hidden; } /* Tabs row: scroll horizontally, never wrap or overflow the page */ .nfb-tabs { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; flex: none; padding-bottom: 4px; /* room for scrollbar on iOS */ } .nfb-btn { flex-shrink: 0; } .nfb-search { width: 100%; } .nfb-search input { width: 100%; } .ng-inner { grid-template-columns: 1fr; } .ue-item { grid-template-columns: 55px 28px 1fr; gap: 0; } .ue-date-block { padding-right: 8px; } .ue-day { font-size: 1.3rem; } .ue-card { padding: 14px 16px; margin-left: 10px; } .ncs-inner { flex-direction: column; text-align: center; } .ncs-actions { justify-content: center; } .news-grid-section { padding: 40px 0 60px; } .ng-inner { padding: 0 16px; } .upcoming-events { padding: 60px 0; } .ue-inner { padding: 0 16px; } } @media (max-width: 480px) { .nf-img-wrap { min-height: 200px; } .nf-content { padding: 20px 16px; } .nf-headline { font-size: 1.4rem; } .ue-download { flex-direction: column; align-items: flex-start; text-align: left; } .nl-form-wrap { padding: 24px 20px; } .newsletter-section { padding: 60px 0; } .nl-inner { padding: 0 16px; } } /* ══════════════════════════════════════════════════════════ 11. GALLERY PAGE ══════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .gm-inner { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .gf-inner { height: 400px; } .vs-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .fb-inner { height: auto; padding: 10px 16px; gap: 8px; } .fb-filters { gap: 5px; } .fb-btn { padding: 6px 12px; font-size: 0.65rem; gap: 4px; } .fb-count { display: none; } .gf-inner { height: auto; grid-template-columns: 1fr; padding: 0 16px; } .gf-large { height: 260px; } .gf-col { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 10px; } .gf-col .gf-item { height: 150px; } /* Always show overlays on touch */ .gf-overlay { opacity: 1; background: linear-gradient(0deg, rgba(15,74,15,0.72) 0%, transparent 65%); } .gm-inner { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; } .gm-overlay { opacity: 1; background: linear-gradient(0deg, rgba(15,74,15,0.68) 0%, transparent 55%); } .vs-grid { grid-template-columns: 1fr; } .vs-inner { padding: 0 16px; } .lb-prev { left: -44px; } .lb-next { right: -44px; } .lb-nav { width: 36px; height: 36px; font-size: 0.82rem; } .lb-container { max-width: 92vw; } .gcs-inner { flex-direction: column; text-align: center; padding: 0 20px; } .gcs-actions { justify-content: center; flex-direction: column; width: 100%; } .gcs-btn-primary, .gcs-btn-ghost { justify-content: center; } .gallery-featured { padding: 32px 0 0; } .gallery-main { padding: 16px 0 60px; } .gm-load-more { padding: 0 16px; } } @media (max-width: 480px) { .gm-inner { grid-template-columns: 1fr 1fr; gap: 8px; } .gm-caption { font-size: 0.7rem; padding: 7px 10px 9px; } .gf-col { grid-template-columns: 1fr; } .gf-col .gf-item { height: 190px; } .lb-prev { left: -36px; } .lb-next { right: -36px; } .lb-nav { width: 30px; height: 30px; font-size: 0.75rem; } .vs-thumb { aspect-ratio: 16/10; } .vs-play-btn { width: 46px; height: 46px; font-size: 1rem; } .video-section { padding: 60px 0; } .gallery-cta-strip { padding: 40px 0; } } /* ══════════════════════════════════════════════════════════ 12. SHARED FOOTER — all inner pages ══════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 680px) { .footer-top { grid-template-columns: 1fr; gap: 32px; padding: clamp(40px,7vw,60px) 20px; text-align: center; } .footer-brand p { max-width: 100%; } /* Centre logo row */ .footer-logo { justify-content: center; } /* Centre brand block */ .footer-brand { display: flex; flex-direction: column; align-items: center; } /* Centre social icons */ .footer-brand .social-links { justify-content: center; } /* Centre footer column headings & remove hover indent */ .footer-col h5 { text-align: center; } .footer-col a { padding-left: 0 !important; } /* Keep contact items readable: icon + text left-aligned but block centred */ .footer-contact .fc-item { justify-content: center; text-align: left; } /* Footer bottom: stack and centre */ .footer-bottom { flex-direction: column; align-items: center; text-align: center; padding: 20px; gap: 10px; } .footer-bottom p { font-size: 0.72rem; } .footer-bottom-links { justify-content: center; } } /* ══════════════════════════════════════════════════════════ 13. BACK-TO-TOP BUTTON ══════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .back-top { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 0.9rem; } } /* ══════════════════════════════════════════════════════════ 14. GENERAL OVERFLOW GUARDS ══════════════════════════════════════════════════════════ */ body { overflow-x: hidden; } /* Tables scroll horizontally on small screens */ .curr-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; } .curr-table { display: table; /* keep proper table layout inside the scrolling wrapper */ } /* Prevent hero text from overflowing on very small phones */ @media (max-width: 360px) { .title-line { font-size: 2rem !important; } .ph-title { font-size: 1.9rem !important; } .slide-actions { flex-direction: column; } .hero-btn { width: 100%; justify-content: center; } } /* ══════════════════════════════════════════════════════════ 15. ADDITIONAL FIXES — map embed, misc gaps ══════════════════════════════════════════════════════════ */ /* Contact page: Google Maps iframe container (was only targeting .map-placeholder) */ @media (max-width: 768px) { .map-embed-container { height: 300px; } .map-overlay-card { left: 10px; top: 10px; padding: 10px 12px; gap: 8px; } } @media (max-width: 480px) { .map-embed-container { height: 240px; border-radius: 12px; } } /* Admissions: stream pills on very small screens */ @media (max-width: 360px) { .stream-pills { flex-direction: column; } .stream-pill { min-width: 100%; text-align: center; justify-content: center; } } /* News: featured card image height on mobile */ @media (max-width: 480px) { .ng-card-img { height: 200px; } } /* About: quick-stats bar on very narrow screens */ @media (max-width: 360px) { .qs-item { width: 100%; } }