/* MikroŽivot - úvodní stránka, verze 2
   Písmo: Gill Sans MT (varianta 23, klasicky humanistická). Stránka ho používá
   z počítače návštěvníka (Windows s Office: Gill Sans MT, macOS a iOS: Gill Sans).
   Kde chybí, nastoupí otevřené písmo Cabin (SIL OFL) s metrikou upravenou na Gill Sans.
   Soubor Gill Sans MT se na server nenahrává: licence Microsoftu/Monotype to nedovoluje.
   Po koupi webové licence stačí do obou pravidel "MZ Gill" doplnit url() se souborem WOFF2. */

@font-face {
  font-family: "MZ Gill";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Gill Sans MT"), local("GillSansMT"), local("Gill Sans"), local("GillSans");
}
@font-face {
  font-family: "MZ Gill";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Gill Sans MT Bold"), local("GillSansMT-Bold"), local("Gill Sans Bold"), local("GillSans-Bold");
}
@font-face {
  font-family: "MZ Gill Fallback";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cabin-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 98%;
  ascent-override: 94.8%;
  descent-override: 23.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "MZ Gill Fallback";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cabin-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 98%;
  ascent-override: 94.8%;
  descent-override: 23.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "MZ Gill Fallback";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/cabin-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 104%;
  ascent-override: 89.3%;
  descent-override: 22.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "MZ Gill Fallback";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/cabin-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 104%;
  ascent-override: 89.3%;
  descent-override: 22.2%;
  line-gap-override: 0%;
}

:root {
  --ink: #1b3a22;          /* "Mikro" v logu */
  --ink-soft: #4f5f4d;
  --leaf: #78cf33;         /* "Život" a lístky */
  --leaf-hover: #8bd94b;
  --leaf-soft: #a6e06f;
  --link: #2f6e12;
  --paper: #f4faee;
  --paper-2: #e9f4de;
  --line: #d9e5d2;
  --night: #0f2416;
  --on-night: #eff9e7;
  --on-night-soft: #d3e6c6;
  --on-night-muted: #c8ddb9;
  --error-night: #ffc2b5;
  --font: "MZ Gill", "MZ Gill Fallback", "Gill Sans Nova", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap-max: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --shadow: 0 1px 2px rgba(15, 36, 22, .05), 0 14px 34px rgba(15, 36, 22, .07);
  --shadow-lg: 0 24px 60px rgba(5, 18, 10, .32);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.08; text-wrap: balance; }
p, ul, ol { margin: 0; }
p, li { text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap-max)); margin-inline: auto; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--sm { width: 1em; height: 1em; }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 18px; border-radius: 12px;
  background: #fff; color: var(--ink); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; box-shadow: var(--shadow-lg); }
.nw { white-space: nowrap; }

/* ---------------------------------------------------------------- logo */

.logo { width: auto; height: 100%; aspect-ratio: 5101.3 / 1136.1; overflow: visible; }

/* ------------------------------------------------------------- záhlaví */

.site-header { position: relative; z-index: 10; padding-block: clamp(14px, 1.6vw, 24px); }
.page-home .site-header { position: absolute; inset: 0 0 auto; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-header__logo { display: block; height: clamp(40px, 2.6vw + 26px, 60px); border-radius: 8px; }
.site-header--dark { color: var(--on-night); }
.site-header--dark .logo { color: var(--on-night); }
.site-header--light { background: #fff; border-bottom: 1px solid var(--line); color: var(--ink); }
.site-header--light .logo { color: var(--ink); }
.site-header__nav { display: flex; align-items: center; gap: clamp(8px, 2vw, 24px); }
.site-header__link {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px;
  color: inherit; font-weight: 700; text-decoration: none;
}
.site-header__link:hover { text-decoration: underline; }

.lang {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(15, 36, 22, .5);
  border: 1px solid rgba(239, 249, 231, .26);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header--light .lang { background: var(--paper); border-color: var(--line); }
.lang__item {
  display: grid; place-items: center; min-width: 46px; min-height: 36px; padding-inline: 12px;
  border-radius: 999px; color: inherit; font-weight: 700; font-size: .98rem; letter-spacing: .04em;
  text-decoration: none;
}
.lang__item:hover { background: rgba(239, 249, 231, .14); }
.site-header--light .lang__item:hover { background: #fff; }
.lang__item[aria-current] { background: var(--leaf); color: var(--ink); }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative; z-index: 1; isolation: isolate;
  background: var(--night); color: var(--on-night);
  padding-block: clamp(100px, 2.4vw + 84px, 128px) clamp(56px, 6vw, 96px);
}
.hero__media { position: absolute; inset: 0; z-index: -2; display: block; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 90% 60%; }
/* Tmavý závoj zleva doprava: pod textem .56 až .52, pak plynule (kosinová křivka na 450 px) do ztracena
   na .02 u pravého okraje; nahoře pruh pod záhlavím. Kontrast textu drží tmavá záře kolem písma. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 36, 22, 0.5) 0, rgba(15, 36, 22, 0.3) 120px, rgba(15, 36, 22, 0.1) 230px, rgba(15, 36, 22, 0) 330px),
    linear-gradient(90deg,
      rgba(15, 36, 22, 0.56) 0%,
      rgba(15, 36, 22, 0.52) calc(50% - 120px),
      rgba(15, 36, 22, 0.52) calc(50% + 110px),
      rgba(15, 36, 22, 0.47) calc(50% + 200px),
      rgba(15, 36, 22, 0.35) calc(50% + 290px),
      rgba(15, 36, 22, 0.19) calc(50% + 380px),
      rgba(15, 36, 22, 0.07) calc(50% + 470px),
      rgba(15, 36, 22, 0.02) calc(50% + 560px),
      rgba(15, 36, 22, 0.02) 100%);
}
.hero__title, .hero__lead, .countdown__label, .site-header--dark .site-header__link {
  text-shadow: 0 0 2px rgba(8, 22, 12, 0.7), 0 0 12px rgba(8, 22, 12, 0.65), 0 0 28px rgba(8, 22, 12, 0.6), 0 0 56px rgba(8, 22, 12, 0.5);
}
.site-header--dark .site-header__link { text-shadow: 0 0 2px rgba(8, 22, 12, 0.8), 0 0 8px rgba(8, 22, 12, 0.8), 0 0 20px rgba(8, 22, 12, 0.7), 0 0 40px rgba(8, 22, 12, 0.6); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 452px);
  grid-template-areas: "copy signup" "time signup" "links signup";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(40px, 6vw, 112px);
  row-gap: clamp(26px, 2.6vw, 36px);
  align-items: start;
}
.hero__copy { grid-area: copy; container-type: inline-size; }
.countdown { grid-area: time; align-self: start; }
.hero__links { grid-area: links; }
.signup { grid-area: signup; align-self: start; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: rgba(15, 36, 22, .62); border: 1px solid rgba(120, 207, 51, .6);
  color: #d6f5b8; font-weight: 700; font-size: 1rem; line-height: 1.25;
}
.eyebrow .icon { color: var(--leaf); }
.hero__title {
  font-size: clamp(2.35rem, 1.1rem + 4vw, 4.4rem);
  font-size: clamp(2.35rem, 8.6cqi, 4.6rem);
  line-height: 1.02; letter-spacing: -.01em; color: #fff;
}
.hero__title-accent { display: block; color: var(--leaf-soft); }
.hero__lead {
  margin-top: clamp(16px, 1.8vw, 24px); max-width: 38em;
  font-size: clamp(1.22rem, 1.06rem + .52vw, 1.5rem); line-height: 1.5; color: #ecf6e5;
}
.hero .hero__jump { display: none; margin-top: 24px; }

/* odpočet */
.countdown__label {
  font-weight: 700; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; color: #d9efc6;
}
.countdown__grid {
  margin-top: 12px; max-width: 700px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 12px);
}
.countdown__item {
  padding: clamp(12px, 1.2vw, 18px) 6px clamp(10px, 1vw, 14px);
  border-radius: 18px; text-align: center;
  background: rgba(15, 36, 22, .32); border: 1px solid rgba(239, 249, 231, .2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.countdown__num {
  display: block; font-weight: 700; line-height: 1; color: #fff;
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem); font-variant-numeric: tabular-nums;
}
.countdown__unit { display: block; margin-top: 6px; font-size: .98rem; line-height: 1.2; color: var(--on-night-soft); }
.countdown__done { display: grid; gap: 16px; justify-items: start; }
.countdown__done .countdown__label { font-size: 1.4rem; letter-spacing: 0; text-transform: none; color: #fff; }

/* kalendář: pátý čtverec odpočtu s velkou ikonou a nabídkou .ics / Google */
.cal { position: relative; min-width: 0; }
.cal__toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  height: 100%; padding-inline: 8px;
  border-color: rgba(120, 207, 51, .6);
  color: #fff; font-weight: 700; cursor: pointer; list-style: none;
  transition: background-color .15s, border-color .15s;
}
.cal__toggle::-webkit-details-marker { display: none; }
.cal__toggle:hover { background: rgba(120, 207, 51, .18); border-color: var(--leaf); }
.cal[open] .cal__toggle { background: rgba(120, 207, 51, .22); border-color: var(--leaf); }
.cal__icon { width: clamp(34px, 1.6rem + 1.1vw, 46px); height: clamp(34px, 1.6rem + 1.1vw, 46px); color: var(--leaf); }
.cal__label { display: block; font-size: .86rem; line-height: 1.15; text-align: center; color: var(--on-night); }
.cal__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  min-width: 290px; margin: 0; padding: 8px; list-style: none;
  background: #fff; color: var(--ink); border-radius: 16px; box-shadow: var(--shadow-lg);
}
.cal__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 10px; color: var(--ink); font-weight: 700; text-decoration: none;
}
.cal__menu a:hover, .cal__menu a:focus-visible { background: var(--paper); }

/* výzva k poradě a odkazy na oblasti (jako v první verzi) */
.t-soil { --accent: #71513a; --accent-rgb: 113, 81, 58; --surface-start: #f2e4d5; --surface-mid: #dcc0a2; --surface: #bd956f; --card-ink: #3b2b20; }
.t-water { --accent: #286e85; --accent-rgb: 40, 110, 133; --surface-start: #ebf7fb; --surface-mid: #c2e2ed; --surface: #99c5d4; --card-ink: #254752; }
.t-bee { --accent: #896623; --accent-rgb: 137, 102, 35; --surface-start: #fff1c6; --surface-mid: #ecd18a; --surface: #d5b456; --card-ink: #514018; }

.advice {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; max-width: 100%;
  padding: 15px 18px; border-radius: 8px;
  border: 1px solid rgba(243, 255, 230, .62);
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(226, 246, 205, .92));
  color: #183a2d; font-weight: 700; font-size: 1.1rem; line-height: 1.3; text-decoration: none;
  box-shadow: 0 14px 30px rgba(5, 18, 10, .22);
  transition: transform .15s, box-shadow .15s;
}
.advice::before {
  content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%;
  background: #4e9e17; box-shadow: 0 0 0 5px rgba(79, 159, 24, .16);
}
.advice__a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(47, 110, 18, .4); text-decoration-thickness: .08em; text-underline-offset: .18em; }
.advice:hover { transform: translateY(-1px); box-shadow: 0 17px 34px rgba(5, 18, 10, .28); }
.advice:hover .advice__a { text-decoration-color: currentColor; }
.advice:focus-visible { outline-color: #fff; }

.topics { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.topic {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 11px 15px;
  border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 8px;
  background: linear-gradient(125deg, var(--surface-start) 0%, var(--surface-mid) 55%, var(--surface) 100%);
  color: var(--card-ink); font-weight: 700; font-size: 1.06rem; line-height: 1.25; text-decoration: none;
  box-shadow: 0 3px 8px rgba(5, 18, 10, .1), 0 12px 26px rgba(5, 18, 10, .18);
  transition: border-color .15s, box-shadow .15s;
}
.topic__icon { width: 26px; height: 26px; flex: none; color: var(--accent); }
.topic__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.topic:hover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .3), 0 12px 26px rgba(5, 18, 10, .22); }
.topic:hover .topic__label { text-decoration-thickness: 2px; }
.topic:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* --------------------------------------------------------- přihlášení */

.signup {
  position: relative; padding: clamp(24px, 2.1vw, 34px) clamp(24px, 2.4vw, 36px);
  border-radius: 26px; color: var(--on-night);
  background: rgba(15, 36, 22, .78);
  border: 1px solid rgba(239, 249, 231, .16);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  scroll-margin-top: 16px;
}
.signup:focus { outline: none; }
.signup .eyebrow { margin-bottom: 14px; padding-block: 7px; }
.signup__title { font-size: clamp(1.5rem, 1.25rem + .7vw, 1.85rem); font-weight: 700; line-height: 1.08; text-wrap: balance; color: #fff; }
.signup__intro { margin-top: 8px; color: var(--on-night-soft); font-size: 1.06rem; }
.form { margin-top: 18px; display: grid; gap: 16px; }
.form__label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 1.02rem; color: #fff; }
.form__optional { font-weight: 400; color: var(--on-night-muted); }
.input {
  display: block; width: 100%; height: 56px; padding: 0 16px;
  border-radius: 14px; border: 2px solid #fff; background: #fff; color: var(--ink);
  font-size: 1.12rem;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #6b7a69; opacity: 1; }
.input:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 4px rgba(120, 207, 51, .45); }
.input[aria-invalid="true"] { border-color: #ff8a75; box-shadow: 0 0 0 4px rgba(255, 138, 117, .3); }
.form__error {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 8px;
  color: var(--error-night); font-weight: 700; font-size: 1rem; line-height: 1.35;
}
.form__error .icon { margin-top: .12em; }
.form__suggest { margin-top: 8px; color: var(--on-night); font-size: 1rem; }
.link-button {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .18em;
}

.form__interests { min-width: 0; margin: 0; padding: 0; border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip__box {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 8px 16px 8px 10px; border-radius: 999px;
  border: 1.5px solid rgba(239, 249, 231, .4); color: var(--on-night);
  font-weight: 700; font-size: 1rem; line-height: 1.2;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip__check {
  width: 22px; height: 22px; padding: 3px; border-radius: 50%;
  color: transparent; box-shadow: inset 0 0 0 2px rgba(239, 249, 231, .75);
}
.chip:hover .chip__box { border-color: var(--on-night); }
.chip input:checked + .chip__box { background: var(--leaf); border-color: var(--leaf); color: var(--ink); }
.chip input:checked + .chip__box .chip__check { color: var(--leaf); background: var(--ink); box-shadow: none; }
.chip input:focus-visible + .chip__box { outline: 3px solid #fff; outline-offset: 2px; }

.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-weight: 700; color: #fff; line-height: 1.4; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--leaf); cursor: pointer; }
.check input[aria-invalid="true"] { outline: 3px solid #ff8a75; outline-offset: 2px; }
.form__consent .form__error, .form__note { padding-left: 34px; }
.form__note { margin-top: 6px; font-size: .95rem; line-height: 1.45; color: var(--on-night-muted); }
.form__note a, .signup a:not(.btn) { color: #e6f7d6; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__status:empty { display: none; }
.form__status {
  padding: 12px 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; line-height: 1.4;
  background: rgba(239, 249, 231, .12); color: var(--on-night);
}
.form__status.is-error { background: rgba(255, 138, 117, .16); border: 1px solid rgba(255, 138, 117, .45); color: #ffd6cc; }

.signup__done-icon {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px;
  border-radius: 50%; background: var(--leaf); color: var(--ink);
}
.signup__done-icon .icon { width: 30px; height: 30px; }
.signup__done:focus { outline: none; }
.signup__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.signup__done .form__status { margin-top: 14px; }
.signup__again { display: inline-block; margin-top: 18px; font-size: 1rem; color: var(--on-night-soft); }

/* ----------------------------------------------------------- tlačítka */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px;
  font-weight: 700; font-size: 1.08rem; line-height: 1.15; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .15s;
}
.btn__icon { width: 1.2em; height: 1.2em; }
.btn--primary { background: var(--leaf); color: var(--ink); box-shadow: 0 10px 26px rgba(120, 207, 51, .25); }
.btn--primary:hover { background: var(--leaf-hover); }
.btn--primary:active { transform: translateY(1px); }
.btn--block { width: 100%; min-height: 58px; font-size: 1.16rem; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--paper); }
.btn--outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(239, 249, 231, .55); }
.btn--outline:hover { background: rgba(239, 249, 231, .1); }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: mz-spin .8s linear infinite;
}
@keyframes mz-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- sekce */

.section { padding-block: clamp(64px, 5vw + 36px, 116px); }
.section-head { max-width: 760px; }
.section-head h2 {
  font-size: clamp(2rem, 1.35rem + 2vw, 3.1rem); line-height: 1.06; letter-spacing: -.01em; color: var(--ink);
}
.section-head p {
  margin-top: 14px; font-size: clamp(1.15rem, 1.02rem + .45vw, 1.35rem); color: var(--ink-soft);
}

/* Oblasti a časté otázky: tmavě zelené pozadí se světlými lístky z loga. */
.forest { position: relative; isolation: isolate; background-color: var(--ink); color: var(--on-night); }
/* Klíčky (lístky z loga se stonkem) na zvláštní vrstvě: nahoře a dole se rozplynou, takže na okrajích
   sekce nejsou useknuté. Při změně vzoru soubor přejmenovat: obrázky z CSS nemají v adrese verzi. */
.forest::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/klicky-vzor.svg") 0 0 / 720px 720px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 70px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 70px), transparent 100%);
}
.forest .section-head h2 { color: #fff; }
.forest .section-head p { color: var(--on-night-soft); }
.forest .section-head a { color: #c9f29f; }
.forest .faq { padding-top: clamp(8px, 2vw, 32px); }

/* oblasti: karty s kulatou ikonou a barevným přechodem (jako v první verzi) */
.areas__grid {
  list-style: none; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.area {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 28px 26px; border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  background: linear-gradient(125deg, var(--surface-start) 0%, var(--surface-mid) 55%, var(--surface) 100%);
  color: var(--card-ink);
  box-shadow: 0 3px 8px rgba(5, 18, 10, .12), 0 16px 36px rgba(5, 18, 10, .22);
  scroll-margin-top: 24px;
  transition: border-color .2s, box-shadow .2s;
}
.area:target { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(201, 242, 159, .75), 0 18px 40px rgba(5, 18, 10, .3); }
.area:focus { outline: none; }
.area:focus-visible { outline: 3px solid #c9f29f; outline-offset: 5px; }
.area__icon {
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .16);
  background: linear-gradient(145deg, rgba(255, 255, 255, .8), var(--surface-mid));
  color: var(--accent); box-shadow: 0 6px 16px rgba(var(--accent-rgb), .12);
}
.area__icon svg { width: 54px; height: 54px; }
.area__body { min-width: 0; }
.area h3 { font-size: 1.36rem; line-height: 1.18; color: var(--card-ink); }
.area p { margin-top: 10px; font-size: 1.18rem; line-height: 1.5; color: var(--card-ink); }

/* časté otázky */
.faq__grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 88px); align-items: start;
}
.faq__head { position: sticky; top: 32px; }
.faq__list { display: grid; gap: 12px; }
.faq__item { border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-radius: 18px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.18rem; line-height: 1.3; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--link); }
.faq__chevron { width: 24px; height: 24px; color: var(--link); transition: transform .2s; }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__answer { padding: 0 22px 22px; font-size: 1.1rem; color: var(--ink-soft); }

/* kontakt: banner „Potřebujete poradit“ (podobný bannerům na chatbot.isvs.cz) */
.contact { background: var(--paper-2); }
/* Kontakty na tmavém pozadí s klíčky (úvodní stránka a 404): světlé pozadí sekce zmizí. Na úvodní stránce je sekce uvnitř
   společné plochy forest (vzor navazuje na časté otázky), na stránce 404 má třídu forest sama. Banner dostane jemný světlý okraj,
   aby se na tmavém pozadí neztratil. */
.forest .contact { background: none; }
.contact.forest { background: var(--ink); }
.forest .faq + .contact { padding-top: 0; }
.forest .advice-banner { box-shadow: 0 0 0 1px rgba(166, 224, 111, .3), 0 18px 48px rgba(4, 16, 9, .5); }
.advice-banner {
  --pad-x: clamp(24px, 4vw, 56px); --gap: clamp(24px, 3vw, 48px);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: center;
  gap: var(--gap);
  max-width: 1120px; margin-inline: auto; padding: clamp(32px, 3.4vw, 52px) var(--pad-x);
  border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, #0f2d1a 0%, #1b5229 55%, #2c6d17 100%);
  box-shadow: 0 10px 34px rgba(15, 45, 26, .22);
}
.advice-banner::before, .advice-banner::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
}
.advice-banner::before { top: -60px; right: -50px; width: 260px; height: 260px; background: rgba(255, 255, 255, .07); }
.advice-banner::after { bottom: -80px; left: 26%; width: 190px; height: 190px; background: rgba(255, 255, 255, .045); }
.advice-banner__leaves {
  position: absolute; z-index: -1; top: 22px; right: 26px; width: 150px; height: auto;
  color: #c4ec9a; opacity: .2; pointer-events: none;
}
/* Na tabletu (banner v jednom sloupci) jsou lístky menší v pravém horním rohu a text jim uhne. */
@media (min-width: 700px) and (max-width: 999px) {
  .advice-banner__leaves { width: 120px; top: 20px; right: 22px; }
  .advice-banner__text { padding-right: 116px; }
}
/* Na počítači lístky „vyrůstají“ ze spodního okraje v mezeře mezi textem a tlačítky
   (levý okraj sloupce s tlačítky = okraj + 62,5 % volné šířky + mezera). */
@media (min-width: 1000px) {
  .advice-banner__leaves {
    --leaf-w: clamp(120px, 10vw, 160px);
    top: auto; right: auto; bottom: -30px; width: var(--leaf-w); opacity: .16; transform: rotate(6deg);
    left: calc(var(--pad-x) + .625 * (100% - 2 * var(--pad-x) - var(--gap)) + var(--gap) - var(--leaf-w) - 12px);
  }
}
.advice-banner__title {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.12; color: #fff;
}
.advice-banner__icon { width: 1.15em; height: 1.15em; margin-top: .02em; color: #c4ec9a; }
.advice-banner__sub { margin-top: 12px; font-size: clamp(1.12rem, 1.02rem + .35vw, 1.3rem); line-height: 1.5; color: #e2f2d6; }
.advice-banner__note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 18px;
  font-size: .98rem; line-height: 1.45; color: #d3e9c3;
}
.advice-banner__note .icon { margin-top: .2em; flex: none; }
.advice-banner__note a { color: #fff; font-weight: 700; }
.advice-banner__actions { display: grid; gap: 12px; }
.advice-banner__btn {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; text-decoration: none;
  transition: background-color .15s, transform .15s, border-color .15s;
}
.advice-banner__btn:hover { background: rgba(255, 255, 255, .1); border-color: #fff; transform: translateY(-2px); }
.advice-banner__btn--solid { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 0 10px 24px rgba(5, 20, 10, .22); }
.advice-banner__btn--solid:hover { background: var(--paper); }
.advice-banner__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.advice-banner__btn-ico {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
}
.advice-banner__btn--solid .advice-banner__btn-ico { background: var(--leaf); color: var(--ink); }
.advice-banner__btn-ico .icon { width: 22px; height: 22px; }
.advice-banner__btn-label { display: block; font-size: .95rem; font-weight: 700; line-height: 1.2; opacity: .92; }
.advice-banner__btn-value { display: block; font-size: clamp(1.15rem, 1.02rem + .4vw, 1.35rem); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }

/* Přechod mezi úvodní částí a tmavě zeleným pozadím: vlna jako okraj louky
   (spodní vrstva v barvě sekce, za ní světle zelený lem). */
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px; z-index: -1; height: clamp(44px, 5vw, 84px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 46C220 10 420 12 640 40S1060 92 1300 58S1520 30 1600 40V100H0Z' fill='%2378cf33' fill-opacity='.3'/%3E%3Cpath d='M0 70C260 34 480 36 720 60S1180 100 1400 70S1560 52 1600 58V100H0Z' fill='%231b3a22'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

/* plovoucí tlačítka vpravo dole a poradce (obsah a větvení jako na webu Verze Jaro, verze 01) */
.fab-stack {
  --fab-gap: 10px;
  position: fixed; right: 22px; bottom: 22px; z-index: 120;
  display: flex; align-items: center; gap: var(--fab-gap);
  transition: opacity .2s, visibility .2s, transform .2s;
}
.fab-stack.is-tucked { opacity: 0; visibility: hidden; transform: translateY(12px); }
.fab-advice {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 9px;
  border: 0; border-radius: 999px; background: var(--leaf); color: var(--ink);
  font-weight: 700; font-size: 1.04rem; line-height: 1.2; cursor: pointer;
  box-shadow: 0 10px 24px rgba(5, 18, 10, .22), 0 28px 64px rgba(5, 18, 10, .18);
  transition: transform .18s, box-shadow .18s, background-color .15s;
}
.fab-advice:hover { background: var(--leaf-hover); transform: translateY(-2px); }
.fab-advice:focus-visible, .fab-top:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.fab-advice__ico {
  position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: 50%; background: var(--ink); color: #fff;
}
.fab-advice__ico .icon { width: 20px; height: 20px; }
.fab-advice__dot {
  position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%;
  background: #7be385; border: 2px solid var(--ink); animation: mz-pulse 1.8s ease-in-out infinite;
}
@keyframes mz-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .65; } }
.fab-top {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--leaf); color: var(--ink); cursor: pointer;
  box-shadow: 0 10px 24px rgba(5, 18, 10, .22);
  transition: opacity .2s, visibility .2s, transform .18s, background-color .15s, width .2s, margin .2s;
}
.fab-top .icon { width: 20px; height: 20px; flex: none; }
.fab-top:hover { background: var(--leaf-hover); transform: translateY(-2px); }
/* Nahoře na stránce šipka nemá co dělat: schová se a uvolní místo, „Poradíme Vám“ zůstane v rohu. */
.fab-top.is-hidden { opacity: 0; visibility: hidden; width: 0; margin-left: calc(-1 * var(--fab-gap)); }

.poradce {
  position: fixed; right: 22px; bottom: 22px; z-index: 130;
  display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 32px);
  max-height: min(600px, 80vh, calc(100vh - 40px));
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(5, 18, 10, .14), 0 28px 64px rgba(5, 18, 10, .2);
}
.poradce__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--ink); color: #fff; }
.poradce__head-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #c4ec9a; }
.poradce__head-ico .icon { width: 22px; height: 22px; }
.poradce__title { font-size: 1.12rem; font-weight: 700; line-height: 1.2; color: #fff; }
.poradce__status { font-size: .9rem; line-height: 1.3; color: #cfe6bf; }
.poradce__close {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #e2f0d6; cursor: pointer;
}
.poradce__close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.poradce__close:focus-visible { outline: 3px solid var(--leaf); outline-offset: 0; }
.poradce__close .icon { width: 18px; height: 18px; }
/* pozadí chatu jemně zelené (ne bílé); bubliny a pole zůstávají bílé */
.poradce { --chat-bg: #d4e8c3; }
.poradce__body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; background: var(--chat-bg);
}
.poradce__msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 1rem; line-height: 1.45; white-space: pre-line; }
.poradce__msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: #2e4a33; border-bottom-left-radius: 4px; }
.poradce__msg--user { align-self: flex-end; background: var(--ink); color: #fff; font-weight: 700; border-bottom-right-radius: 4px; }
.poradce__options { display: flex; flex-wrap: wrap; gap: 8px; }
/* volby mají barvu tlačítka „Poradíme Vám“ */
.poradce__opt {
  padding: 8px 14px; border: 0; border-radius: 999px; background: var(--leaf);
  color: var(--ink); font-weight: 700; font-size: .98rem; line-height: 1.25; cursor: pointer;
  box-shadow: 0 2px 6px rgba(27, 58, 34, .16);
  transition: background-color .15s, transform .15s;
}
.poradce__opt:hover { background: var(--leaf-hover); transform: translateY(-1px); }
.poradce__opt:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.poradce__form { display: grid; gap: 8px; }
.poradce__form input {
  width: 100%; height: 46px; padding: 0 13px; border: 1.5px solid #5f7a55; border-radius: 10px;
  background: #fff; color: var(--ink); font-size: 1rem;
}
.poradce__form input::placeholder { color: #66775f; opacity: 1; }
.poradce__form input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(120, 207, 51, .35); }
.poradce__form input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }
.poradce__form .btn { min-height: 48px; font-size: 1.02rem; }
.poradce__form .btn:disabled { opacity: .75; cursor: progress; }
.poradce__error { font-size: .92rem; line-height: 1.35; font-weight: 700; color: #a3221b; }
.poradce__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 10px 16px;
  border-top: 1px solid #c3dbae; background: #e9f4de; font-size: .86rem; line-height: 1.3; color: #4d5c49;
}
.poradce__foot > * { white-space: nowrap; }
.poradce__foot a { color: #4d5c49; }

/* ------------------------------------------------------------ patička */

/* Spodní okraj patičky nechává místo plovoucím tlačítkům, aby nezakryla poslední odkazy. */
.site-footer { position: relative; isolation: isolate; background: var(--ink); color: #d8eec4; padding-block: clamp(52px, 5vw, 80px) 100px; }
/* Patička pokračuje vzorem z klíčků jako sekce nad ní (je mimo main, proto má vlastní vrstvu): nahoře se vzor plynule
   rozplyne a je zeslabený, aby nerušil malý text. */
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/klicky-vzor.svg") 0 0 / 720px 720px; opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 100%);
}
.site-footer a { color: var(--on-night); }
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.site-footer__logo { display: block; height: 60px; width: max-content; border-radius: 8px; }
.site-footer__logo .logo { color: var(--on-night); }
.site-footer__motto { margin-top: 18px; max-width: 26ch; font-size: 1.2rem; color: #d8eec4; }
.site-footer__title { margin-bottom: 16px; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf-soft); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-footer__list li { display: flex; align-items: flex-start; gap: 12px; }
.site-footer__list .icon { margin-top: .12em; color: var(--leaf); }
.site-footer__bottom {
  margin-top: clamp(36px, 4vw, 56px); padding-top: 22px; border-top: 1px solid rgba(239, 249, 231, .16);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 1rem;
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ------------------------------------------------- zásady (podstránka) */

/* Vzhled jako na úvodní stránce a na stránce 404: fotka s vlnou, pod ní tmavě zelené pozadí s klíčky (třída forest)
   a text zásad na světlé kartě. Písmo je na této stránce o 12,5 % větší (základ 20 px místo 18 px; vše je v rem). */
html.is-doc { font-size: 112.5%; }
.page-doc { background: var(--ink); }
.page-doc .site-header { position: absolute; inset: 0 0 auto; }
.doc-hero { padding-block: clamp(124px, 3vw + 100px, 168px) clamp(80px, 7vw, 124px); }
.wrap--doc { --wrap-max: 1120px; }
.doc-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #d8eec4; font-weight: 700; text-decoration: none; }
.doc-back:hover { text-decoration: underline; }
.doc-back__icon { transform: rotate(90deg); }
.doc-hero h1 { margin-top: 10px; font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.5rem); color: #fff; }
.doc-hero__lead { margin-top: 14px; max-width: 62ch; font-size: 1.18rem; color: var(--on-night-soft); }
.doc-back, .doc-hero h1, .doc-hero__lead {
  text-shadow: 0 0 2px rgba(8, 22, 12, 0.7), 0 0 12px rgba(8, 22, 12, 0.65), 0 0 28px rgba(8, 22, 12, 0.6), 0 0 56px rgba(8, 22, 12, 0.5);
}

/* Chybová stránka 404: stejná fotka se závojem, odpočet, banner, patička a plovoucí tlačítka jako na úvodní stránce.
   Vlna pod fotkou je jako na úvodu a za ní je tmavě zelené pozadí s klíčky (třída forest) až do konce stránky. */
.page-error .hero { display: flex; align-items: center; min-height: clamp(540px, 90vh, 820px); }
.error__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); }
.error__grid > * { grid-area: auto; }
.error__copy { max-width: 760px; }
@media (min-width: 1000px) {
  .page-error .hero__copy { padding-top: 0; }
}
.error-code {
  font-size: clamp(5rem, 3rem + 9vw, 10.5rem); font-weight: 700; line-height: .9; letter-spacing: .01em;
  color: var(--leaf);
  text-shadow: 0 0 2px rgba(8, 22, 12, .7), 0 0 22px rgba(8, 22, 12, .55), 0 0 60px rgba(8, 22, 12, .5);
}
.error__title { margin-top: clamp(8px, 1vw, 14px); font-size: clamp(2rem, 1rem + 3.2vw, 3.4rem); font-size: clamp(2rem, 7cqi, 3.4rem); }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.4vw, 32px); }
.countdown--error { max-width: 560px; }
.countdown--error .countdown__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.error__eyebrow { margin-top: 18px; }
.doc {
  display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start; padding-block: clamp(28px, 3vw, 56px) clamp(64px, 6vw, 112px);
}
.doc-toc {
  position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto;
  padding: 22px 22px 24px; border-radius: 18px; background: #fff; color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(166, 224, 111, .3), 0 18px 48px rgba(4, 16, 9, .5);
}
.doc-toc__title { font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.doc-toc ol { margin-top: 12px; padding-left: 1.5em; display: grid; gap: 7px; font-size: 1.02rem; line-height: 1.3; }
.doc-toc a { color: var(--ink); text-decoration: none; }
.doc-toc a:hover { color: var(--link); text-decoration: underline; }
.doc-body {
  padding: clamp(24px, 3.4vw, 48px); border-radius: 22px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(166, 224, 111, .3), 0 18px 48px rgba(4, 16, 9, .5);
}
.doc-section { padding-bottom: 24px; margin-bottom: 26px; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.doc-section h2 { font-size: clamp(1.35rem, 1.2rem + .4vw, 1.6rem); color: var(--ink); }
.doc-section p, .doc-section ul { margin-top: 10px; font-size: 1.1rem; color: #2e4a33; }
.doc-section ul { padding-left: 1.3em; }
.doc-section li + li { margin-top: 6px; }
.doc-updated { margin-bottom: 0; font-weight: 700; color: var(--ink-soft); }

/* ----------------------------------------------------------- odezva */

/* Fotka v hero na počítači: přiblížení o 14 % a posun doprava tak, aby létající
   včela (v originálu 87,8 % šířky a 58,8 % výšky) vyšla doprostřed volného pruhu
   vpravo od formuláře. Prohlížeče bez jednotek cqw použijí object-position. */
@media (min-width: 1000px) {
  /* Kalendář je od verze 1.3 v řadě odpočtu; uvolněné místo posouvá nadpis a vše pod ním níž,
     výzva k poradě tak zůstává na stejném místě jako dřív. */
  .hero__copy { padding-top: 58px; }
  @supports (width: 1cqw) {
    .hero__media { container-type: size; }
    .hero__media img {
      --img-w: max(114cqw, 202.56cqh);
      --img-h: calc(var(--img-w) / 1.7768);
      --bee-x: calc((300cqw + min(100cqw - 2 * var(--gutter), var(--wrap-max))) / 4);
      position: absolute; max-width: none;
      width: var(--img-w); height: var(--img-h);
      left: clamp(100cqw - var(--img-w), var(--bee-x) - .878 * var(--img-w), 0px);
      top: calc((100cqh - var(--img-h)) * .6);
    }
  }
}

@media (max-width: 1180px) {
  .hero__grid { column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
  .areas__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}

@media (max-width: 999px) {
  .hero { padding-top: clamp(96px, 14vw, 128px); }
  .hero::before { display: none; }
  .hero__media { inset: 0 0 auto 0; height: min(100%, clamp(560px, 118vw, 860px)); }
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 36, 22, .55) 0%, rgba(15, 36, 22, .62) 28%, rgba(15, 36, 22, .86) 62%, var(--night) 100%);
  }
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "time" "links" "signup"; grid-template-rows: none; row-gap: 32px; }
  .hero__copy { max-width: 680px; }
  .hero .hero__jump { display: inline-flex; }
  .signup { max-width: 640px; width: 100%; }
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }
  .advice-banner { grid-template-columns: minmax(0, 1fr); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { position: static; max-height: none; }
}

@media (max-width: 699px) {
  .hero__media img { object-position: 50% 62%; }
  .site-header__link { display: none; }
  .countdown__grid { gap: 8px; }
  .countdown__item { border-radius: 14px; }
  .countdown__unit { font-size: .9rem; }
  .chip__box { padding: 8px 13px 8px 8px; }
  .fab-stack { --fab-gap: 8px; right: 14px; bottom: 14px; }
  .fab-advice { padding: 8px; }
  .fab-advice__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .poradce { right: 10px; left: 10px; bottom: 10px; width: auto; max-width: none; max-height: min(78vh, calc(100vh - 20px)); }
  .advice { font-size: 1.04rem; }
  .topic { font-size: 1.06rem; }
  .forest::before, .site-footer::before { background-size: 560px 560px; }
  .area { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 22px 18px; }
  .area__icon { width: 58px; height: 58px; }
  .area__icon svg { width: 43px; height: 43px; }
  .area h3 { font-size: 1.3rem; }
  .area p { font-size: 1.06rem; }
  .advice-banner__leaves { width: 96px; top: 16px; right: 14px; }
  .advice-banner__btn { padding: 12px 14px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer__bottom { flex-direction: column; }
  .site-footer { padding-bottom: 88px; }
}

@media (max-width: 559px) {
  .countdown__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cal { grid-column: 1 / -1; }
  .cal__toggle { flex-direction: row; gap: 10px; min-height: 52px; padding: 10px 16px; }
  .cal__icon { width: 28px; height: 28px; }
  .cal__label { font-size: 1.02rem; }
  .cal__menu { left: 0; right: auto; }
}

@media (max-width: 380px) {
  .countdown__num { font-size: 1.75rem; }
  .countdown__unit { font-size: .82rem; }
  .chip__box { font-size: .95rem; padding-right: 12px; }
}

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

@media (forced-colors: active) {
  .chip__box, .countdown__item, .cal__toggle, .signup, .advice, .topic, .faq__item, .area, .advice-banner, .advice-banner__btn, .poradce, .poradce__opt, .fab-advice, .fab-top { border: 1px solid CanvasText; }
  .chip input:checked + .chip__box { outline: 2px solid Highlight; }
}