/* =========================================================
   GYAN JYOTI SCHOOL
   PREMIUM RESPONSIVE.CSS — GLOBAL RESPONSIVE SYSTEM
   Replace: public/stylesheets/responsive.css

   Designed around the existing EJS pages/header/footer:
   - Home / hero / carousel
   - About / Founder / Advantages / Principal
   - Academics / Top Achievers
   - Events / Sports / Galleries
   - Fees
   - Admission / Registration / Enquiry / Guidelines / Map
   - Faculty / Developer & Management
   - Contact
   - Admin / Dashboard tables
   ========================================================= */


/* =========================================================
   01. GLOBAL SAFETY + PERFORMANCE
   ========================================================= */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

img,
video {
    height: auto;
}

img {
    display: block;
}

iframe {
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    overflow-wrap: anywhere;
}

section {
    max-width: 100%;
}


/* =========================================================
   02. SHARED CONTAINERS
   ========================================================= */

.container,
.about-container,
.contact-container,
.admission-container,
.reg-container,
.enquiry-container,
.principal-container,
.faculty-container,
.records-container,
.map-container,
.fees-container,
.mis-container,
.dev-container,
.rd-container,
.ind-container,
.founder-container,
.advantages-container,
.school-map-container,
.achievers-container {
    width: min(1200px, 92%);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   03. LARGE TABLET — 1100px
   ========================================================= */

@media (max-width: 1100px) {

    .container,
    .about-container,
    .contact-container,
    .admission-container,
    .reg-container,
    .enquiry-container,
    .principal-container,
    .faculty-container,
    .records-container,
    .map-container,
    .fees-container,
    .mis-container,
    .dev-container,
    .rd-container,
    .ind-container,
    .founder-container,
    .advantages-container,
    .school-map-container,
    .achievers-container {
        width: 94% !important;
        max-width: 100% !important;
    }

    /* Common 3-column areas → 2 */
    .welcome-grid,
    .values-grid,
    .support-grid,
    .why-grid,
    .vision-grid,
    .members-grid,
    .fees-grid,
    .mis-grid,
    .process-grid,
    .guide-grid,
    .jrc-grid,
    .event-card-grid,
    .timeline-grid,
    .stats-grid,
    .records-grid,
    .faculty-grid,
    .events-grid,
    .guidelines-grid,
    .dev-team-grid,
    .records-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Two-panel layouts → one */
    .contact-grid,
    .registration-layout,
    .enquiry-layout,
    .principal-card,
    .contact-wrapper,
    .about-history-card,
    .highlight-wrapper,
    .visit-card,
    .location-wrapper,
    .map-layout,
    .form-layout,
    .dance-wrapper,
    .march-wrapper,
    .photo-showcase,
    .rd-gallery,
    .founder-card {
        grid-template-columns: 1fr !important;
    }

    .reg-info-card {
        position: relative !important;
        top: auto !important;
    }
}


/* =========================================================
   04. TABLET / MOBILE — 900px
   ========================================================= */

@media (max-width: 900px) {

    html {
        scroll-padding-top: 85px;
    }

    body {
        font-size: 14px;
    }

    section {
        overflow: hidden;
    }

    /* Header is already controlled by header.ejs.
       These rules only keep it stable. */
    .main-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 99999 !important;
    }

    .main-header-container {
        width: 94% !important;
        max-width: none !important;
    }


    /* =====================================================
       GENERIC HEROES
       ===================================================== */

    .admission-hero,
    .contact-hero,
    .principal-hero,
    .about-page-hero,
    .faculty-hero,
    .records-hero,
    .school-map-hero,
    .fees-hero,
    .mis-hero,
    .team-hero,
    .dev-hero,
    .rd-hero,
    .ind-hero,
    .reg-hero,
    .enquiry-hero,
    .founder-hero,
    .advantages-hero,
    .event-hero,
    .achievers-hero {
        min-height: 350px !important;
        height: auto !important;
        padding: 70px 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .admission-hero h1,
    .contact-hero h1,
    .principal-hero h1,
    .about-page-hero h1,
    .faculty-hero h1,
    .records-hero h1,
    .school-map-hero h1,
    .fees-hero h1,
    .mis-hero h1,
    .team-hero h1,
    .dev-hero h1,
    .rd-hero h1,
    .ind-hero h1,
    .reg-hero h1,
    .enquiry-hero h1,
    .founder-hero h1,
    .advantages-hero h1,
    .event-hero h1,
    .achievers-hero h1 {
        font-size: clamp(34px, 6vw, 48px) !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere;
    }

    .admission-hero p,
    .contact-hero p,
    .principal-hero p,
    .about-page-hero p,
    .faculty-hero p,
    .records-hero p,
    .school-map-hero p,
    .fees-hero p,
    .mis-hero p,
    .team-hero p,
    .dev-hero p,
    .rd-hero p,
    .ind-hero p,
    .reg-hero p,
    .enquiry-hero p,
    .founder-hero p,
    .advantages-hero p,
    .event-hero p,
    .achievers-hero p {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }


    /* =====================================================
       COMMON HEADINGS
       ===================================================== */

    .section-heading h2,
    .contact-heading h2,
    .enquiry-heading h2,
    .home-section-heading h2,
    .about-history-text h2,
    .faculty-heading h2,
    .records-heading h2,
    .guide-heading h2,
    .mis-heading h2,
    .rd-heading h2,
    .ind-heading h2,
    .fees-heading h2,
    .principal-message h2,
    .contact-left h2,
    .highlight-left h2,
    .visit-content h2,
    .march-content h2,
    .dance-content h2,
    .home-cta-card h2,
    .founder-content h2,
    .dev-heading h2,
    .intro h2 {
        font-size: clamp(28px, 4.8vw, 38px) !important;
        line-height: 1.2 !important;
    }

    .section-heading p,
    .contact-heading p,
    .enquiry-heading p,
    .home-section-heading p,
    .faculty-heading p,
    .records-heading p,
    .guide-heading p,
    .mis-heading p,
    .rd-heading p,
    .ind-heading p,
    .fees-heading p,
    .intro p {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }


    /* =====================================================
       MAJOR GRIDS → SINGLE COLUMN
       ===================================================== */

    .welcome-grid,
    .values-grid,
    .support-grid,
    .why-grid,
    .vision-grid,
    .members-grid,
    .fees-grid,
    .mis-grid,
    .process-grid,
    .guide-grid,
    .jrc-grid,
    .event-card-grid,
    .timeline,
    .timeline-grid,
    .stats-grid,
    .form-grid,
    .form-row,
    .records-grid,
    .faculty-grid,
    .events-grid,
    .guidelines-grid,
    .process-timeline,
    .footer-grid,
    .dev-team-grid,
    .achievement-section .records-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-grid,
    .registration-layout,
    .enquiry-layout,
    .principal-card,
    .contact-wrapper,
    .about-history-card,
    .highlight-wrapper,
    .visit-card,
    .location-wrapper,
    .map-layout,
    .form-layout,
    .dance-wrapper,
    .march-wrapper,
    .photo-showcase,
    .rd-gallery,
    .connect-card,
    .founder-card {
        grid-template-columns: 1fr !important;
    }


    /* =====================================================
       COMMON CARDS
       ===================================================== */

    .registration-card,
    .enquiry-form-card,
    .enquiry-info-card,
    .contact-form-card,
    .contact-info-card,
    .reg-info-card,
    .principal-card,
    .contact-left,
    .about-history-card,
    .highlight-left,
    .visit-content,
    .location-info,
    .fees-card,
    .mis-card,
    .value-card,
    .support-card,
    .why-card,
    .vision-card,
    .member-card,
    .welcome-box,
    .stat-card,
    .event-card,
    .jrc-card,
    .timeline-item,
    .timeline-card,
    .process-step,
    .guide-card {
        padding: 26px !important;
        border-radius: 22px !important;
    }


    /* =====================================================
       FORMS
       ===================================================== */

    input,
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        font-size: 16px !important; /* prevents iOS zoom */
    }

    textarea {
        min-height: 120px !important;
        resize: vertical;
    }

    button,
    .submit-btn,
    .btn,
    .btn-cta,
    .btn-primary,
    .home-primary-btn,
    .admission-btn,
    .map-btn,
    .direction-btn,
    .visit-btn {
        max-width: 100%;
    }


    /* =====================================================
       IMAGES
       ===================================================== */

    .principal-photo,
    .faculty-image,
    .topper-image,
    .team-photo,
    .dev-photo,
    .gallery-big img,
    .gallery-small img,
    .dance-photo-grid img,
    .march-images img,
    .big-photo img,
    .side-photos img {
        height: 320px !important;
        max-height: 70vw;
    }

    .founder-photo {
        height: min(420px, 80vw) !important;
    }


    /* =====================================================
       MAPS
       ===================================================== */

    .map-panel iframe,
    .map-box iframe,
    .visit-right iframe {
        width: 100% !important;
        min-height: 380px !important;
    }


    /* =====================================================
       TABLES — NEVER BREAK PAGE WIDTH
       ===================================================== */

    .table-wrapper,
    .dashboard-table-wrap,
    .records-table-wrap,
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .table-wrapper table,
    .dashboard-table-wrap table,
    .records-table-wrap table,
    .table-responsive table {
        min-width: 620px;
        width: 100%;
    }


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

    footer,
    .footer {
        text-align: center !important;
    }

    .footer .container,
    .footer-container,
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .footer-section h4::after,
    .footer h3::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }


    /* =====================================================
       BUTTON ROWS
       ===================================================== */

    .hero-actions,
    .cta-actions,
    .connect-actions {
        flex-wrap: wrap;
        gap: 12px;
    }
}


/* =========================================================
   05. HOME PAGE — MOBILE HERO
   ========================================================= */

@media (max-width: 900px) {

    .hero-section,
    .home-hero-section {
        margin-top: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .hero-container,
    .home-hero-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .carousel,
    .home-carousel {
        width: 100% !important;
        order: 1;
        overflow: hidden !important;
    }

    .carousel-item,
    .home-carousel-item {
        position: relative !important;
        width: 100% !important;
        height: 520px !important;
        min-height: 520px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .carousel-content,
    .home-carousel-content {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 58px !important;
        text-align: center !important;
        z-index: 20 !important;
    }

    .carousel-content h2,
    .home-carousel-content h2 {
        font-size: clamp(30px, 6vw, 40px) !important;
        line-height: 1.15 !important;
        margin-bottom: 14px !important;
        white-space: normal !important;
    }

    .carousel-content p,
    .home-carousel-content p {
        max-width: 500px !important;
        margin: 0 auto 22px !important;
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .hero-mini-text {
        display: inline-block !important;
        max-width: 280px !important;
        margin: 0 auto 14px !important;
        white-space: normal !important;
    }

    .carousel-btn,
    .home-carousel-btn {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px;
        font-size: 18px !important;
        border-radius: 10px !important;
    }

    .carousel-btn.prev,
    .home-carousel-btn.prev {
        left: 12px !important;
    }

    .carousel-btn.next,
    .home-carousel-btn.next {
        right: 12px !important;
    }

    .home-side-panel,
    .about-side-panel {
        width: 100% !important;
        min-height: auto !important;
        order: 2;
        border-left: none !important;
        border-top: 5px solid #ffc300 !important;
    }

    .home-side-panel ul,
    .about-side-panel ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .home-side-panel li a,
    .about-side-panel li a {
        font-size: 12px !important;
        padding: 15px 20px !important;
    }
}


/* =========================================================
   06. EVENTS / SPORTS — MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .event-showcase-card {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .event-photo img {
        width: 100% !important;
        height: 300px !important;
        object-fit: cover !important;
    }

    .event-details {
        padding: 24px !important;
    }

    .event-details h2 {
        font-size: clamp(26px, 6vw, 34px) !important;
    }

    .event-description {
        font-size: 16px !important;
        line-height: 1.75 !important;
        text-align: left !important;
    }

    .event-date {
        font-size: 17px !important;
    }
}


/* =========================================================
   07. TOP ACHIEVERS — MOBILE / TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .achievers-page .records-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero-trophy {
        right: 25px !important;
        width: 115px !important;
        height: 115px !important;
        font-size: 48px !important;
    }
}

@media (max-width: 900px) {

    .achievers-page .records-grid {
        grid-template-columns: 1fr !important;
    }

    .achievers-hero {
        min-height: 330px !important;
    }

    .achievers-page .hero-trophy {
        display: none !important;
    }

    .achievers-page .achievement-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .achievers-page .card-image {
        height: min(330px, 72vw) !important;
    }

    .achievers-page .card-body {
        padding: 22px !important;
    }

    .achievers-page .meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .achievers-page .filter-card {
        overflow: hidden;
    }

    .achievers-page .filters {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .achievers-page .filter-btn {
        min-height: 44px;
    }
}


/* =========================================================
   08. FOUNDER / TEAM / DEVELOPER
   ========================================================= */

@media (max-width: 900px) {

    .founder-card {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .founder-photo {
        height: min(430px, 82vw) !important;
    }

    .founder-content p {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    .founder-points {
        flex-direction: column !important;
    }

    .founder-points div {
        width: 100%;
    }

    .dev-team-grid {
        grid-template-columns: 1fr !important;
    }

    .dev-photo {
        height: min(430px, 82vw) !important;
    }

    .dev-content h3 {
        font-size: 27px !important;
    }
}


/* =========================================================
   09. SCHOOL MAP
   ========================================================= */

@media (max-width: 900px) {

    .location-wrapper {
        grid-template-columns: 1fr !important;
        width: 92% !important;
    }

    .location-info {
        padding: 30px !important;
    }

    .location-info h2 {
        font-size: 32px !important;
    }

    .map-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .map-panel iframe {
        min-height: 420px !important;
        height: 420px !important;
    }

    .guide-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   10. FEES — TABLE / CARDS
   ========================================================= */

@media (max-width: 900px) {

    .fees-grid {
        grid-template-columns: 1fr !important;
    }

    .fees-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .fee-table-wrap,
    .fees-table-wrap {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .fee-table-wrap table,
    .fees-table-wrap table {
        min-width: 600px;
    }
}


/* =========================================================
   11. ADMIN / DASHBOARD
   ========================================================= */

@media (max-width: 1000px) {

    .admin-layout,
    .dashboard-layout {
        grid-template-columns: 1fr !important;
    }

    .admin-sidebar,
    .dashboard-sidebar {
        position: relative !important;
        width: 100% !important;
        min-height: auto !important;
    }

    .admin-main,
    .dashboard-main {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 22px !important;
    }

    .dashboard-cards,
    .stats-cards,
    .analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 650px) {

    .dashboard-cards,
    .stats-cards,
    .analytics-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-main,
    .dashboard-main {
        padding: 16px !important;
    }
}


/* =========================================================
   12. MOBILE HEADER / NAV
   Header.ejs already contains the main behaviour.
   This file only protects it from page-specific CSS.
   ========================================================= */

@media (max-width: 900px) {

    .main-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 999999 !important;
    }

    .main-header-container {
        position: relative !important;
    }

    .navbar {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        width: 82% !important;
        max-width: 370px !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        background: #fff !important;
        display: block !important;
        z-index: 9999999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transition: right .3s ease !important;
        box-shadow: -18px 0 45px rgba(0,0,0,.24) !important;
        padding-top: 90px !important;
    }

    .navbar.open {
        right: 0 !important;
    }

    .nav-menu {
        display: block !important;
        width: 100% !important;
    }

    .nav-menu > li {
        width: 100% !important;
    }

    .nav-menu > li > a,
    .nav-dropdown-btn {
        width: 100% !important;
        min-height: 58px !important;
        padding: 18px 24px !important;
        font-size: 15px !important;
        justify-content: space-between !important;
    }

    .dropdown-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border-top: none !important;
    }

    .dropdown.open > .dropdown-menu {
        display: block !important;
    }

    .dropdown:hover > .dropdown-menu {
        display: none !important;
    }

    .dropdown.open:hover > .dropdown-menu {
        display: block !important;
    }

    .dropdown-menu li a {
        white-space: normal !important;
        font-size: 14px !important;
        padding: 15px 30px !important;
    }

    .hamburger {
        position: relative !important;
        z-index: 10000000 !important;
    }

    body.menu-open {
        overflow: hidden !important;
        height: 100dvh !important;
    }
}


/* =========================================================
   13. SMALL MOBILE — 600px
   ========================================================= */

@media (max-width: 600px) {

    .container,
    .about-container,
    .contact-container,
    .admission-container,
    .reg-container,
    .enquiry-container,
    .principal-container,
    .faculty-container,
    .records-container,
    .map-container,
    .fees-container,
    .mis-container,
    .dev-container,
    .rd-container,
    .ind-container,
    .founder-container,
    .advantages-container,
    .school-map-container,
    .achievers-container {
        width: 92% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .admission-hero,
    .contact-hero,
    .principal-hero,
    .about-page-hero,
    .faculty-hero,
    .records-hero,
    .school-map-hero,
    .fees-hero,
    .mis-hero,
    .team-hero,
    .dev-hero,
    .rd-hero,
    .ind-hero,
    .reg-hero,
    .enquiry-hero,
    .founder-hero,
    .advantages-hero,
    .event-hero,
    .achievers-hero {
        min-height: 300px !important;
        padding: 52px 0 !important;
    }

    .admission-hero h1,
    .contact-hero h1,
    .principal-hero h1,
    .about-page-hero h1,
    .faculty-hero h1,
    .records-hero h1,
    .school-map-hero h1,
    .fees-hero h1,
    .mis-hero h1,
    .team-hero h1,
    .dev-hero h1,
    .rd-hero h1,
    .ind-hero h1,
    .reg-hero h1,
    .enquiry-hero h1,
    .founder-hero h1,
    .advantages-hero h1,
    .event-hero h1,
    .achievers-hero h1 {
        font-size: clamp(28px, 8vw, 36px) !important;
    }

    .carousel-item,
    .home-carousel-item {
        height: 500px !important;
        min-height: 500px !important;
    }

    .carousel-content,
    .home-carousel-content {
        padding: 0 50px !important;
    }

    .carousel-content h2,
    .home-carousel-content h2 {
        font-size: 32px !important;
    }

    .carousel-content p,
    .home-carousel-content p {
        font-size: 15px !important;
    }

    .hero-mini-text,
    .section-tag,
    .hero-badge,
    .contact-badge,
    .principal-badge,
    .map-badge,
    .mis-badge,
    .team-badge,
    .dev-badge,
    .rd-badge,
    .ind-badge {
        font-size: 11px !important;
        padding: 8px 15px !important;
        max-width: 100%;
    }

    .section-heading h2,
    .contact-heading h2,
    .enquiry-heading h2,
    .home-section-heading h2,
    .about-history-text h2,
    .faculty-heading h2,
    .records-heading h2,
    .guide-heading h2,
    .mis-heading h2,
    .rd-heading h2,
    .ind-heading h2,
    .fees-heading h2,
    .principal-message h2,
    .contact-left h2,
    .highlight-left h2,
    .visit-content h2,
    .march-content h2,
    .dance-content h2,
    .home-cta-card h2,
    .founder-content h2,
    .dev-heading h2 {
        font-size: 27px !important;
    }

    .welcome-box,
    .value-card,
    .support-card,
    .why-card,
    .vision-card,
    .member-card,
    .registration-card,
    .enquiry-form-card,
    .enquiry-info-card,
    .contact-form-card,
    .contact-info-card,
    .reg-info-card,
    .principal-card,
    .contact-left,
    .about-history-card,
    .highlight-left,
    .visit-content,
    .location-info,
    .fees-card,
    .mis-card,
    .guide-card {
        padding: 21px !important;
        border-radius: 18px !important;
    }

    .home-side-panel ul,
    .about-side-panel ul {
        grid-template-columns: 1fr !important;
    }

    .principal-photo,
    .faculty-image,
    .topper-image,
    .team-photo,
    .dev-photo,
    .gallery-big img,
    .gallery-small img,
    .dance-photo-grid img,
    .march-images img,
    .big-photo img,
    .side-photos img {
        height: 260px !important;
        max-height: 72vw;
    }

    .founder-photo {
        height: min(380px, 85vw) !important;
    }

    .map-panel iframe,
    .map-box iframe,
    .visit-right iframe {
        min-height: 320px !important;
        height: 320px !important;
    }

    .hero-actions,
    .cta-actions,
    .connect-actions {
        flex-direction: column !important;
        align-items: center !important;
        width: 100%;
    }

    .hero-actions a,
    .cta-actions a,
    .connect-actions a {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    table {
        min-width: 520px;
    }

    /* Achiever filter */
    .achievers-page .filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .achievers-page .filter-btn {
        min-width: 0 !important;
        padding: 0 8px !important;
        font-size: 10px !important;
    }

    .achievers-page .meta-grid {
        grid-template-columns: 1fr !important;
    }

    .achievers-page .card-image {
        height: min(300px, 76vw) !important;
    }

    .achievers-page .result-value {
        font-size: 18px !important;
    }

    .event-photo img {
        height: min(280px, 68vw) !important;
    }
}


/* =========================================================
   14. EXTRA SMALL — 420px
   ========================================================= */

@media (max-width: 420px) {

    .main-header-container {
        width: 94% !important;
    }

    .carousel-item,
    .home-carousel-item {
        height: 460px !important;
        min-height: 460px !important;
    }

    .carousel-content,
    .home-carousel-content {
        padding: 0 48px !important;
    }

    .carousel-content h2,
    .home-carousel-content h2 {
        font-size: 28px !important;
    }

    .carousel-content p,
    .home-carousel-content p {
        font-size: 14px !important;
    }

    .carousel-btn,
    .home-carousel-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }

    .home-primary-btn {
        max-width: 230px !important;
        width: auto !important;
        padding: 13px 24px !important;
    }

    .admission-hero h1,
    .contact-hero h1,
    .principal-hero h1,
    .about-page-hero h1,
    .faculty-hero h1,
    .records-hero h1,
    .school-map-hero h1,
    .fees-hero h1,
    .mis-hero h1,
    .team-hero h1,
    .dev-hero h1,
    .rd-hero h1,
    .ind-hero h1,
    .reg-hero h1,
    .enquiry-hero h1,
    .founder-hero h1,
    .advantages-hero h1,
    .event-hero h1,
    .achievers-hero h1 {
        font-size: 27px !important;
    }

    .section-heading h2,
    .contact-heading h2,
    .enquiry-heading h2,
    .home-section-heading h2,
    .home-cta-card h2 {
        font-size: 24px !important;
    }

    .achievers-page .filters {
        grid-template-columns: 1fr !important;
    }

    .achievers-page .filter-btn {
        min-height: 42px !important;
    }
}


/* =========================================================
   15. VERY WIDE / DESKTOP PROTECTION
   ========================================================= */

@media (min-width: 1400px) {

    .container,
    .about-container,
    .contact-container,
    .admission-container,
    .reg-container,
    .enquiry-container,
    .principal-container,
    .faculty-container,
    .records-container,
    .map-container,
    .fees-container,
    .mis-container,
    .dev-container,
    .rd-container,
    .ind-container,
    .founder-container,
    .advantages-container,
    .school-map-container,
    .achievers-container {
        width: min(1200px, 88%);
    }
}


/* =========================================================
   16. TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .achievement-card:hover,
    .dev-card:hover,
    .guide-card:hover,
    .vision-grid div:hover {
        transform: none !important;
    }

    /* Avoid hover-only UI traps on phones */
    .dropdown:hover > .dropdown-menu {
        display: none !important;
    }

    button,
    a {
        touch-action: manipulation;
    }
}


/* =========================================================
   17. SAFE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* =========================================================
   18. ACCESSIBILITY / TEXT SAFETY
   ========================================================= */

:focus-visible {
    outline: 3px solid #ffc300;
    outline-offset: 3px;
}

input,
select,
textarea {
    min-width: 0;
}

pre,
code {
    max-width: 100%;
    overflow-x: auto;
}

svg,
i {
    flex-shrink: 0;
}


/* =========================================================
   19. FINAL OVERFLOW GUARD
   ========================================================= */

.row,
.grid,
.flex {
    min-width: 0;
}

[class*="grid"] > *,
[class*="wrapper"] > *,
[class*="layout"] > * {
    min-width: 0;
}

.hero-content,
.carousel-content,
.home-carousel-content,
.event-details,
.card-body,
.founder-content,
.dev-content {
    overflow-wrap: anywhere;
}


/* =========================================================
   15. CRITICAL MOBILE FIXES — HOMEPAGE SCROLL + TOUCH
   ========================================================= */

/* Prevent sideways page movement without disabling vertical scrolling. */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
}

/* The homepage wrapper must never lock the document's vertical scroll. */
.gj-home {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Keep every homepage section inside the viewport. */
.gj-home,
.gj-home .gj-section,
.gj-home .gj-quick-strip,
.gj-home .gj-admission,
.gj-home .gj-stats,
.gj-home .gj-gallery,
.gj-home .gj-discover,
.gj-home .gj-testimonials {
    max-width: 100% !important;
}

/* Touch devices: links/buttons must receive the tap immediately. */
.gj-home a,
.gj-home button,
.gj-home [role="button"] {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
}

.gj-home .gj-btn,
.gj-home .gj-hero-arrow,
.gj-home .gj-hero-dot,
.gj-home .gj-quick-links a {
    position: relative;
    z-index: 100 !important;
    pointer-events: auto !important;
}

/* Hero controls stay above all decorative layers. */
.gj-home .gj-hero-arrow {
    z-index: 1000 !important;
    -webkit-tap-highlight-color: transparent;
}

.gj-home .gj-hero-content {
    z-index: 100 !important;
}

/* Never let decorative layers steal a touch event. */
.gj-home .gj-hero-bg,
.gj-home .gj-hero-grid,
.gj-home .gj-hero-glow,
.gj-home .gj-hero-overlay,
.gj-home .gj-hero-number,
.gj-home .gj-image-shine,
.gj-home .gj-shape,
.gj-home [class*="glow"],
.gj-home [class*="shape"] {
    pointer-events: none !important;
}

/* Mobile hero: use the real viewport height, not a rigid desktop height. */
@media (max-width: 900px) {

    .gj-home .gj-hero {
        width: 100% !important;
        min-height: 0 !important;
        height: clamp(610px, 88svh, 760px) !important;
        max-height: none !important;
        overflow: hidden !important;
        contain: paint;
    }

    .gj-home .gj-hero-slider,
    .gj-home .gj-hero-slide {
        width: 100% !important;
        max-width: 100% !important;
    }

    .gj-home .gj-hero-content {
        width: calc(100% - 92px) !important;
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    .gj-home .gj-hero-actions {
        width: 100% !important;
        max-width: 390px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .gj-home .gj-hero-actions .gj-btn {
        width: 100% !important;
        max-width: none !important;
        min-height: 56px !important;
        margin: 0 !important;
    }

    .gj-home .gj-hero-features {
        width: 100% !important;
        max-width: 390px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 14px !important;
        text-align: left !important;
    }

    .gj-home .gj-hero-features span {
        min-width: 0 !important;
        line-height: 1.35 !important;
    }

    .gj-home .gj-hero-arrow {
        width: 48px !important;
        height: 48px !important;
        top: 58% !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .gj-home .gj-arrow-left {
        left: 12px !important;
    }

    .gj-home .gj-arrow-right {
        right: 12px !important;
    }

    .gj-home .gj-hero-bottom {
        left: 20px !important;
        right: 20px !important;
        bottom: 16px !important;
        width: auto !important;
        max-width: none !important;
        gap: 12px !important;
    }

    .gj-home .gj-hero-progress {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 160px !important;
    }

    .gj-home .gj-scroll {
        display: none !important;
    }

    /* Remove expensive mobile-only visual effects. */
    .gj-home .gj-eyebrow,
    .gj-home .gj-btn-glass,
    .gj-home .gj-floating-card,
    .gj-home .gj-image-shine {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .gj-home .gj-hero-slide {
        transform: none !important;
        transition: opacity .35s ease !important;
    }

    .gj-home .gj-hero-slide.is-active {
        transform: none !important;
    }

    .gj-home .gj-hero-glow,
    .gj-home .gj-glow-one,
    .gj-home .gj-glow-two {
        display: none !important;
    }
}

/* Small phones — 360/375/390/414px. */
@media (max-width: 480px) {

    .gj-home .gj-hero {
        height: clamp(590px, 92svh, 700px) !important;
    }

    .gj-home .gj-hero-content {
        width: calc(100% - 76px) !important;
    }

    .gj-home .gj-hero-content h1 {
        font-size: clamp(36px, 10.5vw, 46px) !important;
        line-height: 1.02 !important;
        letter-spacing: -1.2px !important;
    }

    .gj-home .gj-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.45 !important;
        margin-bottom: 20px !important;
    }

    .gj-home .gj-eyebrow {
        font-size: 9px !important;
        letter-spacing: 1.1px !important;
        padding: 8px 11px !important;
        margin-bottom: 18px !important;
    }

    .gj-home .gj-title-accent {
        margin: 14px auto !important;
    }

    .gj-home .gj-hero-actions {
        max-width: 100% !important;
    }

    .gj-home .gj-hero-actions .gj-btn {
        min-height: 54px !important;
        font-size: 14px !important;
        border-radius: 16px !important;
    }

    .gj-home .gj-hero-features {
        max-width: 100% !important;
        gap: 8px 10px !important;
    }

    .gj-home .gj-hero-features span {
        font-size: 9px !important;
    }

    .gj-home .gj-hero-arrow {
        width: 44px !important;
        height: 44px !important;
        top: 57% !important;
    }

    .gj-home .gj-arrow-left {
        left: 8px !important;
    }

    .gj-home .gj-arrow-right {
        right: 8px !important;
    }

    .gj-home .gj-hero-bottom {
        left: 18px !important;
        right: 18px !important;
    }
}

/* Very small phones — keep controls usable without clipping. */
@media (max-width: 360px) {

    .gj-home .gj-hero {
        height: 600px !important;
    }

    .gj-home .gj-hero-content {
        width: calc(100% - 68px) !important;
    }

    .gj-home .gj-hero-content h1 {
        font-size: 34px !important;
    }

    .gj-home .gj-hero-features {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}

/* Reduce animation cost when the device explicitly asks for less motion. */
@media (prefers-reduced-motion: reduce) {
    .gj-home .gj-hero-slide,
    .gj-home .gj-btn,
    .gj-home * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   FINAL DEVICE STABILITY PATCH
   Desktop + Laptop + Tablet + Mobile
   Frontend-only. Backend/routes/EJS variables untouched.
   ========================================================= */

/* ---- Document scroll must ALWAYS remain available ---- */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0;
}

/* Do not let a visual layer create a giant scroll container. */
.gj-home,
.gj-hero,
.gj-hero-slider,
.gj-hero-slide {
    max-width: 100%;
    min-width: 0;
}

/* ---- HERO: stable desktop baseline ---- */
.gj-home .gj-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 680px;
    height: min(820px, 78vh);
    overflow: hidden !important;
    isolation: isolate;
}

.gj-home .gj-hero-slider,
.gj-home .gj-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.gj-home .gj-hero-slide {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    will-change: opacity;
    backface-visibility: hidden;
}

.gj-home .gj-hero-overlay,
.gj-home .gj-hero-bg,
.gj-home .gj-hero-grid,
.gj-home .gj-hero-glow,
.gj-home .gj-hero::after {
    pointer-events: none !important;
}

/* Decorative animation is intentionally disabled:
   it was causing unnecessary paint/compositing work. */
.gj-home .gj-hero-grid,
.gj-home .gj-hero-glow,
.gj-home .gj-hero::after {
    animation: none !important;
}

.gj-home .gj-hero-content {
    position: relative !important;
    z-index: 20 !important;
    width: min(1120px, 82%) !important;
    margin: 0 auto !important;
    padding-top: clamp(120px, 15vh, 170px);
    text-align: left;
}

.gj-home .gj-hero-content h1 {
    max-width: 900px;
    font-size: clamp(54px, 6vw, 92px);
    line-height: .98;
    overflow-wrap: break-word;
}

.gj-home .gj-hero-actions {
    position: relative;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.gj-home .gj-hero-actions .gj-btn {
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

.gj-home .gj-hero-arrow {
    position: absolute !important;
    top: 58% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
    width: 58px !important;
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.gj-home .gj-arrow-left {
    left: 24px !important;
}

.gj-home .gj-arrow-right {
    right: 24px !important;
}

/* Keep arrows visible and never clipped by hero content. */
.gj-home .gj-hero-arrow i {
    pointer-events: none !important;
}

.gj-home .gj-hero-bottom {
    position: absolute !important;
    z-index: 900 !important;
    left: 6%;
    right: 6%;
    bottom: 24px;
    pointer-events: none !important;
}

.gj-home .gj-hero-dots,
.gj-home .gj-hero-progress {
    pointer-events: auto !important;
}

/* ---- NAVBAR: desktop/tablet stable ---- */
.main-header {
    width: 100%;
    max-width: 100%;
}

.main-header-container {
    width: min(1200px, 92%) !important;
    max-width: 1200px !important;
    min-width: 0 !important;
}

.navbar,
.nav-menu {
    min-width: 0 !important;
}

@media (min-width: 901px) {
    .navbar {
        position: relative !important;
        inset: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        overflow: visible !important;
        transform: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .nav-menu {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

    .nav-menu > li {
        flex: 0 0 auto !important;
    }

    .hamburger {
        display: none !important;
    }
}

/* ---- TABLET / SMALL LAPTOP ---- */
@media (max-width: 1100px) and (min-width: 901px) {
    .main-header-container {
        width: 94% !important;
        gap: 14px !important;
    }

    .logo-section {
        min-width: 230px !important;
    }

    .school-logo {
        width: 68px !important;
        height: 68px !important;
    }

    .school-info h1 {
        font-size: 22px !important;
    }

    .school-info p {
        font-size: 12px !important;
    }

    .nav-menu > li > a,
    .nav-dropdown-btn {
        padding: 13px 8px !important;
        font-size: 11px !important;
    }

    .gj-home .gj-hero {
        min-height: 620px;
        height: min(760px, 78vh);
    }

    .gj-home .gj-hero-content {
        width: 84% !important;
        padding-top: 125px;
    }

    .gj-home .gj-hero-content h1 {
        font-size: clamp(50px, 6.5vw, 76px);
    }
}

/* ---- TOUCH TABLETS / PHONES ---- */
@media (max-width: 900px) {
    html {
        overflow-x: clip !important;
        overflow-y: auto !important;
        scroll-behavior: auto !important;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }

    .main-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 999999 !important;
    }

    .main-header-container {
        width: 94% !important;
        min-height: 82px !important;
    }

    /* Full-screen mobile drawer, but only the drawer scrolls while open. */
    .navbar {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(100%) !important;
        right: auto !important;
        left: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        transition: transform .22s ease-out !important;
        will-change: transform;
    }

    .navbar.open {
        transform: translateX(0) !important;
        right: auto !important;
    }

    .nav-menu {
        display: block !important;
        width: 100% !important;
    }

    .nav-menu > li,
    .nav-menu > li > a,
    .nav-dropdown-btn {
        width: 100% !important;
    }

    .dropdown-menu {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        box-shadow: none !important;
    }

    /* The hamburger remains above the drawer. */
    .hamburger {
        position: relative !important;
        z-index: 10000002 !important;
        touch-action: manipulation !important;
    }

    /* IMPORTANT: do not permanently kill document scrolling. */
    body.menu-open {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
    }

    .gj-home .gj-hero {
        height: clamp(560px, 78svh, 720px) !important;
        min-height: 560px !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    .gj-home .gj-hero-content {
        width: calc(100% - 116px) !important;
        max-width: 720px !important;
        margin: 0 auto !important;
        padding-top: clamp(105px, 14svh, 145px) !important;
        text-align: center !important;
    }

    .gj-home .gj-hero-content h1 {
        max-width: 100%;
        font-size: clamp(40px, 8vw, 64px) !important;
        line-height: 1.02 !important;
        letter-spacing: -1.2px !important;
    }

    .gj-home .gj-hero-actions {
        width: 100% !important;
        max-width: 390px !important;
        margin: 0 auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .gj-home .gj-hero-actions .gj-btn {
        width: 100% !important;
        min-height: 54px !important;
    }

    .gj-home .gj-hero-features {
        width: 100% !important;
        max-width: 390px !important;
        margin: 20px auto 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px 12px !important;
        text-align: left !important;
    }

    .gj-home .gj-hero-arrow {
        width: 48px !important;
        height: 48px !important;
        top: 55% !important;
    }

    .gj-home .gj-arrow-left {
        left: 10px !important;
    }

    .gj-home .gj-arrow-right {
        right: 10px !important;
    }

    /* No expensive blur/glow on touch devices. */
    .gj-home *,
    .gj-home *::before,
    .gj-home *::after {
        -webkit-backdrop-filter: none !important;
    }

    .gj-home .gj-hero-slide {
        will-change: opacity;
        transition: opacity .25s linear !important;
    }

    .gj-home .gj-hero-grid,
    .gj-home .gj-hero-glow,
    .gj-home .gj-glow-one,
    .gj-home .gj-glow-two {
        display: none !important;
    }

    .gj-home .gj-quick-inner {
        width: 92% !important;
    }
}

/* ---- NORMAL PHONES ---- */
@media (max-width: 600px) {
    .main-header-container {
        width: 94% !important;
        min-height: 82px !important;
    }

    .logo-section {
        gap: 8px !important;
    }

    .school-logo {
        width: 62px !important;
        height: 62px !important;
    }

    .school-info h1 {
        font-size: 21px !important;
        white-space: nowrap;
    }

    .school-info p {
        font-size: 11px !important;
        white-space: nowrap;
    }

    .hamburger {
        width: 54px !important;
        height: 50px !important;
        flex: 0 0 54px !important;
    }

    .gj-home .gj-hero {
        height: clamp(570px, 82svh, 690px) !important;
        min-height: 570px !important;
    }

    .gj-home .gj-hero-content {
        width: calc(100% - 92px) !important;
        padding-top: clamp(92px, 12svh, 125px) !important;
    }

    .gj-home .gj-hero-content h1 {
        font-size: clamp(36px, 10vw, 48px) !important;
    }

    .gj-home .gj-eyebrow {
        font-size: 9px !important;
        padding: 8px 10px !important;
        margin-bottom: 16px !important;
    }

    .gj-home .gj-hero-subtitle {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .gj-home .gj-hero-features span {
        font-size: 9px !important;
    }

    .gj-home .gj-hero-arrow {
        width: 44px !important;
        height: 44px !important;
        top: 55% !important;
    }

    .gj-home .gj-arrow-left {
        left: 7px !important;
    }

    .gj-home .gj-arrow-right {
        right: 7px !important;
    }

    .gj-home .gj-hero-bottom {
        left: 18px !important;
        right: 18px !important;
        bottom: 14px !important;
    }
}

/* ---- SMALL PHONES ---- */
@media (max-width: 420px) {
    .main-header-container {
        width: 95% !important;
    }

    .school-logo {
        width: 58px !important;
        height: 58px !important;
    }

    .school-info h1 {
        font-size: 19px !important;
    }

    .school-info p {
        font-size: 10px !important;
    }

    .hamburger {
        width: 50px !important;
        height: 48px !important;
    }

    .gj-home .gj-hero {
        height: clamp(560px, 84svh, 650px) !important;
        min-height: 560px !important;
    }

    .gj-home .gj-hero-content {
        width: calc(100% - 78px) !important;
        padding-top: 90px !important;
    }

    .gj-home .gj-hero-content h1 {
        font-size: clamp(34px, 10.5vw, 44px) !important;
    }

    .gj-home .gj-hero-features {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .gj-home .gj-hero-arrow {
        width: 42px !important;
        height: 42px !important;
    }
}

/* ---- VERY SMALL PHONES ---- */
@media (max-width: 360px) {
    .gj-home .gj-hero {
        height: 560px !important;
        min-height: 560px !important;
    }

    .gj-home .gj-hero-content {
        width: calc(100% - 70px) !important;
    }

    .gj-home .gj-hero-content h1 {
        font-size: 32px !important;
    }

    .gj-home .gj-hero-arrow {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ---- PERFORMANCE: remove hover transforms on touch devices ---- */
@media (hover: none), (pointer: coarse) {
    .gj-home .gj-feature-card:hover,
    .gj-home .gj-stat-card:hover,
    .gj-home .gj-gallery-item:hover,
    .gj-home .gj-btn:hover {
        transform: none !important;
    }

    .gj-home .gj-btn,
    .gj-home .gj-hero-arrow,
    .gj-home a,
    .gj-home button {
        touch-action: manipulation !important;
    }
}

/* ---- REDUCED MOTION / LOW POWER ---- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .gj-home *,
    .gj-home *::before,
    .gj-home *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   POPUP PERFORMANCE PATCH
   The popup is a floating advertisement, not a scroll-lock modal.
   ========================================================= */

#gjPopupOverlay,
.gj-popup-overlay,
#popupOverlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#gjPopupOverlay,
.gj-popup-overlay,
#popupOverlay {
    touch-action: pan-y !important;
}

/* Keep the page responsive while the ad is visible.
   Only the actual popup card receives pointer events. */
#gjPopupOverlay.is-visible,
.gj-popup-overlay.is-visible,
#popupOverlay.show {
    pointer-events: none !important;
}

#gjPopupOverlay.is-visible .gj-popup,
.gj-popup-overlay.is-visible .gj-popup,
#popupOverlay.show .homepage-popup {
    pointer-events: auto !important;
}

.gj-popup,
.homepage-popup {
    max-width: min(720px, calc(100vw - 28px)) !important;
    max-height: min(720px, calc(100dvh - 28px)) !important;
}

@media (max-width: 600px) {
    .gj-popup,
    .homepage-popup {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 18px !important;
    }
}

/* FINAL PREMIUM DEVICE / TOUCH / PERFORMANCE OVERRIDES */
html,body{width:100%!important;max-width:none!important;min-width:0!important;overflow-x:auto!important;overflow-y:auto!important;touch-action:pan-x pan-y pinch-zoom!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:auto!important;scroll-behavior:auto!important}
body.menu-open{overflow:auto!important;height:auto!important;touch-action:pan-x pan-y pinch-zoom!important}
.gj-home{width:100%!important;max-width:none!important;overflow:visible!important;touch-action:pan-x pan-y pinch-zoom!important}
.gj-home .gj-hero{touch-action:pan-x pan-y!important;overflow:hidden!important}
.gj-home .gj-hero-bg,.gj-home .gj-hero-grid,.gj-home .gj-hero-glow,.gj-home .gj-hero-overlay,.gj-home .gj-hero-number,.gj-home .gj-hero::before,.gj-home .gj-hero::after{pointer-events:none!important}
.gj-home .gj-hero-glow{display:none!important}
.gj-home .gj-hero-slide{pointer-events:none!important;transform:none!important;transition:opacity .18s linear!important;will-change:opacity}
.gj-home .gj-hero-slide.is-active{pointer-events:auto!important}
.gj-home .gj-hero-content{z-index:100!important;pointer-events:auto!important}
.gj-home .gj-hero-actions{z-index:110!important;pointer-events:auto!important}
.gj-home .gj-hero-actions a,.gj-home .gj-hero-arrow,.gj-home .gj-hero-dot{z-index:120!important;pointer-events:auto!important;touch-action:manipulation!important;cursor:pointer!important}
@media(hover:none),(pointer:coarse){.gj-home *,.gj-home *::before,.gj-home *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.gj-home .gj-image-shine{display:none!important}}
#gjPopupOverlay,.gj-popup-overlay,#popupOverlay{pointer-events:none!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;align-items:flex-end!important;justify-content:flex-end!important;padding:0 10px 10px 0!important;touch-action:pan-x pan-y pinch-zoom!important}
#gjPopupOverlay .gj-popup,.gj-popup-overlay .gj-popup,#popupOverlay .homepage-popup{pointer-events:auto!important;width:250px!important;height:145px!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;margin:0!important;border-radius:12px!important;box-shadow:0 8px 24px rgba(0,0,0,.28)!important;transform:translate3d(8px,8px,0)!important;transition:opacity .14s ease,transform .14s ease!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#gjPopupOverlay.is-visible .gj-popup,.gj-popup-overlay.is-visible .gj-popup,#popupOverlay.show .homepage-popup{transform:translate3d(0,0,0)!important}
@media(max-width:600px){#gjPopupOverlay,.gj-popup-overlay,#popupOverlay{padding:0 6px 6px 0!important}#gjPopupOverlay .gj-popup,.gj-popup-overlay .gj-popup,#popupOverlay .homepage-popup{width:185px!important;height:108px!important;max-width:calc(100vw - 12px)!important;border-radius:10px!important}}
@media(max-width:380px){#gjPopupOverlay .gj-popup,.gj-popup-overlay .gj-popup,#popupOverlay .homepage-popup{width:170px!important;height:100px!important}}


/* =========================================================
   FINAL SITE-WIDE TOUCH / PERFORMANCE OVERRIDES
   Backend-safe. These are intentionally last so they win over
   older responsive rules without changing routes or structure.
========================================================= */
html,body{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:auto!important;
    scroll-behavior:auto!important;
}
body.menu-open{
    overflow:auto!important;
    height:auto!important;
    touch-action:pan-x pan-y pinch-zoom!important;
}
.gj-home{width:100%!important;max-width:none!important;min-width:0!important;overflow:visible!important;}
.gj-home .gj-hero{position:relative!important;overflow:hidden!important;isolation:isolate!important;touch-action:pan-y!important;}
.gj-home .gj-hero-bg,.gj-home .gj-hero-grid,.gj-home .gj-hero-glow,.gj-home .gj-hero-overlay,.gj-home .gj-hero-number,.gj-home .gj-hero::before,.gj-home .gj-hero::after{pointer-events:none!important;}
.gj-home .gj-hero-glow{display:none!important;}
.gj-home .gj-hero-slide{pointer-events:none!important;transform:none!important;transition:opacity .18s linear!important;will-change:auto!important;}
.gj-home .gj-hero-slide.is-active{pointer-events:auto!important;}
.gj-home .gj-hero-content{position:relative!important;z-index:100!important;pointer-events:auto!important;}
.gj-home .gj-hero-actions{position:relative!important;z-index:150!important;pointer-events:auto!important;}
.gj-home .gj-hero-actions a,.gj-home .gj-hero-arrow,.gj-home .gj-hero-dot{position:relative!important;z-index:200!important;pointer-events:auto!important;touch-action:manipulation!important;cursor:pointer!important;}
.gj-home .gj-hero-arrow{position:absolute!important;top:50%!important;width:56px!important;height:56px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;transform:translateY(-50%)!important;z-index:250!important;}
.gj-home .gj-arrow-left{left:24px!important;right:auto!important;}
.gj-home .gj-arrow-right{right:24px!important;left:auto!important;}
@media(hover:none),(pointer:coarse){
    .gj-home *,.gj-home *::before,.gj-home *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
    .gj-home .gj-image-shine,.gj-home .gj-hero-glow{display:none!important;}
    .gj-home .gj-btn:hover{transform:none!important;}
}
#gjPopupOverlay{position:fixed!important;inset:0!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;padding:0 14px 14px 0!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important;touch-action:pan-x pan-y pinch-zoom!important;z-index:999999!important;}
#gjPopupOverlay .gj-popup{pointer-events:auto!important;width:240px!important;height:138px!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;margin:0!important;border-radius:14px!important;box-shadow:0 10px 28px rgba(0,0,0,.25)!important;transform:translate3d(8px,8px,0)!important;transition:opacity .14s ease,transform .14s ease!important;overflow:hidden!important;will-change:opacity,transform!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#gjPopupOverlay.is-visible .gj-popup{transform:translate3d(0,0,0)!important;}
#gjPopupOverlay .gj-popup-slide-overlay{pointer-events:none!important;}
#gjPopupOverlay .gj-popup-content{left:14px!important;right:14px!important;bottom:12px!important;width:auto!important;}
#gjPopupOverlay .gj-popup-content h2{font-size:17px!important;line-height:1!important;margin:0 0 5px!important;}
#gjPopupOverlay .gj-popup-content p{font-size:8px!important;line-height:1.25!important;margin:0 0 7px!important;}
#gjPopupOverlay .gj-popup-badge,#gjPopupOverlay .gj-popup-footer{display:none!important;}
#gjPopupOverlay .gj-popup-button{padding:6px 10px!important;font-size:8px!important;gap:5px!important;touch-action:manipulation!important;}
#gjPopupOverlay .gj-popup-close,#gjPopupOverlay .gj-popup-arrow{width:26px!important;height:26px!important;font-size:9px!important;padding:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;touch-action:manipulation!important;}
#gjPopupOverlay .gj-popup-close{top:6px!important;right:6px!important;}
#gjPopupOverlay .gj-popup-prev{left:6px!important;}
#gjPopupOverlay .gj-popup-next{right:6px!important;}
@media(max-width:900px){.gj-home .gj-hero-arrow{width:48px!important;height:48px!important;}.gj-home .gj-arrow-left{left:14px!important;}.gj-home .gj-arrow-right{right:14px!important;}}
@media(max-width:620px){
    .gj-home .gj-hero{min-height:610px!important;height:clamp(610px,82svh,720px)!important;}
    .gj-home .gj-hero-content{width:88%!important;margin:0 auto!important;padding-left:0!important;padding-right:0!important;}
    .gj-home .gj-hero-content h1{font-size:clamp(38px,10vw,54px)!important;line-height:1.04!important;}
    .gj-home .gj-hero-actions{flex-direction:column!important;align-items:center!important;gap:10px!important;}
    .gj-home .gj-hero-actions a{width:min(92%,360px)!important;min-height:50px!important;}
    .gj-home .gj-hero-arrow{width:46px!important;height:46px!important;top:52%!important;}
    .gj-home .gj-arrow-left{left:9px!important;}.gj-home .gj-arrow-right{right:9px!important;}
    #gjPopupOverlay{padding:0 7px 7px 0!important;}
    #gjPopupOverlay .gj-popup{width:180px!important;height:104px!important;max-width:calc(100vw - 12px)!important;border-radius:10px!important;}
    #gjPopupOverlay .gj-popup-content{left:9px!important;right:9px!important;bottom:8px!important;}
    #gjPopupOverlay .gj-popup-content h2{font-size:13px!important;}
    #gjPopupOverlay .gj-popup-content p{display:none!important;}
    #gjPopupOverlay .gj-popup-close,#gjPopupOverlay .gj-popup-arrow{width:20px!important;height:20px!important;font-size:8px!important;}
}
@media(max-width:380px){.gj-home .gj-hero-arrow{width:42px!important;height:42px!important;}.gj-home .gj-arrow-left{left:6px!important;}.gj-home .gj-arrow-right{right:6px!important;}#gjPopupOverlay .gj-popup{width:168px!important;height:96px!important;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}