/**
 * Bloc Gallery 01 - Gallery section with header and image carousel
 *
 * Figma Source: https://www.figma.com/design/I6wtq12NH17BottRCSlGff?node-id=9048:15541
 * Layout: Header (text + button) + Gallery (images with shared slider carousel)
 *
 * Carousel mechanics (track, nav, dots) are in usine-components.css (.us-slider).
 * This file only contains gallery-specific layout and overrides.
 */

/* ===== BASE ===== */
.bloc-gallery-01 {
    width: 100%;
    box-sizing: border-box;
    padding: 112px var(--section-padding-x, 64px);
    background-color: #fff;
}

.bloc-gallery-01__container {
    max-width: var(--section-max-width, 1312px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 112px;
}

/* Wrapped-shell: container absorbs vertical padding when wrapper is enabled */
.bloc-gallery-01--wrapped-shell {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== HEADER ===== */
.bloc-gallery-01__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 768px;
}

.bloc-gallery-01__header--fullwidth,
.bloc-gallery-01__header[style*="fullwidth"] {
    max-width: 100%;
}

.bloc-gallery-01__header--boxed {
    max-width: 800px;
    margin: 0 auto;
}

.bloc-gallery-01__header[style*="text-align: center"] {
    align-items: center;
    margin-inline: auto;
}

.bloc-gallery-01__header--wrapped {
    padding: var(--bloc-gallery-01-intro-wrapper-padding, 24px);
}

.bloc-gallery-01__tagline {
    font-size: 16px;
    font-weight: 600;
    color: inherit;
    margin: 0;
}

.bloc-gallery-01__headline {
    font-size: 48px;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    margin: 0;
}

.bloc-gallery-01__description {
    font-size: 18px;
    line-height: 1.5;
    color: inherit;
    margin: 0;
}

.bloc-gallery-01__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===== GALLERY ===== */
.bloc-gallery-01__gallery {
    border-radius: 0;
}

.bloc-gallery-01__gallery--overflow-visible {
    overflow-x: visible;
    overflow-y: visible;
}

.bloc-gallery-01__gallery--overflow-visible .us-slider__track,
.bloc-gallery-01__gallery--overflow-visible .bloc-gallery-01__gallery-slide,
.bloc-gallery-01__gallery--overflow-visible .bloc-gallery-01__gallery-tile {
    overflow: visible;
}


/* FIX-GALLERY-MOSAIC: Static mode renders as a mosaic grid */
.bloc-gallery-01__gallery--static {
    display: grid;
    grid-template-columns: repeat(var(--bloc-gallery-01-static-columns, 3), minmax(0, 1fr));
    gap: 24px;
    overflow: hidden;
}

.bloc-gallery-01__gallery--static.bloc-gallery-01__gallery--overflow-visible {
    overflow: visible;
}

.bloc-gallery-01__gallery--grouped {
    grid-template-columns: 1fr;
}

/* If only 1-2 images, adjust columns */
.bloc-gallery-01__gallery--static .bloc-gallery-01__gallery-slide:only-child {
    grid-column: 1 / -1;
}

/* Slide container */
.bloc-gallery-01__gallery-slide {
    min-width: 0;
    overflow: hidden;
    border-radius: 0;
}

.bloc-gallery-01__gallery-slide--grouped {
    overflow: visible;
}

.bloc-gallery-01__gallery-slide-grid {
    display: grid;
    grid-template-columns: repeat(var(--bloc-gallery-01-group-columns, 1), minmax(0, 1fr));
    gap: 24px;
}

.bloc-gallery-01__gallery-tile {
    min-width: 0;
    overflow: hidden;
    border-radius: 0;
}

.bloc-gallery-01__gallery-tile--wrapped {
    padding: var(--bloc-gallery-01-slide-wrapper-padding, 16px);
}

.bloc-gallery-01__gallery.us-slider .us-slider__track > .bloc-gallery-01__gallery-slide {
    padding-inline: 12px;
}

/* Image placeholder */
.bloc-gallery-01__image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #E6E7E7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.bloc-gallery-01__image-placeholder svg {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

/* Real images — square ratio for mosaic grid */
.bloc-gallery-01__gallery--static .bloc-gallery-01__gallery-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* Carousel keeps square tiles too; the shared slider only changes visibility/count. */
.bloc-gallery-01__gallery.us-slider .bloc-gallery-01__gallery-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
}

/* Fallback for images not inside --static or .us-slider */
.bloc-gallery-01__gallery-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* ===== SLIDER OVERRIDES ===== */
.bloc-gallery-01__gallery--footer-controls {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "track track track"
        "dots prev next";
    column-gap: 16px;
    row-gap: 24px;
    align-items: center;
}

.bloc-gallery-01__gallery--footer-controls .us-slider__track {
    grid-area: track;
    overflow: visible;
}

.bloc-gallery-01__gallery--footer-controls .us-slider__prev,
.bloc-gallery-01__gallery--footer-controls .us-slider__next {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 0;
}

.bloc-gallery-01__gallery--footer-controls .us-slider__prev {
    grid-area: prev;
}

.bloc-gallery-01__gallery--footer-controls .us-slider__next {
    grid-area: next;
}

.bloc-gallery-01__gallery .us-slider__dots {
    margin-top: 16px;
    justify-content: flex-start;
}

.bloc-gallery-01__gallery--footer-controls .us-slider__dots {
    grid-area: dots;
    align-self: center;
    margin-top: 0;
    min-width: 40px;
    width: auto;
}

.bloc-gallery-01__gallery .us-slider__dot {
    background: #cfd1d2;
}

.bloc-gallery-01__gallery .us-slider__dot:hover {
    background: #9ea2a5;
}

.bloc-gallery-01__gallery .us-slider__dot.is-active {
    background: #84898c;
    transform: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .bloc-gallery-01 {
        padding: 80px var(--section-padding-x, 64px);
    }

    .bloc-gallery-01__container {
        gap: 40px;
    }

    .bloc-gallery-01__headline {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .bloc-gallery-01 {
        padding: 64px var(--section-padding-x, 64px);
    }

    .bloc-gallery-01__gallery--static {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .bloc-gallery-01__gallery-slide-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /*
     * Latest coiffure recipe: gallery placeholders are square on mobile.
     * Desktop still honors exported subel_image_height; mobile uses the
     * subcomp_placeholder_square contract to avoid narrow/tall tiles.
     */
    .bloc-gallery-01__gallery-slide,
    .bloc-gallery-01__gallery-tile {
        aspect-ratio: 1 / 1;
        height: auto !important;
    }

    .bloc-gallery-01__gallery-image,
    .bloc-gallery-01__image-placeholder,
    .bloc-gallery-01__gallery-tile > .usine-image-placeholder {
        aspect-ratio: 1 / 1;
        height: 100% !important;
        min-height: 0;
    }

    .bloc-gallery-01__headline {
        font-size: 28px;
    }

    .bloc-gallery-01__description {
        font-size: 16px;
    }

    .bloc-gallery-01__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .bloc-gallery-01__gallery--footer-controls {
        row-gap: 20px;
    }
}