/* ============================================================
   DG Website – Shared Stylesheet
   Reusable across all DG-themed pages (dg-home, events, etc.)
   ============================================================ */

/* --- Inter font base ---------------------------------------- */
body { font-family: 'Inter', sans-serif; }

/* ============================================================
   1. HERO SLIDER
   ============================================================ */
.inspiro-slider .slide .slide-captions {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Remove section top-padding on mobile so slider is flush */
@media (max-width: 991.98px) {
    section#page-content { padding-top: 0 !important; }
}

#slider .slide,
#slider .kenburns-bg {
    background-position: center center !important;
    background-size: cover !important;
}

@media (max-width: 767.98px) {
    #slider,
    #slider .slide,
    #slider .flickity-viewport {
        height: 360px !important;
        min-height: 0 !important;
    }
}

/* ============================================================
   2. GALLERY
   ============================================================ */
.gallery-item { margin-bottom: 20px; }

.gallery-image {
    height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.gallery-image:hover { transform: scale(1.05); }

/* ============================================================
   3. OWL CAROUSEL
   ============================================================ */
/* Keep dots from overlapping the "View All" button */
.owl-carousel .owl-dots { margin-bottom: 30px !important; }

/* Equal-height mixed carousel */
.carousel.mixed-carousel .owl-stage { display: flex; }
.carousel.mixed-carousel .owl-item  { display: flex; }
.carousel.mixed-carousel .owl-item > div { display: flex; width: 100%; }
.carousel.mixed-carousel .row.align-items-center {
    width: 100%;
    min-height: 420px;
}
@media (max-width: 991.98px) {
    .carousel.mixed-carousel .row.align-items-center { min-height: 360px; }
}

/* ============================================================
   4. POST ITEMS (services / events cards list style)
   ============================================================ */
.post-item { margin-bottom: 20px; height: 100%; }

.post-item .post-image {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
}

.post-item .post-image img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.post-item-description { padding: 15px; }
.post-item-description h2 { font-size: 16px; margin-bottom: 8px; }
.post-item-description p {
    font-size: 14px;
    /* margin-bottom: 15px; */
    /* min-height: 40px; */
    overflow: hidden;
}

/* Featured services carousel: equal-height cards, CTA pinned at bottom */
#category-featured-services .owl-stage { display: flex !important; }
#category-featured-services .owl-item  { display: flex; }
#category-featured-services .owl-item > div { display: flex; width: 100%; }
#category-featured-services .post-item { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; }
#category-featured-services .post-item-wrap { height: 100%; display: flex !important; flex-direction: column; }

/* Grid rows: title (2-line) | desc (2-line) | price | CTA pinned */
#category-featured-services .post-item-description {
    flex: 1;
    display: grid !important;
    grid-template-rows: calc(19px * 1.3 * 2) calc(14px * 1.5 * 2) auto 1fr;
    align-items: start;
}

/* Event other groups carousel: equal-height cards, CTA pinned at bottom */
#category-featured-eseva .owl-stage { display: flex !important; }
#category-featured-eseva .owl-item  { display: flex; }
#category-featured-eseva .owl-item > div { display: flex; width: 100%; }
#category-featured-eseva .post-item { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; }
#category-featured-eseva .post-item-wrap { height: 100%; display: flex !important; flex-direction: column; }

/* Content body: flex-column so button always reaches the bottom */
.event-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Title: fixed, no bottom margin crowding */
.event-card-title { flex-shrink: 0; margin-bottom: 0; font-size: 16px; line-height: 1.4; }

/* Description grows to fill all available space */
.event-card-description { flex: 1; min-height: 0; margin-bottom: 0; }

/* Venue + date group: constant height, never overlaps */
.event-card-info { flex-shrink: 0; margin-top: 0.75rem; }
.event-card-info .card-description-sub { margin-bottom: 4px; }

/* CTA pinned at the bottom */
.event-card-cta { flex-shrink: 0; margin-top: 1rem; }

/* ============================================================
   5. GLOBAL BUTTON OVERRIDE
   ============================================================ */
.btn:not(.close):not(.mfp-close),
a.btn:not([href]):not([tabindex]) {
    background-color: #e74c0a !important;
    border-color: #e74c0a !important;
    color: #ffffff !important;
}

/* ============================================================
   6. PRIMARY BUTTON (SM)
   ============================================================ */
.primary-btn-sm {
    font-family: 'Inter', sans-serif;
    background: #FA6624;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}

/* ============================================================
   7. TYPOGRAPHY – shared heading / title / description
   ============================================================ */
.title-large {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px !important;
    color: #450000 !important;
    line-height: 1.55;
}
@media (max-width: 991.98px) { .title-large { font-size: 35px !important; } }
@media (max-width: 575.98px) { .title-large { font-size: 30px !important; } }

.price-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    color: #1C1C1C !important;
    text-overflow: ellipsis;
}

.card-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    color: #1C1C1C !important;
    text-overflow: ellipsis;
    white-space: normal !important;
    line-height: 1.5;

    overflow: hidden;

    /* ✅ Standard property (new) */
    line-clamp: 2;

    /* ✅ Required for proper behavior */
    display: -webkit-box;
    -webkit-box-orient: vertical;

    /* ✅ Fallback for Chrome, Safari */
    -webkit-line-clamp: 2;

    max-height: calc(1.5em * 2);
}

.card-heading {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 25px;
    color: #000000;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #1C1C1C;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-description-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
}

.section-col-heading {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #1C1C1C;
}

.col-sub-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #515151;
}

.col-date-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #212525;
    line-height: 1.3;
    display: block;
}

.col-event-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #FFFFFF !important;
    line-height: 1.3;
    background: #FA6624;
    border-radius: 10px;
    padding: 16px 14px;
    width: 100%;
}

.col-event-title-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   8. GLIDE.JS – MIXED CAROUSEL
   ============================================================ */
.glide.mixed-glide { overflow: visible; position: relative; }

/* Clip slides but keep container visible for arrows + bullets */
.glide.mixed-glide .glide__track { overflow: hidden; border-radius: 10px; }

/* Equal-height slides */
.glide.mixed-glide .glide__slides { align-items: stretch !important; }
.glide.mixed-glide .glide__slide  { display: flex; align-items: stretch; }
.glide.mixed-glide .glide__slide > div { width: 100%; }

/* Slide inner row: stretch both columns to full slide height */
.glide.mixed-glide .mixed-glide-row {
    min-height: 420px;
    align-items: stretch;
    height: 100%;
    margin: 0;
}

/* Image column: vertically center the image */
.glide.mixed-glide .mixed-glide-img-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content column: flex column so btn always sits at the bottom */
.mixed-glide-content-col {
    display: flex;
    flex-direction: column;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* Title: no auto-margin so description can flex freely */
.mixed-glide-title {
    flex-shrink: 0;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Description grows to fill remaining vertical space */
/* .mixed-glide-description { flex: 1; min-height: 0; } */


/* Info group (venue + date): flush below description, never overlaps */
.mixed-glide-info-group { flex-shrink: 0; margin-top: 1rem; }

/* Button wrapper: pushed to the bottom by flex layout */
.mixed-glide-btn-wrapper { flex-shrink: 0; margin-top: 1.5rem; }

/* Bullets below slider */
.glide.mixed-glide .glide__bullets {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 48px auto 0 !important;
    width: 100% !important;
    padding: 0 !important;
    left: auto !important; right: auto !important;
    transform: none !important;
}
.glide.mixed-glide .glide__bullet { box-shadow: none; }

/* Navigation arrows */
.glide.mixed-glide .glide__arrow {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border-radius: 50%;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 2;
}
.glide.mixed-glide .glide__arrow--left  { left:  -55px; }
.glide.mixed-glide .glide__arrow--right { right: -55px; }
.glide.mixed-glide .glide__arrow:hover  { background: #fff; }
.glide.mixed-glide .glide__arrow i { font-size: 18px; line-height: 1; }

@media (max-width: 575.98px) {
    .glide.mixed-glide .glide__arrow--left  { left:  4px; }
    .glide.mixed-glide .glide__arrow--right { right: 4px; }
    /* Shrink arrow buttons a bit on small phones */
    .glide.mixed-glide .glide__arrow { width: 34px; height: 34px; }
    .glide.mixed-glide .glide__arrow i { font-size: 14px; }
}

/* Consistent image sizing */
.mixed-glide-image-wrapper {
    aspect-ratio: 1/1;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
}
.mixed-glide-image {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Typography inside Glide slides */
.mixed-glide-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #450000;
    line-height: 1.7;

    overflow: hidden;

    /* ✅ Standard property (new) */
    line-clamp: 7;

    /* ✅ Required for proper behavior */
    display: -webkit-box;
    -webkit-box-orient: vertical;

    /* ✅ Fallback for Chrome, Safari */
    -webkit-line-clamp: 7;

    /* Optional: strict control */
    max-height: calc(1.7em * 7);
}

.mixed-glide-info {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    display: block;
    margin-top: 0.25rem;
}
.mixed-glide-info i { color: #000000; margin-right: 8px; }

.mixed-glide-btn {
    background-color: #EE6439;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 16px;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    display: inline-block;
}

/* Mobile layout for Glide */
@media (max-width: 991.98px) {
    .glide.mixed-glide .glide__slides { align-items: flex-start !important; }
    .glide.mixed-glide .glide__slide  { height: auto !important; align-items: flex-start; }
    .glide.mixed-glide .glide__slide > div { height: auto !important; }
    .glide.mixed-glide .mixed-glide-row { min-height: auto; height: auto; }

    /* Stack image above content on mobile */
    .glide.mixed-glide .mixed-glide-row {
        flex-direction: column;
        margin: 0 !important;
    }
    .glide.mixed-glide .mixed-glide-row > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 16px;
    }
    .glide.mixed-glide .mixed-glide-row > div:last-child { margin-bottom: 0; }

    /* Reset flex-column on mobile so content flows naturally */
    .mixed-glide-content-col { padding-top: 0; padding-bottom: 0; }

    /* Centre button on mobile */
    .glide.mixed-glide .mixed-glide-btn { display: block; text-align: center; }

    /* Bring arrows inside the container on tablet */
    .glide.mixed-glide .glide__arrow--left  { left:  4px; }
    .glide.mixed-glide .glide__arrow--right { right: 4px; }

    /* Downsize large button to sm */
    .glide.mixed-glide .btn-lg {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
}

/* ============================================================
   9. TATKAL SECTION
   ============================================================ */
.tatkal-section .tatkal-card.d-none.d-md-block {
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
}

.tatkal-section .tatkal-card.d-block.d-md-none {
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
}

.tatkal-section .tatkal-card.d-md-block,
.tatkal-section .tatkal-card.d-block {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tatkal-section .tatkal-card img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    z-index: 0;
}

.tatkal-section .tatkal-content { width: 100%; position: relative; z-index: 1; }
.tatkal-section .tatkal-content .row { display: flex; align-items: center; min-height: 0; }

/* ============================================================
   10. HEADER ALTERNATIVE
   ============================================================ */
#header.header-alternative { line-height: 80px; height: 60px; }

/* ============================================================
   11. UPCOMING EVENTS – 3-COLUMN LAYOUT
   ============================================================ */
.upcoming-date-col   { width: 80px; min-width: 80px; }
.col-divider {
    width: 1px;
    align-self: stretch;
    background: #ddd;
    margin-right: 16px;
    border-radius: 2px;
}
.col-flex { flex: 1; }

/* ============================================================
   12. LIVESTREAM CARD
   ============================================================ */
.livestream-card {
    flex: 1;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #c8c8c8;
    min-height: 240px;
    display: block;
}

.livestream-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
}

.livestream-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.25);
}

.play-btn-wrapper {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.livestream-placeholder {
    border-radius: 14px;
    background: #c8c8c8;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   13. DARSHAN PASS CARD
   ============================================================ */
.darshan-card {
    background: #3d3d3d;
    border-radius: 14px;
    padding: 40px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.darshan-card-title {
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
}

.darshan-card-text {
    color: #b0b0b0;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* ============================================================
   14. PROMO BANNER SECTION
   ============================================================ */
.promo-banner-section { background-color: rgba(0, 0, 0, 1); }

.banner-link {
    display: block;
    border-radius: 0;
    overflow: hidden;
    line-height: 0;
}

.banner-img {
    width: 100%; height: auto;
    display: block;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.3s ease;
}

.banner-img:hover { transform: scale(1.02); }

/* ============================================================
   15. SOCIAL INITIATIVES / CATEGORY SERVICE CARDS
   ============================================================ */

/* Square image wrapper */
.card-img-square {
    aspect-ratio: 1/1;
    overflow: hidden;
}

/* Stretch white card to full Bootstrap column height */
.si-card-outer {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Full-bleed cover image */
.img-cover {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Card body flex column */
.si-card-body {
    flex: 1;
    display: grid;
    /*
      Row 1 – heading   (2 lines × 25px × 1.3)
      Row 2 – desc      (2 lines × 14px × 1.5)
      Row 3 – price+CTA (1fr – pushes to bottom)
    */
    grid-template-rows: calc(25px * 1.3 * 2) calc(14px * 1.5 * 2) 1fr;
    align-items: start;
    gap: 0;
}

/* Pin the price/CTA row to the bottom of its 1fr cell */
.price-btn-row {
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
}

/* ============================================================
   16. CATEGORY CAROUSEL SERVICE CARD
   ============================================================ */

/* Equal-height cards: make every owl item a flex column */
.category-services-carousel .owl-stage { display: flex !important; }
.category-services-carousel .owl-item  { display: flex; }
.category-services-carousel .owl-item > div { display: flex; width: 100%; }

/*
  The owl carousel clips overflow: hidden on .owl-carousel by default,
  which cuts off the card box-shadow on all sides.
  Solution: add padding on the carousel wrapper so the shadow has room,
  then pull the wrapper back with a negative margin so the content
  alignment stays unchanged.
*/
.category-services-carousel.owl-carousel {
    overflow: visible;
}
.category-services-carousel .owl-stage-outer {
    overflow: visible;
    padding-bottom: 16px; /* room for bottom shadow */
}
/* Clip only the horizontal scroll, let vertical shadow breathe */
.category-services-carousel .owl-stage-outer {
    overflow-x: clip;
    overflow-y: visible;
}

.service-card {
    /* background: #fff;
    border-radius: 14px; */
    overflow: hidden;
    border: 1px solid #eee;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10); */
    margin-bottom: 16px; /* prevent bottom shadow from touching the clipping edge */
}

.service-card-img-wrapper {
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #ccc;
}

/*
  Grid body: 4 rows with fixed heights so cards always match:
    row 1 – title    (2 lines × 19px × 1.3 line-height)
    row 2 – desc     (2 lines × 14px × 1.5 line-height)
    row 3 – price    (auto)
    row 4 – CTA      (1fr – fills remaining space, button sits at bottom)
*/
.service-card-body {
    padding: 16px;
    flex: 1;
    display: grid;
    grid-template-rows: calc(19px * 1.5 * 2) calc(14px * 1.7 * 2) auto 1fr;
    align-items: start;
    gap: 0;
}

/* Pin the CTA div to the bottom of its 1fr row */
.service-card-cta {
    align-self: end;
    padding-bottom: 4px;
}

.feature-title-large {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px !important;
    color: #450000 !important;


    overflow: hidden;

    /* ✅ Standard property (new) */
    line-clamp: 2;

    /* ✅ Required for proper behavior */
    display: -webkit-box;
    -webkit-box-orient: vertical;

    /* ✅ Fallback for Chrome, Safari */
    -webkit-line-clamp: 2;

    /* Optional: strict control */
    max-height: calc(1.7em * 2);

}
@media (max-width: 991.98px) { .feature-title-large { font-size: 35px !important; } }
@media (max-width: 575.98px) { .feature-title-large { font-size: 30px !important; } }

.carousel .post-item {
    height: 100%;
}

.carousel .post-item-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.post-item-description {
    display: grid;
    grid-template-rows: calc(19px * 1.7 * 2) calc(14px * 1.5 * 2) auto 1fr;
    align-items: start;
}