:root {

    --bg: #0b0b0c;

    --panel: #141416;

    --panel-soft: #1b1b1f;

    --text: #f4f1ea;

    --muted: #aaa4a0;

    --line: rgba(255,255,255,.12);

    --accent: #e7d6bd;

    --radius: 24px;

    --shell: 1480px;

}



* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {

    margin: 0;

    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    background:

        radial-gradient(circle at top left, rgba(77, 66, 55, .8) 0, rgba(11,11,12,0) 40rem),

        linear-gradient(180deg, #0b0b0c 0%, #111113 48%, #0b0b0c 100%);

    color: var(--text);

}

a { color: inherit; }

code { color: var(--accent); }

.page-shell {

    width: min(var(--shell), calc(100% - clamp(36px, 7vw, 112px)));

    margin-inline: auto;

}

.site-header {

    position: sticky;

    top: 0;

    z-index: 10;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-block: 18px;

    backdrop-filter: blur(18px);

    background: rgba(11,11,12,.72);

    border-bottom: 1px solid var(--line);

}

.site-header::before {

    content: "";

    position: fixed;

    inset: 0 0 auto 0;

    height: 100%;

    z-index: -1;

    background: rgba(11,11,12,.72);

    border-bottom: 1px solid var(--line);

}

.brand {

    font-weight: 800;

    letter-spacing: -.04em;

    text-decoration: none;

    font-size: 1.3rem;

}

.nav { display: flex; gap: 22px; color: var(--muted); font-size: .95rem; }

.nav a { text-decoration: none; }

.nav a:hover { color: var(--text); }

.hero {

    min-height: 76vh;

    display: grid;

    align-items: end;

    padding-block: clamp(72px, 12vw, 150px) clamp(58px, 8vw, 110px);

}

.hero__content { max-width: 1080px; }

.eyebrow {

    margin: 0 0 14px;

    text-transform: uppercase;

    letter-spacing: .16em;

    color: var(--accent);

    font-size: .78rem;

    font-weight: 700;

}

h1, h2, h3, p { margin-top: 0; }

h1 {

    font-size: clamp(3.15rem, 8.4vw, 8.3rem);

    line-height: .9;

    letter-spacing: -.08em;

    margin-bottom: 26px;

    max-width: 1200px;

}

h2 {

    font-size: clamp(2rem, 4vw, 4rem);

    line-height: .98;

    letter-spacing: -.06em;

    margin-bottom: 18px;

}

.lead, .section__head p, .text-block p {

    color: var(--muted);

    font-size: clamp(1.05rem, 1.45vw, 1.28rem);

    line-height: 1.55;

    max-width: 800px;

}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--line);

    border-radius: 999px;

    padding: 13px 20px;

    text-decoration: none;

    font-weight: 700;

    cursor: pointer;

    background: transparent;

    color: var(--text);

}

.button--primary { background: var(--text); color: var(--bg); border-color: var(--text); }

.button--ghost:hover, .filter:hover { border-color: var(--accent); }

.section { padding-block: 64px; }

.section__head { margin-bottom: 28px; }

.section__head--wide { max-width: 1040px; }

.filters { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }

.filter {

    border: 1px solid var(--line);

    color: var(--text);

    background: rgba(255,255,255,.04);

    border-radius: 999px;

    padding: 10px 15px;

    cursor: pointer;

}

.filter.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.masonry {

    columns: 1;

    column-gap: 16px;

}

.card {

    position: relative;

    display: inline-block;

    width: 100%;

    margin: 0 0 16px;

    padding: 0;

    border: 0;

    background: var(--panel);

    border-radius: var(--radius);

    overflow: hidden;

    cursor: zoom-in;

    break-inside: avoid;

    vertical-align: top;

}

.card img, .card video {

    display: block;

    width: 100%;

    height: auto;

    transition: transform .35s ease, opacity .35s ease;

}

.card--video .video-preview {

    min-height: 320px;

    aspect-ratio: 9 / 16;

    object-fit: cover;

    background: linear-gradient(145deg, #18181b, #25211d);

}

.card--video .video-placeholder--fallback { display: none; }

.card--video:not(.has-preview) .video-preview + .video-placeholder--fallback { display: grid; }

.card--video:not(.has-preview) .video-preview { display: none; }

.card:hover img, .card:hover video { transform: scale(1.025); opacity: .86; }

.video-placeholder {

    display: grid;

    place-items: center;

    min-height: 420px;

    color: var(--muted);

    background: linear-gradient(145deg, #18181b, #25211d);

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

}

.play {

    position: absolute;

    inset: 50% auto auto 50%;

    transform: translate(-50%, -50%);

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: rgba(0,0,0,.55);

    border: 1px solid rgba(255,255,255,.25);

    padding-left: 3px;

}

.section--split {

    display: grid;

    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);

    gap: clamp(28px, 5vw, 72px);

    align-items: start;

}

.text-block {

    background: rgba(255,255,255,.035);

    border: 1px solid var(--line);

    border-radius: var(--radius);

    padding: clamp(22px, 3vw, 34px);

}

.text-block p:last-child { margin-bottom: 0; }

.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.services article, .form, .empty-state, .steps article {

    background: rgba(255,255,255,.045);

    border: 1px solid var(--line);

    border-radius: var(--radius);

    padding: 24px;

}

.services p, .steps p { color: var(--muted); margin-bottom: 0; line-height: 1.5; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.steps span { display: block; color: var(--accent); font-weight: 800; margin-bottom: 32px; }

.form { max-width: 1040px; }

.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

label { display: grid; gap: 7px; color: var(--muted); margin-bottom: 16px; }

input, select, textarea {

    width: 100%;

    border: 1px solid var(--line);

    background: var(--panel-soft);

    color: var(--text);

    border-radius: 16px;

    padding: 13px 14px;

    font: inherit;

}

textarea { resize: vertical; }

.honeypot { position: absolute; left: -9999px; }

.notice { max-width: 1040px; margin-bottom: 16px; padding: 14px 18px; border-radius: 16px; }

.notice--success { background: rgba(119, 198, 143, .16); border: 1px solid rgba(119, 198, 143, .4); }

.notice--error { background: rgba(231, 89, 89, .16); border: 1px solid rgba(231, 89, 89, .4); }

.lightbox {

    position: fixed;

    inset: 0;

    z-index: 30;

    display: none;

    place-items: center;

    padding: 24px;

    background: rgba(0,0,0,.88);

}

.lightbox.is-open { display: grid; }

.lightbox__media img, .lightbox__media video {

    max-width: min(1200px, 94vw);

    max-height: 86vh;

    border-radius: 20px;

}

.lightbox__close {

    position: absolute;

    top: 18px;

    right: 22px;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    border: 1px solid var(--line);

    background: rgba(255,255,255,.08);

    color: var(--text);

    font-size: 30px;

    cursor: pointer;

}

.footer {

    display: flex;

    justify-content: space-between;

    gap: 16px;

    padding-block: 28px;

    color: var(--muted);

    border-top: 1px solid var(--line);

}

@media (min-width: 640px) { .masonry { columns: 2; } }

@media (min-width: 1040px) { .masonry { columns: 3; } }

@media (min-width: 1500px) { .masonry { columns: 4; } }

@media (max-width: 980px) {

    .section--split, .steps, .services { grid-template-columns: 1fr; }

}

@media (max-width: 760px) {

    .page-shell { width: min(100% - 32px, var(--shell)); }

    .nav { display: none; }

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

    .hero { min-height: 70vh; }

    .section { padding-block: 46px; }

    .footer { flex-direction: column; }

}



.brand span { color: var(--accent); }

.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

.hero__chips span { border: 1px solid var(--line); background: rgba(255,255,255,.045); color: var(--muted); border-radius: 999px; padding: 8px 12px; font-size: .9rem; }

.booking__panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr); gap: clamp(20px, 4vw, 44px); align-items: stretch; background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); padding: clamp(22px, 4vw, 42px); overflow: hidden; }

.booking__panel p { color: var(--muted); line-height: 1.55; }

.booking__embed { min-height: 520px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); position: relative; }

.booking__embed iframe { width: 100%; height: 520px; border: 0; display: block; background: #fff; }

.booking__embed p { position: absolute; left: 14px; right: 14px; bottom: 12px; margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.62); color: rgba(255,255,255,.82); font-size: .86rem; }

.booking__card { display: grid; align-content: center; border-radius: var(--radius); padding: 28px; border: 1px dashed var(--line); color: var(--muted); }

.like-pill { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.22); color: #fff; opacity: .9; }

.lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 2.8rem; line-height: 1; cursor: pointer; z-index: 31; }

.lightbox__nav--prev { left: clamp(12px, 3vw, 32px); }

.lightbox__nav--next { right: clamp(12px, 3vw, 32px); }

.lightbox__like { position: fixed; left: 50%; bottom: clamp(18px, 4vw, 36px); transform: translateX(-50%); z-index: 32; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 999px; background: rgba(0,0,0,.58); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(14px); }

.like-button { border: 0; border-radius: 999px; padding: 10px 16px; background: var(--text); color: var(--bg); font-weight: 800; cursor: pointer; }

.like-button.is-liked { transform: scale(1.04); }

.like-count { min-width: 34px; text-align: center; font-weight: 800; color: #fff; }

.top-link { margin-top: 18px; color: var(--accent); font-weight: 800; }

.top-card { position: relative; display: inline-block; width: 100%; margin: 0 0 16px; break-inside: avoid; border-radius: var(--radius); overflow: hidden; background: var(--panel); }

.top-card img { display: block; width: 100%; height: auto; }

.top-card figcaption { position: absolute; right: 12px; bottom: 12px; padding: 9px 13px; border-radius: 999px; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.2); font-weight: 800; }

.footer p:last-child { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 900px) {

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

    .booking__embed, .booking__embed iframe { min-height: 520px; height: 520px; }

    .lightbox__nav { width: 42px; height: 54px; font-size: 2.2rem; }

}

@media (max-width: 620px) {

    .booking__embed, .booking__embed iframe { min-height: 460px; height: 460px; }

    .lightbox__nav { top: auto; bottom: 86px; transform: none; }

    .lightbox__nav--prev { left: 18px; }

    .lightbox__nav--next { right: 18px; }

}



/* --- 2026-07 mobile polish / NaRovinu merge --- */

html { scroll-padding-top: 86px; }

body { overflow-x: hidden; }

.site-header {

    padding-block: 12px;

    min-height: 62px;

    padding-top: max(12px, env(safe-area-inset-top));

}

.nav-toggle {

    display: none;

    width: 42px;

    height: 42px;

    border: 1px solid var(--line);

    border-radius: 999px;

    background: rgba(255,255,255,.06);

    color: var(--text);

    align-items: center;

    justify-content: center;

    gap: 4px;

    flex-direction: column;

    padding: 0;

    cursor: pointer;

}

.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 99px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }

.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }

.nav-toggle.is-open span:nth-child(2) { opacity: 0; }

.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hero {

    min-height: auto;

    grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);

    gap: clamp(26px, 5vw, 72px);

    align-items: center;

    padding-block: clamp(36px, 7vw, 96px) clamp(38px, 6vw, 80px);

}

.hero__content { max-width: 980px; }

h1 { font-size: clamp(2.65rem, 7.2vw, 7.4rem); }

.hero__photos {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 160px 160px;

    gap: 12px;

    min-width: 0;

}

.hero__photo { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 70px rgba(0,0,0,.34); }

.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__photo--1 { grid-row: span 2; }

.hero__photo--2 { transform: translateY(16px); }

.hero__photo--3 { transform: translateY(-6px); }

.booking__panel { grid-template-columns: minmax(280px,.55fr) minmax(0,1.45fr); }

.booking__intro { align-self: start; position: sticky; top: 86px; }

.booking-widget {

    background: rgba(11,11,12,.76);

    border: 1px solid var(--line);

    border-radius: var(--radius);

    padding: clamp(16px, 2.4vw, 26px);

    min-width: 0;

}

.booking-widget__loading, .booking-widget__message { color: var(--muted); line-height: 1.55; }

.booking-widget__message { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.04); margin-bottom: 14px; }

.booking-widget__message.is-success { border-color: rgba(119,198,143,.45); background: rgba(119,198,143,.13); color: var(--text); }

.booking-widget__message.is-error { border-color: rgba(231,89,89,.45); background: rgba(231,89,89,.13); color: var(--text); }

.booking-widget__grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 18px; }

.booking-calendar { min-width: 0; }

.booking-calendar__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

.booking-calendar__top h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.03em; }

.booking-mini-button { border: 1px solid var(--line); background: rgba(255,255,255,.055); color: var(--text); border-radius: 999px; padding: 9px 12px; cursor: pointer; font-weight: 700; }

.booking-mini-button:hover { border-color: var(--accent); }

.booking-weekdays, .booking-days { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; }

.booking-weekdays { color: var(--muted); font-size: .75rem; text-align: center; margin-bottom: 6px; }

.booking-day { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); color: var(--text); min-height: 56px; padding: 7px 4px; cursor: pointer; display: grid; gap: 1px; place-items: center; font: inherit; }

.booking-day small { color: var(--muted); font-size: .66rem; }

.booking-day.is-outside { opacity: .36; }

.booking-day.is-available { border-color: rgba(231,214,189,.42); background: rgba(231,214,189,.08); }

.booking-day.is-selected { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.booking-day.is-selected small { color: rgba(11,11,12,.7); }

.booking-day:disabled { cursor: not-allowed; opacity: .32; }

.booking-slot-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

.booking-slot { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.045); color: var(--text); padding: 8px 11px; cursor: pointer; }

.booking-slot.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.booking-form-mini { display: grid; gap: 12px; }

.booking-form-mini h3 { margin-bottom: 0; }

.booking-form-mini label { margin: 0; font-size: .9rem; }

.booking-form-mini .two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }

.booking-form-mini input, .booking-form-mini select, .booking-form-mini textarea { border-radius: 13px; padding: 11px 12px; }

.booking-check { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 9px; color: var(--muted); }

.booking-check input { width: auto; margin-top: 2px; }

.booking-hidden { display: none !important; }

.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

.about-card { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.045); padding: clamp(18px,2.5vw,26px); }

.about-card__photo { grid-column: 2; grid-row: 1; width: 150px; aspect-ratio: 3/4; object-fit: cover; border-radius: 20px; border: 1px solid rgba(255,255,255,.18); }

.about-card__text { grid-column: 1; grid-row: 1; }

.about-card .role { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; margin-bottom: 12px; }

.about-card p { color: var(--muted); line-height: 1.55; }

.about-card__link { margin-top: 12px; margin-bottom: 0; }

.about-card__link a, .top-link a, .footer a { color: var(--accent); text-decoration: none; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

@media (max-width: 1100px) {

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

    .hero__photos { grid-template-columns: 1.2fr .8fr .8fr; grid-template-rows: 210px; }

    .hero__photo--1 { grid-row: auto; }

    .hero__photo--2, .hero__photo--3 { transform: none; }

    .booking__panel, .booking-widget__grid, .about-grid { grid-template-columns: 1fr; }

    .booking__intro { position: static; }

}

@media (max-width: 760px) {

    .page-shell { width: min(100% - 28px, var(--shell)); }

    .site-header { width: 100%; padding-inline: 14px; border-bottom: 1px solid var(--line); }

    .site-header::before { display: none; }

    .nav-toggle { display: flex; }

    .nav {

        position: fixed;

        left: 14px;

        right: 14px;

        top: calc(62px + env(safe-area-inset-top));

        z-index: 20;

        display: none;

        flex-direction: column;

        gap: 0;

        padding: 10px;

        border: 1px solid var(--line);

        border-radius: 22px;

        background: rgba(11,11,12,.96);

        backdrop-filter: blur(18px);

        box-shadow: 0 24px 60px rgba(0,0,0,.38);

    }

    .nav.is-open { display: flex; }

    .nav a { padding: 13px 14px; border-radius: 14px; color: var(--text); }

    .nav a:hover { background: rgba(255,255,255,.06); }

    .hero { padding-block: 30px 28px; gap: 22px; }

    h1 { font-size: clamp(2.55rem, 14vw, 4.4rem); margin-bottom: 18px; }

    h2 { font-size: clamp(2rem, 10vw, 3.1rem); }

    .lead, .section__head p, .text-block p { font-size: 1rem; }

    .hero__actions { margin-top: 22px; }

    .button { width: 100%; padding: 13px 16px; }

    .hero__chips { margin-top: 18px; }

    .hero__photos { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 138px; gap: 8px; margin-inline: -2px; }

    .hero__photo { border-radius: 18px; }

    .hero__photo--1 { grid-column: span 1; }

    .section { padding-block: 38px; }

    .booking__panel { padding: 16px; border-radius: 24px; }

    .booking-widget { padding: 12px; border-radius: 20px; }

    .booking-calendar__top { align-items: stretch; }

    .booking-calendar__top h3 { text-align: center; align-self: center; font-size: 1rem; }

    .booking-mini-button { padding: 9px 10px; font-size: .86rem; }

    .booking-weekdays, .booking-days { gap: 4px; }

    .booking-day { min-height: 48px; border-radius: 11px; font-size: .9rem; }

    .booking-day small { display: none; }

    .booking-form-mini .two { grid-template-columns: 1fr; }

    .about-card { grid-template-columns: 92px minmax(0,1fr); gap: 14px; padding: 16px; }

    .about-card__photo { grid-column: 1; width: 92px; border-radius: 16px; }

    .about-card__text { grid-column: 2; }

    .about-card .role { font-size: .68rem; }

    .about-card p { font-size: .92rem; }

}

@media (max-width: 420px) {

    .page-shell { width: min(100% - 22px, var(--shell)); }

    .hero__photos { grid-template-rows: 118px; }

    .booking-day { min-height: 43px; font-size: .82rem; }

    .booking-calendar__top { gap: 6px; }

    .booking-mini-button { padding: 8px 9px; }

}



/* --- 2026-07 delta: section order, hero collage and mobile cleanup --- */

.hero {

    padding-block: clamp(28px, 5.5vw, 74px) clamp(28px, 5vw, 58px);

}

.hero__photos {

    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);

    grid-template-rows: minmax(170px, 1fr) minmax(170px, 1fr);

    gap: clamp(14px, 2vw, 22px);

    align-self: stretch;

}

.hero__photo { min-height: 0; }

.hero__photo--1 { grid-row: 1 / span 2; }

.hero__photo--2,

.hero__photo--3 { transform: none; }

#onas { padding-top: clamp(36px, 5vw, 72px); }

#sluzby { padding-top: clamp(36px, 5vw, 72px); }

#portfolio { padding-top: clamp(42px, 6vw, 84px); }

#rezervace { padding-top: clamp(46px, 7vw, 96px); }



@media (max-width: 1100px) {

    .hero__photos {

        grid-template-columns: repeat(3, minmax(0, 1fr));

        grid-template-rows: clamp(160px, 24vw, 230px);

        gap: 12px;

    }

    .hero__photo--1 { grid-row: auto; }

}

@media (max-width: 760px) {

    .hero {

        padding-block: 22px 18px;

        gap: 18px;

    }

    .hero__photos {

        grid-template-columns: repeat(3, minmax(0, 1fr));

        grid-template-rows: clamp(112px, 29vw, 150px);

        gap: 8px;

        margin-inline: 0;

    }

    .hero__photo {

        border-radius: 16px;

        box-shadow: 0 12px 34px rgba(0,0,0,.28);

    }

    #onas { padding-top: 24px; }

    .section { padding-block: 34px; }

    .section__head { margin-bottom: 20px; }

    .filters { gap: 8px; margin-bottom: 16px; }

    .filter { flex: 1 1 auto; }

}

@media (max-width: 420px) {

    .hero__photos { grid-template-rows: 104px; gap: 7px; }

}



/* --- 2026-07 delta v4: hero orientation-aware collage --- */

.hero__photo--1 {

    aspect-ratio: 3 / 4;

}

.hero__photo--2,

.hero__photo--3 {

    aspect-ratio: 16 / 10;

}

.card--portrait img { aspect-ratio: 3 / 4; object-fit: cover; }

.card--landscape img { aspect-ratio: 16 / 10; object-fit: cover; }

.card--square img { aspect-ratio: 1 / 1; object-fit: cover; }

@media (max-width: 1100px) {

    .hero__photo--1,

    .hero__photo--2,

    .hero__photo--3 { aspect-ratio: auto; }

}

@media (max-width: 760px) {

    .hero__photos {

        grid-template-columns: 1.15fr .925fr .925fr;

    }

}



/* --- 2026-07 delta v5: hero grid, fullscreen photos, tile feedback --- */

.hero__photos {

    grid-template-columns: minmax(220px, .92fr) minmax(260px, 1.08fr);

    grid-template-rows: repeat(2, minmax(190px, 1fr));

    min-height: clamp(430px, 45vw, 620px);

    align-items: stretch;

}

.hero__photo {

    cursor: zoom-in;

    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, filter .24s ease;

}

.hero__photo--1 {

    grid-column: 1;

    grid-row: 1 / 3;

    aspect-ratio: auto;

}

.hero__photo--2,

.hero__photo--3 {

    grid-column: 2;

    aspect-ratio: auto;

}

.hero__photo--2 { grid-row: 1; }

.hero__photo--3 { grid-row: 2; }

.hero__photo:hover,

.hero__photo:focus-visible,

.about-card__photo-btn:hover,

.about-card__photo-btn:focus-visible,

.card:hover,

.services article:hover,

.about-card:hover,

.booking__panel:hover,

.form:hover,

.empty-state:hover,

.text-block:hover {

    transform: translateY(-3px);

    border-color: rgba(231,214,189,.54);

    box-shadow: 0 20px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(231,214,189,.08) inset;

}

.hero__photo:active,

.about-card__photo-btn:active,

.card:active,

.services article:active,

.about-card:active,

.booking__panel:active,

.form:active,

.empty-state:active,

.text-block:active {

    transform: translateY(-1px) scale(.995);

    border-color: rgba(231,214,189,.72);

}

.services article,

.about-card,

.booking__panel,

.form,

.empty-state,

.text-block {

    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;

}

.services article:hover,

.about-card:hover,

.form:hover,

.empty-state:hover,

.text-block:hover {

    background: rgba(255,255,255,.065);

}

.about-card__photo-btn {

    grid-column: 2;

    grid-row: 1;

    width: 150px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 20px;

    overflow: hidden;

    background: transparent;

    cursor: zoom-in;

    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;

}

.about-card__photo-btn .about-card__photo {

    width: 100%;

    border: 0;

    border-radius: 0;

    display: block;

}

.like-button.is-liked {

    opacity: .78;

    cursor: default;

}

@media (max-width: 1100px) {

    .hero__photos {

        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);

        grid-template-rows: repeat(2, minmax(150px, 1fr));

        min-height: clamp(330px, 50vw, 460px);

    }

    .hero__photo--1 { grid-column: 1; grid-row: 1 / 3; }

    .hero__photo--2 { grid-column: 2; grid-row: 1; }

    .hero__photo--3 { grid-column: 2; grid-row: 2; }

}

@media (max-width: 760px) {

    .hero__photos {

        grid-template-columns: repeat(3, minmax(0, 1fr));

        grid-template-rows: clamp(112px, 29vw, 150px);

        min-height: 0;

    }

    .hero__photo--1,

    .hero__photo--2,

    .hero__photo--3 { grid-column: auto; grid-row: auto; }

    .hero__photo:hover,

    .hero__photo:focus-visible,

    .about-card__photo-btn:hover,

    .about-card__photo-btn:focus-visible,

    .card:hover,

    .services article:hover,

    .about-card:hover,

    .booking__panel:hover,

    .form:hover,

    .empty-state:hover,

    .text-block:hover { transform: none; }

    .about-card__photo-btn { grid-column: 1; width: 92px; border-radius: 16px; }

}



/* --- 2026-07 delta v6: reservation fixes --- */

.booking-day.is-today {

    position: relative;

    border-color: rgba(249, 115, 22, .95) !important;

    background: linear-gradient(135deg, rgba(249, 115, 22, .24), rgba(231, 214, 189, .12)) !important;

    box-shadow:

        0 0 0 3px rgba(249, 115, 22, .18),

        0 14px 34px rgba(249, 115, 22, .22),

        inset 0 0 0 1px rgba(255, 255, 255, .18) !important;

    transform: translateY(-1px);

}



.booking-day.is-today span {

    color: #fff;

    font-weight: 900;

    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);

}



.booking-day.is-today::after {

    content: "dnes";

    position: absolute;

    top: 6px;

    right: 7px;

    z-index: 2;

    font-size: .62rem;

    line-height: 1;

    padding: 4px 7px;

    border-radius: 999px;

    background: #ff7a00;

color: #ffffff;

    border: 1px solid rgba(255, 255, 255, .35);

    box-shadow:

    0 0 8px rgba(255, 122, 0, .95),

    0 0 18px rgba(255, 122, 0, .75),

    0 0 34px rgba(255, 122, 0, .45),

    0 8px 18px rgba(0, 0, 0, .22);

text-shadow:

    0 0 4px rgba(255, 255, 255, .95),

    0 0 10px rgba(255, 255, 255, .75);

    font-weight: 900;

    letter-spacing: .03em;

    text-transform: uppercase;

}



.booking-day.is-today::after {

    animation: todayPulse 1.8s ease-in-out infinite;

}



@keyframes todayPulse {

    0%, 100% {

        filter: brightness(1);

        box-shadow:

            0 0 8px rgba(255, 122, 0, .95),

            0 0 18px rgba(255, 122, 0, .75),

            0 0 34px rgba(255, 122, 0, .45),

            0 8px 18px rgba(0, 0, 0, .22);

    }

    50% {

        filter: brightness(1.25);

        box-shadow:

            0 0 12px rgba(255, 122, 0, 1),

            0 0 26px rgba(255, 122, 0, .9),

            0 0 46px rgba(255, 122, 0, .6),

            0 8px 18px rgba(0, 0, 0, .22);

    }

}



.booking-day.is-selected.is-today {

    border-color: rgba(255, 255, 255, .95) !important;

    background: linear-gradient(135deg, #f97316, #e7d6bd) !important;

    box-shadow:

        0 0 0 3px rgba(249, 115, 22, .26),

        0 16px 36px rgba(249, 115, 22, .28) !important;

}



.booking-day.is-selected.is-today span {

    color: rgba(11, 11, 12, .92);

    text-shadow: none;

}



.booking-day.is-selected.is-today::after {

    background: #ff7a00;

    color: #ffffff;

    border-color: rgba(255, 255, 255, .45);

    text-shadow:

        0 0 4px rgba(255, 255, 255, .95),

        0 0 10px rgba(255, 255, 255, .75);

    box-shadow:

        0 0 8px rgba(255, 122, 0, .95),

        0 0 18px rgba(255, 122, 0, .75),

        0 0 34px rgba(255, 122, 0, .45),

        0 8px 18px rgba(0, 0, 0, .22);

}



.booking__panel:hover,

.booking__panel:active {

    transform: none;

}



.booking-day,

.booking-slot {

    -webkit-tap-highlight-color: transparent;

}



.booking-day:active,

.booking-slot:active {

    transform: none;

    box-shadow: none;

}



@media (max-width: 520px) {

    .booking-day.is-today {

        border-color: rgba(249, 115, 22, 1) !important;

        background: rgba(249, 115, 22, .28) !important;

        box-shadow:

            0 0 0 3px rgba(249, 115, 22, .24),

            inset 0 0 0 1px rgba(255, 255, 255, .18) !important;

    }



    .booking-day.is-today::after {

        display: block;

        top: 3px;

        right: 3px;

        font-size: .48rem;

        padding: 3px 5px;

    }



    .booking-day.is-today span {

        color: #fff;

        font-weight: 900;

        text-decoration: none;

    }

}