/* ==========================================================================
   Siddhashram Public School — Responsive Overrides
   Mobile-first fixes for all devices & browsers
   ========================================================================== */

/* Before AOS loads — content visible (prevents blank mobile sections) */
html:not(.aos-ready) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-width: 320px;
}

.container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

/* ---- Dynamic viewport (mobile browser address bar fix) ---- */
.hero-section {
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: 100svh;
    min-height: 100dvh;
}

/* ---- Responsive images ---- */
.img-cover-responsive {
    width: 100%;
    height: clamp(220px, 45vw, 400px);
    object-fit: cover;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

/* ---- Header: logo + menu fit on all phones ---- */
.site-header .navbar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.navbar-brand {
    min-width: 0;
    flex: 1 1 auto;
    max-width: calc(100% - 56px);
}

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

.brand-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.9rem, 3.2vw, 1.15rem);
}

.brand-sub {
    font-size: clamp(0.6rem, 2vw, 0.75rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hamburger-btn {
    flex: 0 0 auto;
}

/* ---- Tablet & below: solid header ---- */
@media (max-width: 1199.98px) {
    .page-home .site-header,
    body.page-inner .site-header,
    .site-header {
        background: var(--primary) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: var(--shadow-sm);
    }

    .brand-logo {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }
}

/* Very small phones */
@media (max-width: 359.98px) {
    .brand-name {
        font-size: 0.82rem;
    }

    .brand-sub {
        letter-spacing: 0.03em;
    }

    .brand-logo {
        width: 38px;
        height: 38px;
    }
}

/* ---- Desktop nav: compact on medium-large screens ---- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-header .nav-link {
        font-size: 0.8125rem;
        padding: 0.45rem 0.5rem;
    }

    .site-header .btn-accent.btn-sm {
        font-size: 0.8125rem;
        padding: 0.4rem 0.75rem;
    }
}

/* ---- Hero mobile ---- */
@media (max-width: 767.98px) {
    .hero-section {
        min-height: calc(100svh - 56px);
        min-height: calc(100dvh - 56px);
    }

    .hero-content {
        padding-top: calc(var(--header-height) + 0.5rem);
        padding-bottom: 4rem;
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(1.65rem, 7vw, 2.25rem);
        word-wrap: break-word;
    }

    .hero-description {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
    }

    .hero-pagination {
        bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4rem)) !important;
    }
}

@media (max-width: 575.98px) {
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Sections spacing mobile ---- */
@media (max-width: 767.98px) {
    section,
    .section-padding,
    .welcome-section {
        padding: 3.5rem 0;
    }

    .section-title {
        font-size: clamp(1.5rem, 5.5vw, 1.85rem);
    }

    .section-desc,
    .section-subtitle {
        font-size: 0.95rem;
    }
}

/* ---- Welcome section mobile ---- */
@media (max-width: 767.98px) {
    .welcome-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .welcome-image-wrapper img {
        height: auto;
        min-height: 220px;
        max-height: 320px;
        object-fit: cover;
    }

    .welcome-float-card {
        position: relative;
        bottom: auto;
        right: auto;
        left: auto;
        margin-top: -1.5rem;
        margin-left: 1rem;
        margin-right: 1rem;
        width: fit-content;
        max-width: calc(100% - 2rem);
    }

    .welcome-stats {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: space-between;
    }

    .welcome-stat {
        flex: 1 1 30%;
        min-width: 90px;
    }
}

/* ---- Message cards mobile ---- */
@media (max-width: 767.98px) {
    .message-card {
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
    }

    .message-card-image img {
        width: 100%;
        height: auto;
        min-height: 220px;
        max-height: 320px;
        object-fit: cover;
    }

    .message-card-body {
        padding: 1.25rem;
    }

    .message-quote {
        font-size: 3rem;
    }
}

/* ---- Facility cards ---- */
@media (max-width: 575.98px) {
    .facility-card {
        height: 200px !important;
    }
}

/* ---- Stats row mobile ---- */
@media (max-width: 575.98px) {
    .stat-number {
        font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    }

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

/* ---- Gallery ---- */
@media (max-width: 767.98px) {
    .gallery-filter {
        gap: 0.5rem;
        padding: 0 0.25rem;
    }

    .gallery-filter-btn {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.45rem 0.65rem;
        font-size: 0.75rem;
    }

    .gallery-masonry {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem;
    }

    .gallery-masonry .gallery-item img {
        height: 140px;
    }
}

@media (max-width: 399.98px) {
    .gallery-masonry {
        grid-template-columns: 1fr !important;
    }

    .gallery-masonry .gallery-item img {
        height: 200px;
    }
}

/* ---- Faculty cards ---- */
@media (max-width: 575.98px) {
    .faculty-card-img img,
    .faculty-card-image img {
        height: 260px;
        object-fit: cover;
    }
}

/* ---- Contact & forms ---- */
@media (max-width: 767.98px) {
    .contact-form,
    .contact-info-card {
        padding: 1.25rem;
    }

    .map-container,
    .footer-map iframe {
        height: 260px;
    }
}

/* ---- Page hero inner pages ---- */
@media (max-width: 767.98px) {
    .page-hero {
        padding: calc(var(--header-height) + 1.5rem) 0 2rem;
    }

    .page-hero-title {
        font-size: clamp(1.65rem, 6vw, 2.25rem);
    }

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

/* ---- Mobile offcanvas menu ---- */
@media (max-width: 575.98px) {
    .mobile-nav-offcanvas {
        max-width: min(100%, 360px);
        width: 88% !important;
    }
}

/* ---- Mobile bottom call bar + safe area ---- */
.mobile-call-bar {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 1199.98px) {
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
    }
}

@media (min-width: 1200px) {
    body {
        padding-bottom: 0;
    }
}

.back-to-top {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
}

@media (min-width: 1200px) {
    .back-to-top {
        bottom: 1.5rem;
    }
}

/* ---- Admission popup — full responsive ---- */
.admission-modal .modal-dialog.admission-modal-dialog {
    width: calc(100% - 1.5rem);
    max-width: 500px;
    margin: 0.75rem auto;
}

.admission-modal .modal-content {
    max-height: calc(100dvh - 1.5rem);
    display: flex;
    flex-direction: column;
}

.admission-modal .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}

.admission-modal-image {
    flex-shrink: 0;
    background: var(--light-bg);
}

.admission-modal-image img {
    width: 100%;
    height: auto;
    max-height: min(68dvh, 560px);
    object-fit: contain;
    object-position: center top;
}

.admission-modal-content {
    flex-shrink: 0;
    padding: 1rem 1.25rem 1.25rem;
}

.admission-modal-actions .btn {
    min-height: 48px;
    font-size: 0.9375rem;
}

@media (max-width: 575.98px) {
    .admission-modal .modal-dialog.admission-modal-dialog {
        width: calc(100% - 0.75rem);
        max-width: none;
        margin: 0.375rem auto;
    }

    .admission-modal .modal-content {
        border-radius: 14px;
        max-height: calc(100dvh - 0.75rem);
    }

    .admission-modal-image img {
        max-height: min(58dvh, 480px);
    }

    .admission-modal-actions {
        flex-direction: column;
        gap: 0.65rem;
    }

    .admission-modal-actions .btn {
        width: 100%;
        flex: none;
    }

    .admission-modal .modal-close-btn {
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.45rem;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .admission-modal .modal-dialog.admission-modal-dialog {
        max-width: min(460px, 90vw);
    }

    .admission-modal-image img {
        max-height: min(62dvh, 520px);
    }
}

@media (min-width: 992px) {
    .admission-modal .modal-dialog.admission-modal-dialog {
        max-width: 480px;
    }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
    .admission-modal-image img {
        max-height: 45dvh;
    }

    .hero-section {
        min-height: 100dvh;
    }
}

/* ---- Tables (disclosure) scroll on mobile ---- */
@media (max-width: 767.98px) {
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
    }

    .disclosure-table th,
    .disclosure-table td {
        font-size: 0.8125rem;
        padding: 0.6rem 0.65rem;
        white-space: normal;
        word-break: break-word;
    }

    .disclosure-table th {
        min-width: 120px;
    }
}

/* ---- Download cards stack ---- */
@media (max-width: 575.98px) {
    .download-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .download-btn,
    .download-card-btn {
        margin-left: 0 !important;
        margin-top: 0.75rem;
        width: 100%;
    }
}

/* ---- Footer mobile ---- */
@media (max-width: 767.98px) {
    .footer-brand h3 {
        font-size: 1.15rem;
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

/* ---- CTA section ---- */
@media (max-width: 575.98px) {
    .cta-content .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-content .btn {
        width: 100%;
    }
}

/* ---- Prevent Bootstrap row overflow ---- */
.row {
    --bs-gutter-x: 1.25rem;
}

@media (max-width: 575.98px) {
    .row {
        --bs-gutter-x: 1rem;
    }
}

/* ---- Testimonial swiper mobile ---- */
@media (max-width: 767.98px) {
    .testimonial-card {
        padding: 1.25rem;
    }

    .testimonial-swiper {
        padding-bottom: 2.5rem;
    }
}

/* ---- Academic / admission steps ---- */
@media (max-width: 575.98px) {
    .admission-step {
        flex-direction: column;
        gap: 0.75rem;
    }

    .academic-feature {
        flex-direction: column;
        text-align: center;
    }

    .academic-feature-icon {
        margin: 0 auto;
    }
}

/* ---- Touch targets ---- */
@media (pointer: coarse) {
    .nav-link,
    .mobile-nav-link,
    .gallery-filter-btn,
    .btn {
        min-height: 44px;
    }

    .site-header .nav-link {
        min-height: auto;
    }
}