/* =========================================================
   BODH GAYA DESTINATION PAGE
   GlobalTime.io
   Production Responsive CSS
========================================================= */


/* =========================================================
   THEME VARIABLES
========================================================= */

:root {

    --bodh-primary: #6b4f1d;
    --bodh-primary-dark: #4d3714;
    --bodh-accent: #c89b3c;

    --bodh-text: #111827;
    --bodh-muted: #5b6472;

    --bodh-bg: #f6f8fb;
    --bodh-card: #ffffff;

    --bodh-border: #dfe5ec;

    --bodh-radius: 16px;
    --bodh-radius-small: 12px;

    --bodh-shadow:
        0 8px 28px rgba(15, 23, 42, 0.06);

    --bodh-shadow-hover:
        0 12px 32px rgba(15, 23, 42, 0.10);

    --bodh-section-gap: 26px;
    --bodh-gap: 16px;

    --bodh-transition:
        180ms ease;

}


/* =========================================================
   PAGE BACKGROUND
========================================================= */

.hero {

    width: 100%;

    margin: 0;
    padding: 0 0 50px;

    background:
        var(--bodh-bg);

    color:
        var(--bodh-text);

}


/* =========================================================
   HERO IMAGE
========================================================= */

.destination-hero-image {

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background:
        #e9edf2;

}


.destination-hero-image img {

    display: block;

    width: 100%;
    height: auto;

    aspect-ratio:
        1920 / 800;

    object-fit: cover;

    object-position:
        center center;

}


/* =========================================================
   MAIN INFORMATION BLOCK
========================================================= */

.hero > .info-block {

    width:
        min(
            calc(100% - 32px),
            1240px
        );

    margin:
        0 auto;

    padding:
        38px 24px 42px;

    background:
        transparent;

    border: 0;

    box-shadow: none;

}


/* =========================================================
   MAIN CLOCK AREA
========================================================= */

.main-clock {

    width: 100%;

    text-align: center;

}


/* =========================================================
   HERO / TITLE
========================================================= */

.country-title {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    width: 100%;

    margin: 0;
    padding: 0;

    text-align: center;

}


/* =========================================================
   BODH GAYA TITLE ICON
========================================================= */

.destination-title-icon {

    display: block;

    width: 62px;
    height: 62px;

    max-width: 62px;
    max-height: 62px;

    object-fit: contain;

    flex:
        0 0 62px;

}


/* =========================================================
   TITLE
========================================================= */

.title-main {

    display: block;

    margin: 0;
    padding: 0;

    color:
        var(--bodh-text);

    font-size:
        clamp(
            2rem,
            4vw,
            3.35rem
        );

    line-height: 1;

    font-weight: 800;

    letter-spacing:
        -0.035em;

}


/* =========================================================
   LOCATION / TIMEZONE SMALL TEXT
========================================================= */

.tz-small {

    display: block;

    margin-top: 10px;

    color:
        var(--bodh-muted);

    font-size:
        clamp(
            0.86rem,
            1.4vw,
            1rem
        );

    line-height: 1.45;

    font-weight: 600;

}


/* =========================================================
   UTC ROW
========================================================= */

.utc-row {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-top: 7px;

}


.clock-time {

    color:
        var(--bodh-text);

    font-size:
        1rem;

    line-height: 1.3;

    font-variant-numeric:
        tabular-nums;

}


.clock-tz {

    margin-top: 2px;

    color:
        var(--bodh-muted);

    font-size:
        0.78rem;

    line-height: 1.3;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.above-clock {

    max-width: 920px;

    margin:
        22px auto 0;

    color:
        var(--bodh-text);

    font-size:
        1rem;

    line-height: 1.75;

    text-align: center;

}


/* =========================================================
   LOCAL CLOCK
========================================================= */

.country-big-clock {

    width: 100%;

    margin:
        28px auto 34px;

    padding:
        32px 20px;

    border:
        1px solid var(--bodh-border);

    border-radius:
        var(--bodh-radius);

    background:
        var(--bodh-card);

    box-shadow:
        var(--bodh-shadow);

    text-align: center;

}


.country-time-value {

    color:
        var(--bodh-text);

    font-size:
        clamp(
            3.2rem,
            8vw,
            5.2rem
        );

    line-height: 1;

    font-weight: 800;

    letter-spacing:
        -0.055em;

    font-variant-numeric:
        tabular-nums;

}


.country-time-label {

    margin-top: 12px;

    color:
        var(--bodh-muted);

    font-size:
        0.92rem;

    line-height: 1.4;

    font-weight: 600;

}


/* =========================================================
   SECTION TITLE
========================================================= */

.section-title {

    margin:
        30px 0 18px;

    color:
        var(--bodh-primary);

    font-size:
        clamp(
            1.55rem,
            3vw,
            2.15rem
        );

    line-height:
        1.25;

    font-weight:
        800;

    text-align:
        center;

}


/* =========================================================
   META INFORMATION
========================================================= */

.meta-row {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        12px;

    width: 100%;

    margin-top:
        18px;

}


.meta {

    min-width: 0;

    padding:
        16px 17px;

    border:
        1px solid var(--bodh-border);

    border-radius:
        var(--bodh-radius-small);

    background:
        var(--bodh-card);

    color:
        var(--bodh-text);

    font-size:
        0.9rem;

    line-height:
        1.5;

}


.meta strong {

    font-weight:
        750;

}


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

.seo-text,
.destination-section,
.visitor-section,
.ticket-section,
.facts-wrapper,
.faq-section,
.destinations-card {

    width: 100%;

    margin-top:
        var(--bodh-section-gap);

    padding:
        28px;

    border:
        1px solid var(--bodh-border);

    border-radius:
        var(--bodh-radius);

    background:
        var(--bodh-card);

    box-shadow:
        var(--bodh-shadow);

}


/* =========================================================
   SEO CONTENT
========================================================= */

.seo-text {

    color:
        var(--bodh-text);

    line-height:
        1.8;

}


.seo-text h2 {

    margin:
        0 0 16px;

    color:
        var(--bodh-primary);

    font-size:
        clamp(
            1.5rem,
            2.5vw,
            2rem
        );

    line-height:
        1.25;

}


.seo-text h3 {

    margin:
        28px 0 9px;

    color:
        var(--bodh-primary-dark);

    font-size:
        1.18rem;

}


.seo-text p {

    max-width:
        920px;

    margin:
        0 0 16px;

}


.seo-text p:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   WHY VISIT
========================================================= */

.destination-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--bodh-gap);

}


.destination-feature {

    min-width: 0;

    padding:
        22px;

    border:
        1px solid var(--bodh-border);

    border-radius:
        var(--bodh-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

    transition:
        transform var(--bodh-transition),
        box-shadow var(--bodh-transition),
        border-color var(--bodh-transition);

}


.destination-feature:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--bodh-shadow-hover);

}


.destination-feature h3 {

    margin:
        0 0 9px;

    color:
        var(--bodh-text);

    font-size:
        1.08rem;

    line-height:
        1.35;

}


.destination-feature p {

    margin:
        0;

    color:
        var(--bodh-muted);

    line-height:
        1.7;

}


/* =========================================================
   IMPORTANT PLACES
========================================================= */

.facts-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        14px;

}


.fact-card {

    min-width: 0;

    padding:
        21px;

    border:
        1px solid var(--bodh-border);

    border-radius:
        var(--bodh-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

}


.fact-card h3 {

    margin:
        0 0 9px;

    color:
        var(--bodh-primary);

    font-size:
        1.05rem;

    line-height:
        1.35;

}


.fact-card p {

    margin:
        0;

    color:
        var(--bodh-muted);

    line-height:
        1.65;

}


/* =========================================================
   BEST TIME
========================================================= */

.season-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        14px;

}


.season-card {

    min-width: 0;

    padding:
        21px;

    border:
        1px solid var(--bodh-border);

    border-radius:
        var(--bodh-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

}


.season-card h3 {

    margin:
        0 0 9px;

    color:
        var(--bodh-primary);

    font-size:
        1.05rem;

}


.season-card p {

    margin:
        0;

    color:
        var(--bodh-muted);

    line-height:
        1.65;

}


/* =========================================================
   DESTINATION LINKS
========================================================= */

.destinations-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        12px;

}


.destination-card {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        16px;

    min-width: 0;

    min-height:
        76px;

    padding:
        16px 18px;

    border:
        1px solid var(--bodh-border);

    border-radius:
        var(--bodh-radius-small);

    background:
        var(--bodh-card);

    color:
        var(--bodh-text);

    text-decoration:
        none;

    transition:
        transform var(--bodh-transition),
        box-shadow var(--bodh-transition),
        border-color var(--bodh-transition);

}


.destination-card:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--bodh-accent);

    box-shadow:
        var(--bodh-shadow-hover);

}


.destination-content {

    display: flex;

    flex-direction: column;

    min-width: 0;

}


.destination-name {

    color:
        var(--bodh-text);

    font-size:
        0.98rem;

    font-weight:
        750;

    line-height:
        1.35;

}


.destination-tag {

    margin-top:
        4px;

    color:
        var(--bodh-muted);

    font-size:
        0.78rem;

    line-height:
        1.4;

}


.destination-arrow {

    flex:
        0 0 auto;

    color:
        var(--bodh-primary);

    font-size:
        1.25rem;

    transition:
        transform var(--bodh-transition);

}


.destination-card:hover
.destination-arrow {

    transform:
        translateX(3px);

}


/* =========================================================
   INFO / TRAVEL TIPS
========================================================= */

.info-section {

    overflow: hidden;

    border:
        1px solid var(--bodh-border);

    border-radius:
        var(--bodh-radius-small);

    background:
        var(--bodh-card);

}


.info-toggle,
.faq-toggle {

    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    min-height:
        54px;

    padding:
        15px 17px;

    border: 0;

    background:
        transparent;

    color:
        var(--bodh-text);

    font:
        inherit;

    font-size:
        0.95rem;

    font-weight:
        700;

    text-align:
        left;

    cursor:
        pointer;

}


.info-toggle svg,
.faq-toggle svg {

    flex:
        0 0 auto;

}


.info-content {

    padding:
        0 18px 18px;

    color:
        var(--bodh-muted);

    font-size:
        0.92rem;

    line-height:
        1.7;

}


.info-content ul {

    margin:
        0;

    padding-left:
        20px;

}


.info-content li {

    margin-bottom:
        7px;

}


.info-content li:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   FAQ
========================================================= */

.faq-wrapper {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.faq-item {

    overflow:
        hidden;

    border:
        1px solid var(--bodh-border);

    border-radius:
        var(--bodh-radius-small);

    background:
        var(--bodh-card);

}


.faq-content {

    padding:
        0 18px 18px;

    color:
        var(--bodh-muted);

    font-size:
        0.92rem;

    line-height:
        1.7;

}


.faq-content p {

    margin:
        0;

}


/* =========================================================
   INFO TEXT
========================================================= */

.info-text {

    color:
        var(--bodh-muted);

    line-height:
        1.7;

}


/* =========================================================
   LINKS
========================================================= */

.hero a {

    transition:
        color var(--bodh-transition),
        border-color var(--bodh-transition),
        background var(--bodh-transition);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .hero > .info-block {

        width:
            calc(100% - 24px);

        padding:
            32px 18px 38px;

    }


    .meta-row {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .destination-grid,
    .facts-grid,
    .season-grid,
    .destinations-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .country-time-value {

        font-size:
            clamp(
                3rem,
                9vw,
                4.5rem
            );

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    :root {

        --bodh-section-gap:
            20px;

    }


    /* -----------------------------------------------------
       HERO IMAGE
    ----------------------------------------------------- */

    .destination-hero-image {

        width:
            100%;

        overflow:
            hidden;

    }


    .destination-hero-image img {

        /*
         * Keep the complete 1920×800 composition.
         * Prevent aggressive mobile cropping.
         */

        width:
            100%;

        height:
            auto;

        aspect-ratio:
            1920 / 800;

        object-fit:
            contain;

        object-position:
            center center;

    }


    /* -----------------------------------------------------
       INFO BLOCK
    ----------------------------------------------------- */

    .hero > .info-block {

        width:
            calc(100% - 20px);

        padding:
            24px 0 34px;

    }


    /* -----------------------------------------------------
       TITLE
    ----------------------------------------------------- */

    .country-title {

        gap:
            10px;

    }


    .destination-title-icon {

        width:
            48px;

        height:
            48px;

        max-width:
            48px;

        max-height:
            48px;

        flex:
            0 0 48px;

    }


    .title-main {

        font-size:
            clamp(
                1.75rem,
                8vw,
                2.35rem
            );

        letter-spacing:
            -0.03em;

    }


    .tz-small {

        margin-top:
            7px;

        font-size:
            0.84rem;

    }


    /* -----------------------------------------------------
       UTC
    ----------------------------------------------------- */

    .utc-row {

        margin-top:
            7px;

    }


    /* -----------------------------------------------------
       INTRO
    ----------------------------------------------------- */

    .above-clock {

        margin-top:
            18px;

        padding:
            0 8px;

        font-size:
            0.92rem;

        line-height:
            1.65;

    }


    /* -----------------------------------------------------
       LOCAL CLOCK
    ----------------------------------------------------- */

    .country-big-clock {

        margin:
            24px 0 30px;

        padding:
            23px 14px;

        border-radius:
            14px;

    }


    .country-time-value {

        font-size:
            clamp(
                2.8rem,
                15vw,
                4.1rem
            );

        letter-spacing:
            -0.045em;

    }


    .country-time-label {

        margin-top:
            9px;

        font-size:
            0.78rem;

    }


    /* -----------------------------------------------------
       SECTION TITLES
    ----------------------------------------------------- */

    .section-title {

        margin-bottom:
            14px;

        font-size:
            clamp(
                1.45rem,
                7vw,
                1.85rem
            );

    }


    /* -----------------------------------------------------
       META
    ----------------------------------------------------- */

    .meta-row {

        grid-template-columns:
            1fr;

        gap:
            9px;

        margin-top:
            16px;

    }


    .meta {

        padding:
            14px;

        font-size:
            0.87rem;

    }


    /* -----------------------------------------------------
       CARDS
    ----------------------------------------------------- */

    .seo-text,
    .destination-section,
    .visitor-section,
    .ticket-section,
    .facts-wrapper,
    .faq-section,
    .destinations-card {

        margin-top:
            20px;

        padding:
            20px 16px;

        border-radius:
            14px;

    }


    .seo-text {

        line-height:
            1.72;

    }


    .seo-text h2 {

        font-size:
            1.45rem;

    }


    .seo-text h3 {

        margin-top:
            22px;

        font-size:
            1.08rem;

    }


    /* -----------------------------------------------------
       SINGLE COLUMN
    ----------------------------------------------------- */

    .destination-grid,
    .facts-grid,
    .season-grid,
    .destinations-grid {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .destination-feature,
    .fact-card,
    .season-card {

        padding:
            17px;

    }


    /* -----------------------------------------------------
       DESTINATION CARDS
    ----------------------------------------------------- */

    .destination-card {

        min-height:
            74px;

        padding:
            14px;

        gap:
            10px;

    }


    .destination-name {

        font-size:
            0.93rem;

    }


    .destination-tag {

        font-size:
            0.76rem;

    }


    .destination-arrow {

        font-size:
            1.1rem;

    }


    /* -----------------------------------------------------
       ACCORDIONS
    ----------------------------------------------------- */

    .info-toggle,
    .faq-toggle {

        min-height:
            52px;

        padding:
            14px;

        font-size:
            0.92rem;

    }


    .info-content,
    .faq-content {

        padding:
            0 15px 16px;

        font-size:
            0.9rem;

        line-height:
            1.68;

    }


    .info-content ul {

        padding-left:
            19px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .hero > .info-block {

        width:
            calc(100% - 16px);

    }


    .country-title {

        gap:
            8px;

    }


    .destination-title-icon {

        width:
            42px;

        height:
            42px;

        max-width:
            42px;

        max-height:
            42px;

        flex:
            0 0 42px;

    }


    .title-main {

        font-size:
            1.85rem;

    }


    .country-time-value {

        font-size:
            2.65rem;

    }


    .country-time-label {

        font-size:
            0.72rem;

    }


    .above-clock {

        padding:
            0 4px;

        font-size:
            0.86rem;

    }


    .seo-text,
    .destination-section,
    .visitor-section,
    .ticket-section,
    .facts-wrapper,
    .faq-section,
    .destinations-card {

        padding:
            18px 14px;

    }


    .section-title {

        font-size:
            1.35rem;

    }


    .destination-feature,
    .fact-card,
    .season-card {

        padding:
            15px;

    }


    .destination-card {

        min-height:
            70px;

        padding:
            13px;

    }


    .destination-tag {

        margin-top:
            3px;

        font-size:
            0.72rem;

    }


    .info-toggle,
    .faq-toggle {

        font-size:
            0.86rem;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .destination-feature,
    .destination-card,
    .destination-arrow {

        transition:
            none;

    }

}


/* =========================================================
   DARK THEME
========================================================= */

[data-theme="dark"] {

    --bodh-text:
        #f1f5f9;

    --bodh-muted:
        #aeb8c5;

    --bodh-bg:
        #0f172a;

    --bodh-card:
        #111c2d;

    --bodh-border:
        #293548;

    --bodh-primary:
        #e3bd68;

    --bodh-primary-dark:
        #f0cf82;

    --bodh-accent:
        #d6ad55;

    --bodh-shadow:
        0 8px 28px
        rgba(
            0,
            0,
            0,
            0.22
        );

}


[data-theme="dark"]
.destination-hero-image {

    background:
        #111827;

}


[data-theme="dark"]
.destination-feature,
[data-theme="dark"]
.fact-card,
[data-theme="dark"]
.season-card,
[data-theme="dark"]
.destination-card,
[data-theme="dark"]
.info-section,
[data-theme="dark"]
.faq-item {

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    box-shadow:
        none;

}


[data-theme="dark"]
.country-big-clock,
[data-theme="dark"]
.seo-text,
[data-theme="dark"]
.destination-section,
[data-theme="dark"]
.visitor-section,
[data-theme="dark"]
.ticket-section,
[data-theme="dark"]
.facts-wrapper,
[data-theme="dark"]
.faq-section,
[data-theme="dark"]
.destinations-card {

    box-shadow:
        0 8px 28px
        rgba(
            0,
            0,
            0,
            0.18
        );

}