/* =========================================================
   HOMEPAGE BANNER SLIDER — banner.css (complete file)
   Loads AFTER style.css, BEFORE responsive.css.

   Markup it expects:
     .banner-slider
       .banner-slide
         picture > img
         .banner-shade
         .banner-content > .container > h1|h2 + p + a.btn
       .banner-arrow.banner-prev / .banner-next
       .banner-dots > button

   Layout: copy beside the image above 1000px, copy below the
   image (over a dark scrim) at 1000px and under.
   ========================================================= */

.banner-slider {
    position: relative;
    min-height: clamp(420px, 42vw, 650px);
    overflow: hidden;
    background: #eef3f5;

    /* Per-slide overrides, once the admin form has focal-point and
       shade fields: style="--shade:.9; --focus:70% 40%;" */
    --shade: .88;
    --focus: center;
}

.banner-slide {
    position: absolute;
    inset: 0;
    min-height: inherit;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}

.banner-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
}

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

.banner-slide picture,
.banner-slide picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.banner-slide picture img {
    display: block;
    object-fit: cover;
    object-position: var(--focus);
}

/* =========================================================
   SHADE — light, on the copy side (desktop)
   ========================================================= */

.banner-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, var(--shade)) 0%,
        rgba(255, 255, 255, calc(var(--shade) * .78)) 30%,
        rgba(255, 255, 255, .22) 52%,
        transparent 72%
    );
}

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

.banner-content {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    align-items: center;

    /* No horizontal padding here — the .container inside does the
       centring. The old max()/calc() formula resolved 100% against
       this element's own width, so it collapsed to its 72px floor
       and pushed the copy off the pale part of the photograph. */
    padding: 50px 0;

    color: #173f5f;
    text-align: left;

    /* Hind Madurai stops at 700. Without this, a heavier weight is
       synthesised and it clogs the loops in ழ ஞ ண. */
    font-synthesis: none;
}

.banner-content > .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ---------- headline ----------
   h2 is styled identically to h1: only the first slide carries
   the h1, since every slide is in the DOM at once. */

.banner-content h1,
.banner-content h2 {
    margin: 0 0 16px;
    padding: 0;
    max-width: 600px;

    color: #063f91;
    font-family: "Hind Madurai", "Noto Sans Tamil", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 2.5vw, 40px);

    /* 1.3 was too tight: ெ ே ை sit above the x-height and
       ு ூ ஞ ழ hang below, so adjacent lines collided. */
    line-height: 1.5;
    letter-spacing: 0;

    overflow-wrap: normal;
    word-break: normal;      /* never break inside a Tamil cluster */
    text-wrap: pretty;       /* balance gives up past ~6 lines */

    /* One layer. The stacked white glow was blurring the thin
       strokes it was meant to protect. */
    text-shadow: 0 1px 2px rgba(255, 255, 255, .95);
}

.banner-content h1.long-title,
.banner-content h2.long-title {
    max-width: 620px;
    font-size: clamp(25px, 2.05vw, 32px);
    line-height: 1.55;
}

/* ---------- description ---------- */

.banner-content p {
    margin: 0 0 26px;
    padding: 0;
    max-width: 520px;

    color: #23475e;
    font-family: "Hind Madurai", "Noto Sans Tamil", sans-serif;
    font-size: clamp(15px, 1.15vw, 17px);
    font-weight: 500;
    line-height: 1.75;
    text-align: left;

    text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
}

/* ---------- button ---------- */

.banner-content .btn {
    align-self: flex-start;
    width: auto;
    max-width: none;
}

/* =========================================================
   ARROWS
   ========================================================= */

.banner-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;

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

    width: 46px;
    height: 46px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    background: rgba(6, 63, 145, .32);
    color: #fff;

    font-size: 30px;
    line-height: 1;
    cursor: pointer;

    transform: translateY(-50%);
    transition: background-color .2s ease, border-color .2s ease;
}

.banner-arrow:hover,
.banner-arrow:focus-visible {
    border-color: var(--teal, #0095a8);
    background: var(--teal, #0095a8);
}

.banner-prev { left: 20px; }
.banner-next { right: 20px; }

/* =========================================================
   DOTS
   ========================================================= */

.banner-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    z-index: 4;

    display: flex;
    gap: 9px;

    transform: translateX(-50%);
}

.banner-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}

.banner-dots button.is-active {
    width: 28px;
    border-radius: 10px;
    background: var(--gold, #e7b84b);
}

/* Tappable without changing how they look. */
.banner-dots button { position: relative; }
.banner-dots button::after { content: ""; position: absolute; inset: -17px; }

/* =========================================================
   ≤1000px — STOP OVERLAYING

   The banners are admin-uploaded and cropped by object-fit, so
   below this width the copy would land on the subject no matter
   how the type is tuned. Copy moves to the bottom instead.
   ========================================================= */

@media (max-width: 1000px) {

    .banner-slider,
    .banner-slide { min-height: clamp(480px, 68vw, 620px); }

    /* Heads are usually in the upper half of a photograph. */
    .banner-slide picture img { object-position: center top; }

    .banner-shade {
        background: linear-gradient(
            0deg,
            rgba(0, 25, 55, .88) 0%,
            rgba(0, 25, 55, .74) 28%,
            rgba(0, 25, 55, .34) 52%,
            rgba(0, 25, 55, .06) 74%,
            transparent 88%
        );
    }

    .banner-content {
        align-items: flex-end;      /* cross axis — sits at the bottom */
        padding: 40px 0 56px;
    }

    .banner-content h1,
    .banner-content h2 {
        margin-bottom: 12px;
        max-width: 100%;

        color: #fff;
        font-weight: 600;           /* white on dark reads heavier */
        font-size: clamp(25px, 3.6vw, 33px);
        line-height: 1.45;

        -webkit-font-smoothing: antialiased;

        text-shadow:
            0 2px 6px rgba(0, 0, 0, .55),
            0 8px 22px rgba(0, 0, 0, .35);
    }

    .banner-content h1.long-title,
    .banner-content h2.long-title {
        max-width: 100%;
        font-size: clamp(23px, 3.1vw, 29px);
        line-height: 1.5;
    }

    .banner-content p {
        margin-bottom: 20px;
        max-width: 46ch;

        color: rgba(255, 255, 255, .92);
        font-weight: 400;
        font-size: 16px;
        line-height: 1.7;

        -webkit-font-smoothing: antialiased;

        text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
    }

    /* Above the copy, not across it. */
    .banner-arrow {
        top: 32%;
        width: 44px;
        height: 44px;
        font-size: 26px;
    }

    .banner-dots { bottom: 14px; }
}

/* =========================================================
   ≤680px — PHONE
   ========================================================= */

@media (max-width: 680px) {

    .banner-slider,
    .banner-slide { min-height: clamp(460px, 118vw, 560px); }

    .banner-content { padding: 32px 0 52px; }

    .banner-content h1,
    .banner-content h2 { font-size: clamp(23px, 6.4vw, 29px); }

    .banner-content h1.long-title,
    .banner-content h2.long-title { font-size: clamp(21px, 5.7vw, 26px); }

    .banner-content p { font-size: 15px; line-height: 1.65; }

    .banner-arrow { width: 40px; height: 40px; font-size: 24px; }
    .banner-prev { left: 7px; }
    .banner-next { right: 7px; }
}

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

@media (prefers-reduced-motion: reduce) {
    .banner-slide,
    .banner-arrow,
    .banner-dots button { transition: none; }
}