/* ==========================================================================
   SANGU hero slider.

   Every slide in uploads/banner_carusel is a finished 1920x770 artwork with its
   headline drawn in, on a light ground. So the artwork is never cropped, never
   darkened and never overprinted — the container adapts to it, not the reverse.

   Width is locked to the section that follows (.for-students: full bleed with
   20px gutters) so the two read as one column down the page. Because the ratio
   is fixed and nothing is cropped, that width is also what sets the height.

   Controls sit on the artwork on a tinted-glass plate: brand red at low opacity
   over a blur, lifted off the surface by a shadow. Neutral glass would vanish
   on these light banners; solid red would fight their palettes.
   ========================================================================== */

:root { --hero-red: #E32D44; --hero-ink: #2c2c38; }

.hero-slider {
    position: relative;
    width: 100%;
    /* identical to .for-students so both sections share one measure */
    padding: 0 20px;
}

/* The gradient rules above and below: a slightly heavy stroke that starts at
   full brand red and dissolves into nothing, rather than a hard band edge. */
.hero-slider::before,
.hero-slider::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        var(--hero-red) 0%,
        rgba(227, 45, 68, .55) 38%,
        rgba(227, 45, 68, 0) 100%);
}
.hero-slider::before { top: 0; }
.hero-slider::after  { bottom: 0; }

.hero-slider__inner {
    position: relative;
    padding: 20px 0 22px;   /* clears the gradient rules and the ribbon tails */
}

/* --- corner ribbon ------------------------------------------------------ */
/* One ribbon conceptually wrapped around the whole slider: it is only visible
   where it escapes the card, at the top-right and bottom-left. Not the usual
   corner banner sitting *on* the artwork with a word printed across it — this
   passes behind the card (the opaque stage hides the middle) and shows only two
   swallow-tailed ends, so it decorates the object without covering any of the
   artwork the banner designer drew. */
.hero-slider__inner::before,
.hero-slider__inner::after {
    content: "";
    position: absolute;
    z-index: 0;                     /* behind .hero-slider__stage */
    width: 190px;
    height: 22px;
    transform: rotate(-45deg);
    box-shadow: 0 10px 22px rgba(227, 45, 68, .26);
    pointer-events: none;
}

/* top-right: the tail points up and out */
.hero-slider__inner::before {
    top: 2px;
    right: -56px;
    background: linear-gradient(90deg,
        rgba(227, 45, 68, 0) 0%,
        rgba(227, 45, 68, .62) 34%,
        var(--hero-red) 100%);
    /* swallow tail cut into the outer (right) end */
    clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%);
}

/* bottom-left: the mirror of it */
.hero-slider__inner::after {
    bottom: 2px;
    left: -56px;
    background: linear-gradient(90deg,
        var(--hero-red) 0%,
        rgba(227, 45, 68, .62) 66%,
        rgba(227, 45, 68, 0) 100%);
    clip-path: polygon(13px 50%, 0 0, 100% 0, 100% 100%, 0 100%);
}

/* --- stage -------------------------------------------------------------- */
/* No fixed height and no aspect-ratio guess — the active slide sits in flow
   and the image keeps its natural ratio, so the stage is exactly as tall as
   the artwork, whatever ratio a future banner arrives in. */
.hero-slider__stage {
    position: relative;
    /* Explicit, not auto: the ribbon pseudo-elements sit at z-index 0 and ::after
       comes later in tree order, so without this the bottom-left ribbon would
       paint over the artwork instead of disappearing behind it. */
    z-index: 1;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 20, 26, .12);
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
    z-index: 1;
}
.hero-slide.is-active {
    position: relative;   /* the one slide that gives the stage its height */
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.hero-slide__link { display: block; text-decoration: none !important; color: inherit; }
.hero-slide__img  { display: block; width: 100%; height: auto; }

/* The drawn headline is set for a 1920px canvas. Below roughly 700px it is too
   small to read, so the same text is repeated underneath — on the light ground
   the artwork already uses, never over it. */
.hero-slide__caption {
    display: none;
    padding: 12px 16px 14px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--hero-ink);
}

/* --- glass control plate ------------------------------------------------ */
/* A slab of tinted glass, not a pill: square corners (a hairline radius only,
   so the edge reads as cut glass rather than a jagged rectangle), the same
   footprint and padding as before, and more of the things that actually make
   glass legible — deeper blur, lower tint, a lit top edge, a thickness line at
   the bottom, and one diagonal specular sweep across the face. */
.hero-slider__bar {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 18px;
    border-radius: 4px;
    /* An oblique parallelepiped, not a rectangular one: the vertical edges are
       raked, so the slab reads as a cut shard rather than a box. Everything
       inside inherits the rake — only the chevrons are straightened back. */
    transform: skewX(-12deg);
    overflow: hidden;               /* clips the specular sweep to the slab */
    /* Thinner tint so more of the artwork shows through. The blur is pushed up
       to compensate: with less colour holding the plate together, it is the
       blur that keeps white controls legible over a busy or pale banner. */
    background: linear-gradient(155deg, rgba(227, 45, 68, .20) 0%, rgba(186, 26, 48, .38) 100%);
    -webkit-backdrop-filter: blur(26px) saturate(185%);
    backdrop-filter: blur(26px) saturate(185%);
    border: 1px solid rgba(255, 255, 255, .34);
    /* lifted off the artwork, with the glass's own edges lit */
    box-shadow:
        0 24px 46px rgba(20, 20, 26, .32),
        0 6px 14px rgba(20, 20, 26, .18),
        inset 0 1px 0 rgba(255, 255, 255, .58),
        inset 0 -1px 0 rgba(255, 255, 255, .16),
        inset 1px 0 0 rgba(255, 255, 255, .12);
}
/* the sweep of light across the face */
.hero-slider__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(118deg,
        rgba(255, 255, 255, .30) 0%,
        rgba(255, 255, 255, .11) 26%,
        rgba(255, 255, 255, 0) 50%);
}

.hero-slider__dots {
    position: relative;   /* above the specular sweep */
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
}
.hero-dot {
    flex: 0 0 auto;
    width: 34px;
    background: none;
    border: 0;
    padding: 9px 0;      /* comfortable hit area around the 4px bar */
    text-align: left;
    cursor: pointer;
    transition: width .3s ease;
}
.hero-dot.is-active { width: 58px; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.hero-dot__label { display: none; }
.hero-dot__bar {
    display: block;
    height: 4px;
    border-radius: 1px;   /* squared off, to match the slab */
    /* a touch more white than before: the plate under it is thinner now */
    background: rgba(255, 255, 255, .46);
    overflow: hidden;
    transition: background .25s ease;
}
.hero-dot:hover .hero-dot__bar { background: rgba(255, 255, 255, .58); }
.hero-dot__fill {
    display: block;
    height: 100%;
    width: 0;
    /* white on the red plate — brand red on brand red would be invisible */
    background: #fff;
    border-radius: 1px;
}
.hero-dot.is-active .hero-dot__fill { width: 100%; }
.hero-dot.is-active.is-animating .hero-dot__fill {
    transition: width linear;
    transition-duration: var(--hero-autoplay, 6s);
}

.hero-slider__nav {
    position: relative;   /* above the specular sweep */
    z-index: 1;
    display: flex;
    gap: 8px;
    flex: none;
}
/* Small glass tiles, squared to the same language as the slab they sit on. */
.hero-slider__arrow {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 4px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .10));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -1px 0 rgba(255, 255, 255, .12);
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.hero-slider__arrow:hover {
    background: linear-gradient(160deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, .22));
    border-color: rgba(255, 255, 255, .72);
    transform: translateY(-2px);   /* the glass lifts further on approach */
}
.hero-slider__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the tiles keep the slab's rake; the arrows themselves must not */
.hero-slider__arrow svg { transform: skewX(12deg); }

/* Browsers without backdrop-filter get a solid-enough plate instead of a
   washed-out one that would leave white controls unreadable. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .hero-slider__bar { background: linear-gradient(180deg, rgba(227, 45, 68, .82), rgba(190, 28, 50, .9)); }
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 900px) {
    .hero-slider__bar { right: 14px; bottom: 14px; gap: 12px; padding: 7px 11px; }
    .hero-dot { width: 26px; }
    .hero-dot.is-active { width: 44px; }
    .hero-slider__arrow { width: 32px; height: 32px; }
}
@media (max-width: 700px) {
    .hero-slider { padding: 0 12px; }
    .hero-slider::before, .hero-slider::after { left: 12px; right: 12px; }
    .hero-slider__stage { border-radius: 14px; }
    .hero-slide__caption { display: block; }
    /* On a ~145px-tall artwork an overlaid plate would cover a third of it, so
       here the controls step down onto the caption strip instead. A raked bar
       running the full width would poke its corners out, so it squares up. */
    .hero-slider__bar {
        position: static;
        margin: 0 12px 12px;
        justify-content: space-between;
        transform: none;
    }
    .hero-slider__arrow svg { transform: none; }

    /* The ribbon ends need more room than a 366px-wide card has to spare. */
    .hero-slider__inner::before,
    .hero-slider__inner::after { display: none; }
}

/* accessibility: honour reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
    .hero-slider__arrow { transition: none; }
    .hero-dot.is-active.is-animating .hero-dot__fill { transition: none; width: 100%; }
}