@layer sonata.tokens, sonata.base, sonata.components;

/* Unlayered: must override the unlayered `html, body { overflow:hidden; height:100% }`
   app-shell reset in site.css. A layered rule can never beat an unlayered one, so the
   public landing pages need this reset outside any cascade layer to scroll correctly. */
html:has(.public-shell),
body:has(.public-shell) {
    display: block;
    height: auto;
    min-height: 100%;
    overflow: visible;
    overflow-x: clip;
    margin: 0;
    background: #f6f1ea;
}

/* Lock page scroll while the fullscreen menu overlay is open. */
html:has(.public-navigation.is-open) {
    overflow: hidden;
}

/* Self-hosted variable fonts (cyrillic + latin + latin-ext). */
@font-face {
    font-family: Unbounded;
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/unbounded-cyrillic-wght.woff2') format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: Unbounded;
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/unbounded-latin-ext-wght.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Unbounded;
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/unbounded-latin-wght.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-cyrillic-wght.woff2') format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-ext-wght.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-wght.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer sonata.tokens {
    :root {
        /* «Соната»: тепла слонова кістка, драпірування еспресо, шампань-золото
           і пудрова троянда — палітра зібрана з власних фото закладу. */
        --color-canvas: #f6f1ea;
        --color-surface: #fdfaf5;
        --color-brand: #8c6f4e;
        --color-brand-dark: #2f2523;
        --color-espresso: var(--color-brand-dark);
        --color-espresso-deep: #1c1413;
        --color-graphite: #241d1b;
        --color-bronze: #9a7f45;
        --color-accent: #c2a15a;
        --color-gold: var(--color-accent);
        --color-rose: #d2929c;
        --color-text-primary: var(--color-graphite);
        --color-text-muted: #6b6059;
        --color-text-inverse: #f7f1e7;
        --color-border: rgb(36 29 27 / 14%);
        --color-focus: #0b70d1;
        --color-success: #25744a;
        --color-warning: #986512;
        --color-error: #b42318;
        --color-info: #246a9a;

        --font-display: Unbounded, 'Segoe UI', system-ui, sans-serif;
        --font-body: Manrope, 'Segoe UI', system-ui, sans-serif;

        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-24: 6rem;
        --space-32: 8rem;

        --radius-small: 0.375rem;
        --radius-control: 0.625rem;
        --radius-media: 0.75rem;
        --radius-pill: 999rem;
        --container-wide: 90rem;
        --container-reading: 48rem;
        --header-height: 5.25rem;
        --focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--color-focus) 34%, transparent);

        --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

        /* Нотний стан — фірмовий мотив «Сонати»: п'ять тонких ліній. */
        --staff-lines: repeating-linear-gradient(
            to bottom,
            transparent 0 0.55rem,
            currentColor 0.55rem calc(0.55rem + 1px)
        );
    }
}

@layer sonata.base {
    .public-shell {
        min-block-size: 100dvh;
        color: var(--color-text-primary);
        background-color: var(--color-canvas);
        background-image: var(--grain);
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 450;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
    }

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

    .public-shell :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 0.15rem solid var(--color-focus);
        outline-offset: 0.2rem;
        box-shadow: var(--focus-ring);
    }

    .public-main {
        min-block-size: 100dvh;
    }

    /* Pages without a hero (e.g. 404) must clear the fixed header. */
    .public-main > .public-section:first-child {
        padding-block-start: calc(var(--header-height) + 3rem);
    }

    .skip-link {
        position: fixed;
        inset-block-start: var(--space-3);
        inset-inline-start: var(--space-3);
        z-index: 10000;
        min-block-size: 2.75rem;
        padding: var(--space-2) var(--space-4);
        color: var(--color-text-inverse);
        background: var(--color-espresso);
        border-radius: var(--radius-small);
        transform: translateY(calc(-100% - var(--space-6)));
        transition: transform 150ms ease;
    }

    .skip-link:focus {
        transform: translateY(0);
    }
}

@layer sonata.components {
    .public-container {
        width: min(calc(100% - clamp(2rem, 6vw, 5rem)), var(--container-wide));
        margin-inline: auto;
    }

    .public-reading {
        max-width: var(--container-reading);
    }

    .public-section {
        padding-block: clamp(4.5rem, 9vw, 9rem);
    }

    .public-section-dark {
        color: var(--color-text-inverse);
        background: var(--color-espresso);
    }

    .public-section-white {
        background: var(--color-surface);
    }

    .eyebrow {
        display: block;
        margin-block-end: var(--space-6);
        color: var(--color-bronze);
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.28em;
        text-transform: uppercase;
    }

    .public-section-dark .eyebrow {
        color: color-mix(in srgb, var(--color-text-inverse) 62%, transparent);
    }

    .display-title,
    .section-title {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 330;
        letter-spacing: 0.005em;
        line-height: 1.08;
        text-wrap: balance;
    }

    .display-title {
        max-width: 16ch;
        font-size: clamp(2.6rem, 6.6vw, 6.9rem);
        font-weight: 285;
        line-height: 1.02;
        text-transform: uppercase;
    }

    .section-title {
        max-width: 24ch;
        font-size: clamp(1.7rem, 3.3vw, 3.4rem);
    }

    .lead {
        max-width: 44rem;
        margin-block: var(--space-6) 0;
        color: var(--color-text-muted);
        font-size: clamp(1.02rem, 1.4vw, 1.22rem);
        font-weight: 450;
        line-height: 1.75;
    }

    .public-section-dark .lead {
        color: color-mix(in srgb, var(--color-text-inverse) 74%, transparent);
    }

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        min-block-size: 3rem;
        padding: 0.9rem 1.9rem;
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
    }

    .button:hover {
        transform: translateY(-2px);
    }

    .button-primary {
        color: var(--color-text-inverse);
        background: var(--color-espresso);
    }

    .button-primary:hover {
        background: var(--color-espresso-deep);
    }

    .button-secondary {
        color: var(--color-graphite);
        background: transparent;
        border-color: color-mix(in srgb, var(--color-graphite) 42%, transparent);
    }

    .button-secondary:hover {
        border-color: var(--color-graphite);
    }

    .button-inverse {
        color: var(--color-graphite);
        background: var(--color-surface);
    }

    .button-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        margin-block-start: var(--space-8);
    }

    .editorial-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.5rem, 3vw, 3rem);
        margin-block-start: var(--space-16);
    }

    .editorial-card {
        min-height: 16rem;
        padding: clamp(1.75rem, 3vw, 2.75rem) 0 0;
        background: transparent;
        border-block-start: 1px solid var(--color-border);
    }

    .editorial-card h2,
    .editorial-card h3 {
        margin-block: var(--space-6) var(--space-4);
        font-family: var(--font-display);
        font-size: clamp(1.2rem, 1.7vw, 1.7rem);
        font-weight: 380;
        line-height: 1.2;
    }

    .editorial-card p {
        margin: 0;
        color: var(--color-text-muted);
    }

    /* Photo lead-in for editorial cards (halls, banquet and catering formats). */
    .editorial-card .hall-photo {
        display: block;
        width: 100%;
        height: clamp(12rem, 22vw, 19rem);
        margin-block-end: var(--space-4);
        object-fit: cover;
        border-radius: var(--radius-control);
    }

    .content-split {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
        gap: clamp(2rem, 7vw, 7rem);
        align-items: start;
    }

    .fact-panel {
        padding: clamp(1.5rem, 3vw, 2.5rem);
        color: var(--color-text-inverse);
        background: var(--color-espresso-deep);
        border-radius: var(--radius-media);
    }

    .fact-panel h2,
    .fact-panel h3 {
        margin: 0 0 var(--space-4);
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 400;
    }

    .fact-panel p {
        color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent);
    }

    .notice {
        padding: var(--space-4) var(--space-6);
        color: var(--color-text-muted);
        background: color-mix(in srgb, var(--color-gold) 12%, transparent);
        border-inline-start: 2px solid var(--color-gold);
        border-radius: 0;
    }

    /* --- Motion primitives ------------------------------------------ */

    .split-w {
        display: inline-block;
        will-change: transform, opacity;
    }

    [data-parallax] {
        overflow: clip;
    }

    [data-parallax] > img,
    [data-parallax] figure img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        will-change: transform;
    }

    .stack-panel {
        position: relative;
    }

    .marquee {
        overflow: clip;
        white-space: nowrap;
    }

    .marquee-track {
        display: inline-flex;
        align-items: center;
        will-change: transform;
    }

    @media (max-width: 52rem) {
        .editorial-grid,
        .content-split {
            grid-template-columns: 1fr;
        }

        .editorial-card {
            min-height: auto;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-shell *,
    .public-shell *::before,
    .public-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Public controls must win over unlayered Bootstrap/DevExpress anchor defaults. */
.public-shell :is(a, button).button {
    text-decoration: none;
}

.public-shell :is(a, button).button-primary {
    color: var(--color-text-inverse);
}

.public-shell :is(a, button).button-secondary {
    color: var(--color-graphite);
}

.public-shell :is(a, button).button-inverse {
    color: var(--color-graphite);
}

/* Inner-page heroes are dark, and their action buttons are rendered from the
   page's own `Actions` fragment (so they carry the page scope, not the hero's).
   The inversion therefore has to live here, globally. */
.public-shell .page-hero :is(a, button).button-primary {
    color: var(--color-graphite);
    background: var(--color-surface);
}

.public-shell .page-hero :is(a, button).button-primary:hover {
    background: #fff;
}

.public-shell .page-hero :is(a, button).button-secondary {
    color: var(--color-text-inverse);
    border-color: color-mix(in srgb, var(--color-text-inverse) 44%, transparent);
}

.public-shell .page-hero :is(a, button).button-secondary:hover {
    border-color: var(--color-text-inverse);
}

.public-shell .eyebrow {
    display: block;
    margin-block-end: var(--space-6);
    color: var(--color-bronze);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.public-shell .display-title,
.public-shell .section-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 330;
    letter-spacing: 0.005em;
    line-height: 1.08;
    text-wrap: balance;
}

.public-shell .display-title {
    max-width: 16ch;
    font-size: clamp(2.6rem, 6.6vw, 6.9rem);
    font-weight: 285;
    line-height: 1.02;
    text-transform: uppercase;
}

.public-shell .section-title {
    max-width: 24ch;
    font-size: clamp(1.7rem, 3.3vw, 3.4rem);
}

.public-shell .lead {
    max-width: 44rem;
    margin-block: var(--space-6) 0;
    color: var(--color-text-muted);
    font-size: clamp(1.02rem, 1.4vw, 1.22rem);
    font-weight: 450;
    line-height: 1.75;
}