/* ==========================================================================
   Gazpacho – title & subtitle only (assets/font)
   Weights: 400 Regular | 500–600 Medium | 700 Bold | 800–900 Heavy
   ========================================================================== */

@font-face {
    font-family: "Gazpacho";
    src: url("../font/Gazpacho-Regular.woff2") format("woff2"),
         url("../font/Gazpacho-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gazpacho";
    src: url("../font/Gazpacho-Medium.woff2") format("woff2"),
         url("../font/Gazpacho-Medium.otf") format("opentype");
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gazpacho";
    src: url("../font/Gazpacho-Bold.woff2") format("woff2"),
         url("../font/Gazpacho-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gazpacho";
    src: url("../font/Gazpacho-Heavy.woff2") format("woff2"),
         url("../font/Gazpacho-Heavy.otf") format("opentype");
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Az ecsegi Ház – Design tokens & base
   ========================================================================== */

:root {
    --color-bg: #fdfcf8;
    --color-bg-beige: #ebe9e0;
    --color-text: #2d2d2d;
    --color-text-muted: #5a5a5a;
    --color-accent: #8a8478;
    --color-contact-bg: #d1e0d7;
    --color-contact-text: #2d342f;

    --font-sans: "Google Sans Flex", "Inter", "Segoe UI", system-ui, sans-serif;
    --font-serif: var(--font-sans);
    --font-gazpacho: "Gazpacho", "Georgia", serif;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;

    --shadow-faint: 0 10px 32px rgba(26, 26, 26, 0.288);
    --shadow-soft: var(--shadow-faint);
    --shadow-card: var(--shadow-faint);

    --container-max: 1180px;
    --font-scale: 1.5;
    --container-narrow: 760px;
    --section-pad-y: clamp(3.5rem, 7vw, 5.5rem);
    --header-pad-y: clamp(1.5rem, 3vw, 2.25rem);
    --z-contact-badge: 900;
    --z-lang-switcher: 910;
    --z-section-nav-mobile: 950;

    /* Image-adjacent segment copy (reference: gallery-closing) */
    --segment-title-font-size: clamp(calc(2rem * var(--font-scale)), calc(4vw * var(--font-scale)), calc(2.85rem * var(--font-scale)));
    --segment-title-line-height: 1.15;
    --segment-title-max-width: 14ch;
    --segment-text-font-size: clamp(calc(0.92rem * var(--font-scale)), calc(1.5vw * var(--font-scale)), calc(1rem * var(--font-scale)));
    --segment-text-line-height: 1.3;
    --segment-text-max-width: 38ch;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: calc(1rem * var(--font-scale));
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

strong {
    font-weight: 800;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 0.75rem 1rem;
    background: var(--color-text);
    color: var(--color-bg);
    text-decoration: none;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* ==========================================================================
   Floating contact badge (top-right, always visible)
   ========================================================================== */

.contact-badge {
    position: fixed;
    top: var(--header-pad-y);
    right: var(--header-pad-y);
    z-index: var(--z-contact-badge);
    margin: 0;
    padding: 0.85rem 2.5rem 0.85rem 1.75rem;
    background: var(--color-contact-bg);
    border-radius: 50px 50px 50px 0;
    text-align: right;
    line-height: 1.15;
    pointer-events: auto;
}

.contact-badge__brand {
    display: none;
}

.contact-badge__logo {
    display: block;
    width: 100%;
    height: auto;
}

.contact-badge__info {
    min-width: 0;
}

.contact-badge__name {
    margin: 0;
    font-family: var(--font-gazpacho);
    font-size: clamp(calc(1.05rem * var(--font-scale)), calc(2.2vw * var(--font-scale)), calc(1.35rem * var(--font-scale)));
    font-weight: 700;
    color: var(--color-contact-text);
}

.contact-badge__name-note {
    margin: 0.1rem 0 0;
    font-family: var(--font-gazpacho);
    font-size: clamp(calc(0.7rem * var(--font-scale)), calc(1.4vw * var(--font-scale)), calc(0.82rem * var(--font-scale)));
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-contact-text);
    opacity: 0.85;
}

.contact-badge__toggle {
    display: block;
    width: fit-content;
    margin-top: 0.35rem;
    margin-left: auto;
    padding: 0.35rem 0.75rem;
    font-family: var(--font-gazpacho);
    font-size: clamp(calc(0.85rem * var(--font-scale)), calc(1.8vw * var(--font-scale)), calc(1rem * var(--font-scale)));
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-contact-text);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(45, 52, 47, 0.2);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.contact-badge__toggle:hover,
.contact-badge__toggle:focus-visible {
    background: rgba(255, 255, 255, 0.7);
    opacity: 0.9;
}

.contact-badge__details {
    margin-top: 0.15rem;
}

.contact-badge__details.is-visible {
    display: block;
}

.contact-badge__phone,
.contact-badge__email {
    display: block;
    font-family: var(--font-gazpacho);
    color: var(--color-contact-text);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.contact-badge__phone {
    margin-top: 0.15rem;
    font-size: clamp(calc(1rem * var(--font-scale)), calc(2vw * var(--font-scale)), calc(1.25rem * var(--font-scale)));
    font-weight: 800;
}

.contact-badge__email {
    margin-top: 0.1rem;
    font-size: clamp(calc(0.7rem * var(--font-scale)), calc(1.4vw * var(--font-scale)), calc(0.82rem * var(--font-scale)));
    font-weight: 600;
    line-height: 1.1;
    opacity: 0.85;
    word-break: break-all;
}

.contact-badge__phone:hover,
.contact-badge__phone:focus-visible,
.contact-badge__email:hover,
.contact-badge__email:focus-visible {
    opacity: 0.75;
}

/* ==========================================================================
   Floating section navigation (left sidebar, scroll spy)
   ========================================================================== */

[id^="section-"] {
    scroll-margin-top: clamp(5rem, 12vw, 7rem);
}

.sidebar-float {
    --section-nav-bg: var(--color-contact-bg);
    --section-nav-border: rgba(45, 52, 47, 0.12);
    --section-nav-text: rgba(45, 52, 47, 0.72);
    --section-nav-text-active: var(--color-contact-text);
    --section-nav-marker: rgba(45, 52, 47, 0.35);
    --section-nav-marker-active: var(--color-contact-text);
    --section-nav-highlight: rgba(45, 52, 47, 0.1);
    --lang-icon-size: 2.15rem;

    position: fixed;
    top: 50%;
    left: clamp(0.75rem, 2vw, 1.5rem);
    z-index: 850;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    transform: translateY(-50%);
    width: min(14rem, 18vw);
}

.lang-switcher-float {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.lang-switcher-float__link {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--lang-icon-size);
    height: var(--lang-icon-size);
    border-radius: 50%;
    overflow: visible;
    text-decoration: none;
    background-color: #fff;
    box-shadow: var(--shadow-faint);
    opacity: 0.72;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.lang-switcher-float__flag {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
}

.lang-switcher-float__link:hover,
.lang-switcher-float__link:focus-visible {
    opacity: 0.95;
    transform: scale(1.08);
    outline: none;
}

.lang-switcher-float__link.is-active {
    opacity: 1;
    box-shadow:
        0 0 0 2px var(--color-contact-bg),
        0 0 0 3.5px var(--color-contact-text),
        var(--shadow-faint);
}

.section-nav {
    width: 100%;
    margin: 0;
    padding: 0.85rem 1rem 0.85rem 0.75rem;
    background: var(--section-nav-bg);
    border: 1px solid var(--section-nav-border);
    border-radius: 0 50px 50px 50px;
    box-shadow: var(--shadow-faint);
}

.section-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-nav__item {
    margin: 0;
}

.section-nav__link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.45rem 0.35rem 0.25rem;
    border-radius: 999px;
    color: var(--section-nav-text);
    font-family: var(--font-gazpacho);
    font-size: clamp(calc(0.72rem * var(--font-scale)), calc(1.1vw * var(--font-scale)), calc(0.82rem * var(--font-scale)));
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.section-nav__link:hover,
.section-nav__link:focus-visible {
    color: var(--section-nav-text-active);
    background: var(--section-nav-highlight);
    outline: none;
}

.section-nav__link.is-active {
    color: var(--section-nav-text-active);
    background: var(--section-nav-highlight);
}

.section-nav__marker {
    flex-shrink: 0;
    align-self: center;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--section-nav-marker);
    opacity: 0.45;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        background-color 0.25s ease;
}

.section-nav__link.is-active .section-nav__marker {
    opacity: 1;
    transform: scale(1.25);
    background: var(--section-nav-marker-active);
}

.section-nav__label {
    min-width: 0;
}

@media (max-width: 1180px) {
    :root {
        --section-nav-mobile-h: calc(3.75rem + env(safe-area-inset-bottom, 0px));
        --lang-switcher-mobile-bottom: calc(var(--section-nav-mobile-h) + 0.65rem);
    }

    body {
        padding-bottom: var(--section-nav-mobile-h);
    }

    [id^="section-"] {
        scroll-margin-top: calc(var(--mobile-contact-bar-h, 5rem) + 1rem);
        scroll-margin-bottom: var(--section-nav-mobile-h);
    }

    .sidebar-float {
        position: static;
        display: block;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
        transform: none;
        pointer-events: none;
    }

    .lang-switcher-float {
        --lang-icon-size: 2rem;

        position: fixed;
        top: auto;
        right: auto;
        bottom: var(--lang-switcher-mobile-bottom);
        left: max(0.65rem, env(safe-area-inset-left, 0.65rem));
        z-index: calc(var(--z-section-nav-mobile) + 1);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        transform: none;
        pointer-events: auto;
    }

    .lang-switcher-float__link {
        flex: 0 0 auto;
    }

    .section-nav {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-section-nav-mobile);
        width: auto;
        max-width: none;
        padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        border-bottom: none;
        border-left: none;
        border-right: none;
        pointer-events: auto;
    }

    .section-nav__list {
        flex-direction: row;
        align-items: stretch;
        gap: 0.35rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 0.75rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-inline: 0.15rem;
    }

    .section-nav__list::-webkit-scrollbar {
        display: none;
    }

    .section-nav__item {
        flex: 0 0 auto;
        scroll-snap-align: center;
    }

    .section-nav__link {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        min-height: 2.65rem;
        padding: 0.35rem 0.85rem;
        white-space: nowrap;
        font-size: calc(0.72rem * var(--font-scale));
        text-align: center;
    }

    .section-nav__marker {
        margin-top: 0;
        width: 0.4rem;
        height: 0.4rem;
    }
}

.container {
    width: min(100% - 2.5rem, var(--container-max));
    margin-inline: auto;
}

.container--narrow {
    width: min(100% - 2.5rem, var(--container-narrow));
}

.section {
    padding-block: var(--section-pad-y);
}

.section--beige {
    background: var(--color-bg-beige);
}

.section__title {
    margin: 0 0 clamp(2rem, 4vw, 5rem);
    font-family: var(--font-gazpacho);
    font-size: clamp(calc(2.25rem * var(--font-scale)), calc(4.5vw * var(--font-scale)), calc(3.25rem * var(--font-scale)));
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   Segment content typography (shared – reference: gallery-closing)
   ========================================================================== */

.basics-floor-plan__title,
.feature-row__title,
.introduction__title,
.lifestyle-hiking__title,
.gallery-closing__title {
    font-family: var(--font-gazpacho);
    font-size: var(--segment-title-font-size);
    font-weight: 600;
    line-height: var(--segment-title-line-height);
    max-width: var(--segment-title-max-width);
}

.basics-floor-plan__text,
.feature-row__text,
.introduction__text,
.lifestyle-hiking__text,
.gallery-closing__text {
    font-size: var(--segment-text-font-size);
    color: var(--color-text-muted);
    line-height: var(--segment-text-line-height);
    max-width: var(--segment-text-max-width);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    padding-block: var(--header-pad-y);
    background: var(--color-bg);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.lang-switcher-bar {
    display: none;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.site-brand__logo {
    flex-shrink: 0;
    width: clamp(120px, 15vw, 200px);
    height: auto;
}

.site-brand__text {
    min-width: 0;
}

.site-brand__title {
    margin: 0;
    font-family: var(--font-gazpacho);
    font-size: clamp(calc(2rem * var(--font-scale)), calc(4.5vw * var(--font-scale)), calc(3rem * var(--font-scale)));
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: 0.01em;
}

.site-brand__subtitle {
    margin: 0.35rem 0 0;
    font-family: var(--font-gazpacho);
    font-size: clamp(calc(0.75rem * var(--font-scale)), calc(1.3vw * var(--font-scale)), calc(1rem * var(--font-scale)));
    font-weight: 400;
    color: var(--color-text-muted);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.lang-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    position: relative;
    z-index: 1;
}

.lang-switcher__link {
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
}

.lang-switcher__link:hover,
.lang-switcher__link:focus-visible {
    color: var(--color-text);
    background: rgba(45, 45, 45, 0.06);
    outline: none;
}

.lang-switcher__link.is-active {
    color: var(--color-bg);
    background: var(--color-text);
}

/* ==========================================================================
   Introduction (owner message)
   ========================================================================== */

.introduction {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.introduction__inner {
    display: grid;
    grid-template-columns: minmax(200px, 320px) 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.introduction__image {
    width: 100%;
    max-width: 320px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-faint);
    object-fit: cover;
    aspect-ratio: 4 / 5;
}

.introduction__title {
    margin: 0 0 1.25rem;
}

.introduction__text {
    margin: 0;
    max-width: 52ch;
}

@media (max-width: 768px) {
    .introduction__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .introduction__media {
        order: -1;
    }

    .introduction__image {
        max-width: 260px;
    }

    .introduction__text {
        width: min(75vw, 100%);
        margin-inline: auto;
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hero__inner {
    position: relative;
}

.hero__image-wrap {
    position: relative;
    width: 92%;
    margin-left: 0;
    margin-right: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 50vh;
    box-shadow: var(--shadow-faint);
}

.hero__image-wrap .img-alt-tooltip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__image-wrap .hero__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

.hero__card {
    position: relative;
    width: min(92%, 420px);
    margin: clamp(-3rem, -6vw, -4rem) 0 0 auto;
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.25rem);
    background: var(--color-bg-beige);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-faint);
    text-align: center;
    z-index: 2;
}

@media (min-width: 900px) {
    .hero {
        margin-bottom: clamp(3rem, 5vw, 4rem);
    }

    .hero__inner {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero__image-wrap {
        grid-column: 1;
        grid-row: 1;
        width: 80%;
        max-width: none;
        margin: 0;
        justify-self: start;
    }

    .hero__card {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        align-self: center;
        justify-self: end;
        top: auto;
        left: auto;
        width: 50%;
        height: 60%;
        max-height: 60%;
        margin: 0;
        transform: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;
        container-type: size;
    }
}

.hero__title {
    margin: 0 0 1rem;
    font-family: var(--font-gazpacho);
    font-size: min(60px, max(2.25rem, 7.5vw));
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--color-text);
}

@media (min-width: 900px) {
    .hero__title {
        margin-bottom: clamp(0.5rem, 3cqh, 1rem);
    }

    .hero__subtitle {
        font-size: clamp(14px, 3.5cqh, 18px);
    }
}

.hero__subtitle {
    margin: 0;
    font-family: var(--font-gazpacho);
    font-size: clamp(16px, 2.2vw, 20px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Basics grid
   ========================================================================== */

.basics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: max(8rem, clamp(1.5rem, 3vw, 2.5rem));
    column-gap: clamp(1rem, 2vw, 1.5rem);
    margin: 0;
    align-items: stretch;
}

.basics-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    height: 100%;
    text-align: center;
}

.basics-grid__label {
    margin: 0 0 1.5rem;
    width: 100%;
    flex-shrink: 0;
    font-family: var(--font-serif);
    font-size: clamp(calc(1rem * var(--font-scale)), calc(1.8vw * var(--font-scale)), calc(1.15rem * var(--font-scale)));
    font-weight: 700;
    line-height: 1.3;
}

.basics-grid__value {
    margin: auto 0 0;
    width: 100%;
    font-size: clamp(calc(0.82rem * var(--font-scale)), calc(1.4vw * var(--font-scale)), calc(0.92rem * var(--font-scale)));
    color: var(--color-text-muted);
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .basics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .basics-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 4rem;
        column-gap: 1rem;
    }
}

@media (max-width: 400px) {
    .basics-grid {
        grid-template-columns: 1fr;
    }
}

.basics-floor-plan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    margin-top: clamp(3rem, 6vw, 5rem);
}

.basics-floor-plan + .basics-floor-plan {
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.basics-floor-plan__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.basics-floor-plan__title {
    margin: 0 0 1.25rem;
}

.basics-floor-plan__text {
    margin: 0;
}

.basics-floor-plan__rooms {
    list-style: none;
    margin: 0;
    padding: 0;
    width: min(100%, 21rem);
    text-align: left;
}

.basics-floor-plan__room {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: var(--segment-text-font-size);
    color: var(--color-text-muted);
    line-height: var(--segment-text-line-height);
}

.basics-floor-plan__room + .basics-floor-plan__room {
    margin-top: 0.2em;
}

.basics-floor-plan__room-name {
    flex-shrink: 0;
}

.basics-floor-plan__room-leader {
    flex: 1;
    align-self: flex-end;
    min-width: 0.75rem;
    margin-bottom: 0.22em;
    border-bottom: 1px dotted rgba(138, 132, 120, 0.45);
}

.basics-floor-plan__room-area {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.basics-floor-plan__image {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-faint);
    object-fit: contain;
    background: #fff;
}

@media (max-width: 768px) {
    .basics-floor-plan {
        grid-template-columns: 1fr;
    }

    .basics-floor-plan__content {
        text-align: center;
    }

    .basics-floor-plan__media {
        order: -1;
    }
}

/* ==========================================================================
   Price
   ========================================================================== */

.price__amounts {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
}

.price__huf,
.price__eur {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.2em;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    margin-block: 0;
    font-family: var(--font-gazpacho);
    line-height: 1.2;
    white-space: nowrap;
}

.price__huf {
    font-size: clamp(calc(2.5rem * var(--font-scale)), calc(6vw * var(--font-scale)), calc(3.75rem * var(--font-scale)));
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.price__eur {
    font-size: clamp(calc(1.35rem * var(--font-scale)), calc(3vw * var(--font-scale)), calc(1.75rem * var(--font-scale)));
    font-weight: 600;
    color: var(--color-text-muted);
}

.price__currency {
    flex-shrink: 0;
    font-size: 0.65em;
    font-weight: 600;
}

.price__note {
    margin: 0;
    text-align: center;
    font-size: calc(0.88rem * var(--font-scale));
    color: var(--color-text-muted);
    line-height: 1.65;
    max-width: 52ch;
    margin-inline: auto;
}

/* ==========================================================================
   Lifestyle / feature rows
   ========================================================================== */

.lifestyle__rows {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 5rem);
    margin-bottom: clamp(3.5rem, 6vw, 5rem);
}

.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.feature-row--reverse .feature-row__content {
    order: 2;
}

.feature-row--reverse .feature-row__media {
    order: 1;
}

.feature-row__title {
    margin: 0 0 1rem;
}

.feature-row__text {
    margin: 0;
}

.feature-row__image {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-faint);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.feature-row--portrait .feature-row__image {
    aspect-ratio: 3 / 4;
    max-width: 420px;
    margin-inline: auto;
}

.feature-row--panorama .feature-row__media {
    width: 100%;
}

.panorama-viewer {
    position: relative;
    width: 100%;
    height: clamp(280px, 50vw, 480px);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-faint);
    background: #1a1a1a;
}

.panorama-viewer__viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: default;
    touch-action: pan-y;
}

.panorama-viewer__viewport.is-engaged {
    touch-action: none;
    cursor: grab;
}

.panorama-viewer__viewport.is-engaged.is-dragging {
    cursor: grabbing;
}

.panorama-viewer__img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    height: auto;
    transform-origin: 0 0;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.panorama-viewer__hint {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.5rem;
    background: rgba(25, 25, 25, 0.42);
    color: #fff;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.panorama-viewer.has-interacted .panorama-viewer__hint {
    opacity: 0;
    visibility: hidden;
}

.panorama-viewer__hint-icons {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 2.5rem);
}

.panorama-viewer__hint-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.panorama-viewer__hint-svg {
    width: 2.75rem;
    height: 2.75rem;
    animation: panorama-hint-pulse 2.2s ease-in-out infinite;
}

.panorama-viewer__hint-icon:nth-child(2) .panorama-viewer__hint-svg {
    animation-delay: 0.35s;
}

.panorama-viewer__hint-text {
    margin: 0;
    max-width: 28ch;
    font-size: clamp(0.85rem, 1.4vw, 0.95rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    opacity: 0.95;
}

.panorama-viewer__hint-label--mobile,
.panorama-viewer__hint-text--mobile {
    display: none;
}

@media (max-width: 768px) {
    .panorama-viewer__hint-label--desktop,
    .panorama-viewer__hint-text--desktop {
        display: none;
    }

    .panorama-viewer__hint-label--mobile {
        display: inline;
    }

    .panorama-viewer__hint-text--mobile {
        display: block;
    }

    .panorama-viewer__hint-text {
        max-width: 32ch;
    }
}

@keyframes panorama-hint-pulse {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.88;
    }

    50% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.media-hint {
    margin: 0.65rem 0 0;
    font-size: calc(0.8rem * var(--font-scale));
    color: var(--color-text-muted);
    text-align: center;
}

.feature-row__video {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-faint);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #1a1a1a;
}

.feature-row--portrait .feature-row__video {
    aspect-ratio: 3 / 4;
    max-width: 420px;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .feature-row,
    .feature-row--reverse {
        grid-template-columns: 1fr;
    }

    /* Default mobile: media on top, text below */
    .feature-row__content {
        order: 2;
    }

    .feature-row__media {
        order: 1;
    }

    /* mobile_reverse: text on top, media below */
    .feature-row--mobile-reverse .feature-row__content {
        order: 1;
    }

    .feature-row--mobile-reverse .feature-row__media {
        order: 2;
    }
}

@media (max-width: 900px) {
    .basics-floor-plan__title,
    .feature-row__title,
    .introduction__title,
    .lifestyle-hiking__title,
    .gallery-closing__title,
    .basics-floor-plan__text,
    .feature-row__text,
    .lifestyle-hiking__text,
    .gallery-closing__text {
        max-width: none;
    }
}

/* Hiking block */
.lifestyle-hiking {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
}

.lifestyle-hiking__title {
    margin: 0 0 1rem;
}

.lifestyle-hiking__text {
    margin: 0 0 2rem;
}

.lifestyle-hiking__image {
    width: min(100%, 480px);
    margin-inline: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-faint);
    aspect-ratio: 14 / 9;
    object-fit: cover;
}

/* ==========================================================================
   Condition
   ========================================================================== */

.condition__text {
    margin: 0;
    text-align: center;
    font-size: clamp(calc(0.95rem * var(--font-scale)), calc(1.6vw * var(--font-scale)), calc(1.05rem * var(--font-scale)));
    color: var(--color-text-muted);
    line-height: 1.8;
    max-width: 58ch;
    margin-inline: auto;
}

/* ==========================================================================
   Gallery closing
   ========================================================================== */

.gallery-closing__segments {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 5rem);
}

.gallery-closing__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
}

.gallery-closing__layout--reverse .gallery-closing__comparison {
    order: 2;
}

.gallery-closing__layout--reverse .gallery-closing__content {
    order: 1;
}

.gallery-closing__comparison {
    width: 100%;
    touch-action: pan-y;
}

@media (pointer: coarse) {
    .gallery-closing__comparison,
    .gallery-closing__comparison .ba-compare,
    .gallery-closing__comparison .ba-compare__before {
        touch-action: pan-y;
    }
}

.gallery-closing__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* Before / after comparison slider */
.ba-compare {
    --ba-position: 50%;
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-faint);
    touch-action: pan-y;
    cursor: default;
}

@media (pointer: coarse) {
    .ba-compare {
        user-select: auto;
        -webkit-user-select: auto;
    }
}

.ba-compare__before {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--ba-position);
    overflow: hidden;
    z-index: 2;
    touch-action: pan-y;
}

@media (hover: hover) and (pointer: fine) {
    .ba-compare {
        user-select: none;
        touch-action: none;
        cursor: ew-resize;
    }

    .ba-compare.is-engaged {
        cursor: ew-resize;
    }
}

.ba-compare__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.ba-compare__img--before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    max-width: none;
}

.ba-compare__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-position);
    width: 3px;
    margin-left: -1.5px;
    background: var(--color-bg);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    z-index: 3;
    pointer-events: none;
}

.ba-compare__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid var(--color-text);
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow-faint);
}

.ba-compare__handle::before,
.ba-compare__handle::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    transform: translateY(-50%);
}

.ba-compare__handle::before {
    left: 10px;
    border-width: 6px 8px 6px 0;
    border-color: transparent var(--color-text) transparent transparent;
}

.ba-compare__handle::after {
    right: 10px;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent var(--color-text);
}

.ba-compare__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
}

@media (pointer: coarse) {
    .ba-compare__range {
        pointer-events: none;
    }
}

.ba-compare__label {
    position: absolute;
    bottom: 1rem;
    padding: 0.35rem 0.75rem;
    font-size: calc(0.78rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-bg);
    background: rgba(45, 45, 45, 0.72);
    border-radius: 999px;
    z-index: 5;
    pointer-events: none;
}

.ba-compare__label--before {
    left: 1rem;
}

.ba-compare__label--after {
    right: 1rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gallery-closing__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.25rem;
    padding-bottom: clamp(0.5rem, 2vw, 1.5rem);
}

.gallery-closing__text {
    margin: 0;
}

.gallery-closing__title {
    margin: 0;
}

@media (max-width: 900px) {
    .gallery-closing__layout,
    .gallery-closing__layout--reverse {
        grid-template-columns: 1fr;
        align-items: start;
    }

    /* Default mobile: comparison on top, text below */
    .gallery-closing__comparison {
        order: 1;
    }

    .gallery-closing__content {
        order: 2;
        padding-bottom: 0;
    }

    .gallery-closing__layout--mobile-reverse .gallery-closing__comparison {
        order: 2;
    }

    .gallery-closing__layout--mobile-reverse .gallery-closing__content {
        order: 1;
    }
}

@media (max-width: 520px) {
    .ba-compare {
        max-width: none;
    }
}

/* ==========================================================================
   Image alt tooltips (non-interactive images)
   ========================================================================== */

.img-alt-tooltip {
    position: relative;
    display: block;
}

.feature-row--portrait .img-alt-tooltip {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.lifestyle-hiking__map .img-alt-tooltip {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.img-alt-tooltip__bubble {
    position: absolute;
    left: 50%;
    bottom: clamp(0.65rem, 2vw, 1rem);
    z-index: 3;
    max-width: calc(100% - 1.5rem);
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    background: rgba(45, 45, 45, 0.92);
    color: var(--color-bg);
    font-size: clamp(0.72rem, 1.4vw, 0.82rem);
    line-height: 1.45;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(0.5rem);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
    box-shadow: var(--shadow-faint);
}

.img-alt-tooltip:hover .img-alt-tooltip__bubble,
.img-alt-tooltip:focus-within .img-alt-tooltip__bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .img-alt-tooltip__bubble {
        transition: opacity 0.01s ease, visibility 0.01s ease;
        transform: translateX(-50%);
    }

    .img-alt-tooltip:hover .img-alt-tooltip__bubble,
    .img-alt-tooltip:focus-within .img-alt-tooltip__bubble {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    padding: 2rem 0 2.5rem;
    background: var(--color-bg);
    border-top: 1px solid rgba(45, 45, 45, 0.08);
}

.site-footer__copy {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Mobile layout (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
    .hero__image-wrap {
        width: min(92%, 100%);
        margin-inline: auto;
    }

    .hero__card {
        margin-inline: auto;
        text-align: center;
    }

    .basics-grid {
        row-gap: 4rem;
    }

    .section__title {
        margin-top: 3rem;
    }

    .lifestyle__rows {
        gap: 4rem;
    }

    .feature-row__title {
        margin-top: 2.5rem;
    }

    .lifestyle__rows .feature-row:first-child .feature-row__title {
        margin-top: 0;
    }

    .lifestyle-hiking__title {
        margin-top: 3rem;
    }

    .gallery-closing .section__title {
        margin-bottom: 5rem;
    }

    .gallery-closing__title {
        margin-top: 2.5rem;
    }

    .gallery-closing__segments .gallery-closing__segment:first-child .gallery-closing__title {
        margin-top: 0;
    }

    .price__huf {
        font-size: clamp(1.35rem, 8.5vw, calc(2.5rem * var(--font-scale)));
    }

    .price__eur {
        font-size: clamp(1rem, 5vw, calc(1.35rem * var(--font-scale)));
    }

    .feature-row__content {
        text-align: center;
    }

    .basics-floor-plan__title,
    .basics-floor-plan__text,
    .feature-row__title,
    .feature-row__text,
    .lifestyle-hiking__title,
    .lifestyle-hiking__text,
    .gallery-closing__text,
    .gallery-closing__title {
        margin-inline: auto;
        text-align: center;
    }

    .gallery-closing__content {
        align-items: center;
        text-align: center;
    }
}

/* ==========================================================================
   Header responsive layout on small screens
   ========================================================================== */

@media (max-width: 640px) {
    :root {
        --mobile-contact-bar-h: calc(clamp(52px, 25vw, 120px) + (0.65rem * 2));
    }

    .contact-badge {
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        padding: 0.65rem 1.25rem;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

    .contact-badge__brand {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        color: inherit;
        text-decoration: none;
    }

    .contact-badge__logo {
        width: clamp(52px, 25vw, 120px);
    }

    .contact-badge__info {
        text-align: right;
    }

    .site-header {
        padding-top: 0;
    }

    .site-header .container {
        width: 100%;
        margin-inline: 0;
        padding-inline: 1.25rem;
    }

    .site-header__inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 1rem;
    }

    .site-brand {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        width: 100%;
    }

    .site-brand__logo {
        display: none;
    }

    .site-brand__text {
        width: 100%;
        padding-top: calc(var(--mobile-contact-bar-h) + 15px);
        text-align: center;
    }

    .site-brand__title,
    .site-brand__subtitle {
        text-align: center;
    }

}

/* ==========================================================================
   Photo gallery (assets/img/gallery – auto-scanned, lazy on open)
   ========================================================================== */

.photo-gallery__header {
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.photo-gallery__title {
    margin-bottom: 0.5rem;
}

.photo-gallery__subtitle {
    margin: 0;
    text-align: center;
    font-size: var(--segment-text-font-size);
    line-height: var(--segment-text-line-height);
    color: var(--color-text-muted);
}

.photo-gallery__actions {
    display: flex;
    justify-content: center;
}

.photo-gallery__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.85rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-text);
    color: var(--color-bg);
    font-family: var(--font-sans);
    font-size: var(--segment-text-font-size);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: var(--shadow-faint);
    transition: transform 0.2s ease, background 0.2s ease;
}

.photo-gallery__open:hover {
    transform: translateY(-1px);
    background: #1f1f1f;
}

.photo-gallery__open:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.photo-gallery__street-view-block {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.photo-gallery__street-view-block--spaced {
    margin-top: clamp(3.5rem, 7vw, 5.5rem);
}

.photo-gallery__street-view-heading {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
}

.photo-gallery__street-view-title {
    margin: 0;
    font-family: var(--font-gazpacho);
    font-size: clamp(calc(1.5rem * var(--font-scale)), calc(3vw * var(--font-scale)), calc(2rem * var(--font-scale)));
    font-weight: 800;
    line-height: 1.2;
}

.photo-gallery__street-view-subtitle {
    margin: 0;
    font-size: var(--segment-text-font-size);
    line-height: var(--segment-text-line-height);
    color: var(--color-text-muted);
}

.photo-gallery__street-view {
    position: relative;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-faint);
    aspect-ratio: 16 / 9;
    touch-action: pan-y;
}

.photo-gallery__street-view-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.photo-gallery__street-view.is-engaged .photo-gallery__street-view-iframe {
    pointer-events: auto;
}

.photo-gallery__street-view.is-engaged {
    touch-action: none;
}

.photo-gallery__street-view-shield {
    position: absolute;
    inset: 0;
    z-index: 1;
    touch-action: pan-y;
    cursor: default;
}

.photo-gallery__street-view.is-engaged .photo-gallery__street-view-shield {
    pointer-events: none;
}

.photo-gallery__street-view-hint {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1.25rem;
    background: rgba(25, 25, 25, 0.42);
    color: #fff;
    font-size: var(--segment-text-font-size);
    line-height: var(--segment-text-line-height);
    text-align: center;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.photo-gallery__street-view.has-interacted .photo-gallery__street-view-hint {
    opacity: 0;
    visibility: hidden;
}

.photo-gallery__street-view-hint-text--mobile {
    display: none;
}

@media (max-width: 640px) {
    .photo-gallery__street-view-hint-text--desktop {
        display: none;
    }

    .photo-gallery__street-view-hint-text--mobile {
        display: inline;
    }
}

@media (hover: hover) and (pointer: fine) {
    .photo-gallery__street-view-shield {
        cursor: pointer;
    }
}

.photo-gallery__panel {
    width: min(96vw, 56rem);
    max-width: none;
    max-height: min(92dvh, 44rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(18, 18, 18, 0.28);
}

.photo-gallery__panel::backdrop {
    background: rgba(18, 18, 18, 0.55);
}

.photo-gallery__panel-inner {
    display: flex;
    flex-direction: column;
    max-height: min(92dvh, 44rem);
}

.photo-gallery__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem 0.65rem;
    border-bottom: 1px solid rgba(45, 45, 45, 0.08);
}

.photo-gallery__panel-counter {
    margin: 0;
    font-size: var(--segment-text-font-size);
    color: var(--color-text-muted);
}

.photo-gallery__panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--color-bg-beige);
    color: var(--color-text);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.photo-gallery__panel-close:hover {
    background: #dedcd3;
}

.photo-gallery__panel-close:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.photo-gallery__thumb-strip {
    display: flex;
    gap: 0.55rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(45, 45, 45, 0.08);
    cursor: grab;
    touch-action: pan-x;
}

.photo-gallery__thumb-strip.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
}

.photo-gallery__thumb-strip.is-dragging .photo-gallery__thumb {
    pointer-events: none;
}

.photo-gallery__thumb-strip::-webkit-scrollbar {
    height: 0.45rem;
}

.photo-gallery__thumb-strip::-webkit-scrollbar-thumb {
    background: rgba(45, 45, 45, 0.22);
    border-radius: 999px;
}

.photo-gallery__thumb {
    flex: 0 0 auto;
    position: relative;
    width: 5.5rem;
    height: 4rem;
    margin: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-beige);
    cursor: pointer;
    scroll-snap-align: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.photo-gallery__thumb:hover {
    transform: translateY(-1px);
}

.photo-gallery__thumb.is-active {
    border-color: var(--color-text);
}

.photo-gallery__thumb:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.photo-gallery__thumb-img,
.photo-gallery__thumb-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.photo-gallery__thumb--video .photo-gallery__thumb-media {
    background: #1a1a1a;
}

.photo-gallery__thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.photo-gallery__thumb-play::before {
    content: "\25B6";
}

.photo-gallery__stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(0.35rem, 1.5vw, 0.75rem);
    min-height: 0;
    padding: 0.85rem 0.65rem 1rem;
    touch-action: pan-y pinch-zoom;
}

.photo-gallery__stage-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-width: 0;
    margin: 0;
}

.photo-gallery__stage-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--color-bg-beige);
    color: var(--color-text);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-faint);
    transition: background 0.2s ease, transform 0.2s ease;
}

.photo-gallery__stage-nav:hover {
    background: #dedcd3;
    transform: translateY(-1px);
}

.photo-gallery__stage-nav:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.photo-gallery__stage-img,
.photo-gallery__stage-video {
    display: block;
    width: 100%;
    max-height: min(58dvh, 30rem);
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--color-bg-beige);
    touch-action: pan-y pinch-zoom;
}

.photo-gallery__stage-img[hidden],
.photo-gallery__stage-video[hidden] {
    display: none;
}

.photo-gallery__stage-caption {
    margin: 0;
    max-width: 42ch;
    text-align: center;
    font-size: var(--segment-text-font-size);
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .photo-gallery__panel {
        width: 100vw;
        max-height: 100dvh;
        margin: 0;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    .photo-gallery__panel-inner {
        max-height: 100dvh;
    }

    .photo-gallery__thumb {
        width: 4.75rem;
        height: 3.5rem;
    }

    .photo-gallery__stage {
        position: relative;
        display: block;
        padding: 0.85rem 2.75rem 1rem;
    }

    .photo-gallery__stage-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 2.15rem;
        height: 2.15rem;
        background: rgba(253, 252, 248, 0.92);
    }

    .photo-gallery__stage-nav:hover {
        transform: translateY(-50%);
    }

    .photo-gallery__stage-nav--prev {
        left: 0.35rem;
    }

    .photo-gallery__stage-nav--next {
        right: 0.35rem;
    }

    .photo-gallery__stage-figure {
        width: 100%;
    }

    .photo-gallery__stage-img,
    .photo-gallery__stage-video {
        max-height: calc(100dvh - 11rem);
    }
}

/* ==========================================================================
   About Ecseg
   ========================================================================== */

.about-ecseg__groups {
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 7vw, 5.5rem);
}

.about-ecseg__group-header {
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
    text-align: center;
}

.about-ecseg__group-title {
    margin: 0;
    font-family: var(--font-gazpacho);
    font-size: clamp(calc(1.65rem * var(--font-scale)), calc(3.2vw * var(--font-scale)), calc(2.35rem * var(--font-scale)));
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.about-ecseg__group-subtitle {
    margin: 0.65rem auto 0;
    max-width: 48ch;
    font-size: var(--segment-text-font-size);
    line-height: var(--segment-text-line-height);
    color: var(--color-text-muted);
}

.about-ecseg__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.about-ecseg__cards--cities {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-ecseg__cards--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-ecseg__card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: clamp(1.35rem, 2.5vw, 1.85rem);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-faint);
    border: 1px solid rgba(45, 45, 45, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-ecseg__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(26, 26, 26, 0.14);
}

.about-ecseg__card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.about-ecseg__card-heading {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.about-ecseg__card-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-contact-bg);
    position: relative;
}

.about-ecseg__card-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.15rem;
    height: 1.15rem;
    background-color: var(--color-contact-text);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.about-ecseg__card--nature .about-ecseg__card-icon::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C9.5 2 7.5 4 7.5 6.5c0 2.2 1.4 4.1 3.4 4.8L12 22l1.1-10.7c2-.7 3.4-2.6 3.4-4.8C16.5 4 14.5 2 12 2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C9.5 2 7.5 4 7.5 6.5c0 2.2 1.4 4.1 3.4 4.8L12 22l1.1-10.7c2-.7 3.4-2.6 3.4-4.8C16.5 4 14.5 2 12 2z'/%3E%3C/svg%3E");
}

.about-ecseg__card--community .about-ecseg__card-icon::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3zm-8 0c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3zm0 2c-2.3 0-7 1.2-7 3.5V19h14v-2.5C15 14.2 10.3 13 8 13zm8 0c-.3 0-.6 0-1 .1 1.2.9 2 2.1 2 3.4V19h6v-2.5c0-2.3-4.7-3.5-7-3.5z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3zm-8 0c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3zm0 2c-2.3 0-7 1.2-7 3.5V19h14v-2.5C15 14.2 10.3 13 8 13zm8 0c-.3 0-.6 0-1 .1 1.2.9 2 2.1 2 3.4V19h6v-2.5c0-2.3-4.7-3.5-7-3.5z'/%3E%3C/svg%3E");
}

.about-ecseg__card--location .about-ecseg__card-icon::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z'/%3E%3C/svg%3E");
}

.about-ecseg__card--tourism .about-ecseg__card-icon::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 17.8 5.8 21l1.2-6.9-5-4.9 6.9-.9L12 2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2l3.1 6.3L22 9.2l-5 4.9 1.2 6.9L12 17.8 5.8 21l1.2-6.9-5-4.9 6.9-.9L12 2z'/%3E%3C/svg%3E");
}

.about-ecseg__card--social .about-ecseg__card-icon::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z'/%3E%3C/svg%3E");
}

.about-ecseg__card--kindergarten .about-ecseg__card-icon::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 3c-2.8 0-5 2.2-5 5v1H5v13h14V9h-2V8c0-2.8-2.2-5-5-5zm0 2c1.7 0 3 1.3 3 3v1H9V8c0-1.7 1.3-3 3-3z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 3c-2.8 0-5 2.2-5 5v1H5v13h14V9h-2V8c0-2.8-2.2-5-5-5zm0 2c1.7 0 3 1.3 3 3v1H9V8c0-1.7 1.3-3 3-3z'/%3E%3C/svg%3E");
}

.about-ecseg__card--energy .about-ecseg__card-icon::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11 21h-1l1-7H7.5c-.5 0-.8-.6-.5-1.1L13 3h1l-1 7h3.5c.5 0 .8.6.5 1.1L11 21z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11 21h-1l1-7H7.5c-.5 0-.8-.6-.5-1.1L13 3h1l-1 7h3.5c.5 0 .8.6.5 1.1L11 21z'/%3E%3C/svg%3E");
}

.about-ecseg__card-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--font-gazpacho);
    font-size: clamp(calc(1.05rem * var(--font-scale)), calc(1.8vw * var(--font-scale)), calc(1.2rem * var(--font-scale)));
    font-weight: 600;
    line-height: 1.25;
}

.about-ecseg__card-text {
    margin: 1.15rem 0 0;
    width: 100%;
    font-size: var(--segment-text-font-size);
    line-height: var(--segment-text-line-height);
    color: var(--color-text-muted);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

.about-ecseg__card--city {
    padding-top: 1rem;
    border-top: 4px solid var(--color-contact-bg);
}

.about-ecseg__card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0.35rem 0.75rem;
    width: fit-content;
    font-size: calc(0.78rem * var(--font-scale));
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-contact-text);
    background: var(--color-contact-bg);
    border-radius: 999px;
}

.about-ecseg__card-meta-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18.9 6.9c-.2-.6-.8-1-1.5-1h-1.2l-.7-2.1c-.2-.6-.8-1-1.5-1h-4c-.7 0-1.3.4-1.5 1L8.8 5.9H7.6c-.7 0-1.3.4-1.5 1L3.1 17.1c-.2.6.2 1.2.8 1.2h16.2c.6 0 1-.6.8-1.2L18.9 6.9zM6.5 16l1.4-4.5h8.2L17.5 16H6.5z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18.9 6.9c-.2-.6-.8-1-1.5-1h-1.2l-.7-2.1c-.2-.6-.8-1-1.5-1h-4c-.7 0-1.3.4-1.5 1L8.8 5.9H7.6c-.7 0-1.3.4-1.5 1L3.1 17.1c-.2.6.2 1.2.8 1.2h16.2c.6 0 1-.6.8-1.2L18.9 6.9zM6.5 16l1.4-4.5h8.2L17.5 16H6.5z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.about-ecseg__card--city .about-ecseg__card-title {
    font-size: clamp(calc(1.2rem * var(--font-scale)), calc(2.2vw * var(--font-scale)), calc(1.45rem * var(--font-scale)));
    font-weight: 700;
}

.about-ecseg__group--cities .about-ecseg__cards {
    align-items: stretch;
}

@media (max-width: 1024px) {
    .about-ecseg__cards--cities,
    .about-ecseg__cards--triple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .about-ecseg__cards,
    .about-ecseg__cards--cities,
    .about-ecseg__cards--triple {
        grid-template-columns: 1fr;
    }

    .about-ecseg__card-body {
        align-items: center;
        text-align: center;
    }

    .about-ecseg__card-heading {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .about-ecseg__card-text {
        text-align: justify;
    }

    .about-ecseg__card-meta {
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-ecseg__card {
        transition: none;
    }

    .about-ecseg__card:hover {
        transform: none;
    }
}