/* =========================================================================
   Kouzelné Vánoce 2026 — hlavní styly
   Hodnoty odpovídají návrhu ve Figmě:
   https://www.figma.com/design/6qd2Iv4lL3J4KhweEWSp2G
   Psáno mobile-first — základ je pro mobil, @media rozšiřuje na větší displeje.
   ========================================================================= */

/* ------------------------------- PÍSMA ---------------------------------- */
/* Self-hostováno — žádné volání na Google CDN (rychlost + GDPR). */

/* Rozděleno na latin a latin-ext — česká diakritika (ě, š, č, ř, ů, ž)
   je v latin-ext. Prohlížeč stáhne jen to, co na stránce opravdu potřebuje. */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonty/fraunces-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: 'Fraunces';
  src: url('../fonty/fraunces-600-latin-ext.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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;
}

/* Inter je variabilní písmo — jeden soubor pokrývá váhy 400–600. */

@font-face {
  font-family: 'Inter';
  src: url('../fonty/inter-var-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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';
  src: url('../fonty/inter-var-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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;
}

/* ------------------------------- TOKENY --------------------------------- */

:root {
  /* Jehličí */
  --jehlici-900: #0B2119;
  --jehlici-800: #0F3227;
  --jehlici-700: #14453A;
  --jehlici-600: #1A5747;
  --jehlici-500: #22705C;
  --jehlici-linka: #224136;
  --jehlici-linka-slaba: #1E362E;
  --jehlici-obrys: #2E4A40;

  /* Krém */
  --krem-50: #FDFAF5;
  --krem-100: #F7F1E7;
  --krem-200: #EDE2D2;
  --krem-300: #DFD0B8;

  /* Jeřabina */
  --jerabina-700: #7A2419;
  --jerabina-600: #A8342A;
  --jerabina-500: #C24334;

  /* Zlatá */
  --zlata-700: #8A6A22;
  --zlata-600: #B0822C;
  --zlata-500: #C99A3C;
  --zlata-300: #DCB967;
  --zlata-200: #F0DFB4;
  --zlata-tmava: #5C3F0C;
  --zlata-text: #4A3208;
  --zlata-text-svetla: #7A5A18;

  /* Skořice / kakao — doplňkové odstíny z dlaždic a fotoploch */
  --skorice: #8A4A22;
  --kakao: #6B3A24;

  /* Text */
  --text-900: #0B2119;
  --text-700: #2E3A34;
  --text-500: #5C6B63;
  --text-400: #8FA39A;
  --text-300: #93A29A;
  --text-na-tmave: #C6D3CD;
  --text-na-tmave-slaby: #B9C8C1;
  --text-paticka: #C3D0CA;
  --text-paticka-slaby: #7A8E85;

  /* Písma */
  --pismo-nadpis: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --pismo-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Rozměry */
  --obal-sirka: 1280px;
  --obal-odsazeni: 20px;
  --sekce-odsazeni: 56px;
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 18px;
  --radius-xl: 20px;
  --radius-hero: 24px;
  --radius-pilulka: 999px;

  --prechod: 160ms ease;
}

@media (min-width: 768px) {
  :root {
    --obal-odsazeni: 40px;
    --sekce-odsazeni: 72px;
  }
}

@media (min-width: 1100px) {
  :root {
    --obal-odsazeni: 80px;
    --sekce-odsazeni: 96px;
  }
}

/* ------------------------------- ZÁKLAD --------------------------------- */

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

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

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

body {
  margin: 0;
  background: var(--krem-50);
  color: var(--text-900);
  font-family: var(--pismo-text);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; text-decoration: none; }

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.01em;
}

p { margin: 0; }

button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--zlata-300);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.preskocit {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--krem-50);
  color: var(--jehlici-900);
  font-weight: 600;
}

.preskocit:focus {
  left: 12px;
  top: 12px;
}

.obal {
  width: 100%;
  max-width: calc(var(--obal-sirka) + 2 * var(--obal-odsazeni));
  margin-inline: auto;
  padding-inline: var(--obal-odsazeni);
}

/* ------------------------------ HLAVIČKA -------------------------------- */

.hlavicka {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--jehlici-900);
}

.hlavicka__obal {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 75px;
  padding-block: 14px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.logo__znacka {
  width: 22px;
  height: 22px;
  fill: var(--zlata-300);
  flex: none;
}

.logo__text {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--krem-50);
  white-space: nowrap;
}

.menu-prepinac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--jehlici-obrys);
  border-radius: var(--radius-s);
  color: var(--krem-100);
  cursor: pointer;
}

.menu-prepinac__cary,
.menu-prepinac__cary::before,
.menu-prepinac__cary::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--prechod), opacity var(--prechod);
}

.menu-prepinac__cary { position: relative; }

.menu-prepinac__cary::before,
.menu-prepinac__cary::after {
  content: '';
  position: absolute;
  left: 0;
}

.menu-prepinac__cary::before { top: -6px; }
.menu-prepinac__cary::after  { top: 6px; }

.menu-prepinac[aria-expanded="true"] .menu-prepinac__cary { background: transparent; }
.menu-prepinac[aria-expanded="true"] .menu-prepinac__cary::before { top: 0; transform: rotate(45deg); }
.menu-prepinac[aria-expanded="true"] .menu-prepinac__cary::after  { top: 0; transform: rotate(-45deg); }

.navigace {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px var(--obal-odsazeni) 24px;
  background: var(--jehlici-900);
  border-top: 1px solid var(--jehlici-linka);
}

.navigace.je-otevrena { display: block; }

.navigace__seznam a {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--krem-100);
  border-bottom: 1px solid var(--jehlici-linka-slaba);
}

/*
  Aktivní položka menu (Pepův pokyn z 8. 9. 2026 — „ať je vidět, kde jsem").
  Značka `aria-current="page"` byla v generátorech od začátku kvůli čtečkám,
  na 195 stránkách z 202 — jen ji nic nezvýrazňovalo vizuálně. Ostatních
  sedm stránek (homepage, hledání, O nás, Kontakt, Ochrana soukromí, Mapa
  webu, 404) nemá v menu svou položku, takže na nich nesvítí nic. Správně:
  není kam ukázat.

  Na mobilu je menu rozbalený sloupec s linkami pod položkami, takže by se
  podtržení pralo s nimi — tam stačí zlatá barva. Podtržení se přidává až
  na desktopu, v media query níž.
*/
.navigace__seznam a[aria-current="page"] { color: var(--zlata-300); }

/* Na stránce hledání svítí místo položky menu lupa. */
.hledat[aria-current="page"] { border-color: var(--zlata-300); }

.hledat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 9px 18px 9px 16px;
  border: 1px solid var(--jehlici-obrys);
  border-radius: var(--radius-pilulka);
  font-size: 14px;
  font-weight: 500;
  color: var(--zlata-300);
}

.hledat svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

@media (min-width: 1100px) {
  .menu-prepinac { display: none; }

  .navigace {
    display: flex;
    align-items: center;
    gap: 28px;
    position: static;
    padding: 0;
    background: none;
    border: 0;
  }

  .navigace__seznam {
    display: flex;
    align-items: center;
    gap: 26px;
  }

  .navigace__seznam a {
    padding: 0;
    font-size: 15px;
    color: var(--krem-100);
    border: 0;
    transition: color var(--prechod);
  }

  .navigace__seznam a:hover { color: var(--zlata-300); }

  /*
    Zlatá barva sama by aktivní položku nerozeznala od té, nad kterou zrovna
    drží myš — proto na desktopu ještě linka pod ní. Kreslí se pseudoprvkem
    v absolutní pozici, aby nezvětšila položku a menu se mezi stránkami
    neposouvalo. Ze stejného důvodu se nemění ani tučnost písma.
  */
  .navigace__seznam a[aria-current="page"] { position: relative; }

  .navigace__seznam a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--zlata-300);
    border-radius: 1px;
  }

  .hledat { margin-top: 0; transition: border-color var(--prechod); }
  .hledat:hover { border-color: var(--zlata-300); }
}

/* -------------------------------- HERO ---------------------------------- */

.hero {
  background: linear-gradient(135deg, var(--jehlici-900), #14453A);
  color: var(--krem-50);
}

.hero__obal {
  display: grid;
  gap: 40px;
  padding-block: 56px;
}

.stitek {
  display: inline-block;
  margin-bottom: 22px;
  padding: 8px 16px;
  background: #1A3B31;
  border-radius: var(--radius-pilulka);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zlata-200);
}

.hero h1 {
  font-size: clamp(2.25rem, 1.15rem + 4.8vw, 4.25rem);
  color: var(--krem-50);
}

.hero__perex {
  max-width: 34em;
  margin-top: 22px;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  color: var(--text-na-tmave);
}

.hero__akce {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero__foto {
  position: relative;
  aspect-ratio: 544 / 470;
  border-radius: var(--radius-hero);
  overflow: hidden;
  /* Podklad z návrhu — je vidět, dokud nejsou nahrané fotky. */
  background: linear-gradient(140deg, var(--jerabina-600), var(--jerabina-500) 50%, var(--zlata-500));
}

.hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero__foto img.je-videt { opacity: 1; }

@media (min-width: 900px) {
  .hero__obal {
    grid-template-columns: 1fr 544px;
    align-items: center;
    gap: 56px;
    padding-block: 88px;
  }
}

/* ------------------------------ TLAČÍTKA -------------------------------- */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 30px;
  border-radius: var(--radius-pilulka);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: background-color var(--prechod), border-color var(--prechod), color var(--prechod);
}

.tlacitko--primarni {
  background: var(--jerabina-500);
  color: #FFFFFF;
}

.tlacitko--primarni:hover { background: var(--jerabina-600); }

.tlacitko--sekundarni {
  border: 1px solid #3A564B;
  color: var(--krem-100);
}

.tlacitko--sekundarni:hover { border-color: var(--krem-100); }

.tlacitko--obrys {
  padding: 14px 24px;
  border: 1px solid var(--krem-300);
  font-size: 15px;
  color: var(--jehlici-900);
}

.tlacitko--obrys:hover {
  border-color: var(--jehlici-900);
  background: var(--krem-100);
}

.tlacitko--tmave {
  padding: 17px 32px;
  background: var(--jehlici-900);
  color: var(--krem-50);
}

.tlacitko--tmave:hover { background: var(--jehlici-700); }

/* --------------------------- ADVENTNÍ PRUH ------------------------------ */

.advent {
  background: var(--zlata-200);
  color: var(--zlata-tmava);
}

.advent__obal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
  padding-block: 24px;
}

.advent__odpocet {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.advent__popisek {
  font-size: 13px;
  font-weight: 500;
  color: var(--zlata-700);
}

.advent__dny {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  line-height: 1.2;
  color: var(--zlata-tmava);
}

.advent__nedele {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.advent__nedele-polozka {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 20px;
  background: #FFFFFF;
  border-radius: var(--radius-s);
  text-align: center;
}

.advent__poradi {
  font-size: 13px;
  font-weight: 600;
  color: var(--zlata-700);
}

.advent__datum {
  font-size: 12px;
  color: var(--text-500);
}

/* Aktuální adventní neděle — zvýrazněná. Přepíná js/main.js. */
.advent__nedele-polozka.je-aktivni { background: var(--jerabina-500); }
.advent__nedele-polozka.je-aktivni .advent__poradi { color: #FFFFFF; }
.advent__nedele-polozka.je-aktivni .advent__datum  { color: #FBDAD3; }

/* -------------------------------- SEKCE --------------------------------- */

.sekce { padding-block: var(--sekce-odsazeni); }

.sekce--svetla { background: var(--krem-50); }
.sekce--krem   { background: var(--krem-100); }

.sekce--tmava {
  background: var(--jehlici-900);
  color: var(--krem-50);
}

.sekce--bez-spodku { padding-bottom: 0; }
.sekce--bez-vrsku  { padding-top: 36px; }

.sekce__hlavicka {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.sekce__hlavicka--sloupec {
  display: block;
  max-width: 44em;
}

.nadtitulek {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zlata-500);
}

.nadtitulek--tmave-pozadi { color: var(--zlata-300); }

.sekce h2 {
  font-size: clamp(1.75rem, 1.05rem + 3vw, 2.75rem);
  max-width: 18em;
}

.sekce__perex {
  max-width: 42em;
  margin-top: 18px;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  color: var(--text-500);
}

/* -------------------------------- MŘÍŽKY -------------------------------- */
/*
   Karty v jedné řadě musí být stejně vysoké i při různě dlouhém textu.
   Zajišťuje to `align-items: stretch` (výchozí u gridu) + `height: 100%`
   na kartě. Viz „Pravidlo pro copy v kartách" v NAVRH-STRUKTURY.md.
*/

.mrizka {
  display: grid;
  gap: 24px;
}

.mrizka > li { display: flex; }

.mrizka > li > * { width: 100%; }

@media (min-width: 620px) {
  .mrizka--4 { grid-template-columns: repeat(2, 1fr); }
  .mrizka--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .mrizka--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------- FILTRY ----------------------------------- */

.filtry {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.filtr {
  display: inline-block;
  padding: 10px 18px;
  background: var(--krem-100);
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-pilulka);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-700);
  transition: background-color var(--prechod), color var(--prechod), border-color var(--prechod);
}

.filtr:hover {
  border-color: var(--krem-300);
  background: var(--krem-200);
}

.filtr.je-aktivni {
  background: var(--jehlici-900);
  border-color: var(--jehlici-900);
  color: var(--krem-50);
}

/* --------------------------- KARTA RECEPTU ------------------------------ */

.karta-receptu > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform var(--prechod), box-shadow var(--prechod);
}

.karta-receptu > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 33, 25, 0.12);
}

.karta-receptu__foto {
  position: relative;
  display: block;
  aspect-ratio: 302 / 210;
  overflow: hidden;
}

.karta-receptu__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Podklady z návrhu — vidět, dokud nejsou nahrané fotky receptů. */
.karta-receptu__foto[data-odstin="zlata"]    { background: linear-gradient(135deg, #C9A227, #E8CE7A); }
.karta-receptu__foto[data-odstin="jerabina"] { background: linear-gradient(135deg, #B4552F, #DE9A62); }
.karta-receptu__foto[data-odstin="skorice"]  { background: linear-gradient(135deg, #8A4A22, #C2803F); }
.karta-receptu__foto[data-odstin="kakao"]    { background: linear-gradient(135deg, #6B3A24, #A56642); }

.odznak {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  background: #FFFFFF;
  border-radius: var(--radius-pilulka);
  font-size: 11px;
  font-weight: 600;
  color: var(--jehlici-900);
}

.karta-receptu__telo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 22px 22px 24px;
}

.karta-receptu__nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.24;
  color: var(--jehlici-900);
}

.karta-receptu__popis {
  font-size: 14px;
  color: var(--text-500);
}

.karta-receptu__meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  color: var(--text-500);
}

.karta-receptu__meta strong {
  font-weight: 500;
  color: var(--text-700);
}

/* ------------------------------ TRADICE --------------------------------- */

.tradice__obal {
  display: grid;
  gap: 36px;
}

.tradice__foto {
  margin: 0;
  aspect-ratio: 520 / 420;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(140deg, var(--jehlici-600), var(--zlata-500));
}

.tradice__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tradice h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 2.625rem);
  color: var(--krem-50);
}

.tradice__perex {
  max-width: 40em;
  margin-top: 20px;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  color: var(--text-na-tmave-slaby);
}

.odkazy-seznam { margin-top: 28px; }

.odkazy-seznam a {
  display: block;
  padding-block: 16px;
  border-top: 1px solid var(--jehlici-linka);
  font-size: 16px;
  font-weight: 500;
  color: var(--krem-100);
  transition: color var(--prechod), padding-left var(--prechod);
}

.odkazy-seznam li:last-child a { border-bottom: 1px solid var(--jehlici-linka); }

.odkazy-seznam a:hover {
  color: var(--zlata-300);
  padding-left: 6px;
}

@media (min-width: 900px) {
  .tradice__obal {
    grid-template-columns: 520px 1fr;
    align-items: center;
    gap: 64px;
  }
}

/* ------------------------------ DLAŽDICE -------------------------------- */

.dlazdice {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (min-width: 700px)  { .dlazdice { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .dlazdice { grid-template-columns: repeat(5, 1fr); } }

.dlazdice__polozka {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: 100%;
  min-height: 100px;
  padding: 26px 24px;
  border-radius: var(--radius-m);
  color: var(--krem-50);
  transition: transform var(--prechod);
}

.dlazdice__polozka:hover { transform: translateY(-3px); }

.dlazdice__nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
}

.dlazdice__pocet {
  font-size: 13px;
  color: #E4D9C4;
}

.dlazdice__polozka[data-barva="jehlici-700"] { background: var(--jehlici-700); }
.dlazdice__polozka[data-barva="jehlici-600"] { background: var(--jehlici-600); }
.dlazdice__polozka[data-barva="jehlici-500"] { background: var(--jehlici-500); }
.dlazdice__polozka[data-barva="jehlici-800"] { background: var(--jehlici-800); }
.dlazdice__polozka[data-barva="jerabina-600"] { background: var(--jerabina-600); }
.dlazdice__polozka[data-barva="jerabina-500"] { background: var(--jerabina-500); }
.dlazdice__polozka[data-barva="zlata-600"]   { background: var(--zlata-600); }
.dlazdice__polozka[data-barva="skorice"]     { background: var(--skorice); }
.dlazdice__polozka[data-barva="text-700"]    { background: var(--text-700); }

/*
  Zlata-700 místo světlejší zlata-500 — bílý text na zlata-500 má kontrast
  jen 2,47 (pod hranicí čitelnosti), na zlata-700 už 4,84 (splňuje WCAG AA
  i pro drobný text). Díky tomu může mít celá dlaždicová mřížka jednotně
  bílý text místo výjimky s tmavým.
*/
.dlazdice__polozka[data-barva="zlata-700"] { background: var(--zlata-700); }

/* ------------------------- STRÁNKA 404 ---------------------------------- */
/*
   Dvousloupcový layout: vlevo text a rozcestník, vpravo fotka na výšku.
   Původně byla fotka široký pruh přes celou šířku pod perexem — vypadalo to
   jako článek s obrázkem a hlavně sežral celou první obrazovku, takže
   z rozcestníku (což je jediný užitečný obsah téhle stránky) nebylo nad
   ohybem vidět nic. Všiml si toho Šimon.

   Sloupce jsou 1fr a 380 px, ne půl na půl: text je tu důležitější a
   rozcestník potřebuje šířku, aby se popisky u sekcí nelámaly.

   Fotka je oříznutá už v souboru (viz _nastroje/zpracuj-fotku-404.ps1), ne
   přes object-fit — prohlížeč by jinak stahoval širokou fotku a zahodil z ní
   dvě třetiny. `position: sticky` nemá: sloupec je zhruba stejně vysoký jako
   text, takže by neměla kam jet.

   Pod 900 px se to skládá pod sebe: nejdřív text s rozcestníkem, teprve pod
   ním fotka, a ta se vrací k širokému tvaru. Sloupec 380 px se do mobilu
   nevejde a fotka na výšku by tam zabrala dvě obrazovky. Proto ty dva tvary
   téže fotky.

   Fotka je na mobilu schválně POD textem, ne nad ním. Nad textem by odsunula
   rozcestník pod ohyb — což je přesně ta chyba, kvůli které se layout
   předělával; na úzké obrazovce by se jen zopakovala.
*/
.chyba {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .chyba {
    grid-template-columns: 1fr 380px;
    gap: 56px;
  }
}

.chyba__foto {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
}

.chyba__foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* Který tvar se stáhne, řeší <picture> s media podmínkou v HTML — dva <img>
   přepínané přes display by prohlížeč mohl stáhnout oba. Atributy width
   a height na <img> ale popisují ten široký tvar, takže by si na desktopu
   vyhradil špatnou výšku a stránka by po načtení poskočila. Proto se poměr
   nad 900 px přepíše ručně; 4/5 sedí s výřezem 777 × 971 ze skriptu. */
@media (min-width: 900px) {
  .chyba__foto img { aspect-ratio: 4 / 5; }
}

/* ================= OZDOBNÝ ROZSYP NA BAREVNÝCH BLOCÍCH ==================== */
/*
   Stejný nápad jako vločky na atmosfera.html, jen slabší: tenká kresba
   v barvě krému na nízkém krytí, rozsypaná po barevné ploše. Homepage má
   takových bloků čtrnáct (4 karty Atmosféry + 10 dlaždic Dárků), takže
   proti atmosfera.html platí dvě věci navíc:

   1) KRYTÍ JE NIŽŠÍ — 0.05 až 0.10 místo 0.11 až 0.20. Čtrnáct potištěných
      ploch pod sebou unese míň než čtyři; při krytí z atmosféry začaly
      dlaždice vypadat jako vzorovaná tapeta, ne jako podklad.
   2) MOTIV SE STŘÍDÁ, nejen jeho pozice. Se čtrnácti bloky by jedna vločka
      dokola byla vzor, ne ozdoba — Šimon si toho všiml jako první věci.
      Sada jsou čtyři motivy (vločka, anýz, jmelí, prskavka) a rozdělují se
      tak, aby žádné dva sousední bloky neměly stejný, vodorovně ani svisle.
      Motivy jsou tytéž kresby jako v _nastroje/ozdoby.ps1.

   Zbytek pravidel je převzatý z vloček a platí beze změny:
   * velikost --v je v PROCENTECH ŠÍŘKY bloku, ne v pixelech — blok se zúží
     a motiv s ním, takže podmínka --x + --v/2 <= 100 % drží v každém okně,
   * `vector-effect="non-scaling-stroke"` na každé cestě drží stejně tenkou
     linku u velkých i malých kusů,
   * `overflow: hidden` je jen pojistka; pozice jsou spočítané tak, aby byl
     každý kus celý uvnitř. Uříznutý motiv se čte jako chyba, ne jako podklad.
   * `aria-hidden` a `pointer-events: none` — pro čtečku i myš neexistuje.

   Pod 620 px se rozsyp vypíná: dlaždice jsou tam přes celou šířku a nízké,
   takže by motiv skončil pod textem místo vedle něj.
*/
.karta-tema,
.dlazdice__polozka {
  position: relative;
  overflow: hidden;
}

/* Text musí nad rozsyp. Bez toho by ho absolutně pozicovaná kresba
   překreslila — statické prvky se kreslí pod pozicovanými. */
.karta-tema > :not(.dekor),
.dlazdice__polozka > :not(.dekor) {
  position: relative;
  z-index: 1;
}

.dekor {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 0;
  width: var(--v);
  height: auto;
  aspect-ratio: var(--pomer, 1);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  color: var(--krem-50);
  opacity: var(--o, 0.07);
  pointer-events: none;
}

@media (max-width: 619px) {
  .dekor { display: none; }
}

/* ---------------------------- KARTA TÉMATU ------------------------------ */

.karta-tema {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 28px 26px;
  border-radius: var(--radius-l);
  color: var(--krem-50);
  transition: transform var(--prechod);
}

.karta-tema:hover { transform: translateY(-3px); }

.karta-tema__stitek {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.karta-tema__nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.24;
}

.karta-tema__popis {
  margin-top: 2px;
  font-size: 14px;
}

.karta-tema[data-barva="jehlici-700"]  { background: var(--jehlici-700); }
.karta-tema[data-barva="jehlici-800"]  { background: var(--jehlici-800); }
.karta-tema[data-barva="jerabina-600"] { background: var(--jerabina-600); }

/* Zlata-700 místo zlata-500 — viz vysvětlení u .dlazdice o pár řádků výš */
.karta-tema[data-barva="zlata-700"]    { background: var(--zlata-700); }

/* ----------------------------- OMALOVÁNKY ------------------------------- */

.omalovanka {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--krem-100);
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-m);
  transition: transform var(--prechod), border-color var(--prechod);
}

.omalovanka:hover {
  transform: translateY(-3px);
  border-color: var(--jehlici-500);
}

/*
  Předlohy mají hodně rozdílné tvary — od 675×353 na šířku po 490×810 na výšku.
  Pevný rámeček s obrázkem vepsaným dovnitř drží dlaždice v řadě stejně vysoké
  a nic neořízne. Viz „Pravidlo pro copy v kartách" v NAVRH-STRUKTURY.md.
*/
.omalovanka__nahled {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  aspect-ratio: 3 / 4;
  /*
    Bez min-height: 0 by se rámeček nesměl zmenšit pod výšku obrázku — flex
    položky mají min-height: auto — a vysoké předlohy by poměr 3:4 roztáhly.
    Rámečky by pak byly každý jinak vysoký a rozhodilo by to i textovou část.
  */
  min-height: 0;
  overflow: hidden;
  padding: 16px;
  background: #FFFFFF;
}

.omalovanka__nahled img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.omalovanka__telo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  /* Dorovná kartu do výšky řádku, takže textová část vyjde všude stejně */
  flex: 1 1 auto;
  padding: 14px 16px 16px;
}

.omalovanka__nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text-900);
}

.omalovanka__akce {
  font-size: 13px;
  font-weight: 500;
  color: var(--jehlici-600);
}

.omalovanka:hover .omalovanka__akce { color: var(--jerabina-600); }

/* ------------------------- TEXTOVÝ BLOK SEKCE --------------------------- */
/*
   Nadpis vlevo, obsah vpravo. Bez toho zůstane text viset v levé třetině
   stránky a zbytek šířky je prázdný.
*/

.blok {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 900px) {
  .blok { grid-template-columns: 340px 1fr; gap: 64px; }
}

.blok__hlavicka h2 { margin-bottom: 14px; }

.blok__uvod {
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-700);
}

.blok__obsah {
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-700);
}

.blok__obsah p + p { margin-top: 16px; }

/* Číslované kroky přebírají styl .krok z receptů */
.blok__kroky { list-style: none; }

/* Stejné odkazy jako v tělech článků, jinak v textu splynou */
.blok a { color: var(--jerabina-600); text-decoration: underline; }
.blok a:hover { color: var(--jerabina-700); }

.blok__poznamka {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--krem-200);
  font-size: 15px;
  color: var(--text-500);
}

/* ------------------------------- BANNERY -------------------------------- */

.banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 44px 36px;
  border-radius: var(--radius-xl);
  color: var(--krem-50);
  transition: transform var(--prechod);
}

.banner:hover { transform: translateY(-3px); }

.banner--jehlici  { background: linear-gradient(135deg, var(--jehlici-500), var(--jehlici-800)); }
.banner--jerabina { background: linear-gradient(135deg, var(--jerabina-500), var(--jerabina-700)); }

.banner__nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: 1.24;
}

.banner__popis {
  max-width: 34em;
  font-size: 16px;
  color: #E8E0D2;
}

/* ------------------------------- PATIČKA -------------------------------- */

.paticka {
  padding-block: 56px 32px;
  background: var(--jehlici-900);
  color: var(--text-paticka);
}

@media (min-width: 768px) { .paticka { padding-block: 72px 40px; } }

.paticka__horni {
  display: grid;
  gap: 36px;
}

@media (min-width: 620px)  { .paticka__horni { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .paticka__horni { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; } }

.logo--paticka { margin: 0 0 14px; }

.logo--paticka .logo__text { font-size: 20px; }

.paticka__popis {
  max-width: 32em;
  font-size: 14px;
  color: var(--text-400);
}

.paticka__nadpis {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zlata-300);
}

.paticka__sloupec li + li { margin-top: 10px; }

.paticka__sloupec a {
  font-size: 15px;
  color: var(--text-paticka);
  transition: color var(--prechod);
}

.paticka__sloupec a:hover { color: var(--krem-50); }

.paticka__dolni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--jehlici-linka-slaba);
}

/* Vedle copyrightu stával seznam odkazů na sítě (.paticka__site) — Pepa ho
   8. 9. 2026 nechal odstranit, takže v dolním pruhu patičky zbyl sám. */
.paticka__copyright {
  font-size: 13px;
  color: var(--text-paticka-slaby);
}

/* ========================================================================= */
/*  SEKCE RECEPTY — výpis a detail                                           */
/*  Stránky v recepty/ generuje _nastroje/generuj-recepty.ps1.               */
/*  Ruční úpravy v nich se při dalším spuštění přepíšou — měnit šablonu.     */
/* ========================================================================= */

/* ---------------------------- Drobečky ---------------------------------- */

.drobecky {
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--text-500);
}

.drobecky a { transition: color var(--prechod); }
.drobecky a:hover { color: var(--jehlici-900); text-decoration: underline; }
.drobecky span[aria-hidden] { margin-inline: 6px; color: var(--krem-300); }

/* --------------------------- Nadpisy stránek ---------------------------- */

.sekce__nadpis-velky {
  max-width: 16em;
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--jehlici-900);
}

.sekce__nadpis-maly {
  margin-bottom: 28px;
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.125rem);
  line-height: 1.24;
  color: var(--jehlici-900);
}

/* ------------------------- Údaje o receptu ------------------------------ */
/*
   Zobrazuje jen to, co recept sám uvádí. Většina receptů ze starého webu
   nemá počet porcí ani obtížnost, proto tu nejsou napevno čtyři políčka.
*/

.udaje {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.udaje li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 16px 22px;
  background: var(--krem-100);
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-s);
}

.udaje__popis {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-500);
}

.udaje__hodnota {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--jehlici-900);
}

/* -------------------------- Fotka receptu ------------------------------- */

.foto-receptu {
  margin: 40px 0 0;
  aspect-ratio: 1280 / 440;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.foto-receptu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
     Pruh je 1280 × 440, fotky jsou 3:2 — do hlavičky se tedy vejde jen
     prostředních ~52 % výšky a nahoře i dole se ukrojí po čtvrtině. U motivu,
     který má špičku (stromeček, svíčky na věnci, věnec na dveřích), se tím
     useknul vršek. Výřez si proto článek může posunout výš přes --foto-pozice
     ve `style`, stejně jako hlavičky sekcí u `.sekce-hero__foto`.

     Výchozí střed nechává všechny ostatní sekce beze změny — hodnoty se
     nastavují jen tam, kde se fotka bez toho ořezávala špatně (tabulka
     $vyrezy v generátoru sekce).
  */
  object-position: var(--foto-pozice, 50% 50%);
}

/* ------------------------- Tělo receptu --------------------------------- */

/* Úvodní próza nad surovinami. Do 31. 8. 2026 ji šablona receptu zahazovala —
   všechno mezi perexem a nadpisem se surovinami spadlo pod stůl u 17 z 21
   receptů. Blok si bere typografii `.clanek__telo` (42 em, stejné čtení jako
   detail článku), navíc potřebuje jen odstup od mřížky pod sebou.

   Odstup je 52 px, ne 20 px z `.clanek__telo p`: pod blokem začíná krémová
   karta se surovinami a s malou mezerou vypadala próza jako její popisek. */
.recept__uvod { margin-bottom: 52px; }

.recept {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .recept { grid-template-columns: 420px 1fr; gap: 64px; }
}

.recept h2 {
  margin-bottom: 20px;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
}

.recept__suroviny {
  padding: 28px;
  background: var(--krem-100);
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-l);
}

@media (min-width: 900px) {
  .recept__suroviny { position: sticky; top: 100px; }
}

/* ---- Suroviny s odškrtáváním ---- */

.surovina + .surovina { border-top: 1px solid var(--krem-200); }

.surovina label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 11px;
  cursor: pointer;
}

.surovina input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--jehlici-600);
  cursor: pointer;
}

.surovina__text { font-size: 15px; line-height: 1.5; }

.surovina__mnozstvi {
  font-weight: 600;
  color: var(--jehlici-900);
}

.surovina__nazev {
  margin-left: 6px;
  color: var(--text-700);
}

/* Surovina bez množství („citron", „kostku másla") začíná rovnou názvem —
   odsazení patří jen za tučné množství, jinak řádek uskočí doprava. */
.surovina__nazev:first-child { margin-left: 0; }

/* Odškrtnutá surovina zešedne — vizuální stopa, co už je nachystané */
.surovina input:checked ~ .surovina__text {
  color: var(--text-400);
  text-decoration: line-through;
}

.surovina input:checked ~ .surovina__text .surovina__mnozstvi,
.surovina input:checked ~ .surovina__text .surovina__nazev { color: var(--text-400); }

/* V bloku Suroviny je tisk hlavní akcí a blok má pevnou šířku — tam tlačítko
   přes celou šířku sedí. V článku ne, tam se používá .clanek__akce níž. */
.tlacitko--tisk { width: 100%; margin-top: 22px; }

/* ---- Recepty převedené z článků (29. 9. 2026) ----
   Úvod může začínat obtékanou fotkou z archivu. Bez flow-root by fotka
   přečnívala do mřížky se surovinami pod ní. */
.recept__uvod { display: flow-root; }

.recept__zaver { margin-top: 52px; }

/* Mezinadpis skupiny surovin („Na těsto", „Na krém") */
.suroviny__skupina {
  padding: 18px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jehlici-900);
}

.suroviny__skupina:first-child { padding-top: 0; }

/* Linka mezi položkami nad mezinadpisem ani hned pod ním nemá smysl */
.suroviny__skupina + .surovina { border-top: 0; }

/* Sbírka: několik receptů na jedné stránce, každý s vlastním blokem
   Suroviny + Postup. Mezi recepty je vlasová linka a velký odstup, aby bylo
   jasné, kde jeden končí a druhý začíná. */
.recept-sbirky + .recept-sbirky {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--krem-200);
}

.recept-sbirky__nazev {
  margin-bottom: 28px;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.375rem);
}

.recept-sbirky__popis { margin-bottom: 32px; }

/* Doba přípravy jednotlivého receptu ve sbírce — stejný štítek jako
   v hlavičce receptu, jen těsně pod názvem místo pod perexem */
.udaje--recept-sbirky { margin: -12px 0 28px; }

.recept h3 {
  margin-bottom: 16px;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
}

.recept-sbirky ~ .recept__zaver {
  padding-top: 56px;
  border-top: 1px solid var(--krem-200);
}

/* --------------------- Lišta s akcemi pod článkem ------------------------ */
/*
   Do 9. 9. 2026 viselo „Vytisknout" jako holá pilulka hned pod posledním
   odstavcem — vypadalo to jako zapomenutý prvek uprostřed textu, ne jako
   nabídka. Teď je oddělené vlasovou linkou a je z něj drobná akce s ikonou
   tiskárny: text článku končí, pod ním je co s ním dál dělat.
*/
.clanek__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--krem-200);
}

.akce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: var(--pismo-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-500);
  background: none;
  border: 1px solid var(--krem-300);
  border-radius: var(--radius-pilulka);
  cursor: pointer;
  transition: color var(--prechod), border-color var(--prechod), background var(--prechod);
}

.akce:hover {
  color: var(--jehlici-900);
  border-color: var(--jehlici-600);
  background: var(--krem-100);
}

.akce:focus-visible {
  outline: 2px solid var(--zlata-500);
  outline-offset: 2px;
}

.akce__ikona {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Postup ---- */

.krok {
  display: flex;
  gap: 18px;
  padding-block: 16px;
}

.krok + .krok { border-top: 1px solid var(--krem-200); }

.krok__cislo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--jehlici-900);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  color: var(--krem-50);
}

.krok__text {
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-700);
}

/* ---- Tip ---- */

.tip {
  margin-top: 32px;
  padding: 24px 26px;
  background: var(--zlata-200);
  border-radius: var(--radius-l);
}

.tip__nadpis {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zlata-700);
}

.tip__text { font-size: 16px; color: var(--zlata-text); }

/* --------------------------- Tělo článku -------------------------------- */
/*
   Obsah přebíráme z archivu starého webu, takže se stylují holé značky.
*/

.clanek__telo {
  max-width: 42em;
  font-size: 17px;
  line-height: 1.62;          /* stejné čtení jako .krok__text u receptů */
  color: var(--text-700);
}

.clanek__telo p { margin-bottom: 20px; }

/* Mezinadpisy jedou po stejné stupnici jako „Suroviny" a „Postup" na receptech,
   aby detail receptu a detail článku působily jako jedna sada stránek.
   Generátor navíc srovnává úrovně nadpisů, takže hlavní mezinadpis je v každém
   článku <h2> — v archivu byl jednou <h2> a jindy <h3>. */
.clanek__telo h2,
.clanek__telo h3 {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  color: var(--jehlici-900);
}

.clanek__telo h2 {
  margin: 44px 0 18px;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
}

.clanek__telo h3 {
  margin: 32px 0 12px;
  font-size: 20px;
}

.clanek__telo > :first-child { margin-top: 0; }

/* Výčty v článcích jsou v archivu vždycky seznamy surovin dílčích receptů,
   tak dostaly stejnou krémovou kartu a řádkový rytmus jako blok Suroviny.
   Odškrtávací políčka tu nejsou schválně — na jedné stránce je těch seznamů
   několik a nejde o jeden recept, který si člověk odškrtává. */
.clanek__telo ul,
.clanek__telo ol {
  margin: 0 0 26px;
  padding: 6px 28px;
  background: var(--krem-100);
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-l);
}

.clanek__telo li {
  margin-left: 18px;
  padding-block: 10px;
  font-size: 15px;
  line-height: 1.55;
}

.clanek__telo ul li { list-style: disc; }
.clanek__telo ol li { list-style: decimal; }
.clanek__telo li + li { border-top: 1px solid var(--krem-200); }

/* Oddělovač jednotlivých textů uvnitř článku — básnička od básničky, vtip
   od vtipu. V Přáních, básničkách a vtipech je archiv odděloval prázdným
   odstavcem, ten se při čištění zahazuje (viz Oddel-Texty v generuj-prani.ps1).
   Vlasová linka přes textový sloupec, ne přes celou šířku stránky. */
.clanek__telo hr {
  height: 0;
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--krem-200);
}

.clanek__telo a { color: var(--jerabina-600); text-decoration: underline; }
.clanek__telo a:hover { color: var(--jerabina-700); }

/* Obrázky v článku obtékají text zleva.

   Bez obtékání se z obrázku stal blok, který rozsekl větu vejpůl — na Zdravých
   Vánocích končil odstavec „…bez smaženého kapra s bramborovým" a pokračoval
   „salátem neumíte představit" až pod fotkou. V archivu na to jsou WordPressové
   třídy alignleft/alignright, ale ty se sem nepřenášely.

   Zarovnání sjednocujeme doleva, i když originál má někde alignright — na jedné
   šířce sloupce působí střídání stran neklidně a stránky mají vypadat jako
   jedna sada. Šířka 300 px je strop: zdrojové fotky mají 180–400 px, takže víc
   by znamenalo rozmazání. */
.clanek__telo img {
  float: left;
  width: 300px;
  max-width: 45%;
  height: auto;
  margin: 6px 28px 18px 0;
  border-radius: var(--radius-m);
}

/* Nadpis ani výčet nikdy nezačne vedle obrázku */
.clanek__telo h2,
.clanek__telo h3,
.clanek__telo ul,
.clanek__telo ol,
.clanek__akce { clear: both; }

/* Na úzkém displeji obtékání nedává smysl — text vedle 300px fotky by byl
   pár slov na řádek */
@media (max-width: 620px) {
  .clanek__telo img {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px;
  }
}

.clanek__telo iframe { max-width: 100%; }

/* --------------------------- Výpis receptů ------------------------------ */

@media (min-width: 620px)  { .mrizka--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mrizka--3 { grid-template-columns: repeat(3, 1fr); } }

/* Filtry jsou <button>, ne odkazy — filtrují na místě */
button.filtr { cursor: pointer; }

.filtry__stav {
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--text-500);
}

.odznak--v-textu {
  position: static;
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 5px 11px;
  background: var(--krem-100);
  border: 1px solid var(--krem-200);
}

/* Karta skrytá filtrem.

   POZOR na pořadí specificity: `.mrizka > li { display: flex }` (0,1,1) přebíjí
   atribut [hidden], takže samotné `karta.hidden = true` z main.js kartu
   NESKRYJE. Dlouho tu bylo jen pravidlo pro `.karta-receptu`, proto filtry
   fungovaly na Receptech, ale tiše ne na Kam o Vánocích (a nefungovaly by ani
   na Tradicích) — tam jsou karty `.karta-clanku`. Zjištěno 20. 8. 2026.

   Pravidlo míří na položku mřížky, ne na konkrétní typ karty, takže platí
   pro všechny výpisy naráz. Specificita 0,2,0 přebíjí `.mrizka > li`. */
.mrizka > li[hidden] { display: none; }
.karta-receptu[hidden] { display: none; }

/* --------------------------------- TISK --------------------------------- */

/* ========================================================================= */
/*  KOLEDY                                                                   */
/* ========================================================================= */

/* Karta koledy nemá fotku — ke koledám žádné nemáme a prázdný barevný pruh
   by nic neřekl. Drží se proto na typografii: název, původ, rozsah. */
/* `overflow: hidden` je tu kvůli fotce nahoře na kartě — bez něj jí rohy
   přetečou přes zaoblení karty. Ostatní typy karet ho mají odjakživa,
   koledy dostaly fotky až 7. 9. 2026. */
.karta-koledy > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform var(--prechod), box-shadow var(--prechod);
}

.karta-koledy > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 33, 25, 0.12);
}

.karta-koledy__telo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
  padding: 24px 26px 26px;
}

.karta-koledy__nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  color: var(--jehlici-900);
}

.karta-koledy__puvod {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-500);
}

/* Patička karty je odsazená dolů, aby seděla na stejné výšce i u karet
   s kratším původem. Odznak „S akordy" patří sem, ne nad název — nad názvem
   by posunul nadpis dolů jen u některých karet a řádek by se rozjel. */
.karta-koledy__pata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}

.karta-koledy__meta {
  font-size: 13px;
  color: var(--text-400);
}

.karta-koledy__pata .odznak--v-textu { margin-bottom: 0; }

/* --------------------------- Text koledy -------------------------------- */

.koleda__akce {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

/* Tlačítka koled nejsou na celou šířku sloupce jako u receptu */
.koleda .tlacitko--tisk { width: auto; margin-top: 0; }

/* Sloky ve dvou sloupcích podle návrhu. Sloka se nikdy nerozlomí mezi
   sloupce — půlka sloky na konci prvního sloupce se nedá zpívat. */
.koleda__sloky { list-style: none; }

@media (min-width: 900px) {
  .koleda__sloky {
    columns: 2;
    column-gap: 64px;
  }
}

.koleda__sloka {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 30px;
}

.koleda__radek { display: block; }

.koleda__slova {
  display: block;
  font-size: 17px;
  line-height: 1.62;          /* stejné čtení jako .krok__text u receptů */
  color: var(--text-700);
}

/* Akordy jsou v archivu zapsané mezerami nad textem. Neproporcionální písmo
   ty mezery zachová, ale zarovnání nad slabiky je jen orientační — přesnější
   podklad archiv nemá a text v neproporcionálním písmu by se četl hůř. */
.koleda__akordy {
  display: block;
  margin-top: 8px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: pre;
  color: var(--zlata-text-svetla);
}

.koleda__sloka > .koleda__radek:first-child .koleda__akordy { margin-top: 0; }

/* Přepnuto tlačítkem — akordy zmizí, text zůstane na místě */
.koleda--bez-akordu .koleda__akordy { display: none; }

/* Notový zápis ze starého webu. Předlohy mají 449-581 px a jsou to skeny,
   ne vektory — proto se nikdy neroztahují nad svou skutečnou šířku.
   Roztažené by se rozmazaly a noty by přestaly být čitelné.
   Podklad je bílý, ne krémový: sken má bílé pozadí a na krému by za notami
   svítil světlý obdélník. */
/* Na úzkém displeji se noty neschovávají do šířky okna, ale posouvají se.
   Smrsknuté na 334 px byly notové hlavičky menší než tečka a zápis přestal
   být čitelný — u not je čitelnost přednější než to, že se vejdou. */
.noty {
  margin: 44px 0 0;
  padding-top: 36px;
  border-top: 1px solid var(--krem-200);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.noty__nadpis {
  margin-bottom: 16px;
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 20px;
  color: var(--jehlici-900);
}

/* Vždycky skutečná velikost předlohy (449-581 px): roztažení by noty
   rozmazalo, zmenšení by je udělalo nečitelnými. Když se nevejdou,
   posouvá se místo nich rámeček. Na papíře platí max-width: 100 % níž. */
.noty img {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-m);
}

/* Sloky jedou ve dvou sloupcích, noty pod nimi přes celou šířku */
.koleda__sloky + .noty { clear: both; }

/* Druhá verze textu (Veselé vánoční hody mají i verzi z roku 1939) */
.koleda__verze {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--krem-200);
}

.koleda__verze .sekce__nadpis-maly { margin-bottom: 6px; }

.koleda__zdroj {
  max-width: 42em;
  margin-bottom: 28px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-500);
}

/* Tip přes celou šířku textového sloupce — používá ho hláška u písní,
   jejichž text neotiskujeme */
.tip--siroky { max-width: 42em; }

.sekce__perex--uzky { max-width: 46em; }

/* ========================================================================== */
/*                                   TISK                                     */
/* ========================================================================== */
/*
   Recept se tiskne jako kuchařská karta: černá na bílé, na jednu A4, bez
   navigace a bez fotek.

   Do 9. 9. 2026 se tiskla obrazovková podoba skoro 1:1 — písmo 17 px, řádky
   přes celou šířku papíru, krémové plochy jako pozadí a webové řádkování.
   Pracny tak zabraly dvě stránky a z druhé byla polovina prázdná. Celý blok
   je proto psaný v `pt` a `mm`: na papíře nemá pixel žádnou velikost a
   `clamp(… + vw)` z nadpisů se na šířku A4 přepočítá na nesmysl (h1 vyšel
   46 px ≈ 12 mm vysoká písmena).

   Barevné plochy se ruší schválně — tiskárna je vytiskne jako šedý obdélník
   přes celou stránku a spotřebuje na recept víc toneru než na text.
*/

@page {
  size: A4;
  margin: 15mm 16mm;
}

@media print {
  /* ---- co se na papír nedostane ---- */
  /*
     `sekce--dalsi` je blok „Další z rubriky" na konci detailu. Do 9. 9. 2026
     se skrýval přes `sekce--bez-vrsku`, jenže to je layoutová třída: nosí ji
     i tělo článku bez fotky, stránka O nás, Mapa webu, 404 i vyhledávání —
     ty se tiskly prázdné, zůstal z nich jen nadpis. Na koledách naopak blok
     `sekce--bez-vrsku` neměl a na papír se tiskly čtyři barevné karty
     s fotkami přes dvě stránky.
  */
  .hlavicka,
  .hero__foto,
  .paticka,
  .drobecky,
  .filtry,
  .tlacitko--tisk,
  .clanek__akce,
  .koleda__akce,
  .foto-receptu,
  .sekce--dalsi { display: none; }

  /* ---- základ: bílý papír, černý text, nic se neroztahuje ---- */
  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .sekce {
    padding-block: 0;
    background: none;
    color: #000000;
  }

  /* Obal drží obsah v 1280 px sloupci — na A4 by zbytečně škrtil okraje,
     o okraje se stará @page. */
  .obal {
    max-width: none;
    padding-inline: 0;
  }

  .sekce__nadpis-velky {
    max-width: none;
    margin-bottom: 2mm;
    font-size: 21pt;
    line-height: 1.15;
  }

  .sekce__nadpis-maly {
    margin-bottom: 3mm;
    font-size: 13pt;
  }

  /* Souvislý text se drží v 145 mm — přes celou šířku A4 vychází řádek na
     110 znaků a oko na konci řádku netrefí začátek dalšího. Kroky postupu
     a suroviny jsou krátké, ty smí přes celou šířku. */
  .sekce__perex {
    max-width: 145mm;
    margin-top: 0;
    font-size: 9.5pt;
    color: #333333;
  }

  /* Údaje (doba přípravy, porce) na papíře jako jeden řádek, ne dlaždice */
  .udaje {
    gap: 6mm;
    margin-top: 3mm;
    margin-bottom: 0;
  }

  .udaje li {
    flex-direction: row;
    align-items: baseline;
    gap: 2mm;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
  }

  .udaje__popis { font-size: 7.5pt; }
  .udaje__hodnota { font-size: 11pt; }

  /* ---- text článku ---- */
  /* Sekce mají na papíře nulové odsazení, odstup od perexu tedy drží tělo
     článku samo. Bez něj se k perexu přilepí mezinadpis u článků, kterým
     první odstavec zmizel jako zdvojený perex (`.clanek__telo > :first-child`
     má margin-top 0, aby text začínal v jedné lince s blokem vedle). */
  .clanek__telo,
  .recept__uvod {
    max-width: 145mm;
    margin-top: 5mm;
    font-size: 10pt;
    line-height: 1.5;
  }

  .clanek__telo p { margin-bottom: 2.5mm; }
  .recept__uvod { margin-bottom: 5mm; }

  /* Mezinadpisy v článku jedou na obrazovce až do 34 px — na papíře by byly
     stejně velké jako titulek stránky a hierarchie by zmizela. */
  .clanek__telo h2 {
    margin: 7mm 0 2.5mm;
    font-size: 13pt;
  }

  .clanek__telo h3 {
    margin: 5mm 0 2mm;
    font-size: 11pt;
  }

  /* Seznamy v článku na papíře bez krémové karty — stejně jako blok Suroviny */
  .clanek__telo ul,
  .clanek__telo ol {
    margin: 0 0 3mm;
    padding: 0 0 0 6mm;
    background: none;
    border: 0;
  }

  /* Položky seznamu mají na obrazovce 10 px nahoře i dole kvůli linkám mezi
     nimi — bez linek je z toho na papíře jen prázdno. */
  .clanek__telo li {
    margin-left: 0;
    padding-block: 0.5mm;
    font-size: 10pt;
    line-height: 1.4;
  }

  .clanek__telo li + li { border-top: 0; }

  .clanek__telo hr { margin: 4mm 0; border-top-color: #BBBBBB; }

  /* Na papíře obrázek neobtéká — sloupec je užší a text by se drtil */
  .clanek__telo img { float: none; margin: 0 0 4mm; }

  /* ---- recept: suroviny nad postupem, na celou šířku ---- */
  .recept { display: block; }

  .recept h2 {
    margin-bottom: 2.5mm;
    font-size: 13pt;
  }

  .recept__suroviny {
    position: static;
    margin-bottom: 6mm;
    padding: 0;
    background: none;
    border: 0;
    break-inside: avoid;
  }

  /* Devět surovin pod sebou je půl stránky prázdna vpravo — na papíře jdou
     do dvou sloupců. Linky mezi položkami se ruší, ve dvou sloupcích by
     vypadaly jako tabulka. */
  .suroviny {
    columns: 2;
    column-gap: 10mm;
  }

  .surovina { break-inside: avoid; }
  .surovina + .surovina { border-top: 0; }

  .suroviny__skupina {
    padding: 2mm 0 1mm;
    font-size: 8.5pt;
    break-after: avoid;
  }

  /* Sbírka receptů: název receptu drží pohromadě s blokem pod ním */
  .recept-sbirky + .recept-sbirky {
    margin-top: 8mm;
    padding-top: 6mm;
    border-top-color: #BBBBBB;
  }

  .recept-sbirky__nazev {
    margin-bottom: 3mm;
    font-size: 14pt;
    break-after: avoid;
  }

  .recept-sbirky__popis { margin-bottom: 3mm; }

  .recept h3 {
    margin-bottom: 2mm;
    font-size: 11pt;
  }

  .recept__zaver { margin-top: 6mm; }
  .recept-sbirky ~ .recept__zaver { padding-top: 0; border-top: 0; }

  .surovina label {
    align-items: flex-start;
    gap: 2mm;
    padding-block: 0.7mm;
  }

  /* Zaškrtávátko z obrazovky se na papír nevytiskne (prohlížeč ho kreslí
     jako prvek formuláře), nakreslí se proto čtvereček — v kuchyni se do
     něj odškrtává tužkou. */
  .surovina input { display: none; }

  .surovina label::before {
    content: "";
    flex: none;
    width: 3mm;
    height: 3mm;
    margin-top: 1mm;
    border: 0.3mm solid #000000;
  }

  .surovina__text {
    font-size: 10pt;
    line-height: 1.35;
  }

  .surovina__mnozstvi,
  .surovina__nazev { color: #000000; }

  /* ---- postup ---- */
  .krok {
    gap: 3mm;
    padding-block: 1.2mm;
    break-inside: avoid;
  }

  .krok + .krok { border-top: 0; }

  .krok__cislo {
    display: block;
    width: 6mm;
    height: auto;
    background: none;
    border-radius: 0;
    color: #000000;
    font-size: 10pt;
    font-weight: 700;
    text-align: right;
  }

  .krok__text {
    font-size: 10pt;
    line-height: 1.45;
    color: #000000;
  }

  /* Tip je na obrazovce zlatá plocha se zlatým textem — na papíře z toho je
     šedý obdélník se špatně čitelným písmem. Zůstává jen rámeček. */
  .tip {
    max-width: 145mm;
    margin-top: 4mm;
    padding: 2mm 3mm;
    background: none;
    border: 0.3mm solid #999999;
    border-radius: 2mm;
    break-inside: avoid;
  }

  .tip__nadpis { color: #000000; }
  .tip__text { font-size: 10pt; color: #000000; }

  /* Odkazy v textu se na papíře netisknou barevně — zůstane podtržení */
  .clanek__telo a,
  .recept__uvod a { color: #000000; }

  /* Vytištěný papír putuje po kuchyních a lednicích bez adresního řádku —
     patička říká, odkud recept je. `:has` starší prohlížeč neumí, tam se
     řádek prostě nevytiskne. */
  body:has(.recept) main::after {
    content: "Recept z webu Kouzelné Vánoce — kouzelnevanoce.cz";
    display: block;
    margin-top: 6mm;
    padding-top: 2mm;
    border-top: 0.3mm solid #999999;
    font-size: 8pt;
    color: #555555;
  }

  /* ---- koleda ---- */
  /* Koleda na papíře: sloky pod sebou v jednom sloupci. Dva sloupce na A4
     nutí čtenáře skákat očima nahoru a dolů uprostřed zpívání. */
  .koleda__sloky { columns: 1; }
  .koleda__slova { font-size: 12pt; line-height: 1.45; }
  .koleda__akordy { margin-top: 1mm; color: #000000; }
  .koleda__sloka { break-inside: avoid; margin-bottom: 5mm; }

  /* Noty se tisknou s koledou — kvůli tomu si ji člověk tiskne */
  .noty { margin-top: 3mm; border-top: 0; padding-top: 0; break-inside: avoid; }
  .noty__nadpis { margin-bottom: 1.5mm; font-size: 12pt; }
  .noty img { padding: 0; }
  .noty img { border: 0; padding: 0; max-width: 100%; }
}

/* ========================================================================= */
/*  FILMY A POHÁDKY                                                          */
/* ========================================================================= */

/* ------------------- KARTA ČLÁNKU (filmy, přání, Silvestr) --------------- */
/*
   Jedna karta pro všechny textové sekce: obrázek nahoře (volitelný), název,
   krátký nadtitulek a perex. Vychází z .karta-koledy, jen s fotkou a popisem
   navíc — bez popisu by třeba 13 podobně znějících filmových titulů nebylo
   na výpisu k rozeznání.

   `.karta-clanku` je kanonický název pro nové sekce. `.karta-filmu`
   a `.karta-prani` jsou starší jména téhož — byly to dva znak po znaku
   shodné bloky, než se sloučily sem. Nechávají se, aby se nemusely
   přegenerovávat hotové stránky; nová sekce ať používá `.karta-clanku`.

   Fotky u těchhle sekcí nikdy nezobrazují konkrétní dílo (filmový plakát ani
   scénu) — jsou to obecné „atmosférické" nálady, protože plakáty a snímky
   jsou cizí autorská práva, stejný problém jako u omalovánek.
*/
.karta-clanku > a,
.karta-filmu > a,
.karta-prani > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform var(--prechod), box-shadow var(--prechod);
}

.karta-clanku > a:hover,
.karta-filmu > a:hover,
.karta-prani > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 33, 25, 0.12);
}

.karta-clanku__foto,
.karta-filmu__foto,
.karta-prani__foto,
.karta-koledy__foto {
  position: relative;
  display: block;
  aspect-ratio: 302 / 210;
  overflow: hidden;
}

.karta-clanku__foto img,
.karta-filmu__foto img,
.karta-prani__foto img,
.karta-koledy__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.karta-clanku__telo,
.karta-filmu__telo,
.karta-prani__telo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px 26px;
}

.karta-clanku__nazev,
.karta-filmu__nazev,
.karta-prani__nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  color: var(--jehlici-900);
}

.karta-clanku__puvod,
.karta-filmu__puvod,
.karta-prani__puvod {
  font-size: 13px;
  font-weight: 600;
  color: var(--jerabina-600);
}

/* Oříznuto na 4 řádky, ať karty v řadě drží stejnou výšku i když perexy
   nejsou stejně dlouhé — bez toho byla „Vánoční přání netradičně" (844 znaků
   úvodu v archivu) skoro třikrát vyšší než sousední karty. */
.karta-clanku__popis,
.karta-filmu__popis,
.karta-prani__popis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-500);
}

/* ---------------------------- KARTA SEKCE -------------------------------- */

/* Velká karta pro rozcestník atmosfera.html — vychází z .karta-tema (stejné
   barevné podklady), ale navíc má uvnitř dva konkrétní odkazy. Řeší to, že
   samotné 4 dlaždice by byly identické s homepage — s vlastním obsahem má
   stránka důvod existovat, i než čtenář stihne scrollovat. */
.karta-sekce {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 30px 26px;
  border-radius: var(--radius-l);
  color: var(--krem-50);
}

.karta-sekce[data-barva="jehlici-700"]  { background: var(--jehlici-700); }
.karta-sekce[data-barva="jehlici-800"]  { background: var(--jehlici-800); }
.karta-sekce[data-barva="jerabina-600"] { background: var(--jerabina-600); }
.karta-sekce[data-barva="zlata-700"]    { background: var(--zlata-700); }

/* Sněhové vločky jako tlumená textura v ploše karty.
   Pozici (--x, --y jako střed vločky), velikost (--v), otočení (--r)
   a sílu (--o) si nastavuje každá vločka sama v atributu style — je to
   rozsyp, ne mřížka, takže pravidelné třídy tu nedávaly smysl.

   Dvě věci, na kterých to stálo a padalo:
   - Žádné dvě vločky na kartě nesmí mít blízké --x ani --y. První verze
     měla dvě pod sebou u pravého okraje a vypadalo to jako řádek tabulky.
   - Vločka musí zůstat celá uvnitř karty. Ukousnutá okrajem se čte jako
     chyba, ne jako podklad. Proto je --v v procentech šířky karty, ne
     v pixelech: karta se zúží a vločka se zúží s ní, takže podmínka
     --x + --v/2 <= 100 % platí v každé šířce okna. S pevnými pixely to
     drželo jen na širokém monitoru a v užším okně vylézalo ven.

   Selektor musí být `.karta-sekce > .karta-sekce__vlocka`, ne jen samotná
   třída: vločky jsou přímé děti `<li class="karta-sekce">`, takže je jinak
   trefí `.mrizka > li > * { width: 100% }` výš v souboru (0,1,1 přebije
   0,1,0). Vločka pak dostala šířku celé karty a `preserveAspectRatio` ji
   vykreslil vodorovně na střed — všechny čtyři skončily v jednom sloupci
   uprostřed, bez ohledu na --x. */
.karta-sekce > .karta-sekce__vlocka {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--v);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  color: var(--krem-50);
  opacity: var(--o, 0.13);
  pointer-events: none;
}

/* Hlavička: velký kruhový odznak vlevo, textový sloupec vpravo od něj. */
.karta-sekce__hlavicka {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  color: inherit;
}

.karta-sekce__hlavicka:hover .karta-sekce__nazev { text-decoration: underline; }

.karta-sekce__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.karta-sekce__ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--krem-50);
  color: var(--zlata-600);
  box-shadow: 0 2px 10px rgba(11, 33, 25, 0.18);
}

.karta-sekce__ikona svg { width: 34px; height: 34px; }

/* Světlé „prořezy" v plné ikoně (pruhy filmové klapky) — musí mít přesně
   barvu kruhu pod sebou, jinak by z nich byly viditelné čáry. */
.karta-sekce__ikona .ikona-vyrez {
  stroke: var(--krem-50);
  fill: none;
}

.karta-sekce__stitek {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.karta-sekce__nazev {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.18;
}

.karta-sekce__popis {
  font-size: 15px;
  opacity: 0.9;
}

/* Odsazení zarovnává předěl i odkazy s textovým sloupcem hlavičky,
   tedy za kruhový odznak (72 px + 18 px mezera). */
.karta-sekce__vyber {
  display: flex;
  flex-direction: column;
  margin-left: 90px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Náhled u položky — hlavně u omalovánek nedávalo smysl klikat rovnou na
   stažení PDF, aniž bys viděl, co to vlastně je. Koledy náhled nemají (žádné
   fotky k nim v archivu nejsou, stejně jako na koledy.html), tam zůstává
   jen text — položka bez <img> se zarovná stejně, jen bez obrázku. */
.karta-sekce__vyber a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 6px;
  font-size: 14px;
  color: inherit;
}

.karta-sekce__vyber img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.karta-sekce__vyber span {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}

.karta-sekce__vyber a:hover span { text-decoration-color: currentColor; }

/* Šipka jde hned za text odkazu, ne k pravému okraji karty — v Jardově
   návrhu se tím drží pohromadě s názvem, na který se klikne. */
.karta-sekce__vyber a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 10px;
  flex-shrink: 0;
  border-right: 2px solid var(--zlata-300);
  border-bottom: 2px solid var(--zlata-300);
  transform: rotate(-45deg);
}

@media (max-width: 619px) {
  .karta-sekce__ikona { width: 58px; height: 58px; }
  .karta-sekce__ikona svg { width: 28px; height: 28px; }
  .karta-sekce__nazev { font-size: 26px; }
  .karta-sekce__vyber { margin-left: 0; }
}

/* --------------------- HLAVIČKA SEKCE — FOTKA ZA TITULKEM ----------------- */
/*
   Fotka za titulkovou sekcí rozcestníku (atmosfera.html, recepty.html, …).
   Doleva přechází přes gradient do krému, ať zůstane nadpis i perex čitelný.
   Na mobilu (pod 620 px) je vypnutá — na takové šířce by z ní zbyl jen
   úzký proužek a přechod by se nevešel.

   Fotky zpracovává _nastroje\zpracuj-hlavicky-sekci.ps1, jmenují se podle
   sekce (web\obrazky\hlavicky\<sekce>-1600.jpg).
*/
/* Výška pruhu určuje, kolik z fotky je vidět. Sám obsah (drobečky + H1 +
   perex) dá jen ~275 px, což z fotky přes celou šířku ukáže sotva čtvrtinu.
   Proto min-height ve `vw`: roste se šířkou stejně jako fotka, takže je
   vidět pořád stejný díl v každém okně.

   Obsah je ukotvený nahoru (`flex-start`), ne vystředěný — nadpis má sedět
   vysoko a zbylá výška patří fotce pod ním. Vystředěný ho tlačil doprostřed
   a celý pruh pak působil zbytečně mohutně. */
.sekce-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: clamp(280px, 26vw, 420px);
  padding-block: clamp(36px, 4vw, 68px);
}

.sekce-hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Pruh je hodně široký a nízký (zhruba 5:1), takže z fotky 3:2 je vidět jen
   asi třetina výšky. Kde ta třetina padne, si každá sekce nastavuje sama
   přes --foto-pozice — u atmosféry sedí lucerna na střed, u receptů je talíř
   s cukrovím níž a s výchozím `center` by zůstal pod hranou. */
.sekce-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foto-pozice, 75% center);
}

/* Dvě vrstvy přechodu: svislá vypíná fotku dolů do krému, aby nekončila
   ostrou hranou nad kartami, vodorovná ji vypíná doleva pod nadpis.
   Krém musí být přesně --krem-50 (#FDFAF5) — s jiným odstínem by na
   rozhraní vylezl jemný barevný šev. */
.sekce-hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(253, 250, 245, 0) 58%,
      rgba(253, 250, 245, 0.5) 84%,
      var(--krem-50) 100%),
    linear-gradient(90deg,
      var(--krem-50) 0%, var(--krem-50) 38%,
      rgba(253, 250, 245, 0.72) 52%,
      rgba(253, 250, 245, 0) 72%);
}

.sekce-hero__jiskra {
  position: absolute;
  fill: var(--zlata-500);
}

.sekce-hero > .obal {
  position: relative;
  z-index: 1;
}

@media (max-width: 619px) {
  .sekce-hero__foto { display: none; }
  /* Bez fotky nemá vyšší pruh co ukazovat — zbyl by jen prázdný krém. */
  .sekce-hero {
    display: block;
    min-height: 0;
    padding-block: var(--sekce-odsazeni) 0;
  }
}

/* ========================================================================== */
/*  TRADICE A ZVYKY — interaktivní kvíz                                      */
/*  Stránky v tradice/ generuje _nastroje/generuj-tradice.ps1.               */
/*  Ruční úpravy v nich se při dalším spuštění přepíšou — měnit šablonu.     */
/*                                                                            */
/*  Kvíz je obyčejný <form> s radiobuttony. Bez JavaScriptu zůstane čitelný  */
/*  jako seznam otázek, vyhodnocení dopisuje main.js. Správná odpověď je     */
/*  v data-spravna na <input> — je to test pro zábavu, ne zkouška, takže     */
/*  nevadí, že se dá najít ve zdroji stránky.                                */
/* ========================================================================== */

.kviz {
  max-width: 760px;
  margin-inline: auto;
}

.kviz__seznam {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.kviz__otazka {
  padding: 22px 24px;
  background: var(--krem-50);
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-l);
}

.kviz__zadani {
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--jehlici-900);
}

.kviz__cislo {
  color: var(--zlata-700);
  margin-right: 4px;
}

.kviz__moznosti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* Radiobutton zůstává v DOM kvůli klávesnici a čtečkám, jen se nevykresluje
   nativně — puntík si kreslí ::before na labelu. */
.kviz__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kviz__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--krem-200);
  border-radius: var(--radius-pilulka);
  cursor: pointer;
  transition: background-color var(--prechod), border-color var(--prechod);
}

.kviz__label::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--krem-300);
  border-radius: 50%;
  transition: border-color var(--prechod), box-shadow var(--prechod);
}

.kviz__label:hover { border-color: var(--zlata-300); }

.kviz__radio:checked + .kviz__label {
  border-color: var(--jehlici-600);
  background: var(--krem-100);
}

.kviz__radio:checked + .kviz__label::before {
  border-color: var(--jehlici-600);
  box-shadow: inset 0 0 0 4px var(--jehlici-600);
}

.kviz__radio:focus-visible + .kviz__label {
  outline: 2px solid var(--zlata-600);
  outline-offset: 2px;
}

/* Stavy po vyhodnocení. Barva není jediný nositel informace — přibývá
   i značka ✓ / ✕ přes ::after, aby to poznal i barvoslepý čtenář. */
.kviz.je-vyhodnoceny .kviz__label { cursor: default; }

.kviz__moznost.je-spravne .kviz__label {
  border-color: var(--jehlici-600);
  background: #EDF5F1;
}

.kviz__moznost.je-spatne .kviz__label {
  border-color: var(--jerabina-500);
  background: #FBEEEC;
}

.kviz__moznost.je-spravne .kviz__label::after,
.kviz__moznost.je-spatne .kviz__label::after {
  margin-left: auto;
  font-weight: 700;
}

.kviz__moznost.je-spravne .kviz__label::after {
  content: "✓";
  color: var(--jehlici-600);
}

.kviz__moznost.je-spatne .kviz__label::after {
  content: "✕";
  color: var(--jerabina-600);
}

.kviz__ovladani {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.kviz__vysledek {
  margin-top: 26px;
  padding: 24px;
  background: var(--jehlici-900);
  border-radius: var(--radius-l);
  color: var(--krem-50);
}

.kviz__skore {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zlata-300);
}

.kviz__skore strong {
  font-family: var(--pismo-nadpis);
  font-size: 32px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--krem-50);
}

.kviz__stupne {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kviz__stupen-nadpis {
  display: block;
  font-family: var(--pismo-nadpis);
  font-size: 22px;
  margin-bottom: 6px;
}

.kviz__stupen-text { color: var(--krem-200); }

@media (max-width: 619px) {
  .kviz__otazka { padding: 18px 16px; }
  .kviz__ovladani .tlacitko { width: 100%; }
}

/* Na papíře nemá test smysl vyhodnocovat — tiskne se jako seznam otázek. */
@media print {
  .kviz__ovladani,
  .kviz__vysledek { display: none; }
  .kviz__label { border-color: #999; }
}

/* ========================================================================== */
/*                       SAMOSTATNÉ STRÁNKY (o-nas, mapa webu, 404)           */
/* ========================================================================== */

/* ------------------------------ MAPA WEBU -------------------------------- */
/*
   Skupiny se sázejí do sloupců podle toho, kolik se jich vejde — ne do pevné
   mřížky. Sekce mají hodně různý rozsah (Recepty 41 položek, Silvestr 6),
   takže v pevných řádcích by za krátkými skupinami zůstávaly velké díry.

   `break-inside: avoid` drží skupinu pohromadě, aby se nadpis nerozešel
   se svým seznamem přes hranici sloupce.
*/
.mapa-webu {
  columns: 3 260px;
  column-gap: 40px;
}

.mapa-webu__skupina {
  break-inside: avoid;
  margin-bottom: 34px;
}

/* Selektor musí být `.mapa-webu .mapa-webu__nadpis` (0,2,0), ne samotná třída:
   `.sekce h2` výš v souboru má 0,1,1 a přebilo by ji — nadpis skupiny by
   vycházel ve velikosti nadpisu sekce (44 px) a mapa by vypadala jako deset
   nadpisů pod sebou. Stejná past jako `.mrizka > li` u filtrů a
   `.mrizka > li > *` u vloček — na téhle šabloně platí potřetí. */
.mapa-webu .mapa-webu__nadpis {
  font-family: var(--pismo-nadpis);
  font-weight: 600;
  font-size: 22px;
  color: var(--jehlici-900);
  margin-bottom: 2px;
}

.mapa-webu__nadpis a { color: inherit; }
.mapa-webu__nadpis a:hover { color: var(--jerabina-600); }

.mapa-webu__popis {
  font-size: 14px;
  color: var(--text-500);
  margin-bottom: 10px;
}

.mapa-webu__seznam {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--krem-200);
}

.mapa-webu__seznam li { border-bottom: 1px solid var(--krem-200); }

.mapa-webu__seznam a {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-700);
  transition: color var(--prechod);
}

.mapa-webu__seznam a:hover {
  color: var(--jerabina-600);
  text-decoration: underline;
}

/* ------------------------- ZNAČKA „DOPLNIT" ------------------------------ */
/*
   Dočasná značka pro místa, kde se čeká na rozhodnutí zadavatele — kontaktní
   e-mail, provozovatel webu, autorství. Schválně je vidět na stránce, ne jen
   v komentáři v kódu: tyhle texty nesmí projít na živý web nedopsané a
   komentáře si při kontrole nikdo neotevře.

   AŽ SE VŠECHNY DOPLNÍ, TOHLE PRAVIDLO ZMIZÍ I SE ZNAČKAMI V HTML.
*/
.doplnit {
  display: inline-block;
  padding: 2px 10px;
  background: #FFF3D0;
  border: 1px dashed #C9A227;
  border-radius: var(--radius-s);
  color: #6B5300;
  font-size: 0.94em;
}

.doplnit::before {
  content: "⚠ ";
}

/* Na papíře nemá smysl tisknout poznámku pro zadavatele jako součást textu,
   ale schovat ji úplně by z odstavce udělalo nesmysl — zůstává, jen bez
   výplně, aby se nevyplýtval toner. */
@media print {
  .doplnit { background: none; border-color: #999; color: inherit; }
}

/* ----------------------------- VYHLEDÁVÁNÍ ------------------------------- */
/*
   Stránka hledani.html. Filtry a karty výsledků používají třídy, které už
   na webu jsou (.filtry, .karta-clanku, .mrizka) — vyhledávání nemá být
   samostatný ostrov s vlastním vzhledem. Nové je jen pole a stavy okolo něj.
*/

.hledani__formular {
  position: relative;
  margin-bottom: 22px;
}

.hledani__ikona {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--zlata-600);
  stroke-width: 1.8;
  pointer-events: none;
}

.hledani__vstup {
  width: 100%;
  padding: 18px 22px 18px 54px;
  font-family: var(--pismo-text);
  font-size: 18px;
  color: var(--text-900);
  background: var(--krem-50);
  border: 1px solid var(--krem-300);
  border-radius: var(--radius-pilulka);
  transition: border-color var(--prechod), box-shadow var(--prechod);
}

.hledani__vstup::placeholder { color: var(--text-400); }

.hledani__vstup:focus {
  outline: none;
  border-color: var(--zlata-500);
  box-shadow: 0 0 0 3px rgba(201, 154, 60, 0.22);
}

/* Křížek, kterým prohlížeč doplňuje type="search", má v Chromu vlastní
   šedou barvu a v krémovém poli působí jako cizí prvek. */
.hledani__vstup::-webkit-search-cancel-button {
  filter: grayscale(1) opacity(0.55);
  cursor: pointer;
}

.hledani__stav {
  min-height: 24px;
  margin: 18px 0 6px;
  font-size: 15px;
  color: var(--text-500);
}

.hledani__vysledky { margin-top: 10px; }

.hledani__prazdno,
.hledani__uvod {
  max-width: 42em;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-700);
}

.hledani__prazdno-nadpis,
.hledani__navrhy-nadpis {
  font-family: var(--pismo-nadpis);
  font-size: 20px;
  color: var(--jehlici-900);
  margin-bottom: 8px;
}

.hledani__prazdno a,
.hledani__uvod a,
.hledani__prazdno p a { color: var(--jerabina-600); text-decoration: underline; }

.hledani__navrhy { margin-top: 4px; }

/* Zvýrazněná shoda ve výsledku. Podtržení místo barevné plochy — jinak by
   se výsledky s víc shodami rozpadly na skvrny a přebily by karty samotné. */
.zvyraznene {
  background: none;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--zlata-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

@media (max-width: 619px) {
  .hledani__vstup { font-size: 16px; padding: 15px 18px 15px 48px; }
  .hledani__ikona { left: 17px; }
}

/* -------------------------- SEZÓNNÍ PŘEPÍNÁNÍ ---------------------------- */
/*
   Homepage má tři stavy (NAVRH-STRUKTURY.md, „Sezónní přepínání"). Který
   platí, určuje atribut data-sezona na <html> — nastavuje ho krátký skript
   v hlavičce index.html, aby se stihl dřív, než prohlížeč cokoli nakreslí.

   Bloky se označují atributem data-sezona-jen se seznamem sezón, ve kterých
   se mají ukázat. Schovávají se CSS, ne JavaScriptem: bez JS zůstane
   atribut data-sezona nenastavený, žádné z pravidel níž se neuplatní a
   stránka se ukáže celá ve vánoční verzi. To je stav, který dává smysl sám
   o sobě — stejná úvaha jako u filtrů ve výpisech.

   Pozor: pravidlo musí být na `[data-sezona-jen]`, ne na konkrétní třídě.
   Kdyby se psalo `.hero__perex { display: none }`, přebilo by ho kterékoli
   pozdější pravidlo se stejnou specificitou a varianta by prosvítala.
*/
[data-sezona="mimo"]     [data-sezona-jen]:not([data-sezona-jen~="mimo"]),
[data-sezona="listopad"] [data-sezona-jen]:not([data-sezona-jen~="listopad"]),
[data-sezona="advent"]   [data-sezona-jen]:not([data-sezona-jen~="advent"]) {
  display: none;
}

/* Mimo sezónu je hero krémový a klidný, ne tmavě zelený. Je to osm měsíců
   v roce, takže tohle je ve skutečnosti častější podoba homepage.

   ODSTÍN SE 7. 9. 2026 ZTMAVIL O STUPEŇ, a je to oprava chyby, ne vkus.
   Gradient původně končil na --krem-50 (#FDFAF5) — jenže přesně tu barvu má
   i sekce Receptů hned pod hero (.sekce--svetla). Dolní polovina hero tak
   měla identické pozadí jako sekce pod ním a hranice mezi nimi zmizela;
   Šimon si toho všiml. V adventní verzi problém není, tam je hero tmavě
   zelené a předěl je samozřejmý.

   Teď jde gradient z --krem-200 do --krem-100 a proti --krem-50 pod ním je
   znát. Zlatá vlásečnice na spodní hraně řez dopoví — je to stejná linka,
   jakou má patička nahoře, ne nový prvek. */
[data-sezona="mimo"] .hero {
  background: linear-gradient(150deg, var(--krem-200), var(--krem-100) 62%);
  color: var(--text-900);
  box-shadow: inset 0 -1px 0 var(--krem-300);
}

[data-sezona="mimo"] .hero h1 { color: var(--jehlici-900); }
[data-sezona="mimo"] .hero__perex { color: var(--text-700); }

[data-sezona="mimo"] .stitek {
  background: var(--zlata-200);
  color: var(--zlata-text);
}

/* Fotka mimo sezónu se nestřídá, takže tu není co prolínat — stačí, aby
   nebyla schovaná pravidlem pro rotaci. */
.hero__foto--klid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

/* ========================================================================== */
/*                    OZDOBNÉ PODKLADY V PRAVÉ ČÁSTI ČLÁNKU                   */
/* ========================================================================== */
/*
   Tělo článku má 42 em a je zarovnané doleva, takže na širokém okně zbývá
   vpravo 566 px prázdné plochy (při 1280 px okna 406, při 1100 už jen 226).
   Vyplňuje ji ozdoba: tenká zlatá linka na nízké průhlednosti, stejný jazyk
   jako vločky na atmosfera.html.

   Pravidla, na kterých to stojí:

   * Ozdoba leží POD obsahem (z-index 0 vs. 1), takže smí přesahovat pod text.
   * Velikost a pozice v procentech, ne v pixelech — s pevnými pixely vyleze
     motiv v užším okně přes okraj.
   * `overflow: hidden` na sekci, ať nevznikne vodorovné rolování.
   * Pod 1100 px se ozdoba vypíná úplně — není kam ji dát.
   * `aria-hidden` a `pointer-events: none`: pro čtečku i myš neexistuje.
*/

.sekce--ozdoba {
  position: relative;
  overflow: hidden;
}

/* Obsah musí nad ozdobu, jinak by ji překrylo pozadí sekce. */
.sekce--ozdoba > .obal {
  position: relative;
  z-index: 1;
}

.ozdoba {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* Přesahuje pod text — pravý okraj textového sloupce je zhruba v polovině
     obalu, takže 52 % dává ozdobě prostor i pod poslední řádky. */
  width: 52%;
  z-index: 0;
  pointer-events: none;
  color: var(--zlata-600);
}

/*
   Jednotlivé kusy si nesou pozici a velikost v `style`:
     --x, --y  střed motivu v procentech plochy ozdoby
     --v       šířka v procentech (výšku dopočítá --pomer)
     --r       natočení
     --o       průhlednost
   Stejný zápis jako u `.karta-sekce__vlocka`, ať se to nemusí učit dvakrát.
*/
.ozdoba > svg {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--v);
  height: auto;
  aspect-ratio: var(--pomer, 1);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  opacity: var(--o, 0.1);
}

/*
   OKRAJOVÝ LEM. Papírový řetěz podél pravé hrany je jediný motiv, který se
   opakuje — a proto NENÍ jako <svg use>, ale jako dlaždice v CSS pozadí.
   Skládat ho z několika kusů se zkoušelo a mezi nimi zůstávaly mezery,
   protože výška sekce je u každého článku jiná. `repeat-y` tenhle problém
   nemá: dlaždice je vysoká přesně 280 px = osm článků po 35, takže na sebe
   navazuje beze švu v jakékoli výšce.
*/
.ozdoba__lem {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6%;
  width: 70px;
  opacity: 0.13;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 280' width='70' height='280'%3E%3Cg fill='none' stroke='%23B0822C' stroke-width='1.8'%3E%3Cellipse cx='35' cy='17.5' rx='24' ry='13'/%3E%3Cellipse cx='35' cy='52.5' rx='13' ry='24'/%3E%3Cellipse cx='35' cy='87.5' rx='24' ry='13'/%3E%3Cellipse cx='35' cy='122.5' rx='13' ry='24'/%3E%3Cellipse cx='35' cy='157.5' rx='24' ry='13'/%3E%3Cellipse cx='35' cy='192.5' rx='13' ry='24'/%3E%3Cellipse cx='35' cy='227.5' rx='24' ry='13'/%3E%3Cellipse cx='35' cy='262.5' rx='13' ry='24'/%3E%3C/g%3E%3C/svg%3E") repeat-y center top;
  background-size: 70px 280px;
}

@media (max-width: 1099px) {
  .ozdoba,
  .ozdoba__lem { display: none; }
}

@media print {
  .ozdoba,
  .ozdoba__lem { display: none; }
}

/* ------------------------------- VIDEO ----------------------------------- */
/* Přehrávač se načte až po kliknutí — do té doby je tu jen náhled uložený
   u nás. Kdyby tu byl rovnou <iframe>, volal by web Google ještě před
   souhlasem s cookies. Přidáno 10. 9. 2026 se sekcí Dárky. */

/* Mřížka, když je videí v článku víc za sebou. Jedno video zůstává na celou
   šířku — dvousloupcová mřížka o jedné položce vypadá jako chyba. */
.videa {
  display: grid;
  gap: 1.1rem;
  margin: 1.6rem 0;
  clear: both;
}

@media (min-width: 700px) {
  .videa { grid-template-columns: repeat(2, 1fr); }
}

.videa .video { margin: 0; }

.video {
  position: relative;
  margin: 1.6rem 0;
  border-radius: var(--radius-m, 12px);
  overflow: hidden;
  background: #0b2119;
  aspect-ratio: 16 / 9;
}

.video__spust {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Dvě třídy schválně: `.clanek__telo img` (0,1,1) dává obrázkům v článku
   float a pevných 300 px. Náhled videa je celá plocha přehrávače, ne
   obtékaná fotka, takže tu tohle pravidlo musí přebít. */
.video .video__nahled {
  display: block;
  float: none;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  transition: transform .35s ease, opacity .35s ease;
}

.video__spust:hover .video__nahled,
.video__spust:focus-visible .video__nahled { transform: scale(1.03); opacity: .85; }

/* Trojúhelník play přes celou plochu, uprostřed. */
.video__ikona {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.6rem;
  height: 4.6rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(11, 33, 25, .78);
  border: 2px solid rgba(240, 233, 220, .9);
  pointer-events: none;
}

.video__ikona::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-left: 1.15rem solid #f0e9dc;
  border-top: .72rem solid transparent;
  border-bottom: .72rem solid transparent;
}

.video__spust:hover .video__ikona { background: rgba(178, 58, 47, .92); }

.video__ramec { display: block; width: 100%; height: 100%; border: 0; }

.video-odkaz { margin: 1.4rem 0; }

@media print {
  .video { display: none; }
}