/* =========================================================
   Psychoterapie Olomouc — Mgr. Karolína Karásková
   Design system
   Paleta a styl vychází z původního webu:
   světle šedé plochy, bílé karty, černý text a černá "pill"
   tlačítka. Doplněno o teplý pískový akcent z fotografií.
   ========================================================= */

/* =========================================================
   0. Písma — hostovaná přímo na webu
   Odpadá tím volání na Google Fonts: nic se neposílá třetí straně
   (u webu psychoterapeuta se to hodí i kvůli GDPR), stránka se
   vykreslí dřív a písmo je k dispozici i při výpadku cizí služby.
   Soubory jsou variabilní, jeden pokryje všechny tloušťky.
   unicode-range zajistí, že se rozšířená latinka stáhne jen tehdy,
   když ji stránka opravdu potřebuje.
   ========================================================= */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/playfair-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/playfair-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: 300 700;
  font-display: swap;
  src: url("../fonts/playfair-latin-ext-italic.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/playfair-latin-italic.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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-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;
}

/* ---------- 1. Tokeny ---------- */
:root {
  /* Barvy */
  --c-ink:        #1c1c1c;   /* hlavní text, tlačítka  */
  --c-ink-soft:   #3d3d3d;
  --c-muted:      #6e6e6e;   /* popisky, meta          */
  --c-line:       #e0ddd8;   /* linky, rámečky         */
  --c-bg:         #ffffff;   /* základ                 */
  --c-bg-alt:     #f1f0ee;   /* šedé sekce (jako orig.)*/
  --c-bg-warm:    #f6f3ee;   /* teplý podklad          */
  --c-accent:     #9a8570;   /* pískový akcent z fotek */
  --c-accent-dk:  #7d6a58;
  --c-accent-lt:  #dcc7a4;   /* akcent na tmavém podkladu */
  --c-white:      #ffffff;
  --c-error:      #a03c33;
  --c-success:    #3f6b52;

  /* Typografie */
  --f-sans: "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --f-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  --fs-hero:  clamp(2.25rem, 6.2vw, 4.75rem);
  --fs-h1:    clamp(1.95rem, 4.7vw, 3.15rem);
  --fs-h2:    clamp(1.6rem, 3.6vw, 2.45rem);
  --fs-h3:    clamp(1.15rem, 2vw, 1.4rem);
  --fs-lead:  clamp(1.02rem, 1.5vw, 1.2rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  /* Rozměry */
  --wrap:     1180px;
  --wrap-narrow: 780px;
  --gutter:   clamp(1.15rem, 4vw, 2.5rem);
  --sec-y:    clamp(3.75rem, 9vw, 7.5rem);
  --radius:   4px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Efekty */
  --shadow-sm: 0 1px 2px rgba(28, 28, 28, .05), 0 4px 14px rgba(28, 28, 28, .05);
  --shadow-md: 0 10px 30px rgba(28, 28, 28, .09);
  --shadow-lg: 0 22px 60px rgba(28, 28, 28, .13);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 78px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.18; font-weight: 600; letter-spacing: -.01em; }

::selection { background: var(--c-ink); color: var(--c-white); }

:focus-visible {
  outline: 2px solid var(--c-accent-dk);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. Layout pomocníci ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sec-y); }
.section--alt  { background: var(--c-bg-alt); }
.section--warm { background: var(--c-bg-warm); }
.section--ink  { background: var(--c-ink); color: var(--c-white); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 999;
  background: var(--c-ink);
  color: var(--c-white);
  padding: .7rem 1.4rem;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- 4. Typografie ---------- */
.eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-dk);
  margin-bottom: 1rem;
}
.section--ink .eyebrow { color: #cbbba6; }

.section-title {
  font-family: var(--f-serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.15;
  text-wrap: balance;
}
.section-title--plain { letter-spacing: 0; }

.lead {
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
  line-height: 1.75;
}
.section--ink .lead { color: rgba(255, 255, 255, .82); }

.muted { color: var(--c-muted); }
.prose p + p { margin-top: 1.15rem; }
.prose p { color: var(--c-ink-soft); }

.rule {
  width: 56px;
  height: 2px;
  background: var(--c-accent);
  border: 0;
  margin: 1.35rem 0 0;
}
.rule--center { margin-inline: auto; }

.quote {
  font-family: var(--f-serif);
  font-size: clamp(1.35rem, 3.1vw, 2.05rem);
  line-height: 1.45;
  font-style: italic;
  font-weight: 400;
}

/* ---------- 5. Tlačítka ---------- */
.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-pill);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  border-color: var(--c-ink);
}
.btn--ghost:hover { background: var(--c-ink); color: var(--c-white); }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--c-white);
  border-color: rgba(255, 255, 255, .55);
}
.btn--light:hover { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }

.btn--block { width: 100%; }

.btn__icon { width: 1em; height: 1em; flex: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 32px;
  font-weight: 500;
  color: var(--c-accent-dk);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap .2s var(--ease), color .2s var(--ease);
}
.link-arrow:hover { gap: .8rem; color: var(--c-ink); }

/* ---------- 6. Hlavička ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              background-color .3s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: 0 6px 24px rgba(28, 28, 28, .05);
}

.header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: .8rem; }
.brand__mark {
  width: 44px; height: 44px;
  flex: none;
  display: block;
  transition: transform .3s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-4deg); }
.brand__logo { width: 100%; height: 100%; display: block; }
.footer__mark {
  display: inline-block;
  width: 26px; height: 26px;
  vertical-align: -.45rem;
  margin-right: .55rem;
}
.footer__brand { display: flex; align-items: center; }
.brand__name {
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
}
.brand__role {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; align-items: center; gap: 1.9rem; }
.nav__link {
  position: relative;
  font-size: .93rem;
  padding-block: .4rem;
  color: var(--c-ink-soft);
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s var(--ease);
}
.nav__link:hover { color: var(--c-ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--c-ink); font-weight: 600; }

.nav__cta { padding: .68rem 1.5rem; font-size: .9rem; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  place-items: center;
}
.burger__bars { position: relative; width: 18px; height: 12px; }
.burger__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: var(--c-ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 5px; }
.burger__bars span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: block;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    padding: 1.25rem var(--gutter) 2rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform .28s var(--ease), opacity .28s var(--ease), visibility .28s;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding: .95rem .25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--c-line);
  }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 1.25rem; width: 100%; }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  /* Vyplní přesně zbytek okna pod lepkavou hlavičkou, ať po načtení
     nezůstane dole bílý pruh. dvh počítá i s lištami mobilních prohlížečů,
     vh je záloha pro starší prohlížeče. */
  /* lvh = výška okna bez lišt prohlížeče, tedy ta největší, jaké okno
     dosáhne. Úvodní obrazovka je díky tomu vždy alespoň tak vysoká jako
     viditelná plocha, takže pod ní nikdy nevykoukne pruh další sekce.
     (dvh se na telefonu mění podle toho, zda je lišta vidět, a při
     načtení stránky se s ní rozešlo.) */
  min-height: calc(100vh - var(--header-real, var(--header-h)));
  min-height: calc(100lvh - var(--header-real, var(--header-h)));
  padding-block: clamp(3.5rem, 9vw, 6rem);
  color: var(--c-white);
  isolation: isolate;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Skutečnou fotografii vlož jako assets/img/hero.jpg — gradient
     níže slouží jako podklad i fallback, takže web nikdy nevypadá rozbitě. */
  background-image:
    url("../img/hero.jpg"),
    linear-gradient(140deg, #6f6257 0%, #a08f7e 42%, #cbbfae 100%);
  background-size: cover;
  background-position: center 42%;
  transform: scale(1.04);
  animation: heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Dva překryvy: vodorovný ztmavuje stranu s textem, svislý sjednocuje
     horní a dolní okraj. Fotografie tak zůstane vidět tam, kde text není. */
  background:
    linear-gradient(100deg, rgba(20, 18, 16, .68) 0%, rgba(20, 18, 16, .50) 40%,
                            rgba(20, 18, 16, .20) 70%, rgba(20, 18, 16, .06) 100%),
    linear-gradient(180deg, rgba(20, 18, 16, .28) 0%, rgba(20, 18, 16, .06) 45%,
                            rgba(20, 18, 16, .34) 100%);
}

/* Na úzkých displejích text zabírá celou šířku — překryv musí být rovnoměrný */
@media (max-width: 760px) {
  .hero::after {
    /* Nahoře zůstává fotografie čistá, směrem dolů překryv houstne,
       aby nadpis, věta i tlačítka měly pod sebou klidnou tmavou plochu. */
    background:
      linear-gradient(180deg, rgba(20, 18, 16, .22) 0%, rgba(20, 18, 16, .08) 26%,
                              rgba(20, 18, 16, .40) 52%, rgba(20, 18, 16, .74) 78%,
                              rgba(20, 18, 16, .88) 100%);
  }
}

/* Blok drží šířku obsahu stránky, takže začíná u stejného levého okraje
   jako zbytek webu; délku řádku omezují samotné nadpisy a odstavec. */
.hero__inner { max-width: var(--wrap); }
.hero__title { max-width: 17ch; }
/* Světlejší překryv nechá vyniknout fotografii; o čitelnost bílého textu
   se stará jemný stín, který na plochách fotky nikde nevytvoří tmavý obdélník. */
.hero__inner > * { text-shadow: 0 1px 24px rgba(18, 16, 14, .5), 0 1px 3px rgba(18, 16, 14, .35); }
.hero__actions, .hero__actions * { text-shadow: none; }
.hero__title {
  font-family: var(--f-serif);
  font-size: var(--fs-hero);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
  text-wrap: balance;
}
/* Klíčové slovo celého webu v jiné poloze — kurziva v akcentní barvě.
   Nadpis tím dostane rytmus a nečte se jako jeden plochý blok. */
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-accent-lt);
}
.hero__text {
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .96);
  max-width: 46ch;
}
.hero__actions {
  margin-top: 2.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}
.hero__actions .btn {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-ink);
  padding: 1.05rem 2.1rem;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Druhé tlačítko je průsvitně vyplněné, ne jen obtažené — na fotografii
   se tím drží i tam, kde je snímek světlý. */
.hero__actions .btn--light {
  --btn-bg: rgba(255, 255, 255, .16);
  --btn-fg: var(--c-white);
  border-color: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero__actions .btn--light:hover {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-ink);
}

.hero__meta {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.8rem;
  font-size: .87rem;
  color: rgba(255, 255, 255, .92);
}
.hero__meta li { display: flex; align-items: center; gap: .5rem; }
.hero__meta li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #d8c9b3;
  flex: none;
}

/* Menší hero pro podstránky */
.pagehead {
  position: relative;
  padding-block: clamp(3.25rem, 8vw, 5.5rem);
  background: var(--c-bg-warm);
  border-bottom: 1px solid var(--c-line);
}
.pagehead__inner { max-width: 720px; }
.pagehead__title {
  font-family: var(--f-serif);
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
}
.pagehead__text { margin-top: 1.1rem; font-size: var(--fs-lead); color: var(--c-ink-soft); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: .8rem;
  color: var(--c-muted);
  margin-bottom: 1rem;
}
.breadcrumb li + li::before { content: "/"; margin-right: .45rem; color: var(--c-line); }
.breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }

/* ---------- 8. Mřížky ---------- */
.grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--sidebar { grid-template-columns: 1.35fr 1fr; align-items: start; }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- 9. Karta služby ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.card__media {
  aspect-ratio: 4 / 3;
  background-color: #ded8d0;
  background-size: cover;
  background-position: center;
  transition: transform .5s var(--ease);
}
.card:hover .card__media { transform: scale(1.04); }

.card__media--online {
  background-image: url("../img/sluzba-online.jpg"),
    linear-gradient(150deg, #cfc6ba 0%, #ece6dc 60%, #d9d2c6 100%);
}
.card__media--individual {
  background-image: url("../img/sluzba-individualni.jpg"),
    linear-gradient(150deg, #d6d3cc 0%, #efeeea 55%, #c8c3ba 100%);
}
.card__media--par {
  background-image: url("../img/sluzba-parova.jpg"),
    linear-gradient(150deg, #cbb9a4 0%, #eee6da 55%, #c2ab92 100%);
}
.card__media--about {
  background-position: center top;
  background-image: url("../img/karolina.jpg"),
    linear-gradient(150deg, #ded5c8 0%, #f2ede4 60%, #cfc4b3 100%);
}

.card__body {
  padding: clamp(1.35rem, 2.6vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
}
.card__title { font-size: var(--fs-h3); font-weight: 600; }
.card__text { color: var(--c-muted); font-size: .95rem; flex: 1; }

.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--c-line);
}
.card__price { font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.card__dur {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.card__link { margin-top: .35rem; align-self: flex-start; }

/* Karta se rozklikne celá, ale odkaz zůstává jediným cílem pro čtečky */
.card__stretch::after { content: ""; position: absolute; inset: 0; }

/* ---------- 10. Hodnoty / kroky ---------- */
.feature { display: flex; flex-direction: column; gap: .7rem; }
.feature__icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--c-bg-warm);
  color: var(--c-accent-dk);
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
}
.feature__icon svg { width: 21px; height: 21px; }
.feature__title { font-size: 1.06rem; font-weight: 600; }
.feature__text { color: var(--c-muted); font-size: .95rem; }

.steps { counter-reset: step; display: grid; gap: 1.6rem; }
.step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.15rem;
  align-items: start;
}
.step__num {
  counter-increment: step;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  display: grid;
  place-items: center;
  font-size: .92rem;
  font-weight: 600;
  color: var(--c-accent-dk);
  background: var(--c-white);
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step__title { font-size: 1.06rem; font-weight: 600; margin-bottom: .3rem; }
.step__text { color: var(--c-muted); font-size: .95rem; }

/* ---------- 11. Split (text + obraz) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 860px) {
  /* Mezera mřížky by po rozpuštění textového sloupce odsazovala i jednotlivé
     odstavce — svislý rytmus tu proto řídí okraje samotných prvků. */
  .split { grid-template-columns: 1fr; gap: 0; }

  /* Na jednom sloupci se pořadí přeskládá tak, aby čtenář nejdřív věděl,
     o čem sekce je: popisek → fotografie → nadpis → obsah.
     display:contents rozpustí textový sloupec, aby se jeho části daly
     řadit samostatně; průhlednost i posun z .reveal se tu proto ruší,
     jinak by obsah zůstal skrytý (prvek bez rámečku nelze sledovat). */
  .split .split__body.reveal {
    display: contents;
    opacity: 1;
    transform: none;
  }
  .split .split__body > * { order: 3; }
  .split .split__body > .eyebrow { order: 1; margin-bottom: 0; }
  .split .split__media,
  .split--reverse .split__media { order: 2; margin-block: 1.1rem 1.6rem; }
}

.split__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background-color: #dcd5ca;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-md);
  max-height: 620px;
}
.split__media--portrait {
  background-position: center top;
  background-image: url("../img/karolina.jpg"),
    linear-gradient(155deg, #ddd4c6 0%, #f3eee6 55%, #cabfae 100%);
}
.split__media--room {
  background-image: url("../img/pracovna.jpg"),
    linear-gradient(155deg, #d5d2cb 0%, #f0efec 55%, #c4bfb6 100%);
}

/* ---------- 12. Ceník ---------- */
.pricing { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan__name { font-size: var(--fs-h3); font-weight: 600; }
.plan__price {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}
.plan__price small {
  display: block;
  margin-top: .45rem;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.plan__list { display: grid; gap: .6rem; font-size: .95rem; color: var(--c-ink-soft); }
.plan__list li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; align-items: start; }
.plan__list svg { width: 15px; height: 15px; margin-top: .38rem; color: var(--c-accent-dk); }
.plan .btn { margin-top: auto; }

/* ---------- 13. Akordeon (podmínky, FAQ) ---------- */
.accordion { border-top: 1px solid var(--c-line); }
.acc {
  border-bottom: 1px solid var(--c-line);
}
.acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.35rem .25rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 1.03rem;
  font-weight: 500;
  transition: color .2s var(--ease);
}
.acc__q:hover { color: var(--c-accent-dk); }
.acc__q::marker, .acc__q::-webkit-details-marker { display: none; content: ""; }
.acc__sign {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
}
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] .acc__sign::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.acc__a {
  padding: 0 .25rem 1.5rem;
  color: var(--c-muted);
  font-size: .96rem;
  max-width: 68ch;
}
.acc__a p + p { margin-top: .8rem; }
.acc[open] .acc__a { animation: accIn .3s var(--ease); }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 14. Formulář ---------- */
.form-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
}

.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { position: relative; display: flex; flex-direction: column; }
.field__label {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: .5rem;
}
.field__req { color: var(--c-accent-dk); }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .8rem .2rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.65; }
.field select { padding-left: 0; cursor: pointer; }

.field input:hover,
.field textarea:hover,
.field select:hover { border-bottom-color: var(--c-muted); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--c-ink);
  border-bottom-width: 1.5px;
}

.field input::placeholder,
.field textarea::placeholder { color: #b3aea6; }

.field__error {
  min-height: 1.1rem;
  margin-top: .4rem;
  font-size: .8rem;
  color: var(--c-error);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select { border-bottom-color: var(--c-error); }
.field.is-invalid .field__error { opacity: 1; }

.form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  font-size: .88rem;
  color: var(--c-muted);
}
.form__consent input { width: 18px; height: 18px; margin-top: .25rem; accent-color: var(--c-ink); }
.form__consent a { text-decoration: underline; }

.form__foot { display: flex; flex-wrap: wrap; gap: 1rem; }

.form__status {
  display: none;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: .92rem;
  border: 1px solid;
}
.form__status.is-visible { display: block; animation: accIn .3s var(--ease); }
.form__status[data-state="ok"]   { color: var(--c-success); border-color: #cadbd0; background: #f2f7f4; }
.form__status[data-state="err"]  { color: var(--c-error);   border-color: #e6cdc9; background: #fbf4f3; }

.hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 14b. Vyskakovací okno po odeslání ---------- */
.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 25rem);
  color: var(--c-ink);
}
.modal::backdrop {
  background: rgba(20, 18, 16, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal__inner {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 5vw, 2.5rem);
  text-align: center;
}
.modal__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--c-bg-warm);
  border: 1px solid var(--c-line);
  color: var(--c-accent-dk);
}
.modal__icon svg { width: 24px; height: 24px; }
.modal__title {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 4.5vw, 1.9rem);
  font-weight: 500;
  letter-spacing: 0;
}
.modal__text { margin-top: .7rem; color: var(--c-ink-soft); }
.modal__note {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-left: 2px solid var(--c-accent);
  background: var(--c-bg-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .86rem;
  color: var(--c-muted);
  text-align: left;
}
.modal .btn { margin-top: 1.6rem; min-width: 8rem; }

/* Okno se objeví jemným náběhem; při omezeném pohybu se zjeví hned */
.modal[open] .modal__inner { animation: modalIn .28s var(--ease); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 15. Kontaktní dlaždice ---------- */
.contact-list { display: grid; gap: 1rem; }
.contact-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1rem;
  align-items: center;
  line-height: 1.45;
  padding: 1.15rem 1.25rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
a.contact-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-item__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-bg-warm);
  border: 1px solid var(--c-line);
  display: grid; place-items: center;
  color: var(--c-accent-dk);
}
.contact-item__icon svg { width: 19px; height: 19px; }
.contact-item__label {
  display: block;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.contact-item__value { display: block; font-size: 1.02rem; font-weight: 500; word-break: break-word; }

.hours { display: grid; gap: .55rem; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px dashed var(--c-line);
  font-size: .96rem;
}
.hours li:last-child { border-bottom: 0; }
.hours span:last-child { color: var(--c-muted); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  background: #eef4ef;
  color: var(--c-success);
  border: 1px solid #cfe0d5;
  font-size: .84rem;
  font-weight: 500;
}
.status-pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 rgba(63, 107, 82, .5);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(63, 107, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 107, 82, 0); }
}

/* ---------- 16. Vzdělání / timeline ---------- */
.timeline { position: relative; display: grid; gap: 1.5rem; padding-left: 1.6rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 4px; top: .55rem; bottom: .55rem;
  width: 1px;
  background: var(--c-line);
}
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -1.6rem; top: .55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1.5px solid var(--c-accent);
}
.timeline__year {
  display: block;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-dk);
  margin-bottom: .15rem;
}
.timeline__text { font-size: .97rem; color: var(--c-ink-soft); }

/* ---------- 17. CTA pruh ---------- */
.cta {
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 6vw, 4rem);
  text-align: center;
}
.cta__title {
  font-family: var(--f-serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.15;
}
.cta__text { margin-top: 1rem; color: rgba(255, 255, 255, .78); max-width: 52ch; margin-inline: auto; }
.cta__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.cta__actions .btn { --btn-bg: var(--c-white); --btn-fg: var(--c-ink); }
.cta__actions .btn--light { --btn-bg: transparent; --btn-fg: var(--c-white); }

.section--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/citat.jpg");
  background-size: cover;
  background-position: center;
}
.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 18, 16, .86) 0%, rgba(20, 18, 16, .78) 100%);
}

/* ---------- 18. Patička ---------- */
/* Tmavá a teplá — uzavírá stránku a navazuje na černá tlačítka
   i na tmavý pruh s citátem. Odstín není čistě neutrální, ale mírně
   dohněda, aby ladil s pískovým akcentem a barvami fotografií. */
.footer {
  --f-fg:      #f2efea;
  --f-muted:   rgba(242, 239, 234, .62);
  --f-line:    rgba(242, 239, 234, .14);
  --f-accent:  #c9b598;

  position: relative;
  background: #201d1a;
  color: var(--f-fg);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}
/* Vlásková linka v akcentní barvě odděluje patičku od obsahu nad ní */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent) 0%, rgba(154, 133, 112, .25) 45%, transparent 100%);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.35fr 1.1fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
@media (max-width: 1020px) { .footer__grid { grid-template-columns: 1fr 1fr; } }


.footer__brand-col { max-width: 34ch; }

.footer__brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--f-serif);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0;
}
.footer__mark { display: block; width: 36px; height: 36px; flex: none; }
.footer__desc { margin-top: .9rem; font-size: .93rem; color: var(--f-muted); }

.footer__pill {
  margin-top: 1.2rem;
  background: rgba(129, 176, 146, .12);
  border-color: rgba(160, 200, 176, .35);
  color: #a8cdb6;
}

.footer__title {
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--f-accent);
  margin-bottom: 1.15rem;
}
.footer__links { display: grid; gap: .65rem; font-size: .95rem; }

.footer__links a {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .6rem;
  align-items: baseline;
  color: rgba(242, 239, 234, .82);
  transition: color .2s var(--ease);
}
.footer__links a:hover { color: #fff; }
.footer__links a:hover .footer__price { color: var(--f-accent); }
.footer__price {
  font-size: .82rem;
  color: var(--f-muted);
  white-space: nowrap;
  transition: color .2s var(--ease);
}

.footer__hours {
  margin-top: 1.1rem;
  display: grid;
  gap: .4rem;
  font-size: .9rem;
}
.footer__hours li { display: grid; grid-template-columns: 4.6em 1fr; gap: .5rem; }
.footer__hours span:first-child { color: rgba(242, 239, 234, .82); }
.footer__hours span:last-child { color: var(--f-muted); }

.footer__cta { margin-top: 1.35rem; padding: .7rem 1.4rem; font-size: .88rem; }

.footer__note {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: 1.05rem 1.25rem;
  border-left: 2px solid var(--c-accent);
  background: rgba(242, 239, 234, .05);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .86rem;
  color: var(--f-muted);
  max-width: 78ch;
}
.footer__note a { color: var(--f-accent); font-weight: 500; text-decoration: underline; }
.footer__note a:hover { color: #fff; }

.footer__bottom {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--f-line);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--f-muted);
}

/* Na telefonu zůstávají dva sloupce, jen značka je přes celou šířku.
   Patička se tím zkrátí zhruba o třetinu, aniž by z ní něco zmizelo. */
@media (max-width: 620px) {
  .footer { padding-block: 2.25rem 1.25rem; }
  .footer__grid { gap: 1.6rem 1.25rem; }
  .footer__brand-col { grid-column: 1 / -1; max-width: none; }
  /* Popis opakuje to, co stránka říká výš — na malém displeji jen zabírá místo */
  .footer__desc { display: none; }
  .footer__pill { margin-top: .9rem; }
  .footer__title { margin-bottom: .7rem; }
  .footer__links { font-size: .92rem; gap: .1rem; }
  /* Odkazy stačí sevřenější — plocha pro palec zůstává nad 32 px */
  .footer__links a { padding-block: .32rem; }
  /* Kontakt přes celou šířku, ať vedle něj nezůstává prázdné pole */
  .footer__grid > div:last-of-type { grid-column: 1 / -1; }
  /* Ceny u služeb by lámaly řádek na dva; v ceníku jsou stejně vidět */
  .footer__price { display: none; }
  .footer__hours { margin-top: .8rem; }
  /* K objednání vede tlačítko výš na stránce i položka v menu */
  .footer__cta { display: none; }
  .footer__note { margin-top: 1.5rem; padding: .85rem 1rem; font-size: .82rem; }
  .footer__bottom { margin-top: 1.4rem; padding-top: 1.1rem; gap: .35rem; }
}

@media (max-width: 380px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- 19. Tlačítko nahoru ---------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Pískový odstín je čitelný na světlých sekcích i na tmavé patičce,
     přes kterou tlačítko na konci stránky plave. */
  background: var(--c-accent-dk);
  color: var(--c-white);
  border: 0;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-ink); }
.to-top svg { width: 17px; height: 17px; }

/* ---------- 20. Animace při scrollu ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* =========================================================
   22. Mobil — hutnější rozvržení informací
   Na úzkých displejích se obsah nesmí jen "zúžit a natáhnout".
   Karty přecházejí do vodorovného tvaru, ikony si sedají vedle
   nadpisů a hlavní stránka se tím zkrátí zhruba na polovinu.
   ========================================================= */
@media (max-width: 620px) {

  /* --- Úvodní obrazovka ---
     Fotografie zabírá horní část a je zmenšená, takže je ze záběru vidět
     víc než jen výřez. Dole se měkce rozplyne do tmavého podkladu, na
     kterém leží text — nevzniká tak ostrý řez přes celou šířku. */
  .hero {
    align-items: end;
    /* Spodní odsazení počítá s tím, že lišta prohlížeče ukrojí kus okna;
       tlačítka tak zůstanou vidět i při jejím zobrazení. */
    padding-block: 3.5rem clamp(3.5rem, 15vh, 9rem);
    background: #201d1a;
  }
  .hero__bg {
    /* Široká fotografie se do svislé obrazovky nevejde, aniž by se musela
       silně přiblížit. Na telefonu proto nastupuje snímek na výšku, který
       plochu vyplní celou a přitom je z něj vidět skoro celá šířka záběru. */
    background-image:
      url("../img/hero-mobil.jpg"),
      linear-gradient(160deg, #6f6257 0%, #a08f7e 45%, #cbbfae 100%);
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
    transform: none;
    animation: none;
    /* Fotografie sahá až ke spodnímu okraji obrazovky, jen postupně
       slábne. Dole tak nezůstane plochá tmavá plocha a přechod přesto
       není ostrý — text nad ní drží díky houstnoucímu překryvu. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%,
                                        rgba(0, 0, 0, .74) 72%,
                                        rgba(0, 0, 0, .5) 88%, rgba(0, 0, 0, .38) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%,
                                rgba(0, 0, 0, .74) 72%,
                                rgba(0, 0, 0, .5) 88%, rgba(0, 0, 0, .38) 100%);
  }
  .hero .eyebrow { letter-spacing: .13em; font-size: .68rem; margin-bottom: .8rem; }
  .hero__title { max-width: none; }
  .hero__text { margin-top: 1.05rem; font-size: 1.05rem; }

  .hero__actions {
    margin-top: 1.9rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  /* Šířka podle obsahu, ne přes celou plochu — tlačítka tak nepůsobí
     jako dva pruhy přes obrazovku. */
  .hero__actions .btn { width: auto; }

  /* Údaje o dostupnosti na mobilu úvodní obrazovku jen zatěžovaly —
     najdete je v patičce a na stránce Kontakt. */
  .hero__meta { display: none; }

  /* --- Hodnoty: ikona vedle nadpisu, ne nad ním --- */
  .feature {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: .3rem .9rem;
    align-items: center;
  }
  .feature__icon { width: 40px; height: 40px; grid-row: 1; }
  .feature__icon svg { width: 18px; height: 18px; }
  .feature__title { grid-column: 2; align-self: center; }
  .feature__text { grid-column: 1 / -1; font-size: .92rem; }

  /* --- Kroky: užší číslo, méně mrtvého místa --- */
  .step { grid-template-columns: 36px 1fr; gap: .9rem; }
  .step__num { width: 36px; height: 36px; font-size: .82rem; }
  .steps { gap: 1.25rem; }

  /* --- Formulář: sevřenější, ať se vejde na méně obrazovek --- */
  .form__row--names { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .form__row { gap: 1rem; }
  .form { gap: 1rem; margin-top: 1.4rem; }
  .form-card { padding: 1.3rem 1.2rem 1.5rem; }
  .field__label { margin-bottom: .3rem; }
  .field input, .field textarea, .field select { padding: .62rem .2rem; }
  .field textarea { min-height: 104px; }
  .form__consent { font-size: .84rem; gap: .6rem; }
  /* Nápověda v poli Zpráva říká totéž — na telefonu stačí jednou */
  .form-card__intro { display: none; }

  /* Místo pro chybovou hlášku se nedrží dopředu — na malém displeji
     je každý ušetřený řádek znát; hláška si prostor vezme až vznikne. */
  .field__error { min-height: 0; }
  .field.is-invalid .field__error { min-height: 1.1rem; }

  /* Odeslání přes celou šířku: větší plocha pro palec */
  .form__foot .btn { width: 100%; }

  /* --- Svislé mezery mezi sekcemi o něco menší --- */
  :root { --sec-y: 3.25rem; }
}

@media (max-width: 380px) {
  .form__row--names { grid-template-columns: 1fr; }
}

/* ---------- 21. Tisk ---------- */
@media print {
  .header, .footer, .to-top, .hero__actions, .cta { display: none !important; }
  body { color: #000; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}