/*
 * Restauracja (z rezerwacją stolika), Imprezy okolicznościowe, O nas, Kontakt i góra stron pokoi. Ładuje się tylko tam, razem z home.css,
 * z którego bierze kolory, nagłówki sekcji, blok zdjęcie + tekst i zielony pas rezerwacji.
 */


/* ---------- Góra strony (pod przezroczystym nagłówkiem) ---------- */

.gh-page-hero {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    min-height: clamp(460px, 74svh, 780px);
    padding: calc(var(--gh-header-h) + 3rem) 0 clamp(3rem, 6vh, 4.5rem);
    color: #fff;
}

.gh-page-hero--short {
    min-height: clamp(380px, 56svh, 600px);
}

.gh-page-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background-color: #1c2414;
}

.gh-page-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

/* Przyciemnienie od dołu, żeby tytuł i przyciski były czytelne na każdym zdjęciu */
.gh-page-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 18, 8, .3) 0%, rgba(12, 18, 8, .25) 35%, rgba(12, 18, 8, .8) 100%);
}

.gh-page-hero__title {
    margin: 0;
    font-family: var(--gh-serif);
    font-size: clamp(2.75rem, 1.4rem + 5.5vw, 5.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

/* Składany telefon: krótsze tytuły wersalikami (RESTAURACJA, POKÓJ TRZYOSOBOWY) też muszą się zmieścić */
@media (max-width: 359.98px) {
    .gh-page-hero__title:not(.gh-page-hero__title--long) {
        font-size: 2.1rem;
    }
}

.gh-page .gh-page-hero__media::after {
    background: linear-gradient(180deg, rgba(12, 18, 8, .3) 0%, rgba(12, 18, 8, .5) 45%, rgba(12, 18, 8, .84) 100%);
}

/* Kontakt ma krótszą górę strony */
.gh-page--kontakt .gh-page-hero {
    min-height: clamp(300px, 42svh, 440px);
}

/* Tytuły podstron w nowym wyglądzie bez wersalików (strony pokoi bez .gh-page zostają jak były) */
.gh-page .gh-page-hero__title {
    letter-spacing: 0;
    text-transform: none;
}

.gh-page-hero__title--long {
    max-width: 22ch;
    font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
}

.gh-page-hero__lead {
    max-width: 38rem;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, .94);
    font-size: clamp(1.02rem, .92rem + .45vw, 1.3rem);
    font-weight: 300;
    line-height: 1.5;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

.gh-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.gh-page-hero__actions:empty {
    display: none;
}

/* ---------- Siatka zdjęć ---------- */

/*
 * Rzędy wyrównane do obu krawędzi: każde zdjęcie ma szerokość zależną od swoich proporcji (--r),
 * więc kadry poziome i pionowe układają się bez dziur.
 */
.gh-photos {
    --row: 200px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gh-heading + .gh-photos {
    margin-top: 2.5rem;
}

.gh-photo {
    position: relative;
    display: block;
    flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * var(--row));
    height: var(--row);
    overflow: hidden;
    border-radius: var(--gh-radius-sm);
    background-color: var(--gh-mist);
}

.gh-photo[hidden] {
    display: none;
}

.gh-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

.gh-photo__zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92);
    color: var(--gh-deep);
    font-size: 1.1rem;
    opacity: 0;
    translate: 0 6px;
    transition: opacity .25s ease, translate .25s ease;
}


.gh-photo:hover .gh-photo__zoom,
.gh-photo:focus-visible .gh-photo__zoom {
    opacity: 1;
    translate: 0 0;
}

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

/* Najpierw 6 zdjęć, reszta po kliknięciu (klasę dokłada skrypt, więc bez skryptu widać wszystkie) */
.gh-photos.is-collapsed .gh-photo:nth-child(n + 7) {
    display: none;
}

.gh-photos__more {
    margin-top: 2.25rem;
    text-align: center;
}

.gh-photos__more .gh-btn span {
    font-weight: 400;
    opacity: .75;
}

/* Ostatni rząd: prawie pełny wyrównuje się do krawędzi, krótki zostaje przy lewej i nie rozciąga zdjęć */
@media (min-width: 576px) {
    .gh-photos::after {
        content: '';
        flex: 6 1 calc(var(--row) * 1.2);
    }
}

@media (min-width: 768px) {
    .gh-photos {
        --row: 230px;
        gap: 12px;
    }
}

@media (min-width: 1200px) {
    .gh-photos {
        --row: 290px;
    }
}

/* Telefon: zawsze dwa zdjęcia w rzędzie */
@media (max-width: 575.98px) {
    .gh-photos {
        --row: 150px;
        gap: 8px;
    }

    .gh-photo {
        flex: 1 1 40%;
    }

    .gh-photo__zoom {
        display: none;
    }
}

/* Przycisk „Zobacz zdjęcia” przewija do zdjęć tuż pod przyklejonym nagłówkiem */
.gh-page-photos {
    scroll-margin-top: calc(var(--gh-header-h) + 1.5rem);
}

/* ---------- Powiększenie zdjęcia ---------- */

.gh-lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: rgba(10, 15, 7, .96);
    color: #fff;
    overscroll-behavior: contain;
}

.gh-lightbox::backdrop {
    background-color: rgba(10, 15, 7, .96);
}

.gh-lightbox[open] {
    display: grid;
    place-items: center;
}

html:has(.gh-lightbox[open]) {
    overflow: hidden;
}

.gh-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 64px 72px;
}

.gh-lightbox__img {
    display: block;
    max-width: min(100%, 1400px);
    max-height: calc(100svh - 170px);
    width: auto;
    height: auto;
    border-radius: var(--gh-radius-sm);
    object-fit: contain;
}

.gh-lightbox__caption {
    max-width: 48rem;
    color: rgba(255, 255, 255, .85);
    font-size: .92rem;
    text-align: center;
}

.gh-lightbox__caption:empty {
    display: none;
}

.gh-lightbox__count {
    position: absolute;
    top: 22px;
    left: 24px;
    color: rgba(255, 255, 255, .8);
    font-size: .9rem;
}

.gh-lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color .2s ease;
}

.gh-lightbox__btn:hover {
    background-color: rgba(255, 255, 255, .25);
}

.gh-lightbox__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.gh-lightbox__close {
    top: 12px;
    right: 14px;
}

.gh-lightbox__prev,
.gh-lightbox__next {
    top: 50%;
    translate: 0 -50%;
}

.gh-lightbox__prev {
    left: 14px;
}

.gh-lightbox__next {
    right: 14px;
}

.gh-lightbox__prev[hidden],
.gh-lightbox__next[hidden] {
    display: none;
}

@media (max-width: 767.98px) {
    .gh-lightbox__figure {
        padding: 64px 12px 84px;
    }

    .gh-lightbox__img {
        max-height: calc(100svh - 190px);
    }

    /* Na telefonie strzałki na dole, żeby nie zasłaniały zdjęcia */
    .gh-lightbox__prev,
    .gh-lightbox__next {
        top: auto;
        bottom: 18px;
        translate: none;
    }

    .gh-lightbox__prev {
        left: calc(50% - 60px);
    }

    .gh-lightbox__next {
        right: calc(50% - 60px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gh-photo img,
    .gh-photo__zoom {
        transition: none;
    }
}

/* ---------- Okruszki w górze strony ---------- */

.gh-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.gh-crumbs a {
    color: #fff;
    text-decoration: none;
}

.gh-crumbs a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .25em;
}

.gh-crumbs ion-icon {
    width: .8rem;
    height: .8rem;
    opacity: .7;
}

/* Strony pokoi: odstęp treści od zdjęcia na górze */
.gh-page-hero + .container-fluid.page {
    padding-top: 3rem !important;
}

/* ---------- Restauracja: rezerwacja stolika ---------- */

.gh-table {
    padding-block: var(--gh-space-section);
    background-color: var(--gh-soft);
    scroll-margin-top: calc(var(--gh-header-h) + 1rem);
}

.gh-table__grid {
    display: grid;
    align-items: start;
    gap: 2.25rem;
}

.gh-table__intro .gh-heading {
    margin-bottom: .8rem;
}

.gh-table__lead {
    max-width: 30rem;
    margin: 0;
    color: var(--gh-text);
    font-size: 1.02rem;
    line-height: 1.65;
}

.gh-table__call {
    margin: 1.25rem 0 0;
    color: var(--gh-text);
    font-size: 1rem;
}

.gh-table__photo {
    overflow: hidden;
    margin-top: 2rem;
    border-radius: var(--gh-radius);
    aspect-ratio: 4 / 3;
    background-color: var(--gh-mist);
}

.gh-table__photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .gh-table__photo {
        display: none;
    }
}

.gh-table__card {
    padding: clamp(1.35rem, 1rem + 1.6vw, 2.5rem);
    border-radius: var(--gh-radius);
    background-color: #fff;
}

@media (min-width: 992px) {
    .gh-table__grid {
        grid-template-columns: 1fr 1.35fr;
        gap: 4rem;
    }

    .gh-table__intro {
        position: relative;
        padding-top: 1rem;
    }
}

/* Formularz: etykiety nad polami, pola co najmniej 48 px wysokości i 16 px tekstu (iPhone nie przybliża strony) */
.gh-form {
    display: grid;
    gap: 1.1rem;
}

.gh-form__row {
    display: grid;
    gap: 1.1rem;
}

/* Telefon: dzień i godzina obok siebie, liczba osób pod nimi */
.gh-form__row--3 {
    grid-template-columns: 1fr 1fr;
}

.gh-form__row--3 > :last-child {
    grid-column: 1 / -1;
}

@media (min-width: 576px) {
    .gh-form__row--2 {
        grid-template-columns: 1fr 1fr;
    }

    .gh-form__row--3 {
        grid-template-columns: 1.2fr 1fr 1fr;
    }

    .gh-form__row--3 > :last-child {
        grid-column: auto;
    }
}

.gh-form__field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.gh-form__field label {
    color: var(--gh-deep);
    font-size: .88rem;
    font-weight: 600;
}

.gh-form__optional {
    color: var(--gh-muted);
    font-weight: 400;
}

.gh-form input,
.gh-form select,
.gh-form textarea {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: .7rem .9rem;
    border: 1.5px solid var(--gh-input-border);
    border-radius: var(--gh-radius-sm);
    background-color: #fff;
    color: var(--gh-ink);
    font: inherit;
    font-size: 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.gh-form select {
    padding-right: 2.5rem;
    background-image: var(--gh-icon-chevron);
    background-position: right .9rem center;
    background-repeat: no-repeat;
    background-size: .85rem;
    -webkit-appearance: none;
    appearance: none;
}

.gh-form textarea {
    min-height: 96px;
    resize: vertical;
}

.gh-form input::placeholder,
.gh-form textarea::placeholder {
    color: var(--gh-muted);
    opacity: 1;
}

.gh-form :is(input, select, textarea):hover {
    border-color: #9fae8d;
}

.gh-form :is(input, select, textarea):focus-visible {
    border-color: var(--gh-deep);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(44, 74, 18, .18);
}

/* Błąd dopiero po wyjściu z pola albo próbie wysłania */
.gh-form__error {
    display: none;
    color: #b3261e;
    font-size: .85rem;
}

.gh-form :is(input, select, textarea):user-invalid {
    border-color: #b3261e;
    background-color: #fdf3f2;
}

.gh-form :is(input, select, textarea):user-invalid + .gh-form__error {
    display: block;
}

.gh-form__note {
    margin: 0;
    color: var(--gh-muted);
    font-size: .82rem;
    line-height: 1.55;
}

.gh-form__note a {
    color: var(--gh-deep);
}

.gh-form__submit {
    justify-self: start;
    min-height: 52px;
    padding-inline: 1.9rem;
}

.gh-form__submit[disabled] {
    opacity: .7;
    cursor: progress;
}

@media (max-width: 575.98px) {
    .gh-form__submit {
        justify-self: stretch;
    }
}

/* Pole-pułapka dla robotów: poza ekranem, ludzie go nie widzą */
.gh-form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.gh-notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.15rem;
    border: 1px solid;
    border-radius: var(--gh-radius-sm);
    font-size: .95rem;
    line-height: 1.55;
}

.gh-notice:focus {
    outline: 0;
}

.gh-notice ion-icon {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
}

.gh-notice strong {
    display: block;
}

.gh-notice--ok {
    border-color: #b9d79a;
    background-color: #f1f8e9;
    color: #24400c;
}

.gh-notice--ok ion-icon {
    color: var(--gh-accent);
}

.gh-notice--error {
    border-color: #f0b8b3;
    background-color: #fdf3f2;
    color: #7a1d16;
}

.gh-notice--error a {
    color: inherit;
    font-weight: 600;
}


/* ---------- Wspólne układy podstron ---------- */

/* Wstęp po lewej (5 z 12), treść po prawej (7 z 12), górne krawędzie na jednej linii */
.gh-split {
    display: grid;
    align-items: start;
    gap: 2rem;
}

.gh-split > * {
    min-width: 0;
}

.gh-split__intro .gh-heading {
    margin-bottom: 1rem;
}

@media (min-width: 992px) {
    .gh-split {
        grid-template-columns: 5fr 7fr;
        gap: 4.5rem;
    }

    .gh-split--media {
        grid-template-columns: 1fr 1fr;
    }

    .gh-split--reverse > :first-child {
        order: 2;
    }
}

.gh-split__photo {
    overflow: hidden;
    border-radius: var(--gh-radius);
    aspect-ratio: 4 / 3;
    background-color: var(--gh-mist);
}

.gh-split__photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

/* Jasny pas sekcji (jak kiosk na stronie głównej) */
.gh-band {
    padding-block: var(--gh-space-section);
    background-color: var(--gh-soft);
}

/* Lista w wierszach z linią: nazwa krojem z logo, pod nią zdanie */
.gh-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--gh-line);
}

.gh-rows__item {
    padding: 1.4rem 0;
    border-top: 1px solid var(--gh-line);
}

.gh-rows__title {
    margin: 0;
    color: var(--gh-deep);
    font-family: var(--gh-serif);
    font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem);
    font-weight: 500;
    line-height: 1.2;
}

.gh-rows__text {
    max-width: 52ch;
    margin: .35rem 0 0;
    color: var(--gh-text);
    font-size: 1rem;
    line-height: 1.6;
}

.gh-rows--compact {
    margin-top: 2rem;
}

.gh-rows--compact .gh-rows__item {
    padding: 1rem 0;
}

.gh-rows--compact .gh-rows__title {
    font-size: 1.2rem;
}

/* Lista z pogrubionym początkiem zdania zamiast ptaszków */
.gh-plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-plain-list li {
    max-width: 56ch;
    margin: 0 0 1rem;
    color: var(--gh-text);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.gh-plain-list strong {
    color: var(--gh-deep);
    font-weight: 600;
}

/* ---------- Imprezy: zapytanie (kontakt po lewej, zielona ramka po prawej) ---------- */

.gh-ask {
    display: grid;
    gap: 2.5rem 4.5rem;
    align-items: start;
}

@media (min-width: 992px) {
    .gh-ask {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.gh-ask .gh-lead {
    max-width: 36rem;
}

.gh-ask__who {
    margin: 1rem 0 0;
    color: var(--gh-muted);
    font-size: .9375rem;
}

.gh-ask__panel {
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    border-radius: var(--gh-radius);
    background: var(--gh-deep);
    color: #fff;
}

.gh-ask__title {
    margin: 0;
    color: #fff;
    font-family: var(--gh-serif);
    font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
}

.gh-ask__panel .gh-checks li {
    color: rgba(255, 255, 255, .92);
}

.gh-ask__panel .gh-checks ion-icon {
    color: #b9d98a;
}

.gh-ask__panel .gh-actions {
    margin-top: 1.75rem;
}

.gh-ask__note {
    margin: .85rem 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: .875rem;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .gh-ask__panel .gh-btn {
        width: 100%;
    }
}

/* ---------- Kontakt: dane w wierszach obok mapy ---------- */

.gh-contact-list {
    margin: 1.5rem 0 0;
    border-bottom: 1px solid var(--gh-line);
}

.gh-contact-list__row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.15rem 0;
    border-top: 1px solid var(--gh-line);
}

.gh-contact-list dt {
    padding-top: .55rem;
    color: var(--gh-muted);
    font-size: .875rem;
    font-weight: 600;
}

.gh-contact-list dd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
}

.gh-contact-list__big {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--gh-deep);
    font-family: var(--gh-serif);
    font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.gh-contact-list__big:hover {
    color: var(--gh-deep);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.gh-contact-list__address {
    margin: .45rem 0 .25rem;
    color: var(--gh-ink);
    font-size: 1.0625rem;
    font-style: normal;
    line-height: 1.5;
}

.gh-contact-list__note {
    color: var(--gh-muted);
    font-size: .9375rem;
}

.gh-contact__intro {
    margin-bottom: 1rem;
}

.gh-contact__extra {
    margin: 1.25rem 0 0;
    color: var(--gh-text);
    font-size: 1rem;
}

.gh-contact__map {
    overflow: hidden;
    min-height: 26rem;
    border-radius: var(--gh-radius);
    background-color: var(--gh-mist);
}

.gh-contact__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 26rem;
    border: 0;
}

@media (min-width: 992px) {
    .gh-split--contact {
        align-items: stretch;
    }
}

@media (max-width: 575.98px) {
    .gh-contact-list__row {
        grid-template-columns: 5rem minmax(0, 1fr);
    }

    .gh-contact__map,
    .gh-contact__map iframe {
        min-height: 20rem;
    }
}

/* ---------- O nas ---------- */

.gh-about__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem;
    margin: 1.25rem 0 0;
}

.gh-city__address {
    margin: 1.25rem 0 0;
    color: var(--gh-ink);
    font-size: 1.0625rem;
    font-weight: 600;
}

/* ---------- Restauracja: cennik jako cel przycisków ze strony głównej (#sniadania, #obiady, #bar) ---------- */

.gh-info__item[id] {
    scroll-margin-top: calc(var(--gh-header-h) + 1.5rem);
}

.gh-info__item:target .gh-info__title {
    text-decoration: underline 2px var(--gh-accent);
    text-underline-offset: .25em;
}