/* ==========================================================
   Banner Carousel (Owl Carousel 2)
   ========================================================== */

.banner-section {
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}

/* --- Owl wrapper --------------------------------------- */
.banner-slider {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
}

.banner-slider .owl-stage {
    align-items: flex-start; /* stop flex from stretching the <img> */
}

.banner-slider .owl-item {
    display: block;
}

.banner-slider .banner-item {
    position: relative;
    width: 100%;
    line-height: 0;
}

.banner-slider .banner-item a {
    display: block;
    width: 100%;
}

.banner-slider .banner-item img,
.banner-slider .banner-item .img-fluid {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* --- Fade ------------------------------------------------
   Do NOT add a custom `animation` on .owl-item here.
   Owl's own fade uses the .owl-fade-in / .owl-fade-out classes
   from owl.carousel.min.css. A custom animation with fill-mode
   `both` overrides their opacity and leaves slides invisible.
------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .banner-slider .owl-animated .owl-item {
        transition: none !important;
    }
}

/* --- Prev / Next arrows -------------------------------- */
.banner-slider .owl-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    margin: 0;
    padding: 0 clamp(12px, 3vw, 48px);
    pointer-events: none; /* only the buttons stay clickable */
}

.banner-slider .owl-nav button {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(0, 0, 0, .28);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color .25s ease, border-color .25s ease,
                transform .25s ease, opacity .25s ease;
}

.banner-slider .owl-nav button svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}

.banner-slider .owl-nav button:hover {
    background: #fff;
    border-color: #fff;
    color: #111;
    transform: scale(1.08);
}

.banner-slider .owl-nav button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.banner-slider .owl-nav button.owl-prev { margin-right: 8px; }
.banner-slider .owl-nav button.owl-next { margin-left: 8px; }

/* Hide arrows on small screens (swipe instead) */
@media (max-width: 575.98px) {
    .banner-slider .owl-nav { display: none; }
}

/* --- Dots ---------------------------------------------- */
.banner-slider .owl-dots {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.banner-slider .owl-dots button {
    position: relative;
    display: block;
    width: 34px;
    height: 4px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .45);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: background-color .3s ease, width .3s ease;
}

.banner-slider .owl-dots button:hover {
    background: rgba(255, 255, 255, .75);
}

.banner-slider .owl-dots button.active {
    width: 52px;
    background: #fff;
}

.banner-slider .owl-dots button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* If you use a dark page background, swap the dot colors here:
   .banner-slider .owl-dots button { background: rgba(0,0,0,.35); }
   .banner-slider .owl-dots button.active { background: #111; }
*/

/* --- CTA: BOOK MY GURUPRAVESHAM (centred, bottom) ------- */
.banner-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(72px, 13vh, 120px);
    z-index: 3;                 /* above the dots */
    box-sizing: border-box;    /* width must INCLUDE padding + border,
                                   otherwise the button renders wider
                                   than the viewport on mobile */
    width: fit-content;         /* shrink-wrap the text */
    max-width: calc(100% - 32px);
    margin-inline: auto;        /* centre without transform */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #b8341f;
    color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    transition: background-color .25s ease, color .25s ease,
                transform .25s ease, box-shadow .25s ease;
}

.banner-cta:hover,
.banner-cta:focus-visible {
    background: #fff;
    color: #b8341f;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
}

.banner-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.banner-cta svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    transition: transform .25s ease;
}

/* Invisible tap-target expander. The mobile pill is only ~26px tall, but
   this grows the clickable area to ~50px without changing how it looks.
   Delete this block if you don't need it. */
.banner-cta::before {
    content: "";
    position: absolute;
    inset: -14px -18px;
}

.banner-cta:hover svg { transform: translateX(4px); }

/* Tablet / mobile -------------------------------------
   The source banner is 1920x830 (2.31:1) — very wide, with
   artwork on BOTH the left (logo/text) and the right (figure).
   Any "cover" crop into a phone-shaped box cuts one side off:
     2:1  box -> crops top/bottom
     16:9 box -> crops left/right, cutting the "SAMSKAARA" text
   So on phones we show the WHOLE image at its natural ratio
   (height:auto). Nothing is ever cut off. The banner is short
   on a phone, but it is correct and undistorted.
------------------------------------------------------- */
@media (max-width: 767.98px) {

    .banner-slider .banner-item img,
    .banner-slider .banner-item .img-fluid {
        width: 100%;
        height: auto;          /* box matches the image ratio -> no distortion */
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
        object-fit: fill;      /* scale the WHOLE image down. NEVER "none" -
                                  that paints it 1:1 and shows only the
                                  top-left corner. NEVER "cover" here. */
        object-position: 50% 50%;
    }

    /* Light scrim behind the dots only. The CTA is now vertically centred,
       so this no longer has to darken half the artwork.
       Delete this block if your dots are already visible. */
    .banner-slider .banner-item::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 30%;
        background: linear-gradient(to top,
                    rgba(0, 0, 0, .5) 0%,
                    rgba(0, 0, 0, .18) 55%,
                    rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }

    .banner-cta {
        /* Vertically CENTRED in the image on mobile (was bottom-anchored).
           Uses top:50% + translateY(-50%) because `bottom` is already used
           by the desktop rule. The hover lift is folded into the SAME
           transform so the two never fight each other. */
        position: absolute;
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: inline-flex;
        width: fit-content;
        max-width: calc(100% - 40px);
        margin-inline: auto;
        padding: 8px 16px;
        font-size: 8.5px;
        letter-spacing: .3px;
        gap: 6px;
        border-width: 1px;
        white-space: nowrap;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    }
    .banner-cta:hover,
    .banner-cta:focus-visible {
        transform: translateY(calc(-50% - 3px));   /* keep centred + lift */
        box-shadow: 0 6px 16px rgba(0, 0, 0, .34);
    }
    .banner-cta svg { width: 11px; height: 11px; }
    .banner-slider .owl-dots { bottom: 10px; }
}

/* Very small phones — the label "BOOK MY GURUPRAVESHAM" is 20 uppercase
   chars, so font-size + tracking + padding are the only width levers. */
@media (max-width: 400px) {
    .banner-cta {
        padding: 7px 13px;
        font-size: 8px;
        letter-spacing: 0;
        gap: 5px;
        max-width: calc(100% - 24px);
    }
    .banner-cta svg { width: 10px; height: 10px; }
    .banner-slider .owl-dots { bottom: 9px; }
}