/* Oční optika 3R, verze 4: sloučení variant 1 a 2, přestavěno podle zadání na známku 8+ (31. 10. 2026).
   Základ je varianta 1 (styly.css). Tady jsou jen rozdíly.
   Myšlenka: zaostření. Brýle v úvodu zaostřují prodejnu, hlavní fotky se zaostří při příjezdu
   a oblouk z obruby a loga se vrací u měření a u hlavní recenze. Jinde se motiv neopakuje. */
:root {
  --krivka: cubic-bezier(0.16, 1, 0.3, 1);
  --sekce: 64px;
  /* Starší zákazníci: běžný text 18 px, pomocný 16 px */
  --t-xs: 1rem;
  --t-s: 1.125rem;
  --t-xl: clamp(1.875rem, 1.45rem + 1.2vw, 2.5rem);
  --t-xxl: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
}
h1 { line-height: 1.07; }
h2 { line-height: 1.15; }

/* ---------- Velikosti ovládacích prvků po zvětšení textu ---------- */
.menu a, .hlavicka__telefon { font-size: var(--t-xs); }
.tlacitko { font-size: 1.0625rem; }
.tlacitko--male { font-size: var(--t-xs); }
.nadpis { margin-bottom: var(--m-6); }

/* ---------- Odezva odkazů a klikací plocha telefonu v poznámce ---------- */
.kontakty a { transition: color 180ms; }
.kontakty a:hover { color: var(--tyrkys-tmava); }
.velky-telefon:hover { text-decoration: underline; text-underline-offset: 5px; }
.poznamka a { display: inline-block; padding-block: 13px; margin-block: -13px; }

/* ---------- Hlavička: kontrast loga a odezva telefonu ---------- */
.znacka { color: var(--text-slaby); transition: color 180ms; }
.znacka:hover { color: var(--tyrkys-tmava); }
.hlavicka__telefon { transition: color 180ms; }
.hlavicka__telefon:hover { color: var(--tyrkys-tmava); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Úvod: objednání i telefon vidět bez posunu ---------- */
.uvod { min-height: 0; padding-block: var(--m-6) var(--sekce); }
.uvod__mrizka { grid-template-columns: minmax(0, 560fr) minmax(0, 600fr); gap: clamp(var(--m-6), 5.5vw, 80px); }
.uvod__popis { max-width: 500px; margin-top: var(--m-5); font-size: 1.1875rem; }
.uvod__akce { margin-top: var(--m-5); }
.uvod__stav { margin-top: var(--m-4); font-size: var(--t-xs); }

/* ---------- Brýle: tenká obruba, prodejna je poznat i mimo skla ---------- */
.bryle { --o: 12px; height: auto; aspect-ratio: 6 / 5; border-radius: 28px; touch-action: pan-y; /* svislý tah prstem scrolluje, vodorovný posouvá brýle */ }
/* Obě fotky přesahují rám o stejný kus: rozmazaný okraj není vidět a obraz ve skle přesně navazuje. */
.bryle img { inset: calc(var(--o) * -1); width: calc(100% + var(--o) * 2); height: calc(100% + var(--o) * 2); max-width: none; }
.bryle__mlha { filter: blur(4px) saturate(0.9); transform: none; }
.bryle__ostre {
  -webkit-mask-image: radial-gradient(circle var(--r) at calc(var(--x) - var(--r) * 1.2 + var(--o)) calc(var(--y) + var(--o)), #000 98%, transparent 100%), radial-gradient(circle var(--r) at calc(var(--x) + var(--r) * 1.2 + var(--o)) calc(var(--y) + var(--o)), #000 98%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at calc(var(--x) - var(--r) * 1.2 + var(--o)) calc(var(--y) + var(--o)), #000 98%, transparent 100%), radial-gradient(circle var(--r) at calc(var(--x) + var(--r) * 1.2 + var(--o)) calc(var(--y) + var(--o)), #000 98%, transparent 100%);
}
.bryle__obruba { left: 0; top: 0; transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)); } /* pohyb přes transform, nepřepočítává rozložení */
.bryle__obruba i { box-shadow: 0 0 0 3px var(--ink); background: none; }
.bryle__obruba b { border-top-width: 3px; }
/* Nápověda zmizí po prvním pohybu brýlemi */
.bryle__napoveda { position: absolute; left: 50%; bottom: var(--m-4); padding: var(--m-1) var(--m-4); border-radius: var(--r-kulaty); background: rgba(20, 49, 58, 0.82); color: var(--bila); font-size: var(--t-xs); white-space: nowrap; transform: translateX(-50%); pointer-events: none; transition: opacity 400ms; }
.bryle.je-vyzkousene .bryle__napoveda { opacity: 0; }

/* ---------- Zaostření hlavních fotek při příjezdu (navazuje na brýle) ---------- */
.js .zaostri[data-odhal] { opacity: 1; transform: none; overflow: hidden; }
.js .zaostri img { filter: blur(14px); transform: scale(1.04); transition: filter 1100ms var(--krivka), transform 1100ms var(--krivka); }
.js .zaostri.je-videt img { filter: none; transform: none; }

/* ---------- Služby: jedna velká fotka a vedle otevřený seznam, popisy vidět vždy ---------- */
.nabidka { display: grid; grid-template-columns: minmax(0, 440fr) minmax(0, 736fr); gap: clamp(var(--m-6), 5vw, 64px); align-items: stretch; }
.nabidka__foto { position: relative; min-height: 460px; border-radius: 28px; overflow: hidden; background: var(--mlha); }
.nabidka__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.polozka { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--m-6); align-items: center; padding-block: var(--m-5); border-top: 1px solid var(--linka); }
.polozka:first-child { padding-top: 0; border-top: 0; }
.polozka:last-child { padding-bottom: 0; }
.polozka h3 { font-size: 1.625rem; }
.polozka p { margin-top: var(--m-2); max-width: 54ch; line-height: 1.5; color: var(--text-slaby); }
.polozka__foto { width: 160px; height: 120px; object-fit: cover; border-radius: var(--r-s); }
.polozka__foto--cocky { object-position: 60% 50%; }

/* ---------- Měření: skutečná fotka v oblouku a pod ní tři údaje jako řádky ---------- */
.mereni__mrizka { align-items: start; }
.mereni__obraz img { width: 100%; aspect-ratio: 588 / 360; object-fit: cover; object-position: 55% 42%; }
.mereni__foto { border-radius: 28px 170px 170px 28px / 28px 50% 50% 28px; }
.cisla { margin-top: var(--m-5); }
.cisla div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--m-4); padding-block: var(--m-3); border-top: 1px solid rgba(20, 49, 58, 0.18); }
.cisla div:last-child { padding-bottom: 0; }
.cisla dt { font-weight: 600; color: var(--ink); }
.cisla dd { color: var(--ink); }

/* ---------- Ordinace: vyšetření jako prostý seznam, podmínky v jednom panelu ---------- */
.ordinace__hlava { display: block; margin-bottom: var(--m-6); }
.vysetreni { gap: 0 var(--m-6); }
.vysetreni li { padding: var(--m-3) 0; background: none; border-radius: 0; border-top: 1px solid var(--linka); }
.ordinace__info { grid-template-columns: 0.9fr 1.2fr 0.95fr; gap: 0; margin-top: var(--m-6); background: var(--bila); border-radius: 28px; overflow: hidden; }
.karta { padding: var(--m-6); background: none; border-radius: 0; }
.karta + .karta:not(.karta--tmava) { border-left: 1px solid var(--linka); }
.karta--tmava { background: var(--ink); }
.karta--tmava p { color: #C9DADE; }
.velky-telefon { white-space: nowrap; }
.loga-radek { margin-top: var(--m-6); }

/* ---------- Recenze: bez karet, jedna hlavní a vedle souvislý proud ---------- */
.recenze__hlava { align-items: baseline; margin-bottom: var(--m-6); }
.hodnoceni { flex-wrap: wrap; gap: var(--m-2) var(--m-4); font-size: 1.25rem; }
.hodnoceni .hvezdy { margin: 0; }
.hodnoceni a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-xs); }
.recenze__mrizka { grid-template-columns: minmax(0, 480fr) minmax(0, 664fr); gap: clamp(var(--m-7), 7vw, 96px); align-items: start; }
.recenze__proud { display: grid; gap: 28px; }
.citat { justify-content: flex-start; gap: var(--m-2); padding: 0; background: none; border-radius: 0; }
.citat p { line-height: 1.55; }
.citat--velky { grid-row: auto; grid-column: auto; gap: var(--m-4); background: none; color: var(--ink); }
.citat--velky::before { content: ""; width: 96px; height: 22px; border-top: 4px solid var(--tyrkys); border-radius: 50% 50% 0 0 / 100% 100% 0 0; } /* oblouk z loga */
.citat--velky p { font: 500 clamp(1.5rem, 1.2rem + 0.8vw, 1.75rem)/1.3 var(--pismo-nadpis); letter-spacing: -0.015em; }
.citat--velky footer { color: var(--text-slaby); }

/* ---------- Kontakt: menší mapa vedle textu ---------- */
.kontakt__mrizka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.kontakty { margin-block: var(--m-5) var(--m-6); font-size: 1.375rem; }
.kontakty a { min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.kontakty li:first-child span { line-height: 1.35; }
.kontakt__navigace { margin-bottom: var(--m-6); }
.kontakt .mapa, .kontakt .mapa iframe { min-height: 0; height: 400px; }

/* ---------- Patička: bílá, logo bez podkladu ---------- */
.paticka { background: var(--bila); color: var(--text-slaby); border-top: 1px solid var(--linka); }
.znacka--paticka { padding: 0; background: none; }
.paticka .site a { background: var(--papir); color: var(--tyrkys-tmava); }
.paticka .site a:hover { background: var(--tyrkys-tmava); color: var(--bila); }
.paticka__podpis { border-top-color: var(--linka); }
.paticka .podpis:focus-visible { outline-color: var(--tyrkys-tmava); }

/* ---------- Okno s rezervací ---------- */
html:has(.okno[open]) { overflow: hidden; }
.okno { width: min(980px, 100% - 2 * var(--m-4)); max-width: none; height: min(860px, 100dvh - 2 * var(--m-4)); max-height: none; padding: 0; border: 0; border-radius: var(--r-m); background: var(--bila); color: var(--ink); box-shadow: var(--stin); overflow: hidden; }
.okno[open] { display: flex; flex-direction: column; animation: okno-dovnitr 320ms var(--krivka); }
.okno::backdrop { background: rgba(20, 49, 58, 0.6); }
.okno__hlava { display: flex; align-items: center; justify-content: space-between; gap: var(--m-4); padding: var(--m-3) var(--m-3) var(--m-3) var(--m-5); border-bottom: 1px solid var(--linka); }
.okno__hlava h2 { font-size: var(--t-l); }
.okno__zavrit { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--papir); color: var(--ink); cursor: pointer; transition: background-color 180ms; }
.okno__zavrit:hover { background: var(--mlha); }
.okno__zavrit .ik { width: 22px; height: 22px; }
.okno iframe { flex: 1; width: 100%; min-height: 0; border: 0; }
@keyframes okno-dovnitr { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 1100px) {
  .ordinace__info { grid-template-columns: 1fr 1fr; }
  .karta--tmava { grid-column: span 2; }
  .polozka__foto { width: 120px; height: 90px; }
  .recenze__mrizka { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .citat--velky { grid-column: auto; }
}
@media (max-width: 900px) {
  .uvod__mrizka { grid-template-columns: 1fr; }
  .bryle { aspect-ratio: 3 / 2; }
  .nabidka, .recenze__mrizka, .kontakt__mrizka { grid-template-columns: 1fr; }
  .nabidka__foto { min-height: 0; aspect-ratio: 7 / 4; }
  .mereni__foto { border-radius: 28px; }
  .kontakt .mapa, .kontakt .mapa iframe { height: 340px; }
}
@media (max-width: 600px) {
  :root { --sekce: 40px; }
  body { font-size: var(--t-m); }
  h1 { line-height: 1.11; }
  .okno { width: 100%; height: 100dvh; border-radius: 0; }
  .uvod { padding-block: var(--m-5) var(--sekce); }
  .uvod__popis { margin-top: var(--m-4); font-size: var(--t-m); }
  .uvod__akce { margin-top: var(--m-5); }
  .uvod__stav { margin-top: var(--m-3); }
  .bryle { aspect-ratio: 35 / 32; }
  .polozka { grid-template-columns: 1fr; gap: var(--m-4); }
  .polozka h3 { font-size: 1.5rem; }
  .polozka__foto { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  /* Dlouhé údaje pod sebou, ať nesoupeří o šířku */
  .cenik div, .hodiny [data-den="1"] { flex-direction: column; gap: 0; }
  .cenik dd, .hodiny [data-den="1"] dd { text-align: left; }
  /* Měření: text, rezervace, údaje a až pak fotka */
  .mereni__mrizka { gap: var(--m-5); }
  .mereni__obraz { display: flex; flex-direction: column; }
  .cisla { order: -1; margin: 0 0 var(--m-5); }
  .cisla div { grid-template-columns: 6rem minmax(0, 1fr); }
  .vysetreni { grid-template-columns: 1fr; }
  /* Ordinace: nejdřív jak se objednat */
  .ordinace__info { grid-template-columns: 1fr; }
  .karta--tmava { grid-column: auto; order: -1; }
  .karta + .karta:not(.karta--tmava) { border-left: 0; border-top: 1px solid var(--linka); }
  .karta--tmava + .karta { border-top: 0; }
  .karta { padding: var(--m-5); }
  .citat--velky p { font-size: 1.375rem; }
  .kontakty { font-size: 1.25rem; }
  .kontakt .mapa, .kontakt .mapa iframe { height: 300px; min-height: 0; }
}