/* =========================================================================
   XENI RELAXENI — styl webu
   Tokeny odpovídají Figma souboru "Xeni Relaxeni — Web redesign".
   Žádná barva ani velikost se pod tímto blokem nesmí objevit natvrdo.
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- barvy: přesně podle Figmy, nic dopočítaného --- */
  --barva-pozadi:        #fffbfb;
  --barva-povrch:        #ffffff;
  --barva-modra:         #004976;
  --barva-tmava:         #091a38;
  --barva-fialova:       #885495;
  --barva-fialova-tmava: #6e4079;   /* jen :hover, v návrhu není */
  /* Návrh má #3ba894. Bílý text na něm dává 2,91:1 a nadpisek na světlé
     kartě 2,71:1 — obojí propadá WCAG 2.2 AA (potřeba 4,5:1). Ztmaveno
     na #2a7365 → 5,62:1 a 5,24:1. Odstín zůstává, jen je tmavší. */
  --barva-zelena:        #2a7365;
  --barva-zelena-navrh:  #3ba894;   /* původní hodnota z Figmy, nepoužitá */
  --barva-zelena-tmava:  #1f5a50;   /* :hover */
  --barva-text:          #4f5766;
  --barva-linka:         #e0e3eb;

  --tint-modra:   #f0f7ff;
  --tint-fialova: #f5f0fc;
  --tint-zelena:  #edfaf7;
  --tint-ruzova:  #fce8f0;

  /* --- písmo: velikost/řádkování 1:1 z Figmy (desktop 1440) --- */
  --pismo: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --v-h1:          clamp(2rem, 0.8rem + 3.2vw, 2.875rem);   /* 46 */
  --v-h1-radek:    1.283;
  --v-sluzby:      clamp(1.375rem, 1.1rem + 0.7vw, 1.625rem);   /* 26 */
  --v-omne:        clamp(1.625rem, 1rem + 1.6vw, 2.25rem);      /* 36 */
  --v-handmade:    clamp(1.625rem, 1.05rem + 1.45vw, 2.125rem); /* 34 */
  --v-kontakt:     clamp(1.5rem, 1.15rem + 0.9vw, 1.75rem);     /* 28 */
  --v-znacka:      2rem;        /* 32 — název v hlavičce */
  --v-znacka-pata: 1.375rem;    /* 22 — název v patičce */
  --v-h3:          1.1875rem;   /* 19 — titulek velké karty */
  --v-titulek:     0.9375rem;   /* 15 — titulek akordeonu */
  --v-uvodni:      clamp(1rem, 0.95rem + 0.25vw, 1.125rem);  /* 18 — hero */
  --v-telo:        1rem;        /* 16 */
  --v-mensi:       0.9375rem;   /* 15 */
  --v-karta:       0.875rem;    /* 14 — popis velké karty */
  --v-meta:        0.8125rem;   /* 13 — nadpisy patičky, eyebrow handmade */
  --v-drobny:      0.75rem;     /* 12 — popis akordeonu, odkazy v patičce, menu */
  --v-copy:        0.6875rem;   /* 11 — copyright */

  --radek-telo: 1.625;
  --radek-nadpis: 1.28;

  /* --- rozměry --- */
  --max-sirka:  1200px;
  --max-uzsi:   1050px;
  --okraj:      clamp(1.25rem, 0.75rem + 2vw, 3.75rem);
  --mezera-sekce: clamp(3.5rem, 2rem + 5vw, 5.5rem);

  --radius-karta:    24px;
  --radius-mala:     12px;
  --radius-obrazek:  20px;
  --radius-pilulka:  999px;

  --stin-karta: 0 1px 2px rgb(9 26 56 / 4%);
  --prechod: 180ms ease;
}

/* =========================== reset =========================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--barva-pozadi);
  color: var(--barva-text);
  font-family: var(--pismo);
  font-size: var(--v-telo);
  line-height: var(--radek-telo);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--barva-modra);
  font-weight: 700;
  line-height: var(--radek-nadpis);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--barva-fialova); }
a:hover { color: var(--barva-fialova-tmava); }

button { font: inherit; color: inherit; }

:target { scroll-margin-top: 7rem; }

/* viditelné zaostření — na tomhle webu obzvlášť záleží */
/* Tmavá modř má vysoký kontrast na světlém pozadí i vedle fialového
   a zeleného tlačítka. Fialový rámeček na fialovém tlačítku zanikal. */
:focus-visible {
  outline: 3px solid var(--barva-tmava);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================== pomocné =========================== */

.obal {
  width: 100%;
  /* --max-sirka je šířka OBSAHU, padding se přičítá — stejně jako ve Figmě,
     kde sekce začínají na 120 px a obsah má 1200 px. */
  max-width: calc(var(--max-sirka) + 2 * var(--okraj));
  margin-inline: auto;
  padding-inline: var(--okraj);
}
.obal--uzsi { max-width: calc(var(--max-uzsi) + 2 * var(--okraj)); }

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

.preskocit {
  position: absolute;
  left: var(--okraj);
  top: -100%;
  z-index: 100;
  background: var(--barva-fialova);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-mala) var(--radius-mala);
  font-weight: 600;
  text-decoration: none;
}
.preskocit:focus { top: 0; color: #fff; }

/* tlačítka */
.tlacitko {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 48px;
  padding: 0.75rem 1.375rem;
  border: 0;
  border-radius: var(--radius-pilulka);
  background: var(--barva-fialova);
  color: #fff;
  font-size: var(--v-mensi);
  font-weight: 600;
  line-height: 1.3334;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--prechod), transform var(--prechod);
}
.tlacitko:hover { background: var(--barva-fialova-tmava); color: #fff; }
.tlacitko--zelene { background: var(--barva-zelena); }
.tlacitko--zelene:hover { background: var(--barva-zelena-tmava); }

.nadpisek {            /* "eyebrow" nad nadpisem */
  margin: 0 0 0.5rem;
  color: var(--barva-fialova);
  font-size: var(--v-karta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4286;
  margin-bottom: 12px;
}

/* dekorativní „flíčky" na pozadí */
.flicek {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 899px) { .flicek { display: none; } }

/* =========================== hlavička =========================== */

.hlavicka {
  position: relative;
  z-index: 10;
  background: var(--barva-pozadi);
}

/* Figma (1440): hlavička 104 px, značka z ní přesahuje dolů až na y=204.
   Kresba x 83..273, název x 248 od y≈33, tagline x 248 od y=121.
   Menu i tlačítko jsou vystředěné na y=52. */
.hlavicka__obal {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  height: 104px;
}

/* Figma (1440): kresba x 83..273 / y 14..204, název x 248 od y=33,
   tagline x 248 od y=121. Kresba je mimo tok, aby netlačila text dolů. */
.znacka {
  position: relative;
  display: block;
  padding-left: 128px;          /* 248 − 120 (levý okraj kontejneru) */
  margin-right: auto;
  text-decoration: none;
  color: var(--barva-modra);
}
.znacka img {
  position: absolute;
  left: -37px;                  /* 83 − 120 */
  top: 14px;
  width: 190px;
  height: 190px;
  max-width: none;
}
.znacka__nazev {
  display: block;
  margin-top: 33px;
  font-size: var(--v-znacka);   /* 32 px */
  font-weight: 700;
  line-height: 0.9375;          /* 30 px */
  letter-spacing: 0.01em;
}
.znacka__popis {
  display: block;
  margin-top: 28px;
  color: var(--barva-tmava);
  font-size: var(--v-mensi);    /* 15 px */
  font-weight: 600;
  line-height: 1.1334;          /* 17 px */
  text-transform: uppercase;
}

/* Menu a tlačítko na jedné řádce — tohle byla ta rozbitá část. */
.navigace {
  display: flex;
  align-items: center;
  align-self: center;
  gap: clamp(1.5rem, 5vw, 5.375rem);   /* ve Figmě 86 px mezi menu a tlačítkem */
}

.menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.menu a {
  color: var(--barva-tmava);
  font-size: var(--v-drobny);      /* 12 px jako ve Figmě */
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--prechod), border-color var(--prechod);
  line-height: 1.5;
}
.menu a:hover,
.menu a[aria-current="page"] { color: var(--barva-fialova); }

/* užší okna: značka se musí zmenšit, jinak přeteče */
@media (max-width: 1199px) {
  .znacka { padding-left: 96px; }
  .znacka img { width: 132px; height: 132px; left: -24px; top: 10px; }
  .znacka__nazev { margin-top: 20px; font-size: 1.625rem; }
  .znacka__popis { margin-top: 18px; font-size: 0.8125rem; }
}
@media (max-width: 599px) {
  .znacka { padding-left: 62px; }
  .znacka img { width: 84px; height: 84px; left: -16px; top: 6px; }
  .znacka__nazev { margin-top: 12px; font-size: 1.25rem; }
  .znacka__popis { margin-top: 10px; font-size: 0.6875rem; }
}

.prepinac {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: none;
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius-mala);
  cursor: pointer;
}
.prepinac__carky, .prepinac__carky::before, .prepinac__carky::after {
  display: block;
  width: 20px; height: 2px;
  background: var(--barva-tmava);
  border-radius: 2px;
  transition: transform var(--prechod), opacity var(--prechod);
}
.prepinac__carky::before, .prepinac__carky::after { content: ""; position: absolute; }
.prepinac__carky::before { transform: translateY(-6px); }
.prepinac__carky::after  { transform: translateY(6px); }
.prepinac[aria-expanded="true"] .prepinac__carky { background: transparent; }
.prepinac[aria-expanded="true"] .prepinac__carky::before { transform: rotate(45deg); }
.prepinac[aria-expanded="true"] .prepinac__carky::after  { transform: rotate(-45deg); }

@media (max-width: 899px) {
  .prepinac { display: inline-flex; position: relative; }
  .navigace {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--okraj) 1.5rem;
    background: var(--barva-pozadi);
    border-bottom: 1px solid var(--barva-linka);
    box-shadow: 0 12px 24px rgb(9 26 56 / 8%);
  }
  .navigace[data-otevreno] { display: flex; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a {
    padding: 0.875rem 0.25rem;
    border-bottom: 1px solid var(--barva-linka);
    font-size: var(--v-drobny);
  }
  .menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--barva-linka); }
  .navigace .tlacitko { margin-top: 1rem; justify-content: center; }
}

/* =========================== hero =========================== */

.hero { position: relative; padding-block: clamp(2.5rem, 1rem + 5vw, 4.5rem) 0; }

.hero__text { max-width: 38.5rem; }
.hero__nadpisek {
  margin-bottom: 23px;         /* Figma: eyebrow končí na 122, H1 začíná na 145 */
  font-size: var(--v-mensi);
  line-height: 1.4667;
}

/* Návrh láme H1 napevno na tři řádky; na úzkých oknech ať se zalomí sám. */
.zlom-desktop { display: none; }
@media (min-width: 900px) { .zlom-desktop { display: inline; } }

.hero h1 { font-size: var(--v-h1); margin-bottom: 35px;
  line-height: 1.2826;
}
.hero h1 .zvyraz { color: var(--barva-fialova); }

.hero__perex { font-size: var(--v-uvodni); line-height: 1.6111; }
.hero__perex p:not(:last-child) { margin-bottom: 29px; }
/* Ve Figmě má tučný text stejnou barvu jako zbytek odstavce — jen jiný
   řez. Dřív tu bylo ztmavení na --barva-tmava, což v návrhu není. */
.hero__perex b { font-weight: 700; }

.hero .tlacitko { margin-top: 42px; }

.hero__foto {
  margin-top: 2.5rem;
  border-radius: var(--radius-obrazek);
  overflow: hidden;
}
/* Vlnitá hrana je součástí obrázku a je vlevo. Bez „left" ji cover
   ořízne z obou stran stejně a fotka vypadá hranatá na každé šířce
   kromě přesně 1440 px. */
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(48vw, 43.125rem);
    align-items: start;
    min-height: 40.625rem;   /* 650 px jako ve Figmě */
    padding-block: 0;
  }
  /* Text drží levý okraj společný s ostatními sekcemi, fotka doteče k hraně okna. */
  .hero__obal {
    max-width: none;
    margin: 0;
    padding-inline-start: max(var(--okraj), calc((100vw - var(--max-sirka)) / 2));
    padding-inline-end: 1rem;
  }
  .hero__text { padding-block: 100px 0; max-width: 38.375rem; container-type: inline-size; }
  /* Ve Figmě má H1 46 px při sloupci 614 px = 7,49 %. Když se sloupec zúží,
     musí se zmenšit i písmo, jinak se vynucený zlom zalomí podruhé. */
  @supports (container-type: inline-size) {
    /* Návrh láme H1 napevno na tři řádky; na úzkých oknech ať se zalomí sám. */
.zlom-desktop { display: none; }
@media (min-width: 900px) { .zlom-desktop { display: inline; } }

.hero h1 { font-size: min(7.49cqw, 2.875rem); }
  }
  .hero__foto {
    align-self: stretch;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
}

/* =========================== služby =========================== */

.sluzby { position: relative; padding-block: clamp(2rem, 1rem + 2.2vw, 45px) 0; }

.sluzby__nadpis {
  margin-bottom: clamp(1.25rem, 0.75rem + 1.6vw, 36px);
  font-size: var(--v-sluzby);
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.3077;
}

.sluzby__mrizka {
  display: grid;
  gap: clamp(1.25rem, 0.5rem + 2vw, 1.875rem);
}
@media (min-width: 900px) {
  .sluzby__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.sluzby__sloupec { display: grid; gap: 8px; }

/* velká karta skupiny */
.skupina {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 1.6vw, 34px);
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 31px);
  border-radius: var(--radius-obrazek);
  margin-bottom: clamp(1rem, 0.5rem + 1.7vw, 35px);
  min-height: 210px;
}
.skupina--modra   { background: var(--tint-modra); }
.skupina--fialova { background: var(--tint-fialova); }

.skupina__ikona {
  flex-shrink: 0;
  width: 98px; height: 98px;
  border: 1px solid currentColor;
  border-radius: 32px;
  overflow: hidden;
}
.skupina--modra .skupina__ikona   { color: var(--barva-modra); }
.skupina--fialova .skupina__ikona { color: var(--barva-fialova); }
.skupina__ikona img { width: 100%; height: 100%; object-fit: cover; }

.skupina h3 {
  margin-bottom: 0.5rem;
  font-size: var(--v-h3);
  line-height: 1.3684;
  text-transform: uppercase;
}
.skupina--fialova h3 { color: var(--barva-fialova); }
.skupina p { font-size: var(--v-karta); line-height: 1.5714; }

@media (max-width: 479px) {
  .skupina { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .skupina__ikona { width: 72px; height: 72px; border-radius: 24px; }
}

/* =========================== akordeon =========================== */

.akordeon { display: grid; gap: 8px; }

.akordeon__polozka {
  min-height: 72px;
  background: var(--barva-povrch);
  border: 1px solid var(--barva-linka);
  border-radius: var(--radius-mala);
  transition: border-color var(--prechod), box-shadow var(--prechod);
}

.akordeon__nadpis { margin: 0; font-size: inherit; font-weight: inherit; }

.akordeon__tlacitko {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 13px 14px;
  background: none;
  border: 0;
  border-radius: var(--radius-mala);
  text-align: left;
  cursor: pointer;
}

.akordeon__ikona {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: var(--radius-pilulka);
  background: var(--tint-fialova);
  margin-right: 18px;
}
.akordeon__polozka:nth-child(even) .akordeon__ikona { background: var(--tint-modra); }

.akordeon__text { flex: 1; min-width: 0; }

.akordeon__titulek {
  display: block;
  color: var(--barva-modra);
  font-size: var(--v-titulek);
  font-weight: 700;
  line-height: 1.3334;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.akordeon__polozka:nth-child(even) .akordeon__titulek { color: var(--barva-fialova); }

.akordeon__popis {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--v-drobny);
  line-height: 1.5;
}

.akordeon__znak {
  position: relative;
  flex-shrink: 0;
  width: 16px; height: 24px;
  margin-top: 0.25rem;
  margin-left: 2px;
}
.akordeon__znak::before, .akordeon__znak::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 14px; height: 2px;
  translate: -50% -50%;
  background: var(--barva-modra);
  border-radius: 2px;
  transition: rotate var(--prechod), opacity var(--prechod);
}
.akordeon__znak::after { rotate: 90deg; }
.akordeon__polozka:nth-child(even) .akordeon__znak::before,
.akordeon__polozka:nth-child(even) .akordeon__znak::after { background: var(--barva-fialova); }
[aria-expanded="true"] .akordeon__znak::after { rotate: 0deg; opacity: 0; }

/* Rozbalený panel v návrhu není — Figma kreslí jen zavřený stav. Text je
   tu proto v 15 px, ne ve 12 jako teaser: jsou to tři až čtyři odstavce
   souvislého textu a na webu pro slabozraké se dvanáctka číst nedá. */
.akordeon__panel {
  padding: 0 16px 18px;
  border-top: 1px solid var(--barva-linka);
  margin: 0 16px;
}
.akordeon__panel > * { margin-inline: -16px; }
.akordeon__panel p,
.akordeon__panel li {
  font-size: var(--v-mensi);
  line-height: 1.6;
}
.akordeon__panel p { margin: 0 0 0.85em; }
.akordeon__panel p:first-child { padding-top: 14px; }

.akordeon__otazka {
  color: var(--barva-modra);
  font-weight: 600;
}
.akordeon__polozka:nth-child(even) .akordeon__otazka { color: var(--barva-fialova); }

.akordeon__seznam {
  margin: 0 0 1em;
  padding-left: 1.35em;
  list-style: disc;
}
.akordeon__seznam li { margin-bottom: 0.2em; }

.akordeon__panel .tlacitko { margin-top: 0.35rem; }

.tlacitko--maly {
  min-height: 40px;
  padding: 0.55rem 1.1rem;
  font-size: var(--v-drobny);
}

/* =========================== o mně =========================== */

.o-mne { padding-block: clamp(2.5rem, 1.5rem + 3vw, 70px) 0; }

.o-mne__karta {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3.4vw, 65px);
  padding: clamp(24px, 1rem + 2vw, 45px) clamp(20px, 1rem + 2.75vw, 55px);
  background: var(--tint-fialova);
  border-radius: var(--radius-karta);
  min-height: 360px;
  align-items: start;
}
@media (min-width: 768px) {
  .o-mne__karta { grid-template-columns: 270px minmax(0, 1fr); align-items: start; }
}

.o-mne__portret {
  width: min(270px, 60vw);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
}
/* Ořez přes object-fit, ne přes absolutní pozici + overflow.
   Výřez je stejný jako ve Figmě (obrázek 270×405, vidět od 100 px),
   ale prvek má rozměr rámečku — jinak VoiceOver kreslí rámeček kolem
   celé nezkrácené fotky a ten přesahuje přes půl obrazovky. */
.o-mne__portret img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 74%;
}

/* Figma má mezi odstavci prázdný řádek 26 px, ne 1em */
.o-mne p:not(:last-child):not(.nadpisek),
.handmade p:not(.nadpisek) { margin-bottom: 26px; }
.handmade__karta > div:first-child { padding-block: 25px 0; }
.handmade__karta > div:first-child > p:last-of-type { margin-bottom: 0; }
.o-mne__karta > div:last-child { padding-top: 13px; }
.o-mne h2 { margin-bottom: 16px; font-size: var(--v-omne);
  line-height: 1.2222;
}

/* =========================== handmade =========================== */

.handmade { position: relative; padding-block: clamp(2rem, 1.5rem + 1.5vw, 40px) 0; }

.handmade__karta {
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.2vw, 26px);
  padding: clamp(20px, 1rem + 1vw, 30px) clamp(20px, 1rem + 2.4vw, 50px)
           clamp(24px, 1rem + 1.6vw, 38px) clamp(20px, 1rem + 2.75vw, 55px);
  background: var(--tint-zelena);
  border-radius: var(--radius-karta);
  min-height: 450px;
}
@media (min-width: 860px) {
  .handmade__karta { grid-template-columns: minmax(0, 1fr) minmax(0, 33.125rem); align-items: center; }
}

.handmade .nadpisek { margin-bottom: 13px; color: var(--barva-zelena); font-size: var(--v-meta); line-height: 1.5385; }
.handmade h2 { margin-bottom: 15px; font-size: var(--v-handmade);
  line-height: 1.2353;
}
.handmade .tlacitko { margin-top: 37px; }

.handmade__foto {
  border-radius: var(--radius-obrazek);
  overflow: hidden;
  aspect-ratio: 530 / 382;
}
/* Stejný důvod jako u portrétu: prvek musí mít rozměr rámečku.
   Výřez odpovídá Figmě; zanikla jen ta ~6% svislá roztaženost, kterou
   návrh měl — Lighthouse ji hlásil jako vadný poměr stran a byl to
   nejspíš omyl při vkládání fotky do Figmy. */
.handmade__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 84%;
}

/* =========================== kontakt =========================== */

.kontakt { position: relative; padding-block: clamp(2rem, 1.5rem + 1.2vw, 35px) clamp(2rem, 1.5rem + 1.2vw, 35px); }

.kontakt__karta {
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 35px);
  align-items: center;
  padding: clamp(24px, 1rem + 1.85vw, 42px) clamp(20px, 1rem + 3.1vw, 60px)
           clamp(20px, 1rem + 1.2vw, 33px) clamp(20px, 1rem + 2vw, 45px);
  background: var(--tint-ruzova);
  border-radius: var(--radius-karta);
  min-height: 190px;
}
@media (min-width: 768px) {
  .kontakt__karta { grid-template-columns: 100px minmax(0, 1fr); }
}
@media (min-width: 1040px) {
  .kontakt__karta { grid-template-columns: 100px minmax(0, 1fr) auto; }
}

.kontakt__ikona { width: 100px; height: 100px; border-radius: 50%; overflow: hidden;
  align-self: start;
  margin-top: 3px;
}
.kontakt__ikona img { width: 100%; height: 100%; object-fit: cover; }

.kontakt h2 {
  margin-bottom: 7px;
  color: var(--barva-fialova);
  font-size: var(--v-kontakt);
  text-transform: uppercase;
  line-height: 1.2857;
}
.kontakt p { font-size: var(--v-mensi); line-height: 1.6; }
.kontakt__karta > .tlacitko { justify-self: start; white-space: nowrap; }

/* =========================== patička =========================== */

.paticka {
  padding-block: 0 clamp(1rem, 0.7rem + 1vw, 23px);
  border-top: 0;
}

.paticka__mrizka {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
@media (min-width: 900px) {
  /* Figma: sloupce na x = 120, 348, 538, 728, 918, 1107 */
  .paticka__mrizka { grid-template-columns: 228px 190px 190px 190px 189px minmax(0, 1fr); }
  /* <nav> se musí z mřížky „odstranit", aby v ní byly přímo sloupce odkazů */
  .paticka__odkazy { display: contents; }
  /* Ve Figmě kresba sahá pod úroveň copyrightu, proto značka přes dva řádky. */
  .paticka__znacka { grid-row: 1 / span 2; }
  .paticka__spodek { grid-column: 2 / -1; align-self: start; }
}
@media (max-width: 899px) {
  .paticka__odkazy { display: grid; grid-column: 1 / -1; gap: 1.75rem;
                     grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .paticka__spodek { grid-column: 1 / -1; }
}

.paticka__znacka { display: flex; flex-direction: column; gap: 2px; }
.paticka__znacka .znacka__nazev {
  margin-top: 0;                 /* nedědit odsazení z hlavičkové varianty */
  color: var(--barva-modra);
  font-size: var(--v-znacka-pata);
  line-height: 1.0909;
}
.paticka__znacka img { width: 121px; height: 121px; max-width: none; }

.paticka h2 {
  margin-bottom: 15px;
  font-size: var(--v-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5385;
}

.paticka li { font-size: var(--v-drobny); line-height: 24px; }
.paticka li + li { margin-top: 0; }
.paticka__mrizka a {
  display: inline-block;   /* aby měl odkaz vlastní výšku, ne jen výšku textu */
  min-height: 24px;        /* WCAG 2.2 AA 2.5.8 */
  color: var(--barva-text);
  font-size: var(--v-drobny);
  text-decoration: none;
  line-height: 24px;
}
.paticka__mrizka a:hover { color: var(--barva-fialova); text-decoration: underline; }

.paticka__spodek {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 41px);
  padding-top: 0;
  border-top: 0;
  font-size: var(--v-copy);
  line-height: 1.6364;
}
.paticka__spodek a { color: var(--barva-text); text-decoration: none; line-height: 1.6364; }
.paticka__spodek a:hover { color: var(--barva-fialova); text-decoration: underline; }

/* =========================== textové podstránky =========================== */

.text-stranka { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--mezera-sekce); }
.text-stranka .obal { max-width: 46rem; }
.text-stranka h1 { margin-bottom: 1.5rem; font-size: var(--v-h2); }
.text-stranka h2 { margin: 2.5rem 0 0.75rem; font-size: var(--v-h3); }
.text-stranka ul { margin: 0 0 1em; padding-left: 1.25rem; list-style: disc; }
.text-stranka li { margin-bottom: 0.35rem; }
.text-stranka .poznamka {
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  background: var(--tint-fialova);
  border-left: 4px solid var(--barva-fialova);
  border-radius: 0 var(--radius-mala) var(--radius-mala) 0;
  font-size: var(--v-drobny);
}

/* =========================== umístění flíčků =========================== */

/* Souřadnice, rozměry i rotace z Figmy, vztažené k příslušné sekci.
   Pozor: rozměr je velikost prvku PŘED rotací — Figma v metadatech
   uvádí obálku až po otočení, což je u −174° o ~45 px víc. */
.flicek--sluzby-vlevo  { left: -95px;  top: -85px;  width: 510px;   height: 613px; }
.flicek--sluzby-vpravo { right: -81px; top: -8px;   width: 608.9px; height: 731.9px; rotate: -179.48deg; }
.flicek--handmade      { left: -23px;  top: -26px;  width: 351px;   height: 421.7px; rotate: 0.08deg; }
.flicek--kontakt       { right: -43px; top: -200px; width: 390.9px; height: 469.8px; rotate: -174.29deg; }

/* =========================== písmo =========================== */
/* Poppins self-hostovaně — kvůli GDPR se nic netahá z Google CDN.
   Dva subsety: latin + latin-ext (české háčky a kroužky jsou v latin-ext). */

@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonty/poppins-400-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: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonty/poppins-400.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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonty/poppins-600-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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonty/poppins-600.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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonty/poppins-700-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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonty/poppins-700.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;
}


/* =================== režim zvýšeného kontrastu ===================
   Když si uživatel v systému zapne „zvýšit kontrast", prohlížeč to
   ohlásí přes prefers-contrast. Ztmavíme text a zvýrazníme hranice. */
@media (prefers-contrast: more) {
  :root {
    --barva-text:   #33394a;   /* 9,4:1 místo 6,9:1 */
    --barva-linka:  #9aa2b4;
  }
  .akordeon__polozka { border-width: 2px; }
  .tlacitko { outline: 2px solid transparent; }   /* viditelné ve Windows HCM */
  :focus-visible { outline-width: 4px; }
  .flicek { opacity: 0.35; }                      /* dekorace nesmí rušit */
}

/* Windows High Contrast / forced colors: průhledný obrys udrží tvar
   tlačítka i tam, kde systém přebije barvy pozadí. */
@media (forced-colors: active) {
  .tlacitko { border: 2px solid currentColor; }
  .akordeon__znak::before, .akordeon__znak::after { background: currentColor; }
  .flicek { display: none; }
}

/* Označený text musí být čitelný i pro slabozrakého uživatele. */
::selection { background: #091a38; color: #fff; }


/* <b> místo <strong>: VoiceOver kvůli sémantice "strong" dělí odstavec
   na samostatné uzly a čte ho po kouscích. Vizuálně je to totožné. */
b { font-weight: 700; }