/* Masáže-only additions. main.css stays a byte copy of the ateliér, so everything new lives here and uses its tokens. */

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Menu anchors land below the sticky header (design-spec §3 heights) */
section[id] { scroll-margin-top: 183px; }

/* Ateliér never shows .button underlined (.contact__card .button) */
.button { text-decoration: none; }

/* Home: hero */
.hero--no-image { background: var(--c-brown-dark); }
.hero--no-image::before { content: none; } /* the overlay only tones down photos */

/* The leaflet title is longer than "Keramika s duší": two lines here, four in the ateliér's 551px box */
.hero__title { max-width: 812px; }

.hero__button { margin-top: 61px; }

/* Trápí vás… (rhythm of .markets) */
.help {
    padding-top: 80px;
    padding-bottom: 111px;
    text-align: center;
}

.help__subtitle,
.services__subtitle {
    margin-top: 19px;
    color: var(--c-muted);
    text-align: center;
}

.help__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 39px;
}

.help__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    background: var(--c-beige);
    color: var(--c-ink);
    font: 600 18px/1.3 var(--font-head);
}

/* O mně: one 16:9 photo instead of the ateliér's two */
.about__image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    object-fit: cover;
}

.about--text-only { grid-template-columns: 1fr; }
.about--text-only .about__text { max-width: 800px; }

/* Nabídka, Ceník, Kontakt: section rhythm of .gallery and .posts */
.services,
.prices,
.place {
    padding-top: 80px;
    padding-bottom: 110px;
}

/* Nabídka. The section is its own .container, so the grey is painted out to the viewport edges. */
.services {
    background: var(--c-bg-alt);
    box-shadow: 0 0 0 100vmax var(--c-bg-alt);
    clip-path: inset(0 -100vmax);
}

.services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 39px;
}

.service {
    padding: 24px;
    border-radius: 20px;
    background: var(--c-bg);
}

.service__title {
    color: var(--c-ink);
    font-size: 18px;
}

.service__text { margin-top: 8px; }

/* Ceník */
.prices > .section-title,
.place > .section-title { margin-bottom: 48px; }

.prices__list {
    max-width: 720px;
    margin: 0 auto;
}

.prices__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-block: 16px;
}

.prices__row + .prices__row { border-top: 1px solid var(--c-beige); }

.prices__row dt {
    font-size: 18px;
    line-height: 27px;
}

.prices__value {
    margin: 0;
    color: var(--c-brown-dark);
    font: 700 20px/27px var(--font-price);
    white-space: nowrap;
}

/* Kde mě najdete */
.place {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    align-items: start;
}

.place > .section-title { grid-column: 1 / -1; }

.place__map a { display: block; }

.place__map img {
    width: 100%;
    border-radius: 20px;
}

.place__info { padding-left: 24px; } /* in line with the text of the right-hand service cards */

/* Label and value pairs as in the footer columns, dark on white like .contact__card */
.place__label {
    margin-bottom: 19px;
    color: var(--c-ink);
    font: 700 14px/21px var(--font-body);
    text-transform: uppercase;
}

.place__label ~ .place__label,
.place__info .button { margin-top: 32px; }

.place__info address { font-style: normal; }
.place__note { margin-top: 16px; }

.place__info a:not(.button) { text-decoration: none; }
.place__info a:not(.button):hover { text-decoration: underline; }
.place__info a[href^="tel:"] { font-size: 18px; line-height: 27px; }

/* Footer: ateliér link under the columns, same as .footer__masaze in main.css (.footer__business comes from main.css) */
.footer__atelier {
    grid-column: 1 / -1;
    margin-top: 41px;
}

.footer__atelier a { text-decoration: none; }
.footer__atelier a:hover { text-decoration: underline; }

@media (max-width: 920px) {
    section[id] { scroll-margin-top: 171px; }

    .hero__button { margin-top: 8px; }

    .help {
        padding-top: 40px;
        padding-bottom: 43px;
    }

    .help__subtitle,
    .services__subtitle { margin-top: 22px; }

    .help__grid {
        grid-template-columns: 1fr 1fr;
        margin-top: 60px;
    }

    .help__item { padding: 20px 16px; }

    .about--single { padding-bottom: 40px; }
    .about__image { margin-top: 40px; }

    .services,
    .prices,
    .place {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .services__grid { margin-top: 60px; }

    .prices > .section-title,
    .place > .section-title { margin-bottom: 32px; }

    .place { grid-template-columns: 1fr; }

    .place__info {
        margin-top: 40px;
        padding-left: 0;
    }

    .place__label { margin-bottom: 11px; }

    .footer__atelier { margin-top: 22px; }
}

@media (max-width: 600px) {
    .help__grid,
    .services__grid { grid-template-columns: 1fr; }
}