/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-bg: #0a0607;
    --color-primary: #a8156f;          /* magenta from the logo */
    --color-primary-light: #c9238a;
    --color-text: #f2eef0;
    --color-text-light: #b9b0b4;
    --color-border: rgba(255, 255, 255, 0.12);
    --max-width: 1100px;
    --header-h: 150px;                 /* distance from top to the magenta line */
    --logo-line: 0.552;                /* where the magenta line sits inside logo_maja.png (fraction of its height) */
    --logo-size: calc(var(--header-h) / var(--logo-line));
    --logo-hang: calc(var(--logo-size) * 0.78 - var(--header-h));  /* how far the swirl hangs below the line */
    --header-band: calc(var(--logo-hang) + 6px);                   /* solid black band under the line, covers the swirl */
    --header-fade: 44px;                                           /* below the band: black fades to transparent */
    --gutter: 6vw;                     /* left edge of the logo and the menu, relative to the window */
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Raleway', 'Segoe UI', sans-serif;
    font-weight: 300;
    background: var(--color-bg) url('/images/back.png') center top / cover no-repeat fixed;
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--color-primary-light); text-decoration: none; }
a:hover { color: #fff; }

/* ===== Header: logo on the left, magenta line across the full width ===== */
/* The header stays pinned at the top; the page scrolls away underneath the line. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    height: calc(var(--header-h) + 2px + var(--header-band) + var(--header-fade));
    background: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(var(--header-h) + 2px + var(--header-band)),
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;            /* the transparent part must not block clicks on content under it */
}

.site-header .wordmark { pointer-events: auto; }

/* The magenta line is drawn in two pieces with a gap where the swirl of the
   logo crosses it (the gap sits at 65.0% to 72.3% of the logo width). */
.site-header::before,
.site-header::after {
    content: "";
    position: absolute;
    top: var(--header-h);
    height: 2px;
    background: var(--color-primary);
}

.site-header::before {
    left: 0;
    width: calc(var(--gutter) + var(--logo-size) * 0.650);
}

.site-header::after {
    left: calc(var(--gutter) + var(--logo-size) * 0.723);
    right: 0;
}

/* logo_maja.png is the complete wordmark (MAJA, FRIREZ and the swirl).
   It is sized so that the baseline of MAJA sits on the header line and the
   swirl hangs below it, like in the sketch. */
.wordmark {
    position: absolute;
    left: var(--gutter);
    top: 0;
    width: var(--logo-size);
    height: var(--logo-size);
    z-index: 1;
}

.wordmark img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ===== Layout: menu column on the left, content on the right ===== */
.layout {
    flex: 1;
    display: grid;
    grid-template-columns: max(220px, calc(var(--gutter) + 230px)) 1fr;
    width: 100%;
}

.sidebar {
    padding: 1rem 1rem 3rem var(--gutter);
}

/* The menu is pinned at the same spot under the logo while the content scrolls. */
.site-nav {
    position: sticky;
    top: calc(var(--header-h) + 2px + var(--header-band) + var(--header-fade) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.site-nav a {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    padding: 0.35rem 0 0.35rem 0.85rem;
    border-left: 2px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.site-nav a:hover,
.site-nav a.active {
    color: var(--color-primary-light);
    border-left-color: var(--color-primary);
}

/* ===== Content ===== */
.site-main {
    min-width: 0;
    max-width: 960px;
    padding: 1rem 6% 3rem 1.5rem;
}

.section {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--color-border);
    /* Menu links scroll to a section: keep its heading below the pinned header and fade */
    scroll-margin-top: calc(var(--header-h) + 2px + var(--header-band) + var(--header-fade) - 1.5rem);
}

.section:last-child { border-bottom: none; }

h1 {
    font-weight: 200;
    font-size: 1.85rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
    white-space: nowrap;
}

h2 {
    font-weight: 300;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-light);
    margin-bottom: 1.25rem;
}

.note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

#domov {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: start;
}

.intro p { font-size: 1.1rem; max-width: 36rem; }

.hours table, .price-group table {
    border-collapse: collapse;
    width: 100%;
    max-width: 32rem;
}

.hours td, .price-group td {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
}

.hours td:last-child, .price-group td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* Price list: groups flow into two columns like the printed A3 sheet */
.pricelist {
    columns: 2;
    column-gap: 4rem;
}

.price-group {
    break-inside: avoid;
    margin-bottom: 1.75rem;
}

.price-group h3 {
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.price-group h3 small {
    font-weight: 300;
    font-size: 0.85em;
    letter-spacing: 0.02em;
    text-transform: none;
}

.price-group td { padding: 0.3rem 0; }
.price-group td:first-child { padding-left: 0.75rem; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.gallery a {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: #000;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.gallery a:hover img { transform: scale(1.04); }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 2rem;
}

.contact-grid p + p { margin-top: 1rem; }

.map iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 1px solid var(--color-border);
    filter: saturate(0.85);
}

/* ===== Lightbox ===== */
.hidden { display: none !important; }

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500;
}

.lightbox-media {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

.lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 501;
}

.lightbox-close:hover { color: var(--color-primary-light); }

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.9rem 1rem;
    border-radius: 6px;
    z-index: 501;
    transition: background 0.2s;
}

.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(168, 21, 111, 0.6); }

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lightbox-counter {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--color-text-light);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

/* ===== Footer ===== */
.site-footer {
    border-top: 2px solid var(--color-primary);
    background: #000;
    text-align: center;
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    :root {
        --header-h: 110px;
        --gutter: 0.75rem;
    }

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

    .sidebar {
        padding: 1rem 0.75rem 0;
    }

    .site-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 1.5rem;
    }

    .site-nav a {
        padding: 0.3rem 0;
        border-left: none;
        font-size: 0.95rem;
    }

    .site-main { padding: 1.5rem 1rem 2rem; }

    h1 { white-space: normal; }

    .pricelist { columns: 1; }

    .site-nav {
        left: auto;
        right: 1rem;
        bottom: 8px;
        display: grid;
        grid-template-columns: auto auto;
        gap: 0.25rem 1.25rem;
        justify-items: end;
    }

    .site-nav a { font-size: 0.85rem; }

    .site-main { padding-top: 4.5rem; }

    #domov, .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}