@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

/* ============================================================
Proměnné – písma, barvy, řádkování
============================================================ */
:root {
  --vz-font-script: "Petit Formal Script", cursive;          /* nadpisy H1, titul, motto */
  --vz-font-text: "Lora", Georgia, "Times New Roman", serif;  /* text, H2, H3 */
  --vz-color-accent: #666C09;
  --vz-color-text: #2f3122;
  --vz-bg: #DBD9C6;

  --vz-size-text: 1.0625rem;                       /* ~17 px */
  --vz-size-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --vz-size-h2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --vz-size-h3: 1.125rem;
  --vz-line: 1.65;

  --vz-section-pad: 3.5rem;                        /* spodní odsazení sekce */
  --vz-section-pad-top: 1.25rem;                   /* horní odsazení (nad oddělovačem) */
  --vz-divider-h: 2.5rem;                          /* výška ozdobného oddělovače */
  --vz-divider-gap: 1.5rem;                        /* mezera pod oddělovačem */
  --vz-gap: 2rem;
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

/* barva pozadí stránky – Safari na iPhonu podle ní podbarví stavový řádek a lišty
(šablona tu nemá vlastní CSS, jinak by zůstaly bílé) */
html,
body {
  background-color: var(--vz-bg);
}

body {
  margin: 0;
}

p:empty {
  display: none !important;
}

a {
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0);
}

a:hover {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#main {
  background-color: var(--vz-bg);
}



/*  
section:nth-of-type(3n+1) h1 {
background-image: url("/obrazek/3/s1-jpg/");
}

section:nth-of-type(3n+2) h1 {
background-image: url("/obrazek/3/s2-jpg/");
}

section:nth-of-type(3n+3) h1 {
background-image: url("/obrazek/3/s3-jpg/");
}
*/

h1 {
  background-image: url("/obrazek/3/s3-jpg/");
}


nav, .navbar, #navbar, .menu, #menu {
  display: none !important;
}

/* ============================================================
Sekce – každá minimálně na výšku obrazovky
============================================================ */
.section-container {
  min-height: 100vh;               /* na iOS = celá obrazovka i pod plovoucími lištami Safari */
  padding: var(--vz-section-pad-top) 1.25rem var(--vz-section-pad);
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--vz-font-text);
  font-size: var(--vz-size-text);
  line-height: var(--vz-line);
  color: var(--vz-color-text);
}

/* úvodní sekce s obrázkem jde přes celou šířku a bez odsazení */
.section-container.section-custom {
  max-width: none;
  padding: 0;
}

/* ozdobný oddělovač na začátku každé sekce (kromě úvodní obrazovky):
větvička s lístky a bobulí, linky do ztracena */
.section-container:not(.section-custom)::before {
  content: "";
  display: block;
  height: var(--vz-divider-h);
  max-width: 280px;
  margin: 0 auto var(--vz-divider-gap);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 40'%3E%3Cdefs%3E%3ClinearGradient id='l' gradientUnits='userSpaceOnUse' x1='4' x2='100' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%23666C09' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23666C09'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' gradientUnits='userSpaceOnUse' x1='256' x2='160' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%23666C09' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23666C09'/%3E%3C/linearGradient%3E%3Cpath id='f' d='M0 0C4-4 10-4.5 14 0C10 4.5 4 4 0 0Z'/%3E%3C/defs%3E%3Cpath d='M4 20H100' stroke='url(%23l)' stroke-width='1.2'/%3E%3Cpath d='M160 20H256' stroke='url(%23r)' stroke-width='1.2'/%3E%3Cpath d='M100 20H125M135 20H160' stroke='%23666C09' stroke-width='1.2' stroke-linecap='round'/%3E%3Cg fill='%23666C09'%3E%3Cuse href='%23f' transform='translate(122 20) rotate(215)'/%3E%3Cuse href='%23f' transform='translate(106 20) rotate(215)'/%3E%3Cuse href='%23f' transform='translate(138 20) rotate(-35)'/%3E%3Cuse href='%23f' transform='translate(154 20) rotate(-35)'/%3E%3C/g%3E%3Cg fill='%238E9538'%3E%3Cuse href='%23f' transform='translate(114 20) rotate(145)'/%3E%3Cuse href='%23f' transform='translate(146 20) rotate(35)'/%3E%3C/g%3E%3Ccircle cx='130' cy='20' r='4.2' fill='%23DBD9C6' stroke='%23666C09' stroke-width='1.2'/%3E%3Ccircle cx='130' cy='20' r='1.8' fill='%23666C09'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================
Typografie
============================================================ */
.section-container h1,
.section-container h2,
.section-container h3 {
  color: var(--vz-color-accent);
  line-height: 1.3;
}

.section-container h1 {
  font-family: var(--vz-font-script);
  font-size: var(--vz-size-h1);
  font-weight: 400;
  text-align: center;
  margin: 0 0 2rem;
  padding: 1rem 0;
  background-size: cover;
}

.section-container h2 {
  font-family: var(--vz-font-text);
  font-size: var(--vz-size-h2);
  font-weight: 600;
  margin: 2.25rem 0 0.75rem;
}

.section-container h3 {
  font-family: var(--vz-font-text);
  font-size: var(--vz-size-h3);
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

.section-container h1 + h2 {
  margin-top: 0;
}

/* podnadpis hned pod H1 (např. „aneb co mě ještě baví“) */
.section-container h1:has(+ .vz-subtitle) {
  margin-bottom: 0.25rem;
}

.section-container .vz-subtitle {
  font-family: var(--vz-font-script);
  font-weight: 400;
  text-align: center;
  margin: 0 0 2rem;
}

.section-container p,
.section-container li {
  font-family: var(--vz-font-text);
  font-size: var(--vz-size-text);
  line-height: var(--vz-line);
}

.section-container p {
  margin: 0 0 1rem;
  text-align: justify;
}

/* odkazy v textu v barvě webu místo výchozí modré;
stejně vypadá i jméno autora v seznamu četby (.vz-author) */
.section-container p a,
.section-container li a,
.section-container .vz-author {
  color: var(--vz-color-accent);
  font-weight: 600;
}

/* kotvy z menu – dorovnají odsazení a oddělovač, aby po odrolování začínala sekce u horního okraje */
.section-container h1 a[id],
.section-container h1[id] {
  scroll-margin-top: calc(var(--vz-section-pad-top) + var(--vz-divider-h) + var(--vz-divider-gap));
}

.section-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 6px;
}

/* ============================================================
Pomocné třídy obsahu
============================================================ */
.section-container .vz-note {
  text-align: center;
  font-style: italic;
  font-size: 0.9375rem;
}

.vz-lead {
  font-weight: 600;
  font-style: italic;
}

.vz-price {
  font-style: italic;
}


.vz-quote {
  font-style: italic;
  text-align: center;
}

.vz-cta a {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--vz-color-accent);
  border-radius: 999px;
  color: var(--vz-color-accent);
  font-weight: 600;
}

.vz-cta a:hover {
  background: var(--vz-color-accent);
  border-color: var(--vz-color-accent);
  border-radius: 999px;
  color: #fff;
}

ul.vz-list,
ul.vz-prices,
ul.vz-books {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

ul.vz-list li,
ul.vz-prices li {
  position: relative;
  padding-left: 1.95em;
  margin-bottom: 0.35rem;
}

/* odrážka jako květinka – bílý kvítek jako na úvodní fotce: pět mírně nepravidelných
plátků s vroubkem a měkkým stínováním (bez obrysů), zelený semeník, tyčinky s prašníky */
ul.vz-list li::before,
ul.vz-prices li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((var(--vz-line) * 1em - 1.4em) / 2);   /* svisle na střed prvního řádku */
  width: 1.4em;
  height: 1.4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11.5 -11.5 23 23'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='-1' r='9.5' fx='0' fy='-1.5' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23efe2b8'/%3E%3Cstop offset='0.22' stop-color='%23faf4e4'/%3E%3Cstop offset='0.55' stop-color='%23ffffff'/%3E%3Cstop offset='0.86' stop-color='%23fbf8f3'/%3E%3Cstop offset='1' stop-color='%23e4ded2'/%3E%3C/radialGradient%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0.9'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='c' cx='-0.3' cy='-0.4' r='1.8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23d7dc84'/%3E%3Cstop offset='1' stop-color='%238e9538'/%3E%3C/radialGradient%3E%3Cfilter id='s' x='-25%' y='-25%' width='150%' height='150%'%3E%3CfeDropShadow dx='0' dy='0.7' stdDeviation='0.8' flood-color='%234f5406' flood-opacity='0.45'/%3E%3C/filter%3E%3Cfilter id='ps' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='0.45' flood-color='%237a6f55' flood-opacity='0.35'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='0.12'/%3E%3C/filter%3E%3Cpath id='p' d='M0 -1C-2.6 -1.6 -5.6 -4.2 -5.2 -7.2C-4.9 -9.4 -2.6 -10.3 -1 -9.4C-0.5 -9.1 -0.2 -8.8 0 -8.5C0.2 -8.8 0.5 -9.1 1 -9.4C2.6 -10.3 4.9 -9.4 5.2 -7.2C5.6 -4.2 2.6 -1.6 0 -1Z'/%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cg transform='rotate(0) scale(1)'%3E%3Cuse href='%23p' fill='url(%23g)' filter='url(%23ps)'/%3E%3C/g%3E%3Cg transform='rotate(71) scale(0.95)'%3E%3Cuse href='%23p' fill='url(%23g)' filter='url(%23ps)'/%3E%3C/g%3E%3Cg transform='rotate(145) scale(1.03)'%3E%3Cuse href='%23p' fill='url(%23g)' filter='url(%23ps)'/%3E%3C/g%3E%3Cg transform='rotate(216) scale(0.97)'%3E%3Cuse href='%23p' fill='url(%23g)' filter='url(%23ps)'/%3E%3C/g%3E%3Cg transform='rotate(289) scale(1.01)'%3E%3Cuse href='%23p' fill='url(%23g)' filter='url(%23ps)'/%3E%3C/g%3E%3Cg stroke='%23e3d9c4' stroke-width='0.18' stroke-linecap='round' fill='none' opacity='0.55'%3E%3Cpath d='M0 -2.2Q-0.6 -5 -1.6 -7.6M0 -2.2V-7.9M0 -2.2Q0.6 -5 1.6 -7.6' transform='rotate(0) scale(1)'/%3E%3Cpath d='M0 -2.2Q-0.6 -5 -1.6 -7.6M0 -2.2V-7.9M0 -2.2Q0.6 -5 1.6 -7.6' transform='rotate(71) scale(0.95)'/%3E%3Cpath d='M0 -2.2Q-0.6 -5 -1.6 -7.6M0 -2.2V-7.9M0 -2.2Q0.6 -5 1.6 -7.6' transform='rotate(145) scale(1.03)'/%3E%3Cpath d='M0 -2.2Q-0.6 -5 -1.6 -7.6M0 -2.2V-7.9M0 -2.2Q0.6 -5 1.6 -7.6' transform='rotate(216) scale(0.97)'/%3E%3Cpath d='M0 -2.2Q-0.6 -5 -1.6 -7.6M0 -2.2V-7.9M0 -2.2Q0.6 -5 1.6 -7.6' transform='rotate(289) scale(1.01)'/%3E%3C/g%3E%3C/g%3E%3Cg filter='url(%23b)'%3E%3Cg stroke='%23efe3a6' stroke-width='0.28' stroke-linecap='round'%3E%3Cpath d='M1.30 0.00L4.39 0.00'/%3E%3Cpath d='M0.93 0.91L2.96 2.87'/%3E%3Cpath d='M0.79 1.03L2.59 3.38'/%3E%3Cpath d='M0.04 1.30L0.11 3.94'/%3E%3Cpath d='M-0.45 1.22L-1.24 3.35'/%3E%3Cpath d='M-0.96 0.88L-2.83 2.58'/%3E%3Cpath d='M-1.27 0.30L-3.94 0.92'/%3E%3Cpath d='M-1.30 -0.08L-3.39 -0.20'/%3E%3Cpath d='M-1.10 -0.69L-3.05 -1.93'/%3E%3Cpath d='M-0.61 -1.15L-1.84 -3.49'/%3E%3Cpath d='M0.15 -1.29L0.54 -4.65'/%3E%3Cpath d='M0.64 -1.13L2.13 -3.78'/%3E%3Cpath d='M0.87 -0.96L2.53 -2.80'/%3E%3Cpath d='M1.29 -0.13L3.92 -0.40'/%3E%3C/g%3E%3Ccircle r='1.6' fill='url(%23c)'/%3E%3Cg fill='%23f0bf2e' stroke='%23c08f18' stroke-width='0.18'%3E%3Ccircle cx='4.39' cy='0.00' r='0.59'/%3E%3Ccircle cx='2.96' cy='2.87' r='0.64'/%3E%3Ccircle cx='2.59' cy='3.38' r='0.57'/%3E%3Ccircle cx='0.11' cy='3.94' r='0.53'/%3E%3Ccircle cx='-1.24' cy='3.35' r='0.60'/%3E%3Ccircle cx='-2.83' cy='2.58' r='0.62'/%3E%3Ccircle cx='-3.94' cy='0.92' r='0.54'/%3E%3Ccircle cx='-3.39' cy='-0.20' r='0.58'/%3E%3Ccircle cx='-3.05' cy='-1.93' r='0.52'/%3E%3Ccircle cx='-1.84' cy='-3.49' r='0.52'/%3E%3Ccircle cx='0.54' cy='-4.65' r='0.55'/%3E%3Ccircle cx='2.13' cy='-3.78' r='0.52'/%3E%3Ccircle cx='2.53' cy='-2.80' r='0.62'/%3E%3Ccircle cx='3.92' cy='-0.40' r='0.58'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

ul.vz-books li {
  margin-bottom: 0.5rem;
}

/* jméno autora nelámat uprostřed – zalomí se raději celé na další řádek */
.vz-books .vz-author {
  white-space: nowrap;
}

/* ============================================================
Tři sloupce (section-3-col-top-text)
============================================================ */
.section-3-col-top-text .section-cell-parent {
  display: grid;
  grid-template-columns: 1fr;          /* mobil / tablet: sloupce pod sebou */
  gap: var(--vz-gap);
  margin: 0;                           /* zrušení záporných okrajů .row */
}

/* clearfix pseudo-prvky Bootstrapu (.row::before/::after) by se v gridu chovaly jako buňky */
.section-3-col-top-text .section-cell-parent::before,
.section-3-col-top-text .section-cell-parent::after {
  display: none;
}

.section-3-col-top-text .section-cell-item {
  float: none;
  width: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.section-3-col-top-text .section-cell-item h2,
.section-3-col-top-text .section-cell-item h3 {
  margin-top: 0;
}

/* úvodní text nad sloupci trochu oddělit od sloupců */
.section-3-col-top-text > p:last-of-type {
  margin-bottom: 2rem;
}

/* obrázky ve sloupcích zarovnané dole na stejnou úroveň */
.section-3-col-top-text .section-cell-item > img {
  margin-top: auto;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.section-3-col-top-text.portrait-image .section-cell-item > img {
  aspect-ratio: 2 / 3;
}


@media (min-width: 900px) {
  .section-3-col-top-text .section-cell-parent {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
Galerie fotografií (.vz-gallery) – vypadají jako skutečné fotky (v kterékoli sekci)
na papíře: bílý okraj, stín, každá mírně jinak pootočená.
Desktop (≥ 900 px): max. 5 v řadě, mobil/tablet: 3 v řadě, úzký mobil (< 480 px): 1.
Kliknutí otevře fotku v plné velikosti – zajišťuje to šablona
(odkaz s třídou „thickbox“ → galerie PhotoSwipe).
============================================================ */
.section-container .section-cell-parent.vz-gallery {
  --vz-photo-gap: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;         /* neúplná poslední řada na střed */
  gap: calc(var(--vz-photo-gap) * 1.2) var(--vz-photo-gap);
  margin: 1.5rem 0 2.5rem;
  padding: 0.5rem 0;
}

.section-container .vz-gallery .section-cell-item {
  flex: 0 0 calc((100% - 4 * var(--vz-photo-gap)) / 5);
  min-width: 0;
}

/* fotka = papír s bílým okrajem */
.section-container .vz-gallery a.thickbox {
  --vz-rot: -2deg;
  --vz-shift: 0px;
  position: relative;
  display: block;
  padding: 6%;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(150deg, #ffffff 0%, #fbfaf5 55%, #f1eee4 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(40, 44, 0, 0.18),
    0 16px 28px -12px rgba(40, 44, 0, 0.25);
  transform: translateY(var(--vz-shift)) rotate(var(--vz-rot));
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}

/* přiblížení a narovnání při najetí myší / zaměření klávesnicí */
.section-container .vz-gallery a.thickbox:hover,
.section-container .vz-gallery a.thickbox:focus-visible {
  z-index: 2;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(150deg, #ffffff 0%, #fbfaf5 55%, #f1eee4 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 14px 28px rgba(40, 44, 0, 0.22),
    0 28px 44px -16px rgba(40, 44, 0, 0.3);
  transform: translateY(-4px) rotate(0deg) scale(1.06);
}

.section-container .vz-gallery img {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  outline: 1px solid rgba(0, 0, 0, 0.06);   /* jemný přechod fotka / papír */
  background: #e9e6dc;                      /* místo nenačtené fotky */
}

.section-container.portrait-image .vz-gallery img {
  aspect-ratio: 2 / 3;
}

/* galerie s fotkami na výšku mimo sekci portrait-image (např. kytice v Doplňkových službách) */
.section-container .vz-gallery.vz-portrait img {
  aspect-ratio: 3 / 4;
}

/* každá fotka jinak pootočená a trochu posunutá – opakuje se po 10 */
.vz-gallery .section-cell-item:nth-child(10n+1) a.thickbox { --vz-rot: -3deg;   --vz-shift: 4px; }
.vz-gallery .section-cell-item:nth-child(10n+2) a.thickbox { --vz-rot: 2.2deg;  --vz-shift: -6px; }
.vz-gallery .section-cell-item:nth-child(10n+3) a.thickbox { --vz-rot: -1.3deg; --vz-shift: 2px; }
.vz-gallery .section-cell-item:nth-child(10n+4) a.thickbox { --vz-rot: 2.8deg;  --vz-shift: -2px; }
.vz-gallery .section-cell-item:nth-child(10n+5) a.thickbox { --vz-rot: -2.2deg; --vz-shift: 6px; }
.vz-gallery .section-cell-item:nth-child(10n+6) a.thickbox { --vz-rot: 1.5deg;  --vz-shift: -4px; }
.vz-gallery .section-cell-item:nth-child(10n+7) a.thickbox { --vz-rot: -2.7deg; --vz-shift: 0px; }
.vz-gallery .section-cell-item:nth-child(10n+8) a.thickbox { --vz-rot: 1deg;    --vz-shift: 5px; }
.vz-gallery .section-cell-item:nth-child(10n+9) a.thickbox { --vz-rot: -1.7deg; --vz-shift: -3px; }
.vz-gallery .section-cell-item:nth-child(10n)   a.thickbox { --vz-rot: 2.5deg;  --vz-shift: 2px; }

/* tablet a mobil: 3 v řadě */
@media (max-width: 899px) {
  .section-container .section-cell-parent.vz-gallery {
    --vz-photo-gap: 1rem;
  }

  .section-container .vz-gallery .section-cell-item {
    flex-basis: calc((100% - 2 * var(--vz-photo-gap)) / 3);
  }
}

/* mobil na výšku (< 480 px): 2 fotky v řadě */
@media (max-width: 479px) {
  .section-container .section-cell-parent.vz-gallery {
    --vz-photo-gap: 1rem;
  }

  .section-container .vz-gallery .section-cell-item {
    flex-basis: calc((100% - var(--vz-photo-gap)) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-container .vz-gallery a.thickbox {
    transition: none;
  }
}

/* ============================================================
Vizualizace návrhů (.vz-visuals) – obyčejné obrázky v mřížce,
jednotné náhledy (oříznuté na 4:3), zaoblené rohy, jemný stín.
Desktop (≥ 900 px): max. 3 v řadě, tablet (≥ 560 px): 2, mobil: 1.
Kliknutí otevře obrázek v plné velikosti (odkaz „thickbox“ → PhotoSwipe šablony).
============================================================ */
.section-container .vz-visuals {
  --vz-vis-gap: 1.25rem;
  display: flex;                   /* flex místo gridu: neúplná poslední řada na střed */
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vz-vis-gap);
  margin: 1rem 0 2rem;
}

.section-container .vz-visuals a.thickbox {
  flex: 0 0 100%;
  min-width: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #e9e6dc;             /* místo, než se obrázek načte */
  box-shadow: 0 2px 6px rgba(40, 44, 0, 0.12), 0 10px 24px -10px rgba(40, 44, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.section-container .vz-visuals a.thickbox:hover,
.section-container .vz-visuals a.thickbox:focus-visible {
  border: 0;
  border-radius: 10px;
  background: #e9e6dc;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(40, 44, 0, 0.14), 0 18px 34px -12px rgba(40, 44, 0, 0.32);
}

.section-container .vz-visuals img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.section-container .vz-visuals a.thickbox:hover img {
  transform: scale(1.04);          /* jemné přiblížení náhledu */
}

@media (min-width: 560px) {
  .section-container .vz-visuals a.thickbox {
    flex-basis: calc((100% - var(--vz-vis-gap)) / 2);
  }
}

@media (min-width: 900px) {
  .section-container .vz-visuals {
    --vz-vis-gap: 1.5rem;
  }

  .section-container .vz-visuals a.thickbox {
    flex-basis: calc((100% - 2 * var(--vz-vis-gap)) / 3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-container .vz-visuals a.thickbox,
  .section-container .vz-visuals img {
    transition: none;
  }
}

/* ============================================================
Certifikáty (.vz-certs) – každý v dřevěném rámu s paspartou.
Rám: dřevo s letokruhy, rohy na pokos (boční lišty mají svislou kresbu,
horní a dolní vodorovnou), světlo zleva shora, stín jako na zdi.
Desktop (≥ 900 px): max. 5 v řadě, 600–899 px: 3, 360–599 px: 2, užší: 1.
Kliknutí otevře certifikát v plné velikosti (odkaz „thickbox“ → PhotoSwipe šablony).
============================================================ */
.section-container .vz-certs {
  --vz-frame: 14px;                /* šířka lišty rámu */
  --vz-cert-gap: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--vz-cert-gap) * 1.15) var(--vz-cert-gap);
  margin: 1.5rem 0 2rem;
}

.section-container .vz-certs a.vz-frame,
.section-container .vz-certs a.vz-frame:hover,
.section-container .vz-certs a.vz-frame:focus-visible {
  --vz-grain-dir: 90deg;           /* boční lišty: svislé letokruhy */
  position: relative;
  display: block;
  flex: 0 0 calc((100% - 4 * var(--vz-cert-gap)) / 5);
  min-width: 0;
  padding: var(--vz-frame);
  border: 0;
  border-radius: 1px;
  background:
    /* světlo zleva, stín vpravo */
    linear-gradient(90deg, rgba(255, 240, 215, 0.20), rgba(255, 240, 215, 0) var(--vz-frame),
      rgba(0, 0, 0, 0) calc(100% - var(--vz-frame)), rgba(20, 8, 0, 0.32)),
    var(--vz-grain);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-tap-highlight-color: transparent;
}

.section-container .vz-certs a.vz-frame {
  box-shadow:
    0 0 0 1px rgba(40, 20, 5, 0.55),          /* vnější hrana rámu */
    0 2px 3px rgba(20, 10, 0, 0.35),
    0 10px 18px rgba(30, 20, 5, 0.30),
    0 22px 34px -14px rgba(30, 20, 5, 0.40);  /* stín na zdi */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-container .vz-certs a.vz-frame:hover,
.section-container .vz-certs a.vz-frame:focus-visible {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(40, 20, 5, 0.55),
    0 4px 6px rgba(20, 10, 0, 0.30),
    0 18px 30px rgba(30, 20, 5, 0.32),
    0 34px 48px -18px rgba(30, 20, 5, 0.45);
}

/* dřevo – vrstvy žilek s různou roztečí, aby kresba nepůsobila pravidelně.
Definované přímo na rámu a lištách, aby každá použila svůj směr --vz-grain-dir. */
.section-container .vz-certs a.vz-frame,
.section-container .vz-certs a.vz-frame::before,
.section-container .vz-certs a.vz-frame::after {
  --vz-grain:
    repeating-linear-gradient(var(--vz-grain-dir), rgba(55, 28, 10, 0.20) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(var(--vz-grain-dir), rgba(255, 228, 185, 0.09) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(var(--vz-grain-dir), rgba(45, 22, 6, 0.14) 0 3px, transparent 3px 13px),
    repeating-linear-gradient(var(--vz-grain-dir), rgba(255, 220, 170, 0.06) 0 5px, transparent 5px 23px),
    linear-gradient(var(--vz-grain-dir), #6a4222 0%, #8b5b30 22%, #7b4d28 47%, #946339 71%, #73482a 100%);
}

/* horní a dolní lišta – vodorovné letokruhy, rohy zkosené na pokos */
.section-container .vz-certs a.vz-frame::before,
.section-container .vz-certs a.vz-frame::after {
  --vz-grain-dir: 0deg;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--vz-frame);
  pointer-events: none;
}

.section-container .vz-certs a.vz-frame::before {
  top: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--vz-frame)) 100%, var(--vz-frame) 100%);
  background:
    linear-gradient(180deg, rgba(255, 240, 215, 0.28), rgba(255, 240, 215, 0.04) 60%, rgba(0, 0, 0, 0.10)),
    var(--vz-grain);
}

.section-container .vz-certs a.vz-frame::after {
  bottom: 0;
  clip-path: polygon(var(--vz-frame) 0, calc(100% - var(--vz-frame)) 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(20, 8, 0, 0.36)),
    var(--vz-grain);
}

/* pasparta + vnitřní hrana rámu a stín, který rám vrhá dovnitř */
.section-container .vz-certs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 424 / 600;
  margin: 0;
  padding: 7%;
  border-radius: 0;
  object-fit: contain;
  background: #f7f3e8;
  box-shadow:
    0 0 0 1px rgba(30, 15, 5, 0.75),         /* vnitřní hrana lišty */
    0 0 0 3px rgba(255, 225, 180, 0.16),     /* světlý zkosený okraj lišty */
    inset 0 3px 5px rgba(40, 25, 5, 0.28),   /* stín horní lišty na paspartě */
    inset 2px 0 4px rgba(40, 25, 5, 0.12);
}

@media (max-width: 899px) {
  .section-container .vz-certs {
    --vz-frame: 11px;
    --vz-cert-gap: 1.25rem;
  }

  .section-container .vz-certs a.vz-frame,
  .section-container .vz-certs a.vz-frame:hover,
  .section-container .vz-certs a.vz-frame:focus-visible {
    flex-basis: calc((100% - 2 * var(--vz-cert-gap)) / 3);
  }
}

@media (max-width: 599px) {
  .section-container .vz-certs {
    --vz-frame: 9px;
    --vz-cert-gap: 1.1rem;
  }

  .section-container .vz-certs a.vz-frame,
  .section-container .vz-certs a.vz-frame:hover,
  .section-container .vz-certs a.vz-frame:focus-visible {
    flex-basis: calc((100% - var(--vz-cert-gap)) / 2);
  }
}

@media (max-width: 359px) {
  .section-container .vz-certs a.vz-frame,
  .section-container .vz-certs a.vz-frame:hover,
  .section-container .vz-certs a.vz-frame:focus-visible {
    flex-basis: min(100%, 15rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-container .vz-certs a.vz-frame {
    transition: none;
  }
}

/* ============================================================
Zobrazení v plné velikosti (PhotoSwipe šablony) – vlastní animace
Šablona otevírá obrázky jen prolnutím. PhotoSwipe přidává při otevření třídu
.pswp--open, po dokončení nájezdu .pswp--animated-in a na začátku zavírání ji
zase odebere – podle toho se tu animuje (bez zásahu do JavaScriptu šablony).
============================================================ */
.pswp {
  --vz-pswp-ease: cubic-bezier(0.22, 1.25, 0.36, 1);   /* lehký pružný dojezd */
}

/* tmavě olivové pozadí místo černého + rozmazaná stránka pod ním */
.pswp .pswp__bg {
  background: #1b1d08;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* obrázek: při otevření vyplave ze zmenšení a rozostření (animace vz-pswp-in),
při zavření se zmenší, sjede dolů a rozplyne (přechod).
Zavírání pozná podle toho, že PhotoSwipe nastaví oknu inline styl „opacity: 0;“
(při otevírání nastavuje 0.001 a pak 1), třída animated-in mizí až po zavření. */
.pswp .pswp__img {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.35);
  transition:                      /* ease-out: zmenšení je vidět hned, dokud okno ještě nezprůhlední */
    transform 0.3s ease-out,
    opacity 0.3s ease-out,
    filter 0.3s ease-out;
}

.pswp--open .pswp__img {
  animation: vz-pswp-in 0.6s var(--vz-pswp-ease) backwards;   /* jen nájezd – konečný stav nedrží */
}

.pswp.pswp--open[style*="opacity: 0;"] .pswp__img {
  transform: scale(0.86) translateY(18px);
  opacity: 0;
  filter: blur(4px);
}

@keyframes vz-pswp-in {
  from {
    transform: scale(0.78) translateY(24px);
    opacity: 0;
    filter: blur(8px);
  }
  60% {
    filter: blur(0);
  }
  to {
    transform: none;
    opacity: 1;
    filter: none;
  }
}

/* horní lišta s tlačítky sjede shora, popisek vyjede zdola */
.pswp .pswp__top-bar,
.pswp .pswp__caption {
  transition: transform 0.45s var(--vz-pswp-ease) 0.15s, opacity 0.333s ease-out;
}

.pswp .pswp__top-bar {
  transform: translateY(-100%);
}

.pswp .pswp__caption {
  transform: translateY(100%);
}

.pswp--animated-in .pswp__top-bar,
.pswp--animated-in .pswp__caption {
  transform: none;
}

/* při zavírání lišta i popisek odjedou zpět */
.pswp.pswp--open[style*="opacity: 0;"] .pswp__top-bar {
  transform: translateY(-100%);
}

.pswp.pswp--open[style*="opacity: 0;"] .pswp__caption {
  transform: translateY(100%);
}

.pswp .pswp__caption__center {
  font-family: var(--vz-font-text);
  font-size: 0.95rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .pswp--open .pswp__img {
    animation: none;
  }

  .pswp .pswp__img,
  .pswp .pswp__top-bar,
  .pswp .pswp__caption {
    transform: none;
    transition: opacity 0.25s ease;
  }

  .pswp.pswp--open[style*="opacity: 0;"] .pswp__img,
  .pswp.pswp--open[style*="opacity: 0;"] .pswp__top-bar,
  .pswp.pswp--open[style*="opacity: 0;"] .pswp__caption {
    transform: none;
    filter: none;
  }
}

/* ============================================================
Jsem členem (.vz-members) – loga organizací na bílých kartičkách
s názvem pod logem. Loga ve stejně vysokém poli (názvy zarovnané),
malá loga se nezvětšují (object-fit: scale-down), aby nebyla rozmazaná.
============================================================ */
.section-container .vz-members {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;     /* desktop: loga zarovnaná doleva */
  gap: 1.25rem;
  margin: 1rem 0 0;
}

.section-container .vz-member {
  flex: 0 1 12.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem 1rem;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 2px 6px rgba(40, 44, 0, 0.10), 0 10px 22px -12px rgba(40, 44, 0, 0.30);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-container .vz-member:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(40, 44, 0, 0.12), 0 16px 30px -12px rgba(40, 44, 0, 0.35);
}

.section-container .vz-member img {
  display: block;
  width: 100%;
  height: 68px;
  margin: 0;
  border-radius: 0;
  object-fit: scale-down;
}

.section-container .vz-member span {
  color: var(--vz-color-accent);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
  .section-container .vz-member {
    transition: none;
  }
}

/* ============================================================
Archaické návrhy zahrad (.vz-antique) – historické kresby jako
grafiky v galerii: tenký zlacený rám, krémová pasparta, celé
(bez ořezu) ve stejné výšce vedle sebe. Kliknutí = plná velikost.
============================================================ */
.section-container .vz-antique {
  --vz-antique-h: 180px;           /* výška obrázku v řadě */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem;
  margin: 1.25rem 0 2.25rem;
}

/* zlacený rám – lesklé zlato s odlesky, tmavá vnější hrana, stín na zdi */
.section-container .vz-antique a.vz-gilt,
.section-container .vz-antique a.vz-gilt:hover,
.section-container .vz-antique a.vz-gilt:focus-visible {
  display: block;
  padding: 6px;
  border: 0;
  border-radius: 2px;
  background:
    linear-gradient(135deg, #7d5f1e 0%, #e9d27e 18%, #a98330 36%, #f6e6a6 52%, #9c7a2c 70%, #e3c873 86%, #7a5b1c 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-tap-highlight-color: transparent;
}

.section-container .vz-antique a.vz-gilt {
  box-shadow:
    0 0 0 1px #4f3a0e,                          /* vnější hrana rámu */
    inset 0 0 0 1px rgba(255, 245, 200, 0.55),  /* světlá hrana lišty */
    0 3px 5px rgba(30, 20, 0, 0.30),
    0 12px 22px -8px rgba(30, 20, 0, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-container .vz-antique a.vz-gilt:hover,
.section-container .vz-antique a.vz-gilt:focus-visible {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 0 0 1px #4f3a0e,
    inset 0 0 0 1px rgba(255, 245, 200, 0.55),
    0 6px 10px rgba(30, 20, 0, 0.28),
    0 22px 34px -12px rgba(30, 20, 0, 0.40);
}

/* krémová pasparta s jemným stínem od rámu; obrázek celý, bez ořezu */
.section-container .vz-antique img {
  display: block;
  width: auto;
  height: var(--vz-antique-h);
  max-width: 100%;
  margin: 0;
  padding: 9px;
  border-radius: 0;
  object-fit: contain;
  background: #f5edd8;
  box-shadow:
    0 0 0 1px rgba(80, 58, 12, 0.7),
    inset 0 2px 4px rgba(60, 40, 0, 0.25);
}

@media (max-width: 599px) {
  .section-container .vz-antique {
    --vz-antique-h: 125px;
    gap: 1rem;
  }

  .section-container .vz-antique a.vz-gilt,
  .section-container .vz-antique a.vz-gilt:hover,
  .section-container .vz-antique a.vz-gilt:focus-visible {
    padding: 4px;
  }

  .section-container .vz-antique img {
    padding: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-container .vz-antique a.vz-gilt {
    transition: none;
  }
}

/* ============================================================
O mně – fotka jako malý polaroid (.vz-feature) vpravo, text sekce ji obtéká;
pod fotkou ručně psaný popisek. Fotka není klikací.
Na mobilu (< 600 px) bez obtékání, na střed.
============================================================ */
.section-container .vz-feature {
  float: right;
  width: 306px;                    /* fotka 282 px + okraj polaroidu */
  margin: 0.35rem 0 1.5rem 2rem;
  text-align: center;
}

.section-container .vz-polaroid {
  padding: 12px 12px 36px;         /* širší spodní okraj jako u polaroidu */
  border-radius: 2px;
  background: linear-gradient(160deg, #ffffff 0%, #fbfaf5 60%, #f2efe5 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(40, 44, 0, 0.20),
    0 20px 32px -16px rgba(40, 44, 0, 0.32);
  transform: rotate(2deg);
}

.section-container .vz-feature img {
  display: block;
  width: 282px;                    /* původní velikost */
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  outline: 1px solid rgba(0, 0, 0, 0.06);
}

.section-container .vz-feature-caption {
  margin: 1.1rem 0 0;
  font-family: var(--vz-font-script);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--vz-color-accent);
  text-align: center;
}

/* loga a certifikáty už pod fotkou, ne vedle ní */
.section-container .vz-members,
.section-container .vz-certs {
  clear: both;
}

@media (max-width: 599px) {
  .section-container .vz-feature {
    float: none;
    width: auto;
    max-width: 306px;
    margin: 0.5rem auto 1.75rem;
  }
}

/* ============================================================
Tipy na výlety (.vz-trips) – květinové odrážky, název místa jako odkaz
na jeho web, pod ním krátká poznámka. Na desktopu ve dvou sloupcích.
============================================================ */
/* úvodní řádek pod nadpisem sekce (Úvod – motto, Inspirace, Tipy na výlety) – psací písmo.
Velikost roste se šířkou oddílu tak, aby se i nejdelší text (motto, ~56 em) vešel na 1 řádek;
na úzkých displejích (pod ~900 px) se už musí zalomit, aby zůstal čitelný. */
.section-container .vz-intro {
  margin: -0.5rem 0 2rem;
  text-align: center;
  font-family: var(--vz-font-script);
  font-size: clamp(0.95rem, calc((100vw - 2.5rem) / 58), 1.25rem);
  font-style: normal;
  line-height: 1.5;
  color: var(--vz-color-accent);
}

.section-container ul.vz-trips {
  max-width: 980px;
  margin: 0 auto;
  columns: 2;
  column-gap: 3.5rem;
}

.section-container ul.vz-trips li {
  break-inside: avoid;
  margin-bottom: 1rem;
}

.section-container ul.vz-trips a,
.section-container ul.vz-trips a:hover,
.section-container ul.vz-trips a:focus-visible {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--vz-color-accent);
  font-weight: 600;
}

/* podtržení jen u myši – na dotykových displejích by po ťuknutí zůstalo „viset“ */
.section-container ul.vz-trips a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* odkaz se roztáhne přes celou položku – klikat jde i na popis pod názvem */
.section-container ul.vz-trips a::before {
  content: "";
  position: absolute;
  inset: 0;
}

@media (hover: hover) {
  .section-container ul.vz-trips li:hover a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* šipka „odkaz ven“ – kreslená přes SVG masku v barvě odkazu
(znak ↗ by iOS vykreslil jako barevné emoji v rámečku) */
.section-container ul.vz-trips a::after {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.35em;
  vertical-align: 0.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3.2 2H8V6.8' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3.2 2H8V6.8' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .section-container ul.vz-trips li:hover a::after {
    transform: translate(2px, -2px);
  }
}

.section-container .vz-trip-note {
  display: block;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.45;
  color: #6b6e4f;
}

@media (max-width: 699px) {
  .section-container ul.vz-trips {
    columns: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-container ul.vz-trips a::after {
    transition: none;
  }
}

/* ============================================================
Četba (.vz-reading) – tematické skupiny knih s květinovými odrážkami,
na desktopu 2 × 2, na mobilu pod sebou. Poznámky ke knihám drobně kurzívou.
============================================================ */
.section-container .vz-reading {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 3rem;
  margin: 0.5rem 0 1rem;
}

.section-container .vz-reading-group h3 {
  margin: 0 0 0.75rem;
}

.section-container .vz-reading-sub {
  font-weight: 400;
  font-style: italic;
  font-size: 0.9em;
  color: #6b6e4f;
}

.section-container ul.vz-reading-list {
  margin: 0;
}

.section-container .vz-book-note {
  font-size: 0.9em;
  font-style: italic;
  color: #6b6e4f;
}

@media (min-width: 900px) {
  .section-container .vz-reading {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
Druhé motto pod nadpisem sekce (.vz-motto-quote) – citát psacím písmem
============================================================ */
.section-container .vz-motto-quote {
  max-width: none;                 /* přes celou šířku oddílu */
  margin: -0.75rem auto 2.25rem;
  font-family: var(--vz-font-script);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  line-height: 1.7;
  color: var(--vz-color-accent);
  text-align: center;
}

/* ============================================================
Jsem členem na mobilu – tři loga v řadě, zmenšené kartičky
============================================================ */
@media (max-width: 599px) {
  .section-container .vz-members {
    gap: 0.6rem;
  }

  .section-container .vz-member {
    flex: 1 1 0;
    min-width: 0;
    gap: 0.4rem;
    padding: 0.7rem 0.4rem 0.6rem;
    border-radius: 10px;
  }

  .section-container .vz-member img {
    height: 44px;
  }

  .section-container .vz-member span {
    font-size: 0.72rem;
    line-height: 1.3;
  }
}

/* ============================================================
Kontakt – klikací telefon a e-mail, fotka pod údaji oříznutá do tvaru motýla
============================================================ */
.section-container a[href^="tel:"],
.section-container a[href^="mailto:"],
.section-container a[href^="tel:"]:hover,
.section-container a[href^="mailto:"]:hover {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--vz-color-accent);
  font-weight: 600;
}

.section-container a[href^="tel:"]:hover,
.section-container a[href^="mailto:"]:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-container .vz-contact-photo {
  max-width: 612px;
  margin: 2.5rem auto 0;
  filter: drop-shadow(0 8px 14px rgba(40, 44, 0, 0.28));   /* motýl se „vznáší“ nad pozadím */
}

.section-container .vz-contact-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;             /* tvar motýla nezávislý na formátu fotky */
  object-fit: cover;
  object-position: 70% 40%;        /* jako pozadí titulní strany – bílý květ */
  margin: 0;
  border-radius: 0;
  /* maska: silueta motýla (horní a spodní křídla, tělo, tykadla) s jemně rozostřeným okrajem */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-5%' y='-5%' width='110%' height='110%'%3E%3CfeGaussianBlur stdDeviation='1.8'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23f)' fill='%23000'%3E%3Cpath d='M151 100 C156 66 190 22 246 8 C282 0 300 24 294 52 C288 84 252 106 158 106 Z'/%3E%3Cpath d='M155 111 C196 112 232 124 242 150 C252 176 238 198 214 196 C184 194 164 158 153 120 Z'/%3E%3Cg transform='translate(300 0) scale(-1 1)'%3E%3Cpath d='M151 100 C156 66 190 22 246 8 C282 0 300 24 294 52 C288 84 252 106 158 106 Z'/%3E%3Cpath d='M155 111 C196 112 232 124 242 150 C252 176 238 198 214 196 C184 194 164 158 153 120 Z'/%3E%3C/g%3E%3Cellipse cx='150' cy='108' rx='4' ry='32'/%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M149 76 C145 52 136 30 124 22 C118 18 114 22 118 26'/%3E%3Cpath d='M149 76 C145 52 136 30 124 22 C118 18 114 22 118 26' transform='translate(300 0) scale(-1 1)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-5%' y='-5%' width='110%' height='110%'%3E%3CfeGaussianBlur stdDeviation='1.8'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23f)' fill='%23000'%3E%3Cpath d='M151 100 C156 66 190 22 246 8 C282 0 300 24 294 52 C288 84 252 106 158 106 Z'/%3E%3Cpath d='M155 111 C196 112 232 124 242 150 C252 176 238 198 214 196 C184 194 164 158 153 120 Z'/%3E%3Cg transform='translate(300 0) scale(-1 1)'%3E%3Cpath d='M151 100 C156 66 190 22 246 8 C282 0 300 24 294 52 C288 84 252 106 158 106 Z'/%3E%3Cpath d='M155 111 C196 112 232 124 242 150 C252 176 238 198 214 196 C184 194 164 158 153 120 Z'/%3E%3C/g%3E%3Cellipse cx='150' cy='108' rx='4' ry='32'/%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M149 76 C145 52 136 30 124 22 C118 18 114 22 118 26'/%3E%3Cpath d='M149 76 C145 52 136 30 124 22 C118 18 114 22 118 26' transform='translate(300 0) scale(-1 1)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.section-container.vz-sluzby .vz-intro {
  margin-top: 4rem;              
  margin-bottom: 0;
}

.section-container.vz-sluzby > .vz-intro + h2 {
  margin-top: 2.25rem;        /* stejná mezera pod úvodním odstavcem u všech oddílů */
}


/* ============================================================
Úvod – odsazení sloupců od úvodního odstavce
============================================================ */
.section-3-col-top-text > p + .section-cell-parent {
  /* margin-top: 3rem; */
}

/* ============================================================
Inspirace (.vz-inspirace) – větší odsazení mezi oddíly; v Četbě nadpisy
skupin jako nadpis 2 psacím písmem a seznam dál od titulku oddílu
============================================================ */
.section-container.vz-inspirace > h2 {
  margin-top: 5rem;
}

.section-container.vz-inspirace > .vz-intro + h2 {
  margin-top: 2.5rem;              /* první oddíl hned pod úvodním řádkem */
}


.section-container.vz-inspirace .vz-reading {
  margin-top: 2rem;
}

.section-container .vz-reading-group .vz-reading-title {
  margin: 0 0 0.75rem;
  font-family: var(--vz-font-script);
  font-size: 18pt;
  font-weight: 400;
  line-height: 1.45;
  color: var(--vz-color-accent);
}

.section-container .vz-reading-title .vz-reading-sub {
  font-style: normal;              /* psací písmo je samo šikmé */
}

/* Jsem členem – na mobilu loga na střed */
@media (max-width: 599px) {
  .section-container .vz-members {
    justify-content: center;
  }
}

/* ============================================================
Kontakt – mapa jižní Moravy s polohou Kotvrdovic „vtištěná“ do pozadí stránky
(obrázek s průhledným pozadím; reliéf hranic je přímo v obrázku, názvy měst jsou bez reliéfu)
============================================================ */
.section-container .vz-contact-map {
  max-width: 480px;               /* mapa v PNG 640 px – i na retina displejích dostatečně ostrá */
  margin: 2.5rem auto 0;
}

.section-container .vz-contact-map img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}

/* ============================================================
Úvodní obrazovka (hero)
============================================================ */
/* ---------- Menu ----------
Desktop: odkazy vedle sebe, bez podkladu – čitelnost zajišťuje světlá záře kolem písma.
Mobil (< 768 px): tlačítko „Menu“ na „matném skle“ se po klepnutí rozroste přímo
do panelu s odkazy (tlačítko je první položkou panelu; zavřený panel má rozměr tlačítka).
Bez JavaScriptu – přes skrytý checkbox. Kdyby editor <input> odstranil,
tlačítko se skryje a menu zůstane trvale rozbalené. */
.vz-nav {
  --vz-glass: rgba(243, 241, 228, 0.72);
  --vz-btn-w: 8rem;
  --vz-btn-h: 2.75rem;
  --vz-item-h: 2.6rem;             /* výška jedné položky v mobilním panelu */
  --vz-items: 11;                  /* POČET ODKAZŮ v menu – při přidání/odebrání odkazu upravit */
  --vz-ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  --vz-spring: cubic-bezier(0.34, 1.45, 0.55, 1);   /* lehký „pružný“ dojezd */
  position: relative;              /* rozbalený panel se vztahuje k liště */
  z-index: 20;
  width: 100%;
  text-align: center;
}

.vz-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
}

.vz-menu a {
  padding: 4px 6px;
  white-space: nowrap;
  color: #4f5406;
  font-family: var(--vz-font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 1),
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 14px rgba(255, 255, 255, 0.8);
}

/* checkbox je jen „přepínač“ – vizuálně skrytý, ale ovladatelný klávesnicí */
.vz-menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vz-menu-btn {
  display: none;
  flex: 0 0 var(--vz-btn-h);
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: var(--vz-btn-h);
  margin: 0;
  color: var(--vz-color-accent);
  font-family: var(--vz-font-text);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ikona hamburger → křížek
::before = horní čárka (+ prostřední jako stín), ::after = spodní čárka.
Obě pseudo-prvky jsou díky order a zápornému okraji na stejném místě před textem.
Při rozbalení se sjedou do středu a otočí o ±45°, prostřední čárka se rozplyne. */
.vz-menu-btn::before,
.vz-menu-btn::after {
  content: "";
  order: -1;
  flex: 0 0 18px;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition:
    transform 0.4s var(--vz-ease),
    box-shadow 0.25s ease;
}

.vz-menu-btn::before {
  margin-right: calc(-18px - 0.6rem);   /* ::after se vykreslí přes ::before (0.6rem = gap) */
  transform: translateY(-6px);
  box-shadow: 0 6px 0 currentColor;      /* prostřední čárka */
}

.vz-menu-btn::after {
  transform: translateY(6px);
}

.vz-menu-toggle:checked ~ .vz-menu .vz-menu-btn::before {
  transform: translateY(0) rotate(45deg);
  box-shadow: 0 0 0 transparent;
}

.vz-menu-toggle:checked ~ .vz-menu .vz-menu-btn::after {
  transform: translateY(0) rotate(-45deg);
}

.vz-menu-toggle:focus-visible ~ .vz-menu {
  outline: 2px solid var(--vz-color-accent);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .vz-nav {
    height: var(--vz-btn-h);       /* v toku stránky zabírá jen místo tlačítka – panel nic neodsouvá */
  }

  /* zavřený panel = tlačítko na matném skle */
  .vz-menu {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;   /* tlačítko nahoře – jinak by se přetékající obsah vystředil */
    gap: 0;
    width: var(--vz-btn-w);
    max-width: calc(100vw - 2rem);   /* omezení šířky – neanimuje se */
    height: var(--vz-btn-h);
    max-height: calc(100svh - 4rem); /* omezení výšky – neanimuje se */
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(102, 108, 9, 0.35);
    border-radius: calc(var(--vz-btn-h) / 2);
    background: var(--vz-glass);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
    /* zavírání: nejdřív se sroluje nahoru, pak se zúží zpět do tlačítka */
    transition:
      height 0.35s var(--vz-ease),
      width 0.3s var(--vz-ease) 0.25s,
      border-radius 0.3s var(--vz-ease) 0.25s,
      box-shadow 0.4s ease 0.2s;
  }

  /* otevřený panel: rozšíří se do stran a pak „spadne“ dolů s lehkým dojezdem.
  Animované hodnoty musí být prosté délky (bez min() a vw/svh) – Safari na iPhonu
  jinak neanimuje a panel rovnou „skočí“ do konečné velikosti. */
  .vz-menu-toggle:checked ~ .vz-menu {
    width: 20rem;
    height: calc(var(--vz-btn-h) + var(--vz-items) * var(--vz-item-h) + 0.5rem);
    overflow-y: auto;
    border-radius: 1.25rem;
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.25),
      0 4px 12px rgba(0, 0, 0, 0.12);
    transition:
      width 0.35s var(--vz-spring),
      border-radius 0.35s var(--vz-ease),
      height 0.6s var(--vz-spring) 0.18s,
      box-shadow 0.5s ease;
  }

  /* tlačítko přesně na vnitřní výšku panelu (bez 2 px rámečku) – jinak by jeho spodní okraj
  ležel nad prvním odkazem a klepnutí tam by místo rozbalení odrolovalo na „Úvod“ */
  .vz-menu-btn {
    display: flex;
    flex-basis: calc(var(--vz-btn-h) - 2px);
    height: calc(var(--vz-btn-h) - 2px);
  }

  .vz-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--vz-item-h);
    height: var(--vz-item-h);
    padding: 0 1rem;
    font-size: 1.1rem;
    text-shadow: none;
    border-top: 1px solid rgba(102, 108, 9, 0.18);
    /* zavřené menu: odkazy skryté úplně (ne jen průhledné), aby nešly omylem klepnout */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  }

  /* položky se objevují postupně shora dolů */
  .vz-menu-toggle:checked ~ .vz-menu a {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: none;
    transition:
      opacity 0.35s ease var(--vz-delay, 0.3s),
      transform 0.45s var(--vz-spring) var(--vz-delay, 0.3s),
      visibility 0s linear 0s;
  }

  .vz-menu a:nth-of-type(1)  { --vz-delay: 0.28s; }
  .vz-menu a:nth-of-type(2)  { --vz-delay: 0.31s; }
  .vz-menu a:nth-of-type(3)  { --vz-delay: 0.34s; }
  .vz-menu a:nth-of-type(4)  { --vz-delay: 0.37s; }
  .vz-menu a:nth-of-type(5)  { --vz-delay: 0.40s; }
  .vz-menu a:nth-of-type(6)  { --vz-delay: 0.43s; }
  .vz-menu a:nth-of-type(7)  { --vz-delay: 0.46s; }
  .vz-menu a:nth-of-type(8)  { --vz-delay: 0.49s; }
  .vz-menu a:nth-of-type(9)  { --vz-delay: 0.52s; }
  .vz-menu a:nth-of-type(10) { --vz-delay: 0.55s; }
  .vz-menu a:nth-of-type(n+11) { --vz-delay: 0.58s; }

  /* pojistka: editor odstranil checkbox → menu trvale rozbalené, bez tlačítka */
  .vz-nav:not(:has(.vz-menu-toggle)) {
    height: auto;
  }

  .vz-nav:not(:has(.vz-menu-toggle)) .vz-menu {
    position: static;
    transform: none;
    width: min(20rem, 100%);
    height: auto;
    margin: 0 auto;
    border-radius: 1.25rem;
  }

  .vz-nav:not(:has(.vz-menu-toggle)) .vz-menu-btn {
    display: none;
  }

  .vz-nav:not(:has(.vz-menu-toggle)) .vz-menu a {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }
}

/* uživatel má v systému zapnuté „Omezit pohyb“ → kratší a klidnější animace:
panel se rozbalí bez pružení, odkazy se jen rozplynou (bez posunu) */
@media (prefers-reduced-motion: reduce) {
  .vz-nav {
    --vz-spring: ease-out;
  }

  .vz-menu a,
  .vz-menu-toggle:checked ~ .vz-menu a {
    transform: none;
  }
}

/* ---------- Tlačítko „Zpět nahoru“ – jen na mobilu ----------
Objeví se po odrolování úvodní obrazovky (CSS scroll-driven animation).
Prohlížeče, které to neumí, ho na mobilu zobrazí trvale. */
.vz-totop {
  display: none;
}

@media (max-width: 767px) {
  .section-container .vz-totop {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--vz-color-accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }

  .section-container .vz-totop:hover,
  .section-container .vz-totop:focus-visible {
    border: 0;
    border-radius: 50%;
    background: #4f5406;
  }

  /* šipka nahoru */
  .vz-totop::before {
    content: "";
    width: 12px;
    height: 12px;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: translateY(3px) rotate(45deg);
  }

  .vz-totop span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  @supports (animation-timeline: scroll()) {
    .section-container .vz-totop {
      animation: vz-totop-show linear both;
      animation-timeline: scroll(root);
      animation-range: 60vh 100vh;
    }
  }
}

@keyframes vz-totop-show {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ---------- Tlačítko „Zpět“ po kliknutí na „Mám zájem“ ----------
Každé „Mám zájem“ vede na vlastní kotvu v Kontaktu (#kontakt-z1 … z13).
Podle aktivní kotvy (:target) se zobrazí to tlačítko „Zpět“, které vrátí přesně
k místu kliknutí (#zajem-1 … 13). Po návratu kotva přestane platit, „Zpět“ zmizí
a na mobilu je opět „Zpět nahoru“ – druhé klepnutí tedy vede na úvod.
Bez JavaScriptu. Na desktopu i mobilu (desktop jinak žádné tlačítko nemá). */
.vz-back {
  display: none;
}

body:has(#kontakt-z1:target) .vz-back-1,
body:has(#kontakt-z2:target) .vz-back-2,
body:has(#kontakt-z3:target) .vz-back-3,
body:has(#kontakt-z4:target) .vz-back-4,
body:has(#kontakt-z5:target) .vz-back-5,
body:has(#kontakt-z6:target) .vz-back-6,
body:has(#kontakt-z7:target) .vz-back-7,
body:has(#kontakt-z8:target) .vz-back-8,
body:has(#kontakt-z9:target) .vz-back-9,
body:has(#kontakt-z10:target) .vz-back-10,
body:has(#kontakt-z11:target) .vz-back-11,
body:has(#kontakt-z12:target) .vz-back-12,
body:has(#kontakt-z13:target) .vz-back-13 {
  display: inline-flex;
}

/* dokud je vidět „Zpět“, „Zpět nahoru“ se schová */
body:has([id^="kontakt-z"]:target) .vz-totop {
  display: none;
}

/* vzhled i poloha stejné jako „Zpět nahoru“ – liší se jen tím, kam vede */
.section-container .vz-back {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--vz-color-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.section-container .vz-back:hover,
.section-container .vz-back:focus-visible {
  border: 0;
  border-radius: 50%;
  background: #4f5406;
}

/* šipka nahoru (místo kliknutí je vždy výš než Kontakt) */
.vz-back::before {
  content: "";
  width: 12px;
  height: 12px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: translateY(3px) rotate(45deg);
}

/* text „Zpět“ jen pro čtečky obrazovky */
.vz-back span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* po návratu ukázat „Mám zájem“ uprostřed obrazovky, ne nalepené na horním okraji */
.vz-cta[id] {
  scroll-margin-top: 40vh;
}

/* Titulek „vtištěný“ do fotky jako tisková barva (varianta F):
režim prolnutí multiply nechá barvu webu reagovat s barvami fotky pod ní,
mírná průhlednost nechá prosvítat detaily a jemné rozpití okrajů napodobí
barvu vsáklou do papíru.
Petit Formal Script nemá tučný řez – tučnost (700) dopočítává prohlížeč.
Titulek je v běžném toku stránky (spolu s mottem v obalu .vz-hero-text),
takže ho motto nikdy nepřekryje. */
.section-container .vz-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--vz-font-script);
  font-size: clamp(2.2rem, 7.5vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--vz-color-accent);
  mix-blend-mode: multiply;
  opacity: 0.94;
  text-shadow: 0 0 1px rgba(102, 108, 9, 0.25);
}

/* logo u titulku: vlevo vedle textu, obojí jako celek na středu; výška podle písma titulku.
Prolnutí titulku (multiply) se týká i loga – bílé pozadí loga zmizí a kresba se „vtiskne“ do fotky. */
.section-container .vz-title {
  gap: 0.25em;
}

.section-container .vz-title img {
  display: block;
  flex: none;
  width: auto;
  height: 2.2em;
  max-width: none;
  margin: 0;
  border-radius: 0;
}

/* titulek + motto v jednom obalu: obal je široký přesně jako titulek s logem
(motto do šířky nepřispívá – width: 0 – ale vyplní ji – min-width: 100 %),
takže se motto zalomí do šířky titulku. Mezi nimi pružná mezera (spacer-bottom). */
.section-container .vz-hero-text {
  display: flex;
  flex-direction: column;
  flex: 2 1 auto;                  /* spolu se spacer-top drží titulek zhruba v horní třetině */
  max-width: 100%;
}

.section-container .vz-hero-text .spacer-bottom {
  min-height: 1.75rem;             /* motto nikdy nenalepené na titulek */
}

.section-container .vz-hero-text .vz-motto {
  width: 0;
  min-width: 100%;
  max-width: none;
}

/* mobil: větší titulek, klidně na dva řádky */
@media (max-width: 767px) {
  .section-container .vz-title {
    font-size: clamp(3.2rem, 16vw, 4.5rem);
    line-height: 1.05;
    flex-direction: column;        /* mobil: logo nad titulkem */
    gap: 0.15em;
  }

  .section-container .vz-title img {
    /* height: 1.6em; */
  }
}

.section-container .vz-motto {
  font-family: var(--vz-font-script);
  color: #33370a;
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.2rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.02em #33370a;
  text-align: center;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 1),
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 22px rgba(255, 255, 255, 0.85),
    0 0 40px rgba(255, 255, 255, 0.6);
  max-width: 34em;
  margin: 0 auto;
}

/* Specifická oprava pro iOS Safari */
@supports (-webkit-touch-callout: none) {
  .section-container .vz-motto {
    /* Vynulujeme problematický text-shadow */
    text-shadow: none;

    /* Nahradíme ho filtry, které WebKit vykresluje ostře a plynule. */
    /* Sloučením do tří vrstev se zmenšeným poloměrem dosáhneme stejného jasu bez rozpíjení. */
    filter: 
      drop-shadow(0 0 1px rgba(255, 255, 255, 1))
      drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 12px rgba(255, 255, 255, 0.75));

    /* Vynutíme hardwarové vykreslování, aby stín zůstal hladký i při posouvání stránky */
    will-change: filter;
  }
}


.spacer-top {
  flex-grow: 1; /* Zabere 1 díl volného prostoru */
  min-height: 1.75rem; /* logo nikdy nenalepené na tlačítko menu (na telefonu) */
}
.spacer-bottom {
  flex-grow: 2; /* Zabere 2 díly volného prostoru (tlačí titulek nahoru, motto zůstává dole) */
}

.hero {
  min-height: 100vh;
  position: relative;              /* pro titulek roztažený přes celou obrazovku */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem;
  /* spodní odsazení: bezpečná oblast iPhonu + plovoucí lišta Safari (100lvh − 100svh),
  aby motto u spodního okraje nezakrývala */
  padding-bottom: max(
    2rem,
    calc(1.5rem + env(safe-area-inset-bottom)),
    calc(1rem + 100lvh - 100svh)
  );
  background: url(https://www.vedomezahrady.cz/obrazek/3/head2-jpg/);
  background-attachment: fixed;
  background-size: cover;
  background-position: 70% 40%;    /* hlavní motiv – bílý květ – je vpravo od středu */
  flex-direction: column;
  align-content: center;
}


/* iOS neumí background-attachment: fixed – na dotykových zařízeních vypnout */
@media (hover: none) {
  .hero {
    background-attachment: scroll;
  }
}

/* ============================================================
Původní efekt rozmazaného záhlaví (.module) – ponecháno
============================================================ */
.module {
  background: url(https://www.vedomezahrady.cz/obrazek/3/mceclip0-png/);
  background-attachment: fixed;
  background-size: cover;
  width: 400px;
  height: 300px;
  position: relative;
  overflow: hidden;
  margin: 20px;
}
.module > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
}
.module > header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(12px);
  filter: blur(12px);
  transform: scale(2) translateY(20px);
}
.module > header > h1 {
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ============================================================
Cookie okno šablony – web cookies nepoužívá, souhlas se nezobrazuje
Šablona inpage na této stránce nenačítá CSS Bootstrapu, jen jeho JavaScript.
Ten okno s cookies otevře a zablokuje rolování (body overflow: hidden přímo na prvku).
Proto nestačí okno jen skrýt – je nutné i odblokovat rolování (!important přebije styl na prvku).
Čistší řešení: vypnout cookie lištu v administraci inpage; pak lze tento blok smazat.
============================================================ */
.modal {
  display: none;                   /* ostatní okna Bootstrapu – při otevření dostanou display: block */
}

#cookiesModal,
.modal-backdrop {
  display: none !important;
}

body.modal-open {
  overflow: visible !important;
  padding-right: 0 !important;
}

/* patička šablony (© 2026, Nastavení cookies, Běží na inPage s AI) – skrytá */
#footer {
  display: none !important;
}

/* odstavec zarovnaný na střed */
.section-container .vz-center {
  text-align: center;
}

/* ============================================================
Články – náhled na hlavní stránce (.vz-article-card) a samostatná stránka článku (.vz-article)
============================================================ */
/* malá fotka vpravo v rámečku (papírová paspartu, jemný stín, lehce natočená) */
.section-container .vz-photo-frame {
  float: right;
  width: clamp(120px, 34%, 230px);
  margin: 0.35rem 0 1rem 1.5rem;
  padding: 6px;
  background: #f6f3e7;
  border: 1px solid rgba(102, 108, 9, 0.35);
  box-shadow: 0 6px 16px rgba(40, 44, 0, 0.22);
  transform: rotate(1.5deg);
}

.section-container .vz-photo-frame a,
.section-container .vz-photo-frame a:hover {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.section-container .vz-photo-frame img {
  width: 100%;
  margin: 0;
  border-radius: 2px;
}

/* náhled článku v sekci Články */
.section-container .vz-article-card {
  margin: 0 0 2.5rem;              /* stejné okraje jako ostatní text sekce */
}

.section-container .vz-article-card::after {
  content: "";
  display: block;
  clear: both;
}

.section-container .vz-article-card h2 {
  margin-top: 0;
}

.section-container .vz-article-card h2 a {
  color: inherit;
}

.section-container .vz-more a::after {
  content: " →";
}

/* stránka článku – užší sloupec textu */
.section-container.vz-article {
  max-width: 820px;
}

.section-container .vz-article-back {
  text-align: left;
  font-size: 0.9375rem;
  margin: 0 0 1rem;
}

.section-container .vz-article-back a::before {
  content: "← ";
}

.section-container .vz-article-back-end {
  margin-top: 2rem;
}

.section-container ol.vz-steps {
  padding-left: 1.6rem;
  margin: 0 0 1.25rem;
}

.section-container ol.vz-steps li {
  margin-bottom: 0.6rem;
  padding-left: 0.3rem;
  text-align: justify;
}

.section-container ol.vz-steps li::marker {
  color: var(--vz-color-accent);
  font-weight: 600;
}

.section-container .vz-article-image {
  clear: both;
}

.section-container .vz-article-image img {
  margin: 1.5rem auto;
}

.vz-article .vz-cta {
  text-align: center;
  margin-top: 2rem;
}

/* odkazy na poznámky pod čarou */
.section-container sup {
  line-height: 0;
}

.section-container sup a {
  padding: 0 1px;
  font-size: 0.75em;
}

.section-container [id^="pozn-"],
.section-container [id^="ref-"] {
  scroll-margin-top: 2rem;
}

.section-container .vz-footnotes {
  clear: both;
  margin-top: 2.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(102, 108, 9, 0.3);
}

.section-container .vz-footnotes h2 {
  font-size: 1.0625rem;
  margin-top: 1rem;
}

.section-container .vz-footnotes li {
  font-size: 0.875rem;
  line-height: 1.55;
  margin-bottom: 0.4rem;
  text-align: justify;
}

.section-container .vz-footnotes li:target {
  background: rgba(102, 108, 9, 0.1);
  border-radius: 4px;
}

.section-container .vz-fn-back {
  font-weight: 600;
}

@media (max-width: 599px) {
  .section-container .vz-photo-frame {
    width: 42%;
    margin-left: 1rem;
  }
}

/* podtitul článku pod nadpisem („Aneb …“) */
.section-container .vz-article-lead {
  margin: -1.25rem 0 2rem;
  text-align: center;
  font-style: italic;
  font-weight: 600;
  color: var(--vz-color-accent);
}

/* mezititulky článku začínají vždy pod fotkou v rámečku */
.section-container.vz-article h2 {
  clear: both;
}