:root{ --header-h:64px;  --brand-red-1:#be131c; --brand-red-2: #59a697; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans','Liberation Sans',sans-serif;color:#101828;background:#fff;line-height:1.5}
img{max-width:100%;height:auto;display:inline-block}
a{color:#344054;text-decoration:none} a:hover{color:var(--brand-red-1)}

.container{max-width:1140px;margin:0 auto;padding:0 20px}
.section{padding:64px 0; position:relative} .section.alt{background:#F9FAFB} .center{text-align:center}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #EAECF0}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;max-width:100%;flex:0 1 auto}
/* Strong logo overrides so it ALWAYS changes */
.header-inner .brand img.logo-zzo{ height:68px !important; display:block }
.header-inner .brand img.logo-eurolab{ height:18px !important; display:block }
.nav-toggle{display:none;background:none;border:1px solid #EAECF0;border-radius:10px;padding:.4rem .6rem;line-height:1}
.site-nav ul{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
.site-nav a{color:#344054;font-weight:600;padding:8px 10px;border-radius:8px}
.site-nav a:hover{background:#F2F4F7}
@media (max-width:900px){
  .nav-toggle{display:inline-flex;align-items:center;gap:6px}
  .brand{gap:8px;max-width:calc(100% - 56px)} /* rezerva pro hamburger */
  .header-inner .brand img.logo-zzo{ height:38px !important }
  .header-inner .brand img.logo-eurolab{ height:16px !important }
  .site-nav{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;box-shadow:0 18px 36px rgba(16,24,40,.16);padding:12px 16px}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:6px}
  .site-nav a{display:block}
}

/* Hero */
.section.hero{position:relative;overflow:hidden;padding:0; min-height: calc(100svh - var(--header-h,64px));display:flex;align-items:center;
  background:radial-gradient(900px 420px at 85% -10%, rgba(187,26,26,.08), transparent 60%), linear-gradient(180deg,#fff,#f8fbfb);
  --hero-size: clamp(640px, 50vw, 1000px);
  --hero-gap:  clamp(160px, 16vw, 360px);
}
.section.hero>.container{position:relative;z-index:1}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-bg img{position:absolute;top:50%;left:50%;width:var(--hero-size);height:auto}
.hero-bg .hero-fundus{transform:translate(calc(-50% - var(--hero-gap)/2), -50%)}
.hero-bg .hero-heart {transform:translate(calc(-50% + var(--hero-gap)/2), -50%) rotate(-6deg);filter:drop-shadow(0 20px 48px rgba(16,24,40,.22));opacity:.96}
.section.hero h1{font-size:clamp(28px,3.4vw,44px);line-height:1.15;margin:0 0 8px}
.section.hero .lead{font-size:clamp(16px,1.6vw,20px);color:#475467;margin:0 0 16px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

/* Mission & Resources backgrounds via ::before */
#mission::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: url('../assets/mission-hero.png') center / min(1200px, 90vw) no-repeat;
}
#resources::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: url('../assets/faq-hero.png') center 8% / min(1200px, 90vw) no-repeat;
}
@media (min-width:1920px){
  #mission::before, #resources::before{ background-size: min(1400px, 70vw); }
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;font-weight:700;border:1px solid transparent;transition:transform .2s ease, filter .2s ease}
.btn-primary{color: #59a697;border-color:var(--brand-red-2);background-image:linear-gradient(135deg,var(--brand-red-1),var(--brand-red-2));}
.btn-primary:hover{filter:brightness(1.03);transform:translateY(-1px)}
.btn-ghost{color:#344054;border-color: #dcede9;background-image:linear-gradient(180deg, #dcede9, #dcede9)}
.btn-ghost:hover{background-image:linear-gradient(180deg,#fff,#EDF2F7)}

/* Grids & cards */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.card{border:1px solid #EAECF0;border-radius:12px;padding:16px;background:#fff}
.card.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border-color:#EAEFF5}
.card h3{margin:8px 0}
.why-list{margin:0;padding:0;list-style:none}
.why-list li{display:flex;gap:8px;align-items:flex-start;margin:10px 0}
.why-list .material-symbols-rounded{color:#0EA5E9}
.sub{color:#475467}

/* Icons black */
#cvd .card .material-symbols-rounded,#fundus .card .material-symbols-rounded{color:#101828}

/* How & benefits */
.how-list{margin:12px 0 0 18px}.how-list li{margin:6px 0}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.benefit{display:flex;gap:8px;align-items:flex-start;padding:12px;border:1px solid #EAECF0;border-radius:10px;background:#fff}
.benefit .material-symbols-rounded{color:#16A34A}
@media (max-width:900px){.split{grid-template-columns:1fr}.cards-grid{grid-template-columns:1fr}.benefits{grid-template-columns:1fr}}

/* FAQ & publications */
.accordion .qa{border:1px solid #EAECF0;border-radius:10px;padding:10px 12px;margin:8px 0;background:#fff}
.accordion .qa summary{cursor:pointer;font-weight:600;list-style:none;outline:none}
.accordion .qa[open]{box-shadow:0 6px 20px rgba(16,24,40,.08)}
.accordion .qa p{margin:8px 0 0;color:#475467}
.publications{list-style:none;padding:0;margin:0}
.publications li{margin:8px 0}
.publications li a{display:block;padding:10px 12px;border:1px solid #EAECF0;border-radius:10px;color:#101828;background:#fff;box-shadow:0 2px 0 rgba(16,24,40,.02)}
.publications li a:hover{border-color:#D0D5DD;background:#F9FAFB}

/* Media frames */
.media-sample,.media-rotator{max-width:1080px;margin:22px auto 0;position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(16,24,40,.12)}
.media-sample img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-rotator img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease-in-out}
.media-rotator img.show{opacity:1}

/* Forms (external CSS, complements critical inline) */
#contact .form{ --fld-gap:12px }
#contact .form .grid-2{ display:grid; grid-template-columns:1fr; gap:var(--fld-gap) }
#contact .form .field{ margin:0 } #contact .form .field label{ margin-bottom:6px }
@media (min-width: 640px){
  #contact .form .grid-2{ grid-template-columns:1fr 1fr }
  #contact .form .field--full{ grid-column:1 / -1 }
}
@media (max-width: 900px){
  #contact .form button[type="submit"]{ width:100% }
}
#contact .form input, #contact .form textarea{ font-size:16px }
.form .consent{ display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:start; margin-top:var(--fld-gap) }
.form .consent input[type="checkbox"]{ width:18px; height:18px; margin-top:2px }
.form .consent label{ margin:0; line-height:1.45; color:#475467 }

/* Footer */
.site-footer{border-top:1px solid #EAECF0;background:#fff}
.site-footer .small{color:#667085;margin:6px 0} .site-footer .tiny{color:#98A2B3;margin-top:10px}

/* Safety: keep sections visible on desktop even if external CSS interferes */
@media (min-width:901px){
  #home, #mission, #products, #cvd, #fundus, #resources, #contact{ display:block; visibility:visible; opacity:1 }
  .split, .cards-grid, .benefits{ display:grid }
  .accordion, .publications, .media-sample, .media-rotator{ display:block }
  .site-nav{ display:block }
}

/* QHD/4K tuning */
@media (min-width:1920px){
  html{font-size:17px}
  .container{max-width:1320px}
  .section{padding:80px 0}
  .section.hero{--hero-size:min(60vw,1280px);--hero-gap:min(20vw,420px)}
  .section.hero>.container{padding-right:380px}
  .site-nav a{font-size:1.05rem}
  .btn{padding:12px 18px}
  .section.hero h1{font-size:clamp(36px,2.2vw,54px)}
  .section.hero .lead{font-size:clamp(18px,1.4vw,22px)}
}
@media (min-width:2560px){
  html{font-size:18px}
  .container{max-width:1440px}
  .section{padding:96px 0}
  .section.hero{--hero-size:min(62vw,1400px);--hero-gap:min(24vw,480px)}
  .section.hero>.container{padding-right:420px}
  .btn{padding:13px 20px}
}


/* v54.5: Strict vertical centering for hero */
:root{ --header-h: 64px; } /* default; JS přepíše na reálnou výšku hlavičky */
.section.hero{
  padding: 0; /* zruší vertikální padding sekce, aby střed byl geometricky přesný */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h)); /* modernĂ­ mobily */
  min-height: calc(100dvh - var(--header-h)); /* iOS Safari */
  display:flex; align-items:center; justify-content:center;
}
.section.hero > .container{
  text-align:center; margin-inline:auto;
  padding-right:0 !important; padding-left:0 !important;
}
.section.hero .cta-row{ justify-content:center }



/* v54.6: Visibility guards (desktop) + background safety + section base */
.section{ position:relative }
.section::before{ z-index:0 !important; pointer-events:none !important; }
.section > .container{ position:relative; z-index:1 }

@media (min-width:901px){
  /* force main sections to show on desktop even if third‑party CSS hides them */
  .site :where(#home,#mission,#products,#cvd,#fundus,#resources,#contact){
    display:block !important; visibility:visible !important; opacity:1 !important;
  }
  /* ensure grids render as grids */
  .site :where(.split,.cards-grid,.benefits){ display:grid !important; }
  /* content lists & media as blocks */
  .site :where(.accordion,.publications,.media-sample,.media-rotator,.why-list){ display:block !important; }
  /* desktop navigation visible */
  .site-header .site-nav{ display:block !important; }
  /* details/summary sane defaults */
  .accordion details{ display:block !important; }
  .accordion summary{ display:block !important; }
}


/* v54.7: Bulletproof hero vertical centering (overrides guard rules) */
:root{ --header-h: 64px; } /* fallback */
.section.hero{
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  padding-block: 0 !important;
  position: relative !important;
}
.section.hero > .container{
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  margin: 0 !important;
  width: min(1140px, calc(100% - 40px)) !important;
  padding-right: 0 !important;
  z-index: 1 !important;
}
.section.hero .cta-row{ justify-content: center !important; }

/* v54.8: Hero exact vertical centering (strong override) */
:root{ --header-h: 64px; }
.section.hero{
  padding-block: 0 !important;
  min-height: calc(100svh - var(--header-h)) !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
}
.section.hero > .container{
  text-align: center;
  margin-inline: auto;
  padding-right: 0 !important;
}
.section.hero .cta-row{ justify-content: center }

/* v54.9: Robust menu visibility */
@media (min-width: 901px){
  .site-header .site-nav{ display:block !important; position:static !important; box-shadow:none !important; }
  .site-header .nav-toggle{ display:none !important; }
}
@media (max-width: 900px){
  .site-header .site-nav{ display:none; position:absolute; left:0; right:0; top:64px; background:#fff; box-shadow:0 18px 36px rgba(16,24,40,.16); padding:12px 16px }
  .site-header .site-nav.open{ display:block !important; }
}
.site-header{ z-index: 200 !important; }

/* v55.0: Lock desktop menu visibility and neutral nav link styles */
.site-header .site-nav{ display:block }
@media (max-width:900px){
  .site-header .site-nav{ display:none }
  .site-header .site-nav.open{ display:block }
}
.site-header .site-nav a{
  background:none !important; box-shadow:none !important; border:0 !important;
  padding:8px 10px !important; border-radius:8px !important;
}


.section.hero > .container{ text-align:center; margin-inline:auto; padding-right:0 !important }
.section.hero .cta-row{ justify-content:center }

/* --- HERO: tvrdé vycentrování i vertikálně (přebije #home{display:block!important}) --- */
:root{ --header-h: 64px; } /* upravte na reálnou výšku hlavičky, např. 72–80px */
#home.section.hero{
  padding-block: 0 !important;
  display: grid !important;
  place-items: center !important;                 /* svisle i vodorovnÄ› */
  min-height: calc(100vh - var(--header-h)) !important; /* fallback */
}
@supports (height: 100svh){
  #home.section.hero{ min-height: calc(100svh - var(--header-h)) !important; }
}
@supports (height: 100dvh){
  #home.section.hero{ min-height: calc(100dvh - var(--header-h)) !important; }
}
#home.section.hero > .container{
  text-align: center; margin-inline: auto; padding-right: 0 !important;
}

/* --- FORM: responzivní layout bez ohledu na přítomnost .grid-2 --- */
/* 1) Formulář je grid kontejner, .grid-2 (pokud existuje) „zploštíme“ */
#contact .form{ display: grid; grid-template-columns: 1fr; gap: 12px }
#contact .form .grid-2{ display: contents } /* děti .grid-2 se chovají jako položky gridu */

/* 2) ≥ 640px dva sloupce */
@media (min-width:640px){
  #contact .form{ grid-template-columns: 1fr 1fr }
}

/* 3) Položky přes celou šířku (zpráva, souhlas, tlačítko, status) */
#contact .form .field--full,
#contact .form .consent,
#contact .form button[type="submit"],
#contact .form .form-status{ grid-column: 1 / -1 }

/* 4) Heuristika: pokud je 4. .field „Zpráva“, natáhni ji přes celou šířku
   (funguje i když nemá class .field--full) */
#contact .form .field:nth-of-type(4){ grid-column: 1 / -1 }

/* 5) Vzhled polí zůstává */
#contact .form .field{ margin:0 }
#contact .form label{ display:block; font-weight:600; margin-bottom:6px }
#contact .form input,#contact .form textarea{
  width:100%; padding:10px 12px; border:1px solid #D0D5DD; border-radius:10px; font:inherit
}
#contact .form .consent{
  display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:start; margin-top:12px
}
#contact .form .consent input[type="checkbox"]{ width:18px; height:18px; margin-top:2px }
#contact .form .consent label{ margin:0; line-height:1.45; color:#475467 }
@media (max-width:900px){ #contact .form button[type="submit"]{ width:100% } }


/* === FORM – responzivní layout (drop‑in patch) === */
#contact .form{
  display:grid; grid-template-columns:1fr; gap:12px; align-items:start;
}
#contact .form .grid-2{
  /* „zploští“ vnitřní wrapper, aby děti šly přímo do gridu formuláře */
  display:contents;
}

/* ≥ 640 px dva sloupce */
@media (min-width:640px){
  #contact .form{ grid-template-columns:1fr 1fr; }
  #contact .form .field--full{ grid-column:1 / -1; }
}

/* Položky, které mají být přes celou šířku */
#contact .form .field--full,
#contact .form .consent,
#contact .form button[type="submit"],
#contact .form .form-status{
  grid-column:1 / -1;
}

/* Heuristika: když „Zpráva“ není označená .field--full,
   bývá 4. v pořadí – roztáhneme ji také přes celou šířku. */
#contact .form .field:nth-of-type(4){ grid-column:1 / -1; }

/* Základní vzhled polí */
#contact .form .field{ margin:0; }
#contact .form label{ display:block; font-weight:600; margin-bottom:6px; }
#contact .form input,
#contact .form textarea{
  width:100%; box-sizing:border-box;
  padding:10px 12px; border:1px solid #D0D5DD; border-radius:10px; font:inherit;
  font-size:16px; /* iOS: prevence auto‑zoomu */
}

/* Souhlas – checkbox + text v mřížce */
#contact .form .consent{
  display:grid; grid-template-columns:auto 1fr;
  gap:8px 12px; align-items:start; margin-top:12px;
}
#contact .form .consent input[type="checkbox"]{ width:18px; height:18px; margin-top:2px; }
#contact .form .consent label{ margin:0; line-height:1.45; color:#475467; }

/* Tlačítko: na mobilu na plnou šířku */
#contact .form button[type="submit"]{ min-height:44px; }
@media (max-width:900px){
  #contact .form button[type="submit"]{ width:100%; }
}