/* ==========================================================================
   Wazo — l'Hôtel and l'Appart-Hôtel pages
   Loaded on those two pages only (templates/layouts/head.php), on top of the
   shared layer in site.css. The Hôtel reads navy and upright arches; the
   Appart-Hôtel reads sand and inverted arches, as on the homepage.
   ========================================================================== */

/* --- Services: sticky heading beside one full row per service ------------------ */

.wz-services__grid {
    display: grid;
    gap: 3rem;
}

.wz-services__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wz-service {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
    padding-block: 2rem;
    border-top: 1px solid var(--wz-line);
}

.wz-service:last-child {
    border-bottom: 1px solid var(--wz-line);
}

.wz-service__photo {
    align-self: start;
    aspect-ratio: 4 / 5;
}

.wz-checks--compact {
    gap: 0.55rem 1.5rem;
    margin-top: 0.9rem;
}

.wz-checks--compact li {
    font-size: 0.9rem;
}

@media (min-width: 720px) {
    .wz-service {
        grid-template-columns: 10rem minmax(0, 1fr);
        gap: 1.5rem 2.5rem;
        padding-block: 2.25rem;
    }

    .wz-service .wz-checks--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .wz-services__grid {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
        gap: 4rem;
        align-items: start;
    }

    .wz-services__head {
        position: sticky;
        top: 7rem;
    }
}

/* --- Apartment / room cards ------------------------------------------------------------ */

.wz-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 1.75rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wz-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--wz-panel);
    background-color: var(--wz-paper);
}

.wz-card__photo {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    /* Without this the empty-photo placeholder (var(--wz-sand), same as
       .wz-frame's default) is invisible against a sand section
       background (wz-rooms/wz-apartments) until a real photo is added. */
    box-shadow: inset 0 0 0 1px var(--wz-line);
}

.wz-card__photo img {
    transition: transform 0.35s ease;
}

.wz-card__photo a:hover img {
    transform: scale(1.04);
}

.wz-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.5rem 1.5rem 1.75rem;
}

.wz-card__body .wz-h3 {
    margin-bottom: 0;
}

.wz-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin-top: auto;
}

.wz-card__body .wz-text {
    margin-bottom: 1.25rem;
}

/* --- Photo blocks ----------------------------------------------------------------------- */

.wz-band-stats__photo {
    width: min(100%, 30rem);
    margin-inline: auto;
    aspect-ratio: 4 / 5;
}

.wz-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

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

.wz-mosaic__item--1,
.wz-mosaic__item--4 {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 2;
}

.wz-mosaic__item--2,
.wz-mosaic__item--3 {
    aspect-ratio: 4 / 5;
}

@media (min-width: 800px) {
    .wz-mosaic {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: end;
        gap: 1.5rem;
    }

    .wz-mosaic__item--1 { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
    .wz-mosaic__item--2 { grid-column: 8 / span 5; aspect-ratio: 4 / 4.8; }
    .wz-mosaic__item--3 { grid-column: 1 / span 5; aspect-ratio: 4 / 3.4; }
    .wz-mosaic__item--4 { grid-column: 6 / span 7; aspect-ratio: 3 / 2; }
}

/* --- Gallery rail on a dark section ------------------------------------------------------ */

.wz-gallery-rail .wz-head {
    margin-bottom: 1.5rem;
}

.wz-section--navy .wz-slide figcaption {
    color: rgba(255, 255, 255, 0.82);
}

.wz-section--navy .wz-slide img {
    background-color: var(--wz-navy);
}

.wz-section--navy .wz-rail__arrow {
    border-color: transparent;
}