/* ==========================================================================
   Salon Nela — design systém
   Minimalistický, jemný, vzdušný. Slonovinové plochy, tenké linky, oblouky.
   ========================================================================== */

/* 0. Písma (hostovaná lokálně ve složce fonts/, žádné spojení na Google) -- */
/* Latin-ext obsahuje české znaky s diakritikou, prohlížeč ho stáhne jen když je potřeba */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/playfair-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/playfair-display-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/playfair-display-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/playfair-display-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 1. Proměnné ------------------------------------------------------------- */
:root {
  --primary: #6a421e;
  --primary-dark: #543316;
  --button: #8a4f4a;
  --button-hover: #733f3b;
  --secondary: #c08f8b;
  --background: #fffdfa;
  --surface: #f8f0ee;
  --surface-rose: #f2e0dd;
  --text: #333333;
  --muted: #5c534c;
  --accent: #c08f8b;
  --line: #ebd7d3;
  --white: #ffffff;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --section: clamp(5rem, 12vw, 10rem);

  --radius: 1.25rem;
  --container: 87.5rem;
  --measure: 40rem;

  --font-body: "Jost", sans-serif;
  --font-display: "Playfair Display", serif;
  --shadow: 0 1rem 3rem rgba(106, 66, 30, .06);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 2. Základ --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; overflow-x: hidden; background: var(--background); color: var(--text); font: 400 1.0625rem/1.75 var(--font-body); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
p { margin: 0 0 var(--space-4); }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

/* 3. Typografie ----------------------------------------------------------- */
h1, h2, h3 { margin: 0; color: var(--text); font-family: var(--font-display); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.08; }
h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; }
em { color: var(--primary); font-style: italic; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); color: var(--primary); font-size: .75rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: var(--space-8); height: 1px; background: var(--secondary); }

/* 4. Layout --------------------------------------------------------------- */
.container { width: 85%; max-width: var(--container); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tint { background: var(--surface); }
.section--dark { background: var(--surface-rose); }
.split { display: grid; gap: var(--space-12); }
.split .section-heading { margin-bottom: 0; }
.prose { max-width: var(--measure); color: var(--muted); }
.prose p { margin-bottom: var(--space-6); }
.prose p:last-child { margin-bottom: 0; }
.section-heading { max-width: 44rem; margin-bottom: var(--space-16); }
.section-heading > p:not(.eyebrow) { max-width: 36rem; margin: var(--space-6) 0 0; color: var(--muted); }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--center > p:not(.eyebrow) { margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: -5rem; left: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--primary); color: var(--background); }
.skip-link:focus { top: var(--space-4); }

/* 5. Tlačítko ------------------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 3.25rem; padding: var(--space-3) var(--space-8); border: 0; border-radius: 999px; background: var(--button); color: var(--background); font-size: .9375rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: background .3s var(--ease); }
.button:hover { background: var(--button-hover); }
.button span { font-size: 1rem; transition: transform .3s var(--ease); }
.button:hover span { transform: translateX(var(--space-1)); }
.button--small { min-height: 2.75rem; padding-inline: var(--space-6); }
.button--light { background: var(--background); color: var(--button); }
.button--light:hover { background: var(--white); }
.is-disabled { cursor: not-allowed; }

/* 6. Hlavička a navigace -------------------------------------------------- */
.site-header { position: sticky; z-index: 50; top: 0; background: var(--background); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 5rem; padding-block: var(--space-2); }
.logo { position: relative; z-index: 2; display: block; }
.logo img { width: auto; height: 3rem; }
.nav { position: fixed; z-index: 1; inset: 0; display: flex; visibility: hidden; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-12); background: var(--background); opacity: 0; transition: opacity .3s var(--ease), visibility .3s; }
.nav.is-open { visibility: visible; opacity: 1; }
.nav > a:not(.button) { font: 400 1.75rem/1.2 var(--font-display); }
.nav .button { margin-top: var(--space-4); }
.nav-toggle { position: relative; z-index: 2; display: grid; gap: .375rem; width: 2.75rem; height: 2.75rem; place-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.nav-toggle span { width: 1.5rem; height: 1px; background: var(--text); transition: transform .3s var(--ease), opacity .3s; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(.4375rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-.4375rem) rotate(-45deg); }

/* 7. Hero ----------------------------------------------------------------- */
/* Fotka přes celou šířku se rozplývá do barvy stránky; text leží na té světlé části */
/* Gradient přes fotku i pozadí hero sekce jsou v barvě #f9f2f0; --veil je tato barva v RGB */
.hero { --veil: 249, 242, 240; --hero-fade: 18rem; position: relative; background: rgb(var(--veil)); padding-bottom: var(--space-12); }
.hero__visual { position: absolute; inset: 0 0 auto; height: calc(var(--hero-fade) + var(--space-16)); }
.hero__image { position: relative; height: 100%; background: var(--surface-rose); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-16)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-16)), transparent); }
.hero__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--veil), 0) 45%, rgba(var(--veil), .94) var(--hero-fade), rgb(var(--veil)) 100%); }
.hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__grid { padding-top: var(--hero-fade); }
.hero__content { position: relative; z-index: 1; max-width: 36rem; }
.hero__lead { max-width: 34rem; margin-block: var(--space-6) var(--space-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero__badge { position: absolute; right: 7.5vw; bottom: var(--space-8); display: none; width: 7.5rem; aspect-ratio: 1; place-content: center; margin: 0; border-radius: 50%; background: var(--background); box-shadow: var(--shadow); color: var(--muted); font-size: .6875rem; letter-spacing: .14em; line-height: 1.4; text-align: center; text-transform: uppercase; }
.hero__badge span { display: block; color: var(--primary); font: italic 400 1.5rem/1.2 var(--font-display); letter-spacing: 0; text-transform: none; }

/* 8. Přednosti ------------------------------------------------------------ */
.trust-row { display: grid; gap: var(--space-8) var(--space-4); padding-block: var(--space-12); border-bottom: 1px solid var(--line); }
.trust-row article { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.trust-row span { display: grid; width: 4.5rem; height: 4.5rem; place-content: center; border-radius: 50%; background: var(--surface-rose); }
.trust-row img { width: 2.5rem; height: 2.5rem; }
.trust-row h2 { color: var(--muted); font: 400 1rem/1.5 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }

/* 9. Karty ---------------------------------------------------------------- */
.feature-grid { display: grid; gap: var(--space-6); }
.feature-card { padding: var(--space-8); border-radius: var(--radius); background: var(--background); }
.point-icon { display: grid; width: 4.5rem; height: 4.5rem; place-content: center; margin-bottom: var(--space-8); border-radius: 50%; background: var(--surface-rose); }
.point-icon img { width: 2.5rem; height: 2.5rem; }
.feature-card h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
.feature-card p { margin: var(--space-4) 0 0; color: var(--muted); }

/* 10. Služby -------------------------------------------------------------- */
.services .container { display: grid; gap: var(--space-4); }
.service-list { border-top: 1px solid var(--line); }
.service-list article { display: grid; gap: var(--space-3); padding-block: var(--space-8); border-bottom: 1px solid var(--line); }
.service-icon img { width: 1.75rem; height: 1.75rem; }
.service-list h3 { font-size: clamp(1.5rem, 2vw, 1.75rem); }
.service-list p { max-width: 30rem; margin: 0; color: var(--muted); }

/* 11. Proměny ------------------------------------------------------------- */
.gallery--pairs { display: grid; gap: var(--space-6); }
.transformation-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.transformation-pair > div { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.transformation-pair img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.transformation-pair span { position: absolute; bottom: var(--space-3); left: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--background); color: var(--primary); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

/* 12. NATULIQUE ----------------------------------------------------------- */
.natulique__layout { display: grid; align-items: center; gap: var(--space-12); }
.natulique__content { max-width: var(--measure); }
.natulique__logo { width: 8rem; margin-bottom: var(--space-8); mix-blend-mode: multiply; }
.natulique__intro { margin-block: var(--space-8); color: var(--muted); }
.natulique__closing { margin: 0; padding-left: var(--space-6); border-left: 1px solid var(--secondary); color: var(--primary); font: italic 400 1.25rem/1.6 var(--font-display); }
.natulique__visual { overflow: hidden; justify-self: center; width: min(100%, 26rem); aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--surface); }
.natulique__visual img { width: 100%; height: 100%; object-fit: cover; }
.natulique__benefits { display: grid; gap: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--line); }
.natulique__benefit > img { width: 4.5rem; height: 4.5rem; margin-bottom: var(--space-6); padding: var(--space-4); border-radius: 50%; background: var(--surface-rose); }
.natulique__benefit h3 { margin-bottom: var(--space-2); font-size: clamp(1.5rem, 2vw, 1.75rem); }
.natulique__benefit p { max-width: 24rem; margin: 0; color: var(--muted); }

/* 13. Reference (místo pro budoucí obsah) --------------------------------- */
.testimonial-grid { display: grid; gap: var(--space-6); }
.testimonial { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-8); border-radius: var(--radius); background: var(--background); }
.testimonial::before { content: "“"; height: 2rem; color: var(--secondary); font: 400 4.5rem/1 var(--font-display); }
.testimonial blockquote { flex: 1; margin: 0; }
.testimonial blockquote p { margin: 0; font: italic 400 1.25rem/1.6 var(--font-display); }
.testimonial figcaption { display: flex; align-items: center; gap: var(--space-4); }
.testimonial__avatar { display: grid; overflow: hidden; flex: none; width: 3.5rem; height: 3.5rem; place-content: center; border-radius: 50%; background: var(--surface-rose); color: var(--primary); font: italic 400 1.25rem/1 var(--font-display); }
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial strong { display: block; font-weight: 500; }
.testimonial small { display: block; color: var(--muted); font-size: 1rem; }

/* 14. O mně --------------------------------------------------------------- */
/* Když jsou reference skryté, navazuje O mně přímo na NATULIQUE se stejným pozadím: mezeru tvoří jen spodní odsazení NATULIQUE */
.testimonials[hidden] + .about { padding-top: 0; }
.about__grid { display: grid; align-items: center; gap: var(--space-12); }
.about__image { overflow: hidden; justify-self: center; width: min(100%, 32rem); aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--surface); }
.about__image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about__content h2 { margin-bottom: var(--space-8); }
.about__content p:not(.eyebrow, .signature) { max-width: var(--measure); color: var(--muted); }
.about__content .signature { margin: var(--space-8) 0 0; color: var(--primary); font: italic 400 2.25rem/1 var(--font-display); }

/* 15. Ceník --------------------------------------------------------------- */
.pricing .container { text-align: center; }
.price-groups { display: grid; gap: var(--space-6); max-width: 60rem; margin-inline: auto; }
.price-group { padding: var(--space-8) var(--space-6); border-radius: var(--radius); background: var(--background); text-align: left; }
.price-group h3 { margin-bottom: var(--space-4); color: var(--primary); font-style: italic; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
th:first-child { width: 40%; }
th, td { padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
th:first-child, td:first-child { padding-left: 0; text-align: left; }
th:last-child, td:last-child { padding-right: 0; }
th { color: var(--muted); font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
td { color: var(--muted); }
td:first-child { color: var(--text); }
.price-note { max-width: var(--measure); margin: var(--space-12) auto var(--space-8); color: var(--muted); }

/* 16. FAQ ----------------------------------------------------------------- */
.faq-grid { display: grid; align-items: start; gap: var(--space-4) var(--space-6); }
.faq-column { display: grid; gap: var(--space-4); }
details { border-radius: var(--radius); background: var(--surface); transition: background .3s var(--ease); }
details[open] { background: var(--surface-rose); }
summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius); cursor: pointer; font: 400 1.25rem/1.4 var(--font-display); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a421e' stroke-width='1.5'%3E%3Cpath d='M12 4v16M5 13l7 7 7-7'/%3E%3C/svg%3E") center / 1.125rem no-repeat; transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(180deg); }
details[open] summary { color: var(--primary-dark); }
.faq-answer { display: grid; gap: var(--space-4); max-width: var(--measure); padding: 0 var(--space-6) var(--space-6); color: var(--muted); }
.faq-answer p, .faq-answer ul { margin: 0; }
.faq-answer ul { display: grid; gap: var(--space-2); padding-left: 1.25rem; }
.faq-answer li::marker { color: var(--primary); }
.faq-answer strong { color: var(--text); font-weight: 500; }

/* 17. Objednání ----------------------------------------------------------- */
.booking { padding-top: 0; }
.booking__box { position: relative; overflow: hidden; padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 6rem); border-radius: var(--radius); background: var(--surface-rose); text-align: center; }
.booking__box > div:first-child { position: relative; z-index: 1; }
.booking h2 { max-width: 44rem; margin-inline: auto; }
.booking p:not(.eyebrow) { max-width: 32rem; margin: var(--space-6) auto var(--space-8); color: var(--muted); }
.booking__mark { position: absolute; right: var(--space-8); bottom: calc(var(--space-8) * -1); width: 14rem; opacity: .07; pointer-events: none; }

/* 17b. Kontakt ------------------------------------------------------------ */
.contact { padding-top: 0; }
.contact__grid { display: grid; align-items: center; gap: var(--space-12); }
.contact__list { margin: var(--space-8) 0 0; border-top: 1px solid var(--line); }
.contact__list > div { display: grid; gap: var(--space-1); padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.contact__list dt { color: var(--primary); font-size: .75rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.contact__list dd { margin: 0; }
.contact__list a { text-decoration: underline; text-decoration-color: var(--secondary); text-underline-offset: .3em; }
.contact__phone { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.contact__list .contact__icon { display: grid; flex: none; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 50%; background: var(--surface-rose); color: var(--primary); text-decoration: none; transition: background .3s var(--ease), color .3s var(--ease); }
.contact__icon:hover { background: var(--button); color: var(--background); }
.contact__icon svg { width: 1.375rem; height: 1.375rem; }
.contact__photo { width: 100%; }
/* Šipka ukazuje na vchod s kamenným portálem; pozice v % odpovídá dveřím na fotce (1000 × 640 px, dveře cca x 528, y 350) */
.contact__photo-frame { position: relative; }
.contact__photo img { width: 100%; border-radius: var(--radius); background: var(--surface-rose); }
.contact__door-arrow { position: absolute; top: 54%; left: 52.8%; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--button); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .25); color: var(--background); transform: translate(-50%, -100%); animation: door-arrow 1.6s var(--ease) infinite; }
.contact__door-arrow svg { width: 1.25rem; height: 1.25rem; }
@keyframes door-arrow { 50% { transform: translate(-50%, calc(-100% - .375rem)); } }
.contact__photo figcaption { margin-top: var(--space-4); color: var(--muted); font: italic 400 1.125rem/1.5 var(--font-display); text-align: center; }
.contact__placeholder { display: grid; height: 100%; padding: var(--space-6); place-content: center; color: var(--muted); text-align: center; }

/* 18. Patička ------------------------------------------------------------- */
/* Patička: vše na středu – logo, slogan, provozovatel a spodní řádek s oddělovači */
.footer { padding-block: var(--space-24) var(--space-8); background: var(--surface); text-align: center; }
.footer__inner { display: grid; justify-items: center; }
.footer .logo img { height: 8rem; }
.footer__tagline { margin: var(--space-4) 0 0; color: var(--primary); font: italic 400 1.25rem/1.5 var(--font-display); }
.footer__operator { margin-top: var(--space-12); }
.footer__operator p { margin: 0; }
.footer__operator::before { content: ""; display: block; width: var(--space-8); height: 1px; margin: 0 auto var(--space-12); background: var(--secondary); }
.footer h2 { margin-bottom: var(--space-3); color: var(--primary); font: 500 .75rem/1.4 var(--font-body); letter-spacing: .24em; text-transform: uppercase; }
.footer__operator p, .footer__bottom { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); color: var(--muted); font-size: .9375rem; }
.footer__operator span + span::before, .footer__bottom > * + *::before { content: "·"; margin-right: var(--space-3); color: var(--secondary); }
.footer__bottom { align-items: center; margin-block: var(--space-16) 0; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.footer__bottom a { padding-block: var(--space-3); transition: color .3s var(--ease); }
.footer__bottom a:hover { color: var(--primary); }

/* Dlouhý e-mail se v úzkém sloupci zalomí místo přetečení */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* 19. Chybová stránka ----------------------------------------------------- */
/* Zásady ochrany osobních údajů */
.legal__body { display: grid; gap: var(--space-12); max-width: var(--measure); color: var(--muted); }
.legal__body h2 { margin-bottom: var(--space-4); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.legal__body h3 { margin: var(--space-8) 0 var(--space-2); color: var(--text); font: 500 1rem/1.5 var(--font-body); }
.legal__body h2 + h3 { margin-top: 0; }
.legal__basis { font-size: .9375rem; font-style: italic; }
.legal__body p, .legal__body ul { margin: 0 0 var(--space-4); }
.legal__body section > :last-child { margin-bottom: 0; }
.legal__body ul { display: grid; gap: var(--space-2); padding-left: 1.25rem; }
.legal__body li::marker { color: var(--primary); }
.legal__body strong { color: var(--text); font-weight: 500; }
.legal__body a { text-decoration: underline; text-decoration-color: var(--secondary); text-underline-offset: .3em; overflow-wrap: anywhere; }
.legal__updated { margin: 0; font-size: .9375rem; font-style: italic; }
.footer--compact { padding-top: var(--space-8); }
.footer--compact .footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }

.error-page { display: grid; min-height: 100vh; padding: var(--space-6); grid-template-columns: minmax(0, 1fr); place-items: center; background: var(--surface); }
.error-card { width: min(40rem, 100%); padding: clamp(2.5rem, 7vw, 5rem); border-radius: var(--radius); background: var(--background); text-align: center; }
.error-card__icon { display: block; width: 2.5rem; height: 2.5rem; margin: 0 auto var(--space-6); color: var(--primary); }
.error-card > p:not(.eyebrow) { max-width: 28rem; margin: var(--space-6) auto var(--space-8); color: var(--muted); }

/* 20. Animace při scrollu ------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(var(--space-4)); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* 21. Breakpointy (mobile-first) ------------------------------------------ */
@media (min-width: 42rem) {
  body { font-size: 1.125rem; }
  .trust-row { grid-template-columns: repeat(3, 1fr); }
  .feature-grid, .faq-grid { grid-template-columns: repeat(2, 1fr); }
  .contact__list > div { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; gap: var(--space-6); }
  .feature-card, .price-group { padding: var(--space-12); }
  .hero { --hero-fade: 24rem; }
}

@media (min-width: 64rem) {
  .nav-toggle { display: none; }
  .nav { position: static; visibility: visible; flex-direction: row; gap: var(--space-8); padding: 0; background: transparent; opacity: 1; }
  .nav > a:not(.button) { position: relative; font: 400 .8125rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
  .nav > a:not(.button)::after { content: ""; position: absolute; right: 0; bottom: calc(var(--space-2) * -1); left: 0; height: 1px; background: var(--secondary); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
  .nav > a:not(.button):hover::after { transform: scaleX(1); }
  .nav .button { margin: 0 0 0 var(--space-2); }

  /* Levá čtvrtina je čistě krémová, fotka zabírá zbylé tři čtvrtiny a do pozadí přechází gradientem */
  .hero { --hero-text-end: calc(max(7.5vw, (100vw - var(--container)) / 2) + 27rem - 25vw); padding-bottom: 0; }
  .hero h1 { font-size: clamp(2.5rem, 4vw, 3.75rem); }
  .hero__content { max-width: 26rem; }
  .hero__grid { display: flex; align-items: center; min-height: clamp(36rem, 84svh, 52rem); padding-block: var(--space-16); }
  .hero__visual { inset: 0 0 0 25%; height: auto; }
  .hero__image::after { background: linear-gradient(to right, rgb(var(--veil)) 0, rgba(var(--veil), .98) calc(var(--hero-text-end) * .5), rgba(var(--veil), .9) var(--hero-text-end), rgba(var(--veil), .45) calc(var(--hero-text-end) + 8vw), rgba(var(--veil), 0) calc(var(--hero-text-end) + 20vw)); }
  .hero__image { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--space-16)); mask-image: linear-gradient(to right, transparent, #000 var(--space-16)); }
  .hero__image img { object-position: center; }
  .hero__badge { display: grid; }

  .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-24); }

  .services .container { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: var(--space-16); }
  .services .section-heading { position: sticky; top: 9rem; align-self: start; margin-bottom: 0; }
  .service-list article { grid-template-columns: 1.75rem minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); }

  .gallery--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
  /* Lichá poslední proměna je uprostřed řádku ve stejné velikosti jako ostatní */
  .gallery--pairs > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-12)) / 2); }
  .testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-16); }

  .about__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: var(--space-16); }
  .natulique__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-16) var(--space-24); }
  .natulique__visual { justify-self: end; }
  .natulique__benefits { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about__image { position: sticky; top: 8rem; width: 100%; }

}

/* Služby na mobilu a tabletu: samostatné karty místo řádků oddělených linkou */
@media (max-width: 74.99rem) {
  .service-list { display: grid; gap: var(--space-4); border-top: 0; }
  .service-list article { grid-template-columns: 3rem minmax(0, 1fr); align-items: center; align-content: start; gap: var(--space-4); padding: var(--space-6); border: 0; border-radius: var(--radius); background: var(--surface); }
  .service-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--background); }
  .service-icon img { width: 1.5rem; height: 1.5rem; }
  .service-list p { grid-column: 1 / -1; max-width: none; }
}

/* Tablet (672–1199 px) */
@media (min-width: 42rem) and (max-width: 74.99rem) {
  /* Služby: nadpis nad kartami, karty ve dvou sloupcích a poslední karta přes celou šířku */
  .services .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .services .section-heading { position: static; margin-bottom: var(--space-12); }
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-list article:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* NATULIQUE na tabletu od 800 px: text a fotka vedle sebe, výhody pod nimi přes celou šířku (pod 800 px fotka pod textem) */
@media (min-width: 50rem) and (max-width: 74.99rem) {
  .natulique__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-12) var(--space-8); }
  .natulique__visual { justify-self: end; }
  .natulique__benefits { grid-column: 1 / -1; }
}

/* NATULIQUE ve dvou sloupcích: fotka začíná na úrovni nadpisu, ne loga (výška loga = 8rem × 405 / 757) */
@media (min-width: 50rem) {
  .natulique__visual { align-self: start; margin-top: calc(8rem * 405 / 757 + var(--space-8)); }
}

/* Užší desktop: text je vyšší, fotka proto dostane širší sloupec a vyšší formát */
@media (min-width: 64rem) and (max-width: 89.99rem) {
  .about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
  .about__image { aspect-ratio: 2 / 3; }
  /* Menu má hodně položek, na užším desktopu se proto zhušťuje */
  .nav { gap: var(--space-4); }
  .nav > a:not(.button) { letter-spacing: .1em; }
}

/* Velký desktop: hlavička s menu se roztahuje na 95 % šířky okna */
@media (min-width: 90rem) {
  .site-header .container { width: 95%; max-width: none; }
}

@media (max-width: 41.99rem) {
  /* Patička: údaje pod sebou bez teček */
  .footer__operator p, .footer__bottom { flex-direction: column; gap: 0; }
  .footer__operator span + span::before, .footer__bottom > * + *::before { content: none; }
  .booking__mark { display: none; }
  .booking__box { padding-inline: var(--space-4); }
  .booking .button { padding-inline: var(--space-4); letter-spacing: .06em; }
  .nav-wrap { min-height: 4rem; }
  .site-header .logo img { height: 2.5rem; }
  .trust-row { gap: var(--space-4); justify-content: start; padding-block: var(--space-8); }
  .trust-row article { flex-direction: row; gap: var(--space-4); text-align: left; }
  .trust-row span { flex: none; width: 3.5rem; height: 3.5rem; }
  .trust-row img { width: 2rem; height: 2rem; }
  .trust-row h2 { letter-spacing: .14em; }
  .button { padding-inline: var(--space-6); letter-spacing: .1em; text-align: center; }

  /* Ceník: řádek tabulky se skládá pod sebe, aby se nemusel posouvat do strany */
  table, thead, tbody, tr { display: block; }
  thead { position: absolute; overflow: hidden; width: 1px; height: 1px; clip-path: inset(50%); white-space: nowrap; }
  thead tr { padding: 0; border: 0; }
  tr { padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
  tbody tr:last-child { padding-bottom: 0; border-bottom: 0; }
  td, td:first-child, td:last-child { padding: 0; border: 0; text-align: left; }
  td:first-child { margin-bottom: var(--space-2); }
  td[data-label] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
  td[data-label]::before { content: attr(data-label); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
  td:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .contact__door-arrow { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}