/* ═══════════════════════════════════════════════════════════════
   SEKCJE DODANE PO MAKIECIE
   Pub Bilardowa Oaza · abonament obiadowy · imprezy okolicznościowe
   · misy obfitości · gospodarz · miejsca na zdjęcia

   Plik korzysta wyłącznie ze zmiennych z main.css (--burgundy, --gold …),
   żeby nowe bloki nie rozjechały się z resztą strony przy zmianie palety.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── Wspólne ─────────── */
.section-lead {
    max-width: 760px;
    margin: 0 auto 3rem;
    text-align: center;
    font-size: 1.08rem;
    line-height: 1.9;
}

.section-lead strong {
    color: var(--burgundy);
    font-weight: 600;
}

.section--dark .section-lead {
    color: var(--cream);
}

.section--dark .section-lead strong {
    color: var(--gold-light);
}

/* CTA na ciemnym tle — odwracamy kolory, inaczej bordo ginie na bordo */
.section--dark .catering-cta {
    background: var(--gold);
    color: var(--burgundy-deep);
}

.section--dark .catering-cta:hover {
    background: var(--gold-light);
}

/* ─────────── Miejsce na zdjęcie ─────────── */
.sc-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-photo-empty {
    flex-direction: column;
    gap: 0.6rem;
    opacity: 1;
    min-height: 200px;
    text-align: center;
    padding: 1rem;
}

.sc-photo-empty-label {
    font-family: 'Great Vibes', cursive;
    font-size: 1.5rem;
    color: var(--gold);
    opacity: 0.75;
}

.sc-photo-empty-file {
    font-family: 'Lora', Georgia, serif;
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: var(--cream);
    opacity: 0.45;
}

/* ─────────── Dania dnia: pasek ze stałą ceną ─────────── */

/* ─────────── Abonament obiadowy ─────────── */
.subscription {
    position: relative;
    margin-top: 3rem;
    padding: 2rem 2.4rem;
    background: var(--white);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 4px;
    box-shadow: 0 12px 45px rgba(42, 10, 16, 0.1);
    overflow: hidden;
}

.subscription::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--gold), var(--burgundy-light));
}

.subscription-mark {
    position: absolute;
    top: -1.5rem;
    right: 1.5rem;
    font-size: 9rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.07;
    pointer-events: none;
}

.subscription-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
}

.subscription-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--burgundy);
    margin: 0.2rem 0 0.7rem;
}

.subscription-text {
    max-width: 640px;
    font-size: 0.96rem;
    line-height: 1.75;
    margin-bottom: 1.2rem;
}

/* Panel na dwie kolumny: opis z przyciskiem po lewej, fakty po prawej.
   Ustawione jeden pod drugim zajmowaly ponad ekran, a to tylko dopisek
   do sekcji z jadlospisem, nie jej glowna tresc. */
.subscription-body {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

/* Fakty jako lista wierszy, nie trzy kafle — kafle wymuszaly szerokosc
   i to one rozpychaly panel na cala szerokosc sekcji. */
.subscription-facts {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    list-style: none;
    margin: 0;
    padding: 1.2rem 1.4rem;
    background: var(--cream-light);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 3px;
}

.subscription-facts li {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}

.subscription-facts li + li {
    padding-top: 0.7rem;
    border-top: 1px solid rgba(201, 168, 76, 0.22);
}

.subscription-fact-value {
    flex-shrink: 0;
    min-width: 6.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--burgundy);
    line-height: 1.3;
}

.subscription-fact-label {
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-body);
    opacity: 0.85;
}

@media (max-width: 860px) {
    .subscription-body {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ─────────── Pub Bilardowa Oaza ─────────── */
.pub-content {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: start;
}

.pub-text h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    color: var(--gold-light);
    margin-bottom: 1.2rem;
}

.pub-text p {
    color: var(--cream);
    line-height: 1.95;
    margin-bottom: 1.2rem;
    opacity: 0.92;
}

.pub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.8rem 0 0.5rem;
}

.pub-tag {
    padding: 0.45rem 1rem;
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 999px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
}

.pub-hours {
    padding: 2rem;
    background: rgba(201, 168, 76, 0.06);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 4px;
}

.pub-hours h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2rem;
}

.pub-hours-note {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(201, 168, 76, 0.2);
    font-size: 0.85rem;
    color: var(--cream);
    opacity: 0.7;
    line-height: 1.7;
}

.pub-gallery {
    display: grid;
    /* Liczbę kolumn podaje szablon (--pub-kolumn), bo pasek pokazuje tylko
       te zdjęcia, które faktycznie wybrano. Przy stałych czterech kolumnach
       dwa zdjęcia zostawiłyby po prawej dwie puste dziury. */
    grid-template-columns: repeat(var(--pub-kolumn, 4), 1fr);
    gap: 1rem;
    margin-top: 3.5rem;
}

.pub-gallery > * {
    aspect-ratio: 4/3;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.2);
}

/* ─────────── Imprezy: dopisek do pakietów ─────────── */
.catering-package-meta {
    margin-top: 0.8rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
}

/* ─────────── Misy Obfitości ─────────── */
/* Misy sa teraz osobna sekcja, wiec odstep daje jej padding sekcji.
   Zlota kreska u gory byla szwem miedzy dwoma blokami w jednej sekcji
   i po rozdzieleniu nie ma juz czego zszywac. */
.bowls {
    margin-top: 0;
}

/* Tytul misy jest teraz naglowkiem sekcji (h2), nie podtytulem (h3) —
   rozmiar zostaje ten sam, zmienia sie tylko poziom w strukturze. */
#misy .bowls-title {
    margin-top: 0;
}

.bowls-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 3rem;
}

.bowls-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--burgundy);
    margin: 0.3rem 0 1.2rem;
}

.bowls-lead {
    line-height: 1.95;
}

.bowls-lead strong {
    color: var(--burgundy);
    font-weight: 600;
}

.bowls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.bowl-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: var(--burgundy-deep);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 4px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.bowl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(42, 10, 16, 0.28);
}

.bowl-card-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold-pale);
}

.bowl-card-for {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.8;
}

.bowl-card-desc {
    flex: 1;
    margin: 1.2rem 0;
    color: var(--cream);
    opacity: 0.88;
    line-height: 1.85;
    font-size: 0.95rem;
}

.bowl-card-price {
    padding-top: 1rem;
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold-light);
}

.bowls-photo {
    margin-top: 2.5rem;
    aspect-ratio: 21/9;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.25);
}

.bowls-note {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.75;
}

/* ─────────── Gospodarz ─────────── */
.owner {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 3.5rem;
    align-items: center;
}

.owner-photo {
    aspect-ratio: 4/5;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.3);
    box-shadow: 0 18px 50px rgba(42, 10, 16, 0.35);
}

.owner-text p {
    color: var(--cream);
    opacity: 0.9;
    line-height: 1.95;
    margin-bottom: 1.1rem;
}

.owner-text em {
    color: var(--gold-light);
    opacity: 0.85;
}

.owner-name {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--gold-light) !important;
    opacity: 1 !important;
    margin-bottom: 0 !important;
    line-height: 1.2;
}

.owner-role {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.85rem !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold) !important;
    margin-bottom: 1.8rem !important;
}

.owner-phone {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 168, 76, 0.4);
    padding-bottom: 3px;
    transition: color 0.3s, border-color 0.3s;
}

.owner-phone:hover {
    color: var(--gold-light);
    border-color: var(--gold-light);
}

/* ─────────── Responsywność ─────────── */
@media (max-width: 968px) {
    .pub-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .pub-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pojedyncze zdjęcie nie ma się z czym dzielić wierszem. */
    .pub-gallery[data-ile="1"] {
        grid-template-columns: 1fr;
    }

    .owner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .owner-photo {
        max-width: 320px;
        margin: 0 auto;
    }

    .subscription {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .pub-gallery {
        grid-template-columns: 1fr;
    }

    .bowls-photo {
        aspect-ratio: 16/10;
    }

}

/* ─────────── Korekty siatek po dodaniu pozycji ─────────── */

/* 7 dni zamiast 5 — wezsze minimum daje uklad 4+3 zamiast 3+3+1 */
@media (min-width: 969px) {
    .specials-week {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* 7 pozycji w nawigacji — troche ciasniej, zeby zmiescily sie w jednej linii */
@media (max-width: 1150px) and (min-width: 969px) {
    .nav-links {
        gap: 1.2rem;
    }

    .nav-links a {
        font-size: 0.92rem;
        letter-spacing: 1px;
    }
}

/* ─────────── Korekty wyrównania (odstępstwa od makiety) ─────────── */

/* ─────────── Podpis wykonawcy w stopce ─────────── */

/* Bez opacity na rodzicu — przygaszenie idzie przez alfę w kolorze,
   dzieki czemu zloty link zostaje czytelny i nie dziedziczy wyblakniecia. */
.footer-credit {
    margin-top: 0.65rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.82rem;
    letter-spacing: 1px;
    color: rgba(245, 230, 200, 0.4);
}

.footer-credit a {
    color: rgba(201, 168, 76, 0.9);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 168, 76, 0.35);
    padding-bottom: 1px;
    transition: color 0.3s, border-color 0.3s;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
    color: var(--gold-light);
    border-color: var(--gold-light);
}

/* ═══════════════════════════════════════════════════════════════════
   Treść z panelu
   Bloki, do których trafia tekst z edytora wizualnego, dostają teraz
   wiele akapitów zamiast jednego zaszytego w szablonie. Globalny reset
   `* { margin: 0 }` zeruje odstępy, więc miejsca bez własnej reguły
   `p` trzeba obsłużyć tutaj — inaczej dwa akapity wpisane przez klienta
   skleiłyby się w jeden blok tekstu.
   ═══════════════════════════════════════════════════════════════════ */

.section-lead p + p,
.bowls-lead p + p {
    margin-top: 1.2rem;
}

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

/* Komunikat w pustej kategorii menu. */
.menu-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--cream);
    opacity: 0.55;
    font-style: italic;
    padding: 2rem 0;
}

/* Placeholder mapy: podpowiedź jest dłuższa niż nazwa pliku, którą
   to miejsce pokazywało wcześniej, więc potrzebuje oddechu. */
.map-container .sc-photo-empty {
    max-width: 520px;
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════════
   Tło ekranu powitalnego
   Zdjęcie wybrane w panelu wjeżdża przez zmienną --hero-tlo ustawianą
   w atrybucie style. Bez zdjęcia .hero nie dostaje klasy hero--tlo,
   więc obowiązuje gładki gradient z makiety — reguła niżej w ogóle
   się nie włącza i nie ma czego nadpisywać.
   ═══════════════════════════════════════════════════════════════════ */

.hero--tlo .hero-bg {
    background-color: var(--burgundy-deep);
    background-image:
        /* Bordowa zasłona: ciemniej na środku, gdzie stoi tekst,
           i jeszcze ciemniej przy brzegach (winieta). Bez niej złoty
           tytuł ginie w złotych kwiatach haftu. */
        radial-gradient(ellipse at 50% 50%,
            rgba(42, 10, 16, var(--hero-scrim-srodek, 0.68)) 0%,
            rgba(42, 10, 16, var(--hero-scrim-brzeg, 0.87)) 78%),
        var(--hero-tlo, none);
    background-position: center;
    background-repeat: no-repeat;
    /* cover dotyczy obu warstw — gradient i tak wypełnia całość. */
    background-size: cover;
}

/* Haftowane rogi to ozdoba pustego tła. Na tle prawdziwego haftu
   robią kaszę, więc przy zdjęciu je przygaszamy. */
.hero--tlo .hero-corner {
    opacity: 0.06;
}

/* Miejscowa poświata pod samym tekstem.

   Czytelność załatwiamy tutaj, a nie przez mocniejsze przyciemnienie
   całego ekranu — inaczej tapeta, o którą chodziło, zamieniłaby się
   w bordową plamę. Elipsa wygasza się do zera przed krawędziami, więc
   nie widać, gdzie się kończy: przy tekście ciemno, dookoła pełny haft.

   .hero-content ma już z-index: 2, czyli własny kontekst nakładania —
   dlatego z-index: -1 chowa poświatę pod napisami, ale nie pod tłem. */
.hero--tlo .hero-content::before {
    content: "";
    position: absolute;
    inset: -14% -20%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(42, 10, 16, 0.93) 0%,
        rgba(42, 10, 16, 0.80) 42%,
        rgba(42, 10, 16, 0.42) 62%,
        rgba(42, 10, 16, 0) 76%);
}

/* Cień na literach — ostatnia linia obrony w miejscach, gdzie mimo
   poświaty pod napis podejdzie jasny płatek. */
.hero--tlo .hero-title,
.hero--tlo .hero-subtitle,
.hero--tlo .hero-quote {
    text-shadow: 0 2px 16px rgba(42, 10, 16, 0.9), 0 1px 3px rgba(42, 10, 16, 0.7);
}

/* Przycisk stoi poza poświatą, więc dostaje własne tło zamiast
   przezroczystego — na haftzie sama złota ramka gubi kształt. */
.hero--tlo .hero-cta {
    background: rgba(42, 10, 16, 0.55);
    backdrop-filter: blur(2px);
}

@media (max-width: 700px) {
    /* Tapeta jest bardzo szeroka (2,8:1). Na pionowym ekranie cover
       przycina ją do wąskiego paska, więc przesuwamy kadr na lewą
       krawędź, gdzie wzór jest gęstszy i lepiej wypełnia widok. */
    .hero--tlo .hero-bg {
        background-position: 30% center;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Podgląd zdjęcia (lightbox)
   Warstwa powstaje dopiero po pierwszym kliknięciu w kafel galerii,
   więc te reguły przez większość odwiedzin nie mają czego stylować.
   ═══════════════════════════════════════════════════════════════════ */

.sc-lb {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 5, 8, 0.94);
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* KONIECZNE. Atrybut hidden działa przez regułę [hidden]{display:none}
   z arkusza przeglądarki, a ta przegrywa z każdym stylem autora —
   więc .sc-lb{display:flex} unieważniłoby hidden i po zamknięciu
   przezroczysta warstwa dalej łapałaby kliknięcia na całej stronie. */
.sc-lb[hidden] {
    display: none;
}

/* Drugi bezpiecznik na czas zanikania: zanim warstwa zdąży się schować,
   nie może przechwytywać kursora. */
.sc-lb:not(.sc-lb--widoczny) {
    pointer-events: none;
}

.sc-lb--widoczny {
    opacity: 1;
    pointer-events: auto;
}

.sc-lb-scena {
    /* Ramka na zdjęcie zostawia miejsce na strzałki po bokach
       i licznik pod spodem — inaczej przyciski leżałyby na zdjęciu. */
    max-width: min(92vw, 1400px);
    max-height: 84vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-lb-img {
    max-width: 100%;
    max-height: 84vh;
    display: block;
    border-radius: 3px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s ease;
}

.sc-lb--laduje .sc-lb-img {
    opacity: 0.25;
}

.sc-lb-btn {
    position: absolute;
    background: rgba(42, 10, 16, 0.65);
    color: var(--gold-pale);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
    /* Wygodny cel dotyku — 44 px to minimum, poniżej trafia się kciukiem
       obok, zwłaszcza przy krawędzi ekranu. */
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-lb-btn:hover,
.sc-lb-btn:focus-visible {
    background: var(--burgundy);
    color: var(--gold);
    border-color: var(--gold);
}

.sc-lb-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Ikony są SVG, więc centruje je samo flexem — bez dobierania
   przesunięć pod metryki kroju. */
.sc-lb-btn svg {
    display: block;
}

.sc-lb-zamknij {
    top: 1.5rem;
    right: 1.5rem;
}

.sc-lb-prev,
.sc-lb-next {
    top: 50%;
    transform: translateY(-50%);
}

.sc-lb-prev svg,
.sc-lb-next svg {
    width: 28px;
    height: 28px;
}

.sc-lb-prev { left: 1.5rem; }
.sc-lb-next { right: 1.5rem; }

.sc-lb-licznik {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    letter-spacing: 3px;
    color: var(--cream);
    opacity: 0.65;
}

@media (max-width: 768px) {
    /* Na telefonie zdjęcie dostaje całą szerokość, a strzałki schodzą
       na dół, do zasięgu kciuka. Przewijanie machnięciem i tak działa. */
    .sc-lb-scena {
        max-width: 100vw;
    }

    .sc-lb-prev,
    .sc-lb-next {
        top: auto;
        bottom: 1.2rem;
        transform: none;
    }

    .sc-lb-prev { left: 1.2rem; }
    .sc-lb-next { right: 1.2rem; }

    .sc-lb-licznik {
        bottom: 2.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-lb,
    .sc-lb-img,
    .gallery-item img,
    .gallery-item-lupa {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Karta dań: śródtytuły, porcje, wyróżnienia
   Podkategorie pozwalają zmieścić prawie sto pozycji w ośmiu
   zakładkach — bez nich pasek zakładek rozrósłby się do kilkunastu
   pozycji i na telefonie zająłby pół ekranu.
   ═══════════════════════════════════════════════════════════════════ */

.menu-subheading {
    grid-column: 1 / -1;
    margin: 2.5rem 0 1.2rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
}

/* Pierwszy śródtytuł stoi tuż pod zakładkami, więc nie potrzebuje
   odstępu, który oddziela kolejne grupy od siebie. */
.menu-category > .menu-subheading:first-child {
    margin-top: 0;
}

/* Cienka kreska po bokach — ten sam zabieg co przy separatorach sekcji,
   dzięki czemu śródtytuł czyta się jako podział, a nie kolejna pozycja. */
.menu-subheading::before,
.menu-subheading::after {
    content: "";
    display: inline-block;
    width: clamp(1.5rem, 8vw, 5rem);
    height: 1px;
    vertical-align: middle;
    background: rgba(201, 168, 76, 0.4);
    margin: 0 1rem;
}

/* Gramatura i pojemność — informacja pomocnicza, więc nie może
   konkurować z nazwą dania. */
.menu-item-porcja {
    display: inline-block;
    margin-left: 0.5rem;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--gold);
    opacity: 0.75;
    white-space: nowrap;
}

/* Plakietka pozycji wyróżnionych (blok „Magda Gessler poleca”). */
.menu-item-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 2px 8px;
    border: 1px solid rgba(201, 168, 76, 0.55);
    border-radius: 2px;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-light);
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .menu-subheading {
        font-size: 1.25rem;
        letter-spacing: 2px;
        margin: 2rem 0 1rem;
    }

    /* Na wąskim ekranie kreski zjadłyby całą szerokość wiersza. */
    .menu-subheading::before,
    .menu-subheading::after {
        display: none;
    }

    .menu-item-porcja,
    .menu-item-badge {
        margin-left: 0;
        margin-top: 3px;
        display: block;
        width: fit-content;
    }
}

/* Zakładka z daniami wyróżnionymi — wypełniona, nie obrysowana, żeby
   odróżniała się od zwykłych kategorii bez dokładania kolejnego koloru. */
.menu-tab--wyroznione {
    border-color: var(--gold-light);
    background: rgba(201, 168, 76, 0.14);
}

.menu-tab--wyroznione.active {
    background: var(--gold);
}

/* Etykieta tygodnia — mówi gościowi, że jadłospis jest aktualny. */
.specials-tydzien {
    margin: 0 0 1.5rem;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-style: italic;
    letter-spacing: 1px;
    color: var(--burgundy-mid);
}

/* Dwa zestawy w jednej karcie dnia — kreska rozdziela je wyraźniej
   niż sam odstęp, bo oba mają tę samą budowę i łatwo je skleić wzrokiem. */
.special-set + .special-set {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px dashed rgba(201, 168, 76, 0.4);
}

.special-set-label {
    margin-bottom: 0.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--burgundy-light);
}

/* ═══════════════════════════════════════════════════════════════════
   Profile społecznościowe
   Ikona bez podpisu wystarczy — Instagram i Facebook są rozpoznawalne,
   a aria-label niesie nazwę dla czytników ekranu.

   UWAGA na swoistość: w sekcji Kontakt obowiązuje `.contact-block a
   { display: block }` (0,1,1). Sam `.socials-link` (0,1,0) przegrywa
   z tą regułą, flex przestaje działać i ikona ląduje w rogu kółka.
   Dlatego selektory są pisane jako `.socials .socials-link` (0,2,0) —
   wygrywają swoistością, bez sięgania po !important.
   ═══════════════════════════════════════════════════════════════════ */

.socials {
    display: flex;
    gap: 0.8rem;
    margin: 1.1rem 0 0;
}

.socials .socials-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(201, 168, 76, 0.45);
    border-radius: 50%;
    color: var(--gold);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.socials .socials-link:hover,
.socials .socials-link:focus-visible {
    background: var(--gold);
    color: var(--burgundy-deep);
    border-color: var(--gold);
}

.socials .socials-link:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 2px;
}

/* Reszta dziedziczona z .contact-block a — zerujemy, bo dotyczy tekstu. */
.socials .socials-link {
    line-height: 1;
    opacity: 1;
}

.socials .socials-link svg {
    display: block;
}

/* Obszar dowozu — informacja praktyczna, więc trzymamy ją przy
   godzinach zamówień, a nie w osobnym miejscu na stronie. */

/* ═══════════════════════════════════════════════════════════════════
   Obiady dnia — pasek z ceną, godzinami i telefonem
   Trzy osobne bloki jeden pod drugim spychały pierwszą kartę dnia
   poniżej ekranu, a to karty są właściwą treścią tej sekcji.
   ═══════════════════════════════════════════════════════════════════ */

.obiady-pasek {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2.5rem;
    max-width: 940px;
    margin: 0 auto 2.5rem;
    padding: 1.4rem 2rem;
    background: var(--burgundy);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(42, 10, 16, 0.16);
    color: var(--cream);
    text-align: center;
}

/* Cienkie pionowe kreski zamiast trzech osobnych ramek. */
.obiady-godziny,
.obiady-kontakt {
    border-left: 1px solid rgba(201, 168, 76, 0.28);
    padding-left: 2.5rem;
}

.obiady-label {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.85;
    margin-bottom: 0.35rem;
}

.obiady-kwota {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--gold-pale);
}

.obiady-uwaga {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.5;
    opacity: 0.72;
}

.obiady-godziny ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.94rem;
    line-height: 1.75;
}

.obiady-tel {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.obiady-tel a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gold-pale);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s;
}

.obiady-tel a:hover,
.obiady-tel a:focus-visible {
    color: var(--white);
}

@media (max-width: 860px) {
    /* Trzy kolumny nie mieszczą się bez łamania numerów telefonu,
       więc schodzą pod siebie, a kreski zmieniają orientację. */
    .obiady-pasek {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        padding: 1.4rem 1.5rem;
    }

    .obiady-godziny,
    .obiady-kontakt {
        border-left: 0;
        border-top: 1px solid rgba(201, 168, 76, 0.28);
        padding-left: 0;
        padding-top: 1.2rem;
    }

    .obiady-tel {
        flex-direction: row;
        justify-content: center;
        gap: 1.2rem;
    }
}

/* Pub bez bloku godzin — tekst przejmuje całą szerokość.
   Bez tego siatka .pub-content (1.4fr 1fr) dalej rezerwuje drugą kolumnę
   na godziny, których szablon nie wyrenderował, i obok tekstu zieje pustka.
   Klasę dokłada PHP, bo wie, ile bloków faktycznie powstało — selektor
   :has() byłby krótszy, ale w starszych przeglądarkach nie zadziała
   i część gości dalej widziałaby dziurę. */
.pub-content--bez-godzin {
    grid-template-columns: 1fr;
}

/* Pełna szerokość sekcji to za długi wiersz do czytania — ograniczamy
   miarę wiersza, zamiast rozciągać akapity na 1100 px. */
.pub-content--bez-godzin .pub-text {
    max-width: 820px;
}

/* ═══════════════════════════════════════════════════════════════════
   Pasek o cookies i mapa na żądanie
   ═══════════════════════════════════════════════════════════════════ */

.sc-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: var(--burgundy-deep);
    border-top: 1px solid rgba(201, 168, 76, 0.35);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}

/* Atrybut hidden dziala przez regule przegladarki [hidden]{display:none},
   ktora przegrywa z kazdym stylem autora. Tu pasek nie ma własnego
   display, wiec dziala — ale zapisujemy to wprost, bo dodanie kiedys
   display:flex po cichu unieruchomiloby chowanie paska. */
.sc-cookies[hidden] {
    display: none;
}

.sc-cookies-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.sc-cookies-tekst {
    margin: 0;
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--cream);
    opacity: 0.9;
}

.sc-cookies-tekst a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sc-cookies-ok {
    flex-shrink: 0;
    padding: 0.7rem 2rem;
    background: var(--gold);
    color: var(--burgundy-deep);
    border: 1px solid var(--gold);
    border-radius: 2px;
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.3s, color 0.3s;
}

.sc-cookies-ok:hover,
.sc-cookies-ok:focus-visible {
    background: var(--gold-light);
}

@media (max-width: 700px) {
    .sc-cookies-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
        padding: 1rem 1.5rem;
    }

    .sc-cookies-tekst {
        text-align: center;
    }
}

/* Link do polityki w stopce. */
.footer-prawne {
    margin-top: 0.9rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.82rem;
    letter-spacing: 1px;
}

.footer-prawne a {
    color: rgba(245, 230, 200, 0.55);
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 230, 200, 0.25);
    transition: color 0.3s, border-color 0.3s;
}

.footer-prawne a:hover,
.footer-prawne a:focus-visible {
    color: var(--gold-light);
    border-color: var(--gold-light);
}

/* ═══════════════════════════════════════════════════════════════════
   Strony treściowe (polityka prywatności itp.)
   Motyw nie miał wcześniej stylów dla długiego tekstu z nagłówkami
   i listami — jednostronicowa makieta ich nie potrzebowała.
   ═══════════════════════════════════════════════════════════════════ */

.strona {
    /* Nawigacja jest position: fixed, więc treść musi zacząć się niżej. */
    padding: 8rem 2rem 5rem;
}

.strona-inner {
    max-width: 780px;
    margin: 0 auto;
}

.strona-naglowek {
    text-align: center;
    margin-bottom: 3rem;
}

.strona-tytul {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--burgundy);
    margin: 0 0 0.5rem;
}

.strona-tresc {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-body);
}

.strona-tresc h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--burgundy);
    margin: 2.5rem 0 0.8rem;
}

.strona-tresc h2:first-child {
    margin-top: 0;
}

.strona-tresc p {
    margin-bottom: 1.1rem;
}

.strona-tresc ul,
.strona-tresc ol {
    margin: 0 0 1.4rem 1.3rem;
}

.strona-tresc li {
    margin-bottom: 0.6rem;
}

.strona-tresc strong {
    color: var(--burgundy);
}

.strona-tresc a {
    color: var(--burgundy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.strona-powrot {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(201, 168, 76, 0.3);
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 1px;
}

.strona-powrot a {
    color: var(--burgundy);
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 14, 26, 0.3);
    transition: color 0.3s, border-color 0.3s;
}

.strona-powrot a:hover,
.strona-powrot a:focus-visible {
    color: var(--burgundy-light);
    border-color: var(--burgundy-light);
}

/* Pasek nawigacji poza stroną główną.
   Klasa .scrolled daje tło, ale main.js zdejmuje ją przy przewinięciu
   w górę — a na podstronie tło ma zostać zawsze, bo pod spodem nie ma
   ciemnego hero, tylko kremowe tło treści. */
/* Selektor pisany jako nav.navbar--staly (0,1,1), zeby zrownac swoistosc
   z nav.scrolled z main.css. Ten arkusz laduje sie pozniej, wiec wygrywa
   uczciwie — bez !important, ktore maskuje konflikt zamiast go rozwiazac. */
nav.navbar--staly {
    background: rgba(42, 10, 16, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(42, 10, 16, 0.3);
}

/* ─────────── Nieistniejący adres ─────────── */

.strona-404-kod {
    margin: 0 0 0.3rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--gold);
    opacity: 0.55;
}

.strona-404-linki {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.8rem;
}

.strona-404-linki a {
    display: block;
    padding: 0.9rem 1.2rem;
    text-align: center;
    background: var(--white);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 3px;
    color: var(--burgundy);
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.strona-404-linki a:hover,
.strona-404-linki a:focus-visible {
    background: var(--burgundy);
    color: var(--gold);
    border-color: var(--burgundy);
}

.strona-404-tel {
    margin-top: 1.8rem;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
}

.strona-404-tel a {
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--burgundy);
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 14, 26, 0.35);
}