/* =========================================================
   JEEVAASHRAMAM — FINAL UNIFIED HERO SYSTEM
   Load this file AFTER the main stylesheet.
   Purpose:
   Every page uses the HOME hero dimensions, artwork framing,
   typography and spacing. Page title/content remains dynamic.
========================================================= */

/* HOME is the reference model */
.hero-section,
.jv-hero,
.hero,
.updates-hero,
.about-hero,
.transparency-hero,
.contact-hero,
.nature-hero,
.project-hero,
.donate-hero {
    position: relative;
    width: 100% !important;
    height: clamp(480px, 38vw, 620px) !important;
    min-height: 480px !important;
    max-height: 620px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Use the exact same artwork as HOME on every page */
.jv-hero,
.hero,
.updates-hero,
.about-hero,
.transparency-hero,
.contact-hero,
.nature-hero,
.project-hero,
.donate-hero {
    background-image: url("/images/hero-jeevaashramam.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-color: #d9c49a !important;
}

    /* Ignore inline/page-specific background images */
    .jv-hero[style],
    .hero[style],
    .updates-hero[style],
    .about-hero[style],
    .transparency-hero[style],
    .contact-hero[style],
    .nature-hero[style],
    .project-hero[style],
    .donate-hero[style] {
        background-image: url("/images/hero-jeevaashramam.png") !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
    }

    /* If a hero uses an actual IMG element, make it behave exactly
   like the HOME hero image. */
    .jv-hero > img,
    .hero > img,
    .updates-hero > img,
    .about-hero > img,
    .transparency-hero > img,
    .contact-hero > img,
    .nature-hero > img,
    .project-hero > img,
    .donate-hero > img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    /* Keep hero content centered exactly like HOME */
    .jv-hero-inner,
    .jv-hero > .hero-content,
    .jv-hero .hero-content,
    .hero > .hero-content,
    .hero .hero-content,
    .updates-hero .hero-content,
    .about-hero .hero-content,
    .transparency-hero .hero-content,
    .contact-hero .hero-content,
    .nature-hero .hero-content,
    .project-hero .hero-content,
    .donate-hero-content {
        position: relative !important;
        z-index: 5 !important;
        width: min(900px, 92%) !important;
        max-width: 900px !important;
        margin: 0 auto !important;
        padding: 42px 25px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

        /* HOME typography — used by all internal hero pages */
        .jv-hero h1,
        .jv-hero .hero-content h1,
        .hero > .hero-content h1,
        .hero .hero-content h1,
        .updates-hero h1,
        .about-hero h1,
        .transparency-hero h1,
        .contact-hero h1,
        .nature-hero h1,
        .project-hero h1,
        .donate-hero-content h1 {
            margin: 0 !important;
            max-width: 100% !important;
            font-family: Georgia, "Times New Roman", serif !important;
            font-size: clamp(42px, 5vw, 55px) !important;
            line-height: 1.05 !important;
            letter-spacing: 2px !important;
            font-weight: 700 !important;
            color: #164d29 !important;
            text-align: center !important;
            text-shadow: 0 2px 3px rgba(255,255,255,.85) !important;
            overflow-wrap: anywhere !important;
        }

        .jv-hero h2,
        .jv-hero .hero-content h2,
        .hero > .hero-content h2,
        .hero .hero-content h2,
        .updates-hero h2,
        .about-hero h2,
        .transparency-hero h2,
        .contact-hero h2,
        .nature-hero h2,
        .project-hero h2 {
            margin: 12px 0 14px !important;
            font-family: Georgia, "Times New Roman", serif !important;
            font-size: clamp(20px, 2.35vw, 20px) !important;
            line-height: 1.25 !important;
            color: #70471e !important;
            text-align: center !important;
        }

        .jv-hero p,
        .jv-hero .hero-content p,
        .hero > .hero-content p,
        .hero .hero-content p,
        .updates-hero p,
        .about-hero p,
        .transparency-hero p,
        .contact-hero p,
        .nature-hero p,
        .project-hero p {
            width: 100% !important;
            max-width: 620px !important;
            margin: 0 auto !important;
            font-size: 14px !important;
            line-height: 1.5 !important;
            font-weight: 500 !important;
            color: #161616 !important;
            text-align: center !important;
            overflow-wrap: anywhere !important;
        }

    /* Keep labels/badges visually compatible with HOME */
    .jv-hero .jv-badge,
    .jv-hero .jv-label,
    .jv-hero .label,
    .hero .label {
        display: inline-block !important;
        max-width: 100% !important;
        padding: 10px 21px !important;
        border-radius: 30px !important;
        background: #e8f0df !important;
        color: #216638 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        letter-spacing: 1.8px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    /* Keep the HOME button treatment */
    .jv-hero .hero-buttons,
    .hero .hero-buttons {
        margin-top: 22px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

        .jv-hero .hero-buttons .btn,
        .hero .hero-buttons .btn {
            min-width: 145px !important;
            min-height: 46px !important;
            padding: 13px 22px !important;
            border-radius: 6px !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            text-align: center !important;
            box-sizing: border-box !important;
        }

    /* Remove the special dark overlay used by some internal pages.
   HOME artwork is the visual reference. */
    .jv-hero::before,
    .updates-hero::before,
    .about-hero::before,
    .transparency-hero::before,
    .contact-hero::before,
    .nature-hero::before,
    .project-hero::before,
    .donate-hero-overlay {
        background: none !important;
    }

/* ---------------------------------------------------------
   MOBILE — exactly the same compact hero dimensions as HOME
--------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-section,
    .jv-hero,
    .hero,
    .updates-hero,
    .about-hero,
    .transparency-hero,
    .contact-hero,
    .nature-hero,
    .project-hero,
    .donate-hero {
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;
        padding: 0 !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

        .jv-hero-inner,
        .jv-hero > .hero-content,
        .jv-hero .hero-content,
        .hero > .hero-content,
        .hero .hero-content,
        .updates-hero .hero-content,
        .about-hero .hero-content,
        .transparency-hero .hero-content,
        .contact-hero .hero-content,
        .nature-hero .hero-content,
        .project-hero .hero-content,
        .donate-hero-content {
            width: 100% !important;
            max-width: 100% !important;
            padding: 18px 12px !important;
            margin: 0 auto !important;
        }

            .jv-hero h1,
            .jv-hero .hero-content h1,
            .hero > .hero-content h1,
            .hero .hero-content h1,
            .updates-hero h1,
            .about-hero h1,
            .transparency-hero h1,
            .contact-hero h1,
            .nature-hero h1,
            .project-hero h1,
            .donate-hero-content h1 {
                font-size: 30px !important;
                line-height: 1.05 !important;
                letter-spacing: .5px !important;
                margin: 8px auto 10px !important;
            }

            .jv-hero h2,
            .jv-hero .hero-content h2,
            .hero > .hero-content h2,
            .hero .hero-content h2,
            .updates-hero h2,
            .about-hero h2,
            .transparency-hero h2,
            .contact-hero h2,
            .nature-hero h2,
            .project-hero h2 {
                font-size: 16px !important;
                line-height: 1.2 !important;
                margin: 7px auto 9px !important;
            }

            .jv-hero p,
            .jv-hero .hero-content p,
            .hero > .hero-content p,
            .hero .hero-content p,
            .updates-hero p,
            .about-hero p,
            .transparency-hero p,
            .contact-hero p,
            .nature-hero p,
            .project-hero p {
                max-width: 330px !important;
                font-size: 12px !important;
                line-height: 1.4 !important;
                margin: 0 auto !important;
            }

        .jv-hero .jv-badge,
        .jv-hero .jv-label,
        .jv-hero .label,
        .hero .label {
            font-size: 12px !important;
            line-height: 1.25 !important;
            padding: 7px 12px !important;
            margin: 0 auto 8px !important;
        }

        .jv-hero .hero-buttons,
        .hero .hero-buttons {
            margin-top: 12px !important;
            gap: 8px !important;
        }

            .jv-hero .hero-buttons .btn,
            .hero .hero-buttons .btn {
                min-width: 150px !important;
                width: 150px !important;
                min-height: 40px !important;
                padding: 10px 14px !important;
                font-size: 12px !important;
            }
}

@media (max-width: 480px) {
    .hero-section,
    .jv-hero,
    .hero,
    .updates-hero,
    .about-hero,
    .transparency-hero,
    .contact-hero,
    .nature-hero,
    .project-hero,
    .donate-hero {
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
        background-size: 100% 100% !important;
    }

        .jv-hero-inner,
        .jv-hero > .hero-content,
        .jv-hero .hero-content,
        .hero > .hero-content,
        .hero .hero-content,
        .updates-hero .hero-content,
        .about-hero .hero-content,
        .transparency-hero .hero-content,
        .contact-hero .hero-content,
        .nature-hero .hero-content,
        .project-hero .hero-content,
        .donate-hero-content {
            padding: 14px 10px !important;
        }

            .jv-hero h1,
            .jv-hero .hero-content h1,
            .hero > .hero-content h1,
            .hero .hero-content h1,
            .updates-hero h1,
            .about-hero h1,
            .transparency-hero h1,
            .contact-hero h1,
            .nature-hero h1,
            .project-hero h1,
            .donate-hero-content h1 {
                font-size: 27px !important;
                margin: 6px auto 8px !important;
            }

            .jv-hero h2,
            .jv-hero .hero-content h2,
            .hero > .hero-content h2,
            .hero .hero-content h2,
            .updates-hero h2,
            .about-hero h2,
            .transparency-hero h2,
            .contact-hero h2,
            .nature-hero h2,
            .project-hero h2 {
                font-size: 15px !important;
                margin: 5px auto 7px !important;
            }

            .jv-hero p,
            .jv-hero .hero-content p,
            .hero > .hero-content p,
            .hero .hero-content p,
            .updates-hero p,
            .about-hero p,
            .transparency-hero p,
            .contact-hero p,
            .nature-hero p,
            .project-hero p {
                max-width: 300px !important;
                font-size: 11px !important;
                line-height: 1.35 !important;
            }

        .jv-hero .hero-buttons .btn,
        .hero .hero-buttons .btn {
            width: 150px !important;
            min-height: 38px !important;
            padding: 8px 12px !important;
            font-size: 11px !important;
        }
}