/* Looms of Maratha — the home page banner slider.

   Kept out of the Tailwind bundle for the same reason as product-media.css:
   that file is prebuilt, so new rules live here against the same tokens.

   The slides are stacked and cross-faded rather than slid sideways, so the
   heading and veil above them never move. */

.hero-slider {
    position: relative;
    overflow: hidden;
    height: 78vh;
    min-height: 460px;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.hero-slide.is-active {
    opacity: 1;
}

/* The weaver sits right of centre; on a narrow screen a centred crop would
   cut her out and leave only the loom. */
.hero-slide--weaver {
    object-position: 68% 50%;
}

/* The site-wide .veil was tuned for the old dusk photograph. These banner
   photos are daylight shots with white walls, so the white heading needs more
   behind it: a deeper fade from the bottom plus a side fade under the text
   column, in the same warm brown as the shop-front section. The side fade
   stops short of the weaver's face on the right. */
.hero-slider .veil {
    background-image:
        linear-gradient(to top, rgba(38, 30, 24, 0.88), rgba(38, 30, 24, 0.5) 40%, rgba(38, 30, 24, 0.12) 70%, transparent),
        linear-gradient(to right, rgba(38, 30, 24, 0.5), rgba(38, 30, 24, 0.15) 45%, transparent 60%);
}

.hero-slider h1,
.hero-slider p,
.hero-slider a {
    text-shadow: 0 1px 14px rgba(20, 15, 10, 0.5);
}

.hero-dots {
    position: absolute;
    right: 1.25rem;
    bottom: 1.5rem;
    z-index: 10;
    display: flex;
    gap: 0.5rem;
}

.hero-dot {
    width: 0.625rem;
    height: 0.625rem;
    padding: 0;
    border: 1px solid var(--background);
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    opacity: 0.8;
}

.hero-dot[aria-current="true"] {
    border-color: var(--gold);
    background: var(--gold);
    opacity: 1;
}

.hero-dot:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
    }
}