/* =====================================================
   ENKLEANA AESTHETICS
   SHARED RESPONSIVE RULES
   Page-specific breakpoints live in the page files.
===================================================== */


/* =====================================================
   TABLET ≤ 1050
===================================================== */

@media (max-width: 1050px) {

    .page-hero {
        height: auto;
        grid-template-rows: none;
    }

    .page-hero__media {
        aspect-ratio: 16 / 9;
    }

    .page-hero__head {
        grid-column: 1 / -1;
    }

    .page-hero__aside {
        grid-column: 1 / span 9;
        margin-top: var(--space-m);
    }

    .split-statement__head {
        grid-column: 1 / -1;
    }

    .split-statement__copy {
        grid-column: 1 / span 9;
        margin-top: var(--space-m);
    }

    .steps {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .step {
        padding-block: var(--space-m);

        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr);
        column-gap: 1rem;
    }

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

    .step h3 {
        grid-column: 2;
        margin-top: -0.35rem;
        max-width: none;
    }

    .step p {
        grid-column: 2;
        max-width: 34rem;
    }
}


/* =====================================================
   MOBILE ≤ 760
===================================================== */

@media (max-width: 760px) {

    :root {
        --section: clamp(4rem, 3rem + 5vw, 5.5rem);
    }

    .page-hero {
        padding-top: 2.5rem;
    }

    .page-hero__aside {
        grid-column: 1 / -1;
    }

    .page-hero__media {
        margin-top: var(--space-m);
        margin-inline: calc(var(--edge) * -1);
        aspect-ratio: 5 / 4;
    }

    .split-statement__copy {
        grid-column: 1 / -1;
    }

    .hero-actions {
        gap: 1.1rem 1.6rem;
    }

    .hero-actions .button {
        flex: 1 1 100%;
    }

    .menu-row {
        min-height: 3.1rem;
        font-size: 0.95rem;
    }

    .booking-section h2 {
        font-size: clamp(2.4rem, 1.6rem + 4vw, 3.2rem);
    }

    .booking-section .button {
        width: 100%;
        max-width: 22rem;
    }
}


/* =====================================================
   PRICE MENU / MEDIA SPLIT
===================================================== */

@media (max-width: 900px) {

    .price-menu__groups {
        columns: 1;
    }

    .media-split__media {
        grid-column: 1 / -1;
    }

    .media-split__copy {
        grid-column: 1 / -1;
        margin-top: var(--space-l);
    }
}

@media (max-width: 760px) {

    .price-menu__header {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .media-split__media {
        margin-inline: calc(var(--edge) * -1);
    }
}