/* ==========================================================================
   Therapeutica — web podle návrhu „1 — Světlo“ ve Figmě
   Zelený rám kolem okna: v klidu 40 px s bílou značkou a ikonami,
   u okraje se rovnoměrně rozšíří na 104 px (plné logo, popisky menu).
   Mobil: vyšší horní pás s logem a burgerem, menu pod burgerem.
   Obsah je vždy rozvržený, jako by byl rám otevřený — při najetí k okraji
   se pohne jen okraj okna, obsah zůstane na pixel na místě.
   Bez patičky, bez linek, bez výzev k akci; text jen zelený.
   ========================================================================== */

/* písmo Manrope z vlastního serveru (bez Google Fonts — GDPR); proměnné písmo 400–600 */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/manrope-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;
}

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --zelena: #accd49;
  --okno-barva: #fbfcf5;
  --nadpis: #2f4a0a;       /* 10 : 1 na pozadí okna */
  --text: #44621a;         /*  7 : 1 */
  --doplnek: #5f7d35;      /* 4,7 : 1 */
  --stin-ram: 0 1px 1px rgba(46, 74, 10, .22);
  --klid: 40px;
  --plny: 104px;
  --p: 0;
  --ram: calc(var(--klid) + (var(--plny) - var(--klid)) * var(--p));
  --ram-h: var(--ram);
  --zaobleni: calc(26px + 6px * var(--p));
  --doba: 540ms;          /* otevření rámu */
  --doba-zpet: 320ms;     /* návrat do klidu — hned po odjetí myši, rychleji */
  --krivka: cubic-bezier(.22, .8, .24, 1);
  --pismo: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* obsah se měří od okraje otevřeného okna (--plny), ne od aktuálního */
  --okraj-x: clamp(24px, 4.6vw, 66px);
  --okraj-y: 42px;
  --vyrovnani-x: calc(var(--plny) - var(--ram));
  --vyrovnani-y: calc(var(--plny) - var(--ram-h));
  --vyska-obsahu: calc(100vh - 2 * var(--plny) - 2 * var(--okraj-y));
  /* velikosti obsahu — na menších obrazovkách je zmenšují zlomy níže */
  --t-h1: clamp(30px, 3.125vw, 52px);
  --t-perex: clamp(15px, 1.18vw, 19px);
  --t-text: 17px;
  --t-h2: 22px;
  --t-lead: 18px;
  --t-kicker: 13px;
  --t-trojice: 16px;
  --t-karta: 14px;
  --t-karta-jmeno: 16px;
  --karta-sirka: clamp(250px, 19.9vw, 300px);
  --obraz-sluzby: min(360px, 25vw);
  --mezera: 26px;
  transition: --p var(--doba-zpet) var(--krivka);
}
:root.otevreno { --p: 1; transition: --p var(--doba) var(--krivka); }
@media (prefers-reduced-motion: reduce) { :root, :root.otevreno { transition: none; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--zelena); color: var(--text);
  font-family: var(--pismo); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }   /* WebP s PNG zálohou — rozvržení řídí přímo <img> */
h1, h2, p, ul, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--nadpis); outline-offset: 3px; border-radius: 6px; }
.ram :focus-visible { outline-color: #fff; }

/* ---------- okno ---------------------------------------------------------- */
.okno {
  position: fixed; inset: var(--ram-h) var(--ram) var(--ram);
  border-radius: var(--zaobleni);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  /* světelné skvrny jsou pevně vůči obrazovce — při otevírání rámu se nehýbou */
  background:
    radial-gradient(28vw 18vw at 34% 76vh, rgba(172, 205, 73, .34), rgba(172, 205, 73, 0)),
    radial-gradient(19vw 17vw at 94% 93vh, rgba(205, 228, 140, .7), rgba(205, 228, 140, 0)),
    radial-gradient(22vw 18vw at 6% 96vh, rgba(172, 205, 73, .2), rgba(172, 205, 73, 0)),
    radial-gradient(24vw 17vw at 63% 3vh, rgba(232, 243, 200, .95), rgba(232, 243, 200, 0)),
    var(--okno-barva);
  background-attachment: fixed;
  scrollbar-width: thin; scrollbar-color: rgba(47, 74, 10, .25) transparent;
}
.okno:focus { outline: none; }

/* ---------- rám ----------------------------------------------------------- */
.ram { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.ram__pas {
  position: absolute; top: 0; left: var(--ram); right: var(--ram); height: var(--ram-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-left: calc(14px + 4px * var(--p));
  padding-right: calc(var(--plny) - var(--ram) + 6px);   /* navigace je vždy tam, kde v otevřeném rámu */
  pointer-events: auto;
}
/* logo: v klidu jen značka, otevřené celé — výřez se rozevře doprava */
.logo {
  flex: none; display: block; overflow: hidden;
  height: calc(26px + 20px * var(--p));
  width: calc((26px + 20px * var(--p)) * (1.3345 + 3.4805 * var(--p)));
}
.logo img { height: 100%; width: auto; max-width: none; filter: drop-shadow(var(--stin-ram)); }

.ram__nav { display: flex; align-self: stretch; align-items: stretch; gap: 8px; }   /* položky přes celou výšku pásu */
.ram__odkaz {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  padding-inline: 16px;
  color: #fff; text-decoration: none; white-space: nowrap;
  font-size: 17px; font-weight: 600; line-height: 1;
  text-shadow: var(--stin-ram);
}
/* podklad pro najetí a aktivní stránku: v klidu kolečko kolem ikony,
   v otevřeném rámu se roztáhne přes popisek — vždy od ikony doprava */
.ram__odkaz::before {
  content: ""; position: absolute; z-index: -1; top: 50%; translate: 0 -50%;
  left: calc(10px * (1 - var(--p)));
  width: calc(34px + (100% - 34px) * var(--p));
  height: calc(34px + 10px * var(--p));
  border-radius: 999px;
  transition: background-color .2s;
}
.ram__odkaz:hover::before { background: rgba(255, 255, 255, .2); }
.ram__odkaz[aria-current]::before { background: rgba(255, 255, 255, .24); }
.ikona {
  flex: none; width: 22px; height: 22px;
  fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(var(--stin-ram));
}
.popis { display: inline-block; opacity: clamp(0, (var(--p) - .45) * 2.2, 1); }

/* podmenu Služby — vyroste z rámu dovnitř okna jako zelený jazyk */
/* Služby: ploška položky sahá přes celou výšku pásu až k roletě — při přejezdu
   myší dolů nevznikne mezera, ve které by se najetí ztratilo */
.ram__polozka { position: relative; display: flex; }
.podmenu {
  position: absolute; top: 100%; left: 50%;
  translate: -50% -6px; min-width: 250px;
  display: grid; gap: 2px; padding: 6px 10px 12px;
  background: var(--zelena); border-radius: 0 0 18px 18px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, translate .2s, visibility .2s;
}
.otevreno .ram__polozka:hover .podmenu,
.otevreno .ram__polozka:focus-within .podmenu { opacity: 1; visibility: visible; translate: -50% 0; }
.podmenu a {
  padding: 11px 16px; border-radius: 12px;
  color: #fff; text-decoration: none; font-size: 17px; font-weight: 600; text-shadow: var(--stin-ram);
}
.podmenu a:hover, .podmenu a[aria-current] { background: rgba(255, 255, 255, .2); }

/* burger a mobilní menu (jen mobil) */
.burger, .mobil-menu { display: none; }
.burger {
  place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 14px; background: none; color: #fff; cursor: pointer;
}
.burger span {
  grid-area: 1 / 1; width: 24px; height: 2px; border-radius: 2px; background: currentColor;
  box-shadow: var(--stin-ram); transition: translate .25s, rotate .25s, opacity .2s;
}
.burger span:nth-child(1) { translate: 0 -7px; }
.burger span:nth-child(3) { translate: 0 7px; }
.menu-otevrene .burger span:nth-child(1) { translate: 0 0; rotate: 45deg; }
.menu-otevrene .burger span:nth-child(2) { opacity: 0; }
.menu-otevrene .burger span:nth-child(3) { translate: 0 0; rotate: -45deg; }

/* ---------- stránka: hlavní sloupec + karta ------------------------------- */
.stranka {
  position: relative; min-height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--karta-sirka);
  column-gap: clamp(32px, 4.2vw, 60px);
  padding:
    calc(var(--vyrovnani-y) + var(--okraj-y))
    calc(var(--vyrovnani-x) + var(--okraj-x))
    calc(var(--vyrovnani-x) + var(--okraj-y));
}
.hlavni { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--mezera); padding-bottom: 40px; font-size: var(--t-text); }

h1 {
  color: var(--nadpis); font-weight: 500;
  font-size: var(--t-h1); line-height: 1.08; letter-spacing: -.03em;
  max-width: 14.7em;   /* ve Figmě 660 px při 45 px → dva řádky */
}
.perex { font-size: var(--t-perex); line-height: 1.6; max-width: 38em; }
.hlavni > p, .odrazky, .lead, .pozn, .velky, h2 { max-width: 680px; }
h2 { color: var(--nadpis); font-size: var(--t-h2); font-weight: 600; line-height: 1.3; }
.velky { color: var(--nadpis); font-size: var(--t-h2); line-height: 1.5; }
.lead { color: var(--nadpis); font-size: var(--t-lead); font-weight: 600; line-height: 1.5; }
.pozn { color: var(--nadpis); font-weight: 500; }
.kicker {
  display: block; margin-bottom: 14px;
  color: var(--doplnek); font-size: var(--t-kicker); font-weight: 600; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
}

/* odrážky se zeleným bodem — bez linek */
.odrazky { list-style: none; padding: 0; display: grid; gap: 12px; }
.odrazky li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 14px; }
.odrazky li::before { content: ""; width: 8px; height: 8px; margin-top: calc(.8em - 4px); border-radius: 50%; background: var(--zelena); }   /* bod na středu prvního řádku při každé velikosti */
.odrazky--dva-sloupce { display: block; columns: 2; column-gap: 36px; max-width: none; }
.odrazky--dva-sloupce li { break-inside: avoid; margin-bottom: 12px; }

/* ---------- úvodní stránka: trojice ---------------------------------------- */
.hlavni--uvod { display: grid; grid-template-rows: auto 1fr; gap: 24px; min-height: var(--vyska-obsahu); padding-bottom: 0; }
.uvod { display: grid; gap: 18px; }
.trojice {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px;
  align-self: center; list-style: none; padding: 0;
}
.trojice a {
  position: relative; isolation: isolate;
  display: grid; justify-items: center; row-gap: 16px;
  color: var(--nadpis); text-decoration: none;
  font-size: var(--t-trojice); font-weight: 600; letter-spacing: .01em;
}
.trojice a::before, .obraz-sluzby::before {
  content: ""; position: absolute; left: 50%; translate: -50% 0; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}
.trojice a::before { top: 37.5%; width: 111%; aspect-ratio: 328 / 150; }
.trojice img { width: min(100%, 340px); transition: translate .5s cubic-bezier(.2, .8, .2, 1); }
.trojice a:hover img { translate: 0 -6px; }
.trojice a:hover span { color: #6c9419; }

/* ---------- podstránky služeb: název + dominantní fotka -------------------- */
.hlavicka-sluzby { display: flex; align-items: center; gap: 40px; }
.hlavicka-sluzby > div { flex: 1; min-width: 0; }
.obraz-sluzby { position: relative; isolation: isolate; flex: none; width: var(--obraz-sluzby); }
.obraz-sluzby::before { top: 48%; width: 125%; aspect-ratio: 500 / 220; }

/* ---------- karta: fotografie ordinace + kontakt --------------------------- */
.karta {
  position: sticky; top: calc(var(--vyrovnani-y) + var(--okraj-y)); z-index: 1; align-self: start;
  min-height: var(--vyska-obsahu);
  display: flex; flex-direction: column;
  padding: 10px 10px 18px; border-radius: 26px; overflow: hidden;
  background: #fff;
  box-shadow: 0 34px 70px -34px rgba(51, 74, 13, .28);
  font-style: normal; font-size: var(--t-karta); line-height: 1.45;
}
.karta img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.karta__info { flex: 1; display: flex; flex-direction: column; gap: 13px; padding: 18px 10px 0; }
.karta__info p { margin: 0; }
.karta__info strong { display: block; color: var(--nadpis); font-weight: 600; }
.karta__jmeno { color: var(--nadpis); font-size: var(--t-karta-jmeno); font-weight: 600; line-height: 1.4; }
.karta__ic { margin-top: auto !important; padding-top: 12px; }

/* ---------- menší obrazovky: obsah se zmenší, aby se vešel vedle rámu.
              Záleží jen na velikosti prohlížeče, ne na stavu rámu — při
              otevírání rámu se obsah dál nehýbe. --------------------------------- */
@media (max-width: 1180px), (max-height: 800px) {
  :root {
    --t-h1: clamp(28px, 3vw, 42px);
    --t-perex: 16px;
    --t-text: 15.5px;
    --t-h2: 19px;
    --t-lead: 16.5px;
    --t-kicker: 12px;
    --t-trojice: 15px;
    --t-karta: 13px;
    --t-karta-jmeno: 15px;
    --karta-sirka: clamp(220px, 19vw, 270px);
    --obraz-sluzby: min(300px, 22vw);
    --mezera: 22px;
  }
}
@media (max-width: 1000px), (max-height: 700px) {
  :root {
    --t-h1: clamp(26px, 2.6vw, 34px);
    --t-perex: 15px;
    --t-text: 14.5px;
    --t-h2: 17px;
    --t-lead: 15.5px;
    --t-kicker: 11px;
    --t-trojice: 14px;
    --t-karta: 12.5px;
    --t-karta-jmeno: 14px;
    --karta-sirka: clamp(205px, 17vw, 240px);
    --obraz-sluzby: min(240px, 18vw);
    --mezera: 18px;
    --okraj-y: 32px;
  }
}

/* ---------- užší desktop: obsah si trvale drží místo pro otevřený rám,
              proto seznam do jednoho sloupce a fotku služby pod nadpis ------- */
@media (max-width: 1180px) {
  .logo { width: calc((26px + 20px * var(--p)) * 1.3345); }   /* plné logo by narazilo do menu — zůstává značka */
  .odrazky--dva-sloupce { columns: 1; }
  .hlavicka-sluzby { flex-direction: column; align-items: flex-start; gap: 18px; }
  .obraz-sluzby { width: min(100%, 280px); }
}

/* ---------- ještě užší desktop: popisky menu by se nevešly — zůstávají ikony
              (název položky zůstává pro čtečky obrazovky) --------------------- */
@media (max-width: 1000px) {
  .obraz-sluzby { width: min(100%, 220px); }
  .ram__odkaz { gap: 0; }
  .popis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- úvodní stránka na menších obrazovkách: trojice přes celou šířku
              okna jako dominanta, karta pod ní naležato (fotka vlevo, kontakt
              vpravo). Záleží jen na šířce prohlížeče — při otevírání rámu se nic
              nehýbe. --------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1000px) {
  .stranka--uvod { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .stranka--uvod .hlavni--uvod { min-height: 0; gap: 30px; }
  .stranka--uvod .trojice { column-gap: 12px; }
  .stranka--uvod .karta {
    --t-karta: 13.5px; --t-karta-jmeno: 15px;
    position: static; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px;
    padding: 10px;
  }
  .stranka--uvod .karta img { height: 100%; min-height: 200px; aspect-ratio: auto; }
  .stranka--uvod .karta__info { padding: 10px 10px 8px 12px; }
  .stranka--uvod .karta__ic { padding-top: 6px; }
}

/* ---------- mobil: bez hoveru; horní pás s logem a burgerem ----------------- */
@media (max-width: 760px) {
  :root { --klid: 12px; --plny: 12px; --ram-h: 68px; --zaobleni: 22px; }
  :root.otevreno { --p: 0; }
  .ram__pas { padding-inline: 16px 6px; }
  .ram__nav { display: none; }
  .logo { height: 30px; width: calc(30px * 4.815); }
  .burger { display: grid; }
  .mobil-menu {
    display: grid; position: fixed; z-index: 30;
    top: calc(var(--ram-h) - 2px); left: var(--ram); right: var(--ram);
    padding: 6px 12px 16px;
    background: var(--zelena); border-radius: 0 0 24px 24px;
    box-shadow: 0 24px 40px -24px rgba(47, 74, 10, .45);
    opacity: 0; visibility: hidden; translate: 0 -10px;
    transition: opacity .22s, translate .22s, visibility .22s;
    pointer-events: auto;   /* rám má pointer-events: none — bez tohle by klepnutí propadlo do okna */
  }
  .menu-otevrene .mobil-menu { opacity: 1; visibility: visible; translate: 0 0; }
  .mobil-menu a {
    padding: 14px 12px; border-radius: 14px;
    color: #fff; text-decoration: none; font-size: 19px; font-weight: 600; text-shadow: var(--stin-ram);
  }
  .mobil-menu a[aria-current] { background: rgba(255, 255, 255, .22); }
  .mobil-menu__pod { display: grid; padding: 0 0 6px 18px; }
  .mobil-menu__pod a { font-size: 16px; font-weight: 500; padding: 10px 12px; }

  :root {
    --t-h1: 30px; --t-perex: 16px; --t-text: 17px; --t-h2: 19px; --t-lead: 17px;
    --t-kicker: 13px; --t-trojice: 16px; --t-karta: 14px; --t-karta-jmeno: 16px; --mezera: 22px;
  }
  .okno { background-attachment: scroll; }
  .stranka { grid-template-columns: 1fr; row-gap: 30px; padding: 32px 22px 34px; }
  .hlavni { padding-bottom: 0; }
  .hlavni--uvod { min-height: 0; gap: 30px; }
  .hlavni > p { font-size: 16px; }
  .trojice { grid-template-columns: 1fr; row-gap: 26px; }
  .trojice img { width: min(100%, 322px); }
  .hlavicka-sluzby { flex-direction: column; align-items: stretch; gap: 22px; }
  .obraz-sluzby { width: 100%; max-width: none; }
  .odrazky--dva-sloupce { columns: 1; }
  .karta { position: static; min-height: 0; }
  .karta__ic { margin-top: 0 !important; padding-top: 0; }
}