/*
 * Shared hero carousel styles
 */

.hero {
    position: relative;
    overflow: hidden;
    color: var(--hero-foreground, var(--color-white));
    padding: 0;
    --hero-container-offset: max(calc((100% - var(--width)) / 2), 0px);
    --hero-content-edge: calc(var(--hero-container-offset) + var(--padding));
    --hero-arrow-shift: clamp(0.75rem, 1.25vw, 2.5rem);
}

.hero-slides {
    position: relative;
    min-height: clamp(24rem, 60vw, 86rem);
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(4rem, 8vw, 8.5rem) 0 clamp(3rem, 7vw, 6rem);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--color-dark) 85%, transparent) 0%, rgba(54, 130, 151, 0) 175%),
        var(--hero-background, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.9s ease-in-out;
}

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

.hero-body,
.hero-actions {
    width: 100%;
    max-width: var(--width);
    margin: 0 auto;
    padding: 0 var(--padding);
    box-sizing: border-box;
}

.hero-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 0;
}

.hero-body h1 {
    margin: 0;
    font-size: var(--font-size-hero);
    font-weight: 400;
    line-height: clamp(3.8rem, 7vw, 8.8rem);
    letter-spacing: -0.169rem;
    text-transform: uppercase;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25);
    color: var(--hero-foreground, var(--color-white));
    /* max-width: clamp(18rem, 65vw, 72rem); */
    text-align: left;
}

.hero-body strong {
    color: var(--hero-accent, currentColor);
}

.hero-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    /* padding-bottom: clamp(2rem, 4vw, 4.5rem); */
    min-height: clamp(3rem, 6vw, 5rem);
}

.hero-actions:empty {
    display: none;
    min-height: 0;
    padding-bottom: 0;
}

.hero-actions .btn-hero {
    margin: 0;
    align-self: flex-start;
    background: var(--hero-accent, var(--color-pink));
    color: var(--hero-button-text, var(--color-dark));
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.hero-actions .btn-hero:hover {
    color: var(--hero-button-hover, var(--color-dark));
}

.hero-arrow {
    --arrow-width: clamp(3.6rem, 3.5vw, 5.8rem);
    --arrow-space: clamp(1rem, 0.5vw, 3.5rem);
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: var(--arrow-width);
    height: var(--arrow-width);
    border-radius: 50%;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    margin: 0;
    padding: 0;
    transition: background-color var(--transition), scale 0.2s ease;
    z-index: 2;
    background-color: color-mix(in srgb, var(--hero-accent, var(--color-pink)) 55%, transparent);
    color: var(--hero-foreground, var(--color-white));
}

.hero-arrow:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

.hero-arrow:hover {
    scale: 1.05;
}

.hero-prev {
    left: max(calc(var(--hero-content-edge) - var(--arrow-width) - var(--hero-arrow-shift)), 0px);
}

.hero-next {
    right: max(calc(var(--hero-content-edge) - var(--arrow-width) - var(--hero-arrow-shift)), 0px);
}

.hero-arrow .chev {
    position: relative;
    width: 1.863rem;
    height: 1.863rem;
}

.hero-arrow .chev::before,
.hero-arrow .chev::after {
    content: "";
    position: absolute;
    left: 22%;
    top: 22%;
    background: currentColor;
    border-radius: 1px;
    translate: -1px -1px;
}

.hero-arrow .chev::before {
    width: 1.656rem;
    height: 0.4139rem;
}

.hero-arrow .chev::after {
    width: 0.4139rem;
    height: 1.656rem;
}

.hero-prev .chev {
    rotate: 315deg;
}

.hero-next .chev {
    rotate: 135deg;
}

/* Slide/state variable plumbing */
.hero .hero-slide.hero-1 {
    --hero-background: var(--hero-1-background);
    --hero-accent: var(--hero-1-accent);
    --hero-foreground: var(--hero-1-foreground, var(--color-white));
    --hero-button-text: var(--hero-1-button-text, var(--color-dark));
    --hero-button-hover: var(--hero-1-button-hover, var(--color-dark));
}

.hero .hero-slide.hero-2 {
    --hero-background: var(--hero-2-background);
    --hero-accent: var(--hero-2-accent);
    --hero-foreground: var(--hero-2-foreground, var(--color-white));
    --hero-button-text: var(--hero-2-button-text, var(--color-white));
    --hero-button-hover: var(--hero-2-button-hover, var(--color-dark));
}

.hero .hero-slide.hero-3 {
    --hero-background: var(--hero-3-background);
    --hero-accent: var(--hero-3-accent);
    --hero-foreground: var(--hero-3-foreground, var(--color-white));
    --hero-button-text: var(--hero-3-button-text, var(--color-white));
    --hero-button-hover: var(--hero-3-button-hover, var(--color-dark));
}

.hero .hero-arrow.hero-1 {
    background-color: color-mix(in srgb, var(--color-accent1, var(--color-pink)) 55%, transparent);
    color: var(--hero-1-foreground, var(--color-white));
}

.hero .hero-arrow.hero-2 {
    background-color: color-mix(in srgb, var(--hero-2-accent, var(--color-accent2)) 55%, transparent);
    color: var(--hero-2-foreground, var(--color-white));
}

.hero .hero-arrow.hero-3 {
    background-color: color-mix(in srgb, var(--hero-3-accent, var(--color-accent3)) 55%, transparent);
    color: var(--hero-3-foreground, var(--color-white));
}

/* Hero presets */
.hero.france {
    --hero-1-background: url('/img/hero1.webp');
    --hero-1-accent: var(--color-pink);
    --hero-1-foreground: var(--color-white);
    --hero-1-button-text: var(--color-dark);

    --hero-2-background: url('/img/hero2.webp');
    --hero-2-accent: var(--color-accent2);
    --hero-2-foreground: var(--color-white);
    --hero-2-button-text: var(--color-white);

    --hero-3-background: url('/img/hero3.webp');
    --hero-3-accent: var(--color-accent3);
    --hero-3-foreground: var(--color-white);
    --hero-3-button-text: var(--color-white);
}

.hero.intl {
    --hero-1-background: url('/img/hero1.intl.webp');
    --hero-1-accent: var(--color-pink);
    --hero-1-foreground: var(--color-white);
    --hero-1-button-text: var(--color-dark);

    --hero-2-background: url('/img/hero2.intl.webp');
    --hero-2-accent: var(--color-accent1);
    --hero-2-foreground: var(--color-white);
    --hero-2-button-text: var(--color-white);

    --hero-3-background: url('/img/hero3.webp');
    --hero-3-accent: var(--color-accent3);
    --hero-3-foreground: var(--color-white);
    --hero-3-button-text: var(--color-white);
}

.hero.intl.who-we-are,
.hero.intl.testimonies {
    --hero-1-background: url('/img/whoweare.webp');
    --hero-1-accent: var(--color-pink);
    --hero-1-foreground: var(--color-pink);
    --hero-1-button-text: var(--color-white);
}

.hero.intl.testimonies {
    --hero-1-background: url('/img/mosaic.webp');
}

@media (max-width: 1024px) {
    .hero-arrow {
        /* width: clamp(3.4rem, 6vw, 4.8rem);
        height: clamp(3.4rem, 6vw, 4.8rem); */
    }
}

@media (max-width: 780px) {
    .hero-slides {
        min-height: clamp(24rem, 75vw, 52rem);
    }

    .hero-slide {
        padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 6vw, 4rem);
    }

    .hero-body h1 {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .hero-arrow {
        /* top: auto; */
        bottom: clamp(3rem, 12vw, 6rem);
        /* translate: 0 0; */
    }

    .hero-prev {
        /* left: calc(var(--padding) + clamp(0rem, 2vw, 0.5rem)); */
    }

    .hero-next {
        /* right: calc(var(--padding) + clamp(0rem, 2vw, 0.5rem)); */
    }
}