/* home.css — home page sections: hero slider (§6) and sections 3–9 (§7) */

/* ============================================================ Hero slider */
.hero {
    position: relative;
    background-color: var(--color-surface);
}

/* All slides share one grid cell: the track takes the tallest slide's height,
   so Arabic copy is never clipped and nothing jumps between slides. */
.hero__track {
    display: grid;
    touch-action: pan-y;
}

.hero__slide {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    /* the outgoing slide stays opaque underneath until the incoming crossfade ends */
    transition: opacity 0s linear var(--duration-slide), visibility 0s linear var(--duration-slide);
}

.hero__slide.is-active {
    z-index: var(--z-raised);
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-slide) ease;
}

.hero__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-surface-sand);
}

/* The banners carry their subject on the left and open space on the right (under the text panel),
   so any crop is taken from the right edge */
.hero__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: left center;
}

.hero__container { padding-block: var(--space-xl) var(--space-lg); }

.hero__panel { max-inline-size: var(--hero-panel); }

.hero__title {
    margin-block-start: var(--space-md);
    font-size: var(--fs-hero);
    line-height: 1.35;
}

.hero__text {
    font-family: var(--font-heading);
    margin-block-start: var(--space-md);
    max-inline-size: var(--measure);
    font-size: var(--fs-lg);
}

.hero__cta { margin-block-start: var(--space-xl); }

/* Controls: hidden until slider.js is ready, so no dead buttons without JS */
.hero__controls { display: none; }

.hero.is-ready .hero__controls {
    display: flex;
    justify-content: center;
    padding-block-end: var(--space-lg);
}

.hero__controls-bar {
    display: flex;
    align-items: center;
}

.hero__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    border-radius: var(--radius-button);
    color: var(--color-heading);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.hero__control:hover {
    background-color: var(--color-surface-sand);
    color: var(--color-accent-deep);
}

.hero__toggle-icon--play { display: none; }
.hero.is-paused-by-user .hero__toggle-icon--pause { display: none; }
.hero.is-paused-by-user .hero__toggle-icon--play { display: block; }

.hero__divider {
    inline-size: 1px;
    block-size: var(--space-lg);
    margin-inline: var(--space-xs);
    background-color: var(--color-border);
}

/* Dots: 44px hit areas touching edge to edge → 44px centre-to-centre (Fix 9) */
.hero__dots { display: flex; }

.hero__dot {
    position: relative;
    inline-size: var(--tap);
    block-size: var(--tap);
}

.hero__dot::before {
    content: "";
    position: absolute;
    inset: 0;
    inline-size: var(--space-sm);
    block-size: var(--space-sm);
    margin: auto;
    border: 1px solid var(--color-accent-deep);
    transition: inline-size var(--transition-base), background-color var(--transition-base);
}

.hero__dot:hover::before { background-color: var(--color-accent); }

.hero__dot[aria-current="true"]::before {
    inline-size: var(--space-lg);
    background-color: var(--color-accent-deep);
}

@media (min-width: 768px) {
    .hero__media { aspect-ratio: 16 / 9; }
}

/* Desktop: full-bleed photograph with a frosted light panel at inline-start */
@media (min-width: 992px) {
    .hero__slide {
        justify-content: center;
        min-block-size: clamp(var(--hero-min), 70vh, var(--hero-max));
    }

    .hero__media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }

    .hero__container {
        position: relative;
        padding-block: var(--space-3xl) calc(var(--space-3xl) + var(--tap));
    }

    .hero__panel {
        padding: var(--space-2xl);
        border-block-start: 2px solid var(--color-accent);
        border-radius: var(--radius-card);
        background-color: var(--color-panel);
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(6px);
    }

    .hero.is-ready .hero__controls {
        position: absolute;
        inset-block-end: var(--space-lg);
        inset-inline: 0;
        z-index: calc(var(--z-raised) + 1);
        justify-content: flex-end;
        padding-block-end: 0;
    }

    .hero__controls-bar {
        border-radius: var(--radius-button);
        background-color: var(--color-panel);
    }
}

/* Wide screens: the headline reaches its 48px maximum — widen the panel so it keeps two lines */
@media (min-width: 1200px) {
    .hero__panel { max-inline-size: var(--hero-panel-xl); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__slide { transition-delay: 0s; }
}

/* ============================================================ 3. Credentials strip */
.credentials { text-align: center; }

.credentials__lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.credentials__icon {
    inline-size: var(--space-xl);
    block-size: var(--space-xl);
    color: var(--color-accent-deep);
}

.credentials__title {
    font-size: clamp(var(--fs-lg), 2.2vw, var(--fs-xl));
    line-height: var(--lh-heading);
}

.credentials__ornament { margin: var(--space-md) auto 0; }

.credentials__values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin-block-start: var(--space-xl);
}

.credentials__value {
    font-family: var(--font-heading);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    min-block-size: calc(var(--space-3xl) + var(--space-2xl));
    padding: var(--space-lg) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-bg);
    color: var(--color-heading);
    font-size: var(--fs-lg);
    font-weight: 700;
}

/* Outlined value icon (replaced the diamond mark, BASAM 2026-09-15) — same size as card icons */
.credentials__value-icon {
    inline-size: calc(var(--icon-lg) * var(--icon-card-scale));
    block-size: calc(var(--icon-lg) * var(--icon-card-scale));
    color: var(--color-accent-deep);
}

@media (min-width: 768px) {
    .credentials__values {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-lg);
    }

    .credentials__value { font-size: var(--fs-xl); }
}

@media (min-width: 992px) {
    .credentials { padding-block: var(--space-3xl); }
}