/*
 * The destination single page - Figma 1:3781 at 1440, 1:2020 at 375.
 *
 * style.css sets font-family on div, span, p, h1-h6, label, input and a, so a
 * component cannot inherit its own typeface: every text element here names it.
 * Lyon for headings and unit names, Geologica for everything else.
 */

.stay {
    --stay-gutter: clamp(16px, 4vw, 32px);
    --stay-measure: 608px;
}

/* Gallery collage - node 1:3783 / 1:2022 */

.stay-hero {
    position: relative;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    aspect-ratio: 1376 / 700;
    margin: 0 var(--stay-gutter);
}

/*
 * A button on the three that show, a figure on the rest - so the reset here
 * covers both, and the tile reads as the control it is.
 */
.stay-hero-figure {
    position: relative;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    background: none;
    border: 0;
}

.stay-hero-figure.is-overflow {
    cursor: default;
}

.stay-hero-figure:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

.stay-hero-figure:first-child {
    grid-row: span 2;
}

/*
 * Everything past the third photograph is in the page for the modal to clone
 * and nowhere on it: the collage is three, and the count on the button says how
 * many more there are.
 */
.stay-hero-figure.is-overflow,
.stay-hero-single .stay-hero-figure:not(:first-child) {
    display: none;
}

.stay-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stay-hero-single {
    display: block;
    aspect-ratio: 1376 / 700;
}

/*
 * The count is a layer over the last tile of the collage rather than a pill in
 * the corner of the hero - node 1:3783 darkens that photograph and centres the
 * label on it. It sits inside that tile's button, which is already what opens
 * the gallery.
 */
.stay-hero-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-secondary);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 700;
    /* Node 1:3792: Geologica Bold 20/1.3. */
    line-height: 1.3;
    color: var(--color-white);
    text-align: center;
    background: rgb(0 0 0 / 35%);
    transition: background 0.2s ease;
}

.stay-hero-figure:hover .stay-hero-more {
    background: rgb(0 0 0 / 45%);
}

/*
 * Desktop says it in words; the phone gets the count alone (see the tile).
 *
 * `font-family: inherit` because both are spans, and the global rule at the top
 * of style.css pins every span to Lyon - which would take this label off the
 * Geologica the tile sets above (node 1:3792).
 */
.stay-hero-more-label,
.stay-hero-more-count {
    font-family: inherit;
}

.stay-hero-more-count {
    display: none;
}

/* Intro and booking card - nodes 1:3794 and 1:3903 */

.stay-intro {
    display: grid;
    gap: 40px;
    padding: 72px var(--stay-gutter) 0;
}

.stay-ariane {
    margin: 0 0 24px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    color: var(--color-black);
    text-transform: uppercase;
}

.stay-title {
    margin: 0 0 24px;
    font-family: var(--font-primary);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.1;
}

.stay-description p,
.stay-unit-description,
.stay-units-lead,
.stay-layout-panel p {
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-black);
}

.stay-section-title {
    margin: 0 0 24px;
    font-family: var(--font-primary);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 400;
    line-height: 1.1;
}

/* Property Layout - node 1:3802 */

.stay-layout-summary,
.stay-facilities {
    margin-top: 56px;
}

.stay-layout-panel {
    padding: 24px;
    background: var(--color-white-100);
    /* Node 1:3802 rounds the panels by 8. */
    border-radius: 8px;
}

.stay-layout-panel-title {
    margin: 0 0 12px;
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.stay-layout-panel p {
    margin: 0;
}

/* A rule with the word sitting in it, rather than a heading between panels. */
.stay-alternatively {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 24px 0;
    text-align: center;
}

.stay-alternatively::before,
.stay-alternatively::after {
    flex: 1;
    height: 1px;
    content: "";
    background: var(--Light-Grey);
}

.stay-alternatively span {
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: var(--color-black);
}

/* Booking card - node 1:3903 */

.stay-booking {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
    background: var(--color-shark);
}

.stay-booking-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* H4: Lyon 24/1.2, Grey 200. */
.stay-booking-label {
    font-family: var(--font-primary);
    font-size: 24px;
    line-height: 1.2;
    color: var(--Medium-Grey);
}

/* Body Lg: Geologica Light 20/1.3, Off-White. */
.stay-booking-value {
    font-family: var(--font-secondary);
    font-size: 20px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--color-offwhite);
}

.stay-booking-cta {
    padding: 18px 24px;
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-shark);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: var(--color-offwhite);
}

/* Units - nodes 1:3920 and 1:3958 */

.stay-units {
    padding: 72px var(--stay-gutter) 0;
}

.stay-units-lead {
    margin: -12px 0 32px;
}

.stay-unit {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
}

/*
 * `min-width: 0` is load-bearing. As a grid item this defaults to `min-width:
 * auto`, so its width is the max-content width of the slides - and Swiper sizes
 * the slides from the container it measures. The two fed each other on every
 * layout pass: slides came out 259,375px wide and a stay with eight units was
 * 730,000px tall at 1440. Mobile never showed it, because a single-column grid
 * gives the gallery a width to start from.
 */
.stay-unit-gallery {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* The slide is a button so the full-screen gallery is reachable by keyboard;
   it has to carry none of a button's own look. */
.stay-unit-slide {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.stay-unit-gallery img {
    width: 100%;
    aspect-ratio: 415 / 330;
    object-fit: cover;
    /* Node 1:3920 rounds the photograph by 8, as the layout panels are. */
    border-radius: 8px;
}

/* Arrows over the photograph, desktop only: on a phone the dots and the swipe
   do this, and a control over a 375-wide image covers what it is navigating. */
.stay-unit-nav {
    position: absolute;
    inset-inline: 16px;
    top: 50%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.stay-unit-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    background: var(--color-white);
    border: 0;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}

.stay-unit-gallery:hover .stay-unit-nav button,
.stay-unit-nav button:focus-visible {
    opacity: 1;
}

.stay-unit-nav svg {
    width: 18px;
    height: 18px;
}

.stay-unit-prev svg {
    transform: rotate(180deg);
}

.stay-unit-nav .swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

@media (width < 992px) {
    .stay-unit-nav {
        display: none;
    }
}

.stay-unit-gallery .swiper-pagination-bullet {
    background: var(--color-white);
    opacity: 0.5;
}

.stay-unit-gallery .swiper-pagination-bullet-active {
    opacity: 1;
}

.stay-unit-title {
    margin: 0 0 8px;
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.stay-unit-meta {
    margin: 0 0 16px;
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-black);
}

.stay-unit-description {
    margin: 0 0 20px;
}

.stay-unit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.stay-unit-chips li {
    padding: 8px 14px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 300;
    line-height: 18px;
    color: var(--color-black);
    background: var(--color-white-100);
    border-radius: 999px;
}

/* Booking band - node 1:4090 */

.stay-band {
    padding: 72px var(--stay-gutter);
    margin-top: 72px;
    text-align: center;
    background: var(--color-shark);
}

.stay-band-title {
    max-width: 600px;
    margin: 0 auto 32px;
    font-family: var(--font-primary);
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-offwhite);
}

.stay-band-title em {
    font-style: italic;
}

.stay-band-cta {
    display: inline-block;
    padding: 18px 32px;
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-shark);
    text-decoration: none;
    cursor: pointer;
    background: var(--color-offwhite);
}

/* Similar Properties - node 1:4096 */

.stay-similar {
    padding: 72px var(--stay-gutter);
}

.stay-similar-rail {
    position: relative;
    overflow: hidden;
}

/*
 * The control is `.slider-nav-disc` in style.css, the same component Featured
 * Stays and Related Articles draw. Only its vertical position differs: the
 * shared 50% centres on the whole card, and the frame centres it on the image
 * band. A card is roughly a third of the track and its image is 313/443 of
 * that, so half the image height is about 10.5vw.
 */
.stay-similar-nav {
    top: calc(10.5vw - 40px);
}

/*
 * Mobile: the booking card leaves the flow and pins to the bottom of the
 * viewport - node 1:2326 - carrying the property type and the button, with the
 * rest of its rows left to the page above it.
 */
@media (width < 992px) {
    /*
     * The booking card leaves the flow and pins to the bottom of the viewport
     * - node 1:2326 - carrying the property type and the button, with the rest
     * of its rows left to the page above it.
     *
     * It keeps the card's own stack: the frame draws the label over its value
     * over a full-width button, not a row with the button pushed to one side.
     * A column flex child stretches, so the button needs nothing of its own.
     */
    .stay-booking {
        position: fixed;
        inset: auto 0 0;
        z-index: 40;
        gap: 12px;
        padding: 16px var(--stay-gutter);
    }

    .stay-booking-row:not(:first-child) {
        display: none;
    }

    /* Room for the bar, so the footer is not the thing it covers. */
    .stay-similar {
        padding-bottom: 200px;
    }

    /* The frame drops the control on mobile, as the other rails do. */
    .stay-similar-nav {
        display: none;
    }

    /* Node 1:3783 on 375: the count alone, no wrapping label. */
    .stay-hero-more-label {
        display: none;
    }

    .stay-hero-more-count {
        display: inline;
    }
}

@media (width >= 992px) {
    .stay-intro {
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 56px;
        align-items: start;
        max-width: 1165px;
        margin-inline: auto;
    }

    .stay-intro-main {
        max-width: var(--stay-measure);
        margin-inline: auto;
    }

    /* Holds beside the intro while it scrolls, as the frame draws it. */
    .stay-booking {
        position: sticky;
        top: calc(var(--header-height) + 24px);
    }

    .stay-unit {
        grid-template-columns: minmax(0, 415px) minmax(0, 1fr);
        gap: 40px;
        align-items: center;
        margin-bottom: 48px;
    }

    .stay-units,
    .stay-similar {
        max-width: 1440px;
        margin-inline: auto;
    }

    .stay-units .stay-section-title,
    .stay-units-lead,
    .stay-unit {
        max-width: 931px;
        margin-inline: auto;
    }
}