/* Hero Collage block */

.block-hero-collage {
    --collage-gap: 30px;
    --collage-image-gap: 20px;

    /* Wider than alignwide — the block sets it itself, no class needed */
    max-width: var(--widest-size);
    margin-inline: auto;
}

.block-hero-collage__inner {
    display: flex;
    flex-direction: column;
    gap: var(--collage-gap);
    padding-top: var(--wp--preset--spacing--40);
}

/* Content — same treatment as the Image and Text column */

.block-hero-collage__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.block-hero-collage__title,
.block-hero-collage__subtitle {
    margin: 0;
}

.block-hero-collage__text {
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
}

.block-hero-collage__text > :first-child {
    margin-top: 0;
}

.block-hero-collage__text > :last-child {
    margin-bottom: 0;
}

.block-hero-collage__button {
    margin-top: 14px;
}

/* Images — a taller portrait between two squares, all centred on each other */

.block-hero-collage__images {
    /* Mobile: above the text. The markup keeps the text first, so the reading
       order is unchanged — only the visual order moves. */
    order: -1;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: var(--collage-image-gap);
}

/* Grid items, so the scroll reveal has its own element to move */
.block-hero-collage__slot {
    min-height: 0;
}

.block-hero-collage__image {
    min-height: 0;
    border-radius: var(--radius-06);
    overflow: hidden;
}

.block-hero-collage__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block-hero-collage__image--left,
.block-hero-collage__image--right {
    aspect-ratio: 1 / 1;
}

.block-hero-collage__image--center {
    aspect-ratio: 4 / 5;
}

/* Desktop */

@media (min-width: 782px) {
    .block-hero-collage {
        --collage-gap: 50px;
        --collage-image-gap: 20px;
    }

    /* The squares can carry more width here than they can on a phone */
    .block-hero-collage__images {
        order: 0;
        grid-template-columns: 1fr 1.4fr 1fr;
    }
}