/* Tokeny, reset, základní typografie a přepínání jazyků */

/* ============================================================
   DESIGN TOKENS — navazuje na vizuální styl kliniky G-INNOVA
   Brand tokens — aligned with the G-INNOVA clinic identity
   ============================================================ */
:root{
  /* Tmavá modř — hlavní barva textu, tlačítek a tmavých sekcí */
  --navy:      #17233F;
  --navy-2:    #1E2C4C;
  --navy-3:    #26355A;
  --navy-deep: #121C32;

  /* Zlatá — detaily, linky, ikony. Na text je moc světlá, proto --gold-text */
  --gold:      #A68256;
  --gold-lt:   #D9C3A3;
  --gold-text: #846340;

  /* Plochy */
  --cream:     #FAF8F5;
  --cream-2:   #FFFFFF;
  --sand:      #F2ECE5;
  --sand-2:    #F2EBE0;

  --text:      #1B2740;
  --muted:     #5C6478;
  --ink-2:     #545D70;   /* tlumený text v hero a úvodech sekcí */
  --line-2:    #D6CABB;   /* výraznější linka, svislé pruhy v pásu */
  --muted-dk:  #A7B3C6;

  --line:      #E8E0D5;
  --line-gold: #DED0BA;
  --line-dk:   rgba(248,245,240,.15);

  --ff-display:"Playfair Display", "Iowan Old Style", Georgia, serif;
  --ff-sans:   "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 82rem;            /* obsah */
  --wrap-wide: 92rem;       /* hlavička */
  --gutter: clamp(1.5rem, 4vw, 3.5rem);
  --section-y: 3rem;        /* svislé odsazení sekcí, na lg 4rem */
  --nav-h: 5rem;            /* výška hlavičky, na lg 6rem */
  --ease: cubic-bezier(.16,1,.3,1);

  --r-pill: 999px;
  --r-card: 1.25rem;

  --shadow-soft: 0 24px 60px -34px rgba(26,41,66,.34);
  --shadow-card: 0 18px 44px -30px rgba(26,41,66,.30);
  color-scheme: light;
}
@media (min-width:1024px){ :root{ --nav-h:6rem } }

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--ff-sans);
  font-size:clamp(16.5px,1.05vw,17.5px);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:400;letter-spacing:-.018em;line-height:1.12}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--navy);color:var(--cream)}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px;border-radius:4px}
.section--dark :focus-visible,.footer :focus-visible,
.contact__col :focus-visible,.place--lead :focus-visible{outline-color:var(--gold-lt)}

/* ============================================================
   I18N — obě jazykové verze jsou v DOM, přepínač mění html[lang]
   POZOR: díky display:revert nesmí data-lang sedět na prvku,
   kterému CSS mění display — vložte data-lang na vnořený <span>.
   ============================================================ */
[data-lang]{display:none !important}
html[lang="cs"] [data-lang="cs"],
html[lang="en"] [data-lang="en"]{display:revert !important}
html[lang="cs"] small[data-lang="cs"],
html[lang="en"] small[data-lang="en"]{display:block !important}

/* Obsah, který se na telefonu vynechává, protože je k nalezení i jinde
   na stránce. Používá se v hero, kde musí obsah vystačit na jednu obrazovku. */
@media (max-width:1023px){ .only-wide{display:none} }