/* Úvodní obrazovka, portrét a pás předností */

/* ============================================================
   HERO — světlá, vzdušná, se zlatou linkovou kresbou
   ============================================================ */
/* Hero a pás předností tvoří dohromady přesně jednu obrazovku.
   Hero se roztahuje do zbylého místa, pás má pevnou výšku.
   Na telefonu se neuplatní — tam se obsah nevejde a stránka teče. */
@media (min-width:1024px){
  .hero-shell{min-height:100svh;display:flex;flex-direction:column}
  .hero-shell > .hero{flex:1 1 auto;min-height:0}
  .hero-shell > .creds{flex:none}
}
.hero{
  position:relative;display:flex;align-items:center;
  background:
    radial-gradient(120% 80% at 88% 12%, rgba(240,230,216,.85), transparent 58%),
    radial-gradient(90% 70% at 4% 92%, rgba(228,215,197,.55), transparent 62%),
    var(--cream);
  overflow:hidden;padding-block:calc(var(--nav-h) + 2rem) 2rem
}
.hero .wrap{position:relative;z-index:2;width:100%}
@media (min-width:1024px){ .hero{padding-block:calc(var(--nav-h) + 1.5rem) 1.5rem} }
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,6vw,92px);align-items:center}

/* Zlatá linková kresba na pozadí */
.deco{position:absolute;z-index:1;color:var(--gold);opacity:.34;pointer-events:none}
/* kresba se pod hlavičkou rozplyne, aby nerušila pod menu */
.deco--l{left:-13%;top:-6%;width:min(46vw,560px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 96px);
          mask-image:linear-gradient(to bottom,transparent 0,#000 96px)}
.deco--r{right:-11%;bottom:-16%;width:min(42vw,520px)}
@media (max-width:1023px){ .deco--l{left:-38%;top:-2%;width:80vw} .deco--r{display:none} }

.hero__rule{display:block;width:56px;height:1px;background:var(--gold);margin-bottom:clamp(18px,2.2vw,26px)}
.hero h1{margin-bottom:clamp(20px,2.3vw,28px)}
.hero h1 .t-pre{display:block;font-family:var(--ff-sans);font-size:.6875rem;
  letter-spacing:.22em;text-transform:uppercase;font-weight:400;line-height:1.5;color:var(--muted);margin-bottom:1.3em}
.hero h1 .t-pre--after{margin:1.45em 0 0;color:var(--muted)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero__intro{max-width:47ch}
.hero__intro > p{margin-bottom:.95em}
.hero__intro > p:last-child{margin-bottom:0}
.hero__intro .lead{color:var(--text)}
.hero__intro > p:not(.lead){font-size:.97rem;line-height:1.75;color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,36px)}

/* Portrét v oblouku */
.portrait{position:relative;max-width:472px;margin-left:auto;width:100%}
.portrait__box{position:relative;aspect-ratio:4/5}
.portrait__box::after{          /* zlatý obrys posunutý za fotku */
  content:"";position:absolute;top:-18px;right:-18px;left:18px;bottom:18px;z-index:0;
  border:1px solid var(--line-gold);
  border-radius:24px;
  pointer-events:none
}
.portrait__frame{
  position:absolute;inset:0;z-index:1;overflow:hidden;display:grid;
  border-radius:24px;
  background:var(--sand);
  /* vlasová linka drží tvar rámečku i u fotky se světlým pozadím,
     která by se jinak slila s krémovým podkladem stránky */
  box-shadow:var(--shadow-soft), 0 0 0 1px var(--line)
}
.portrait__frame > *{grid-area:1/1}
.portrait__frame img{width:100%;height:100%;object-fit:cover;object-position:center 16%;z-index:1}
.portrait__ph{place-self:center;text-align:center;padding:24px;color:var(--muted);z-index:0}
.portrait__frame:has(img) .portrait__ph{display:none}   /* fotka je na místě → záloha pryč */
.portrait__ph b{display:block;font-family:var(--ff-display);font-size:4rem;font-weight:400;color:var(--gold);line-height:1}
.portrait__ph small{display:block;margin-top:14px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
@media (max-width:560px){
  .hero__rule{width:40px}
}
/* Nízké obrazovky — stejný práh jako na webu kliniky (šířka >= 1024, výška <= 960).
   Bez toho pás předností spadne pod okraj a na notebooku ho nikdo neuvidí. */
@media (min-width:1024px) and (max-height:60rem){
  .hero{padding-block:calc(var(--nav-h) + 1rem) 1rem}
  .hero .h-display{font-size:clamp(1.8rem,3vw,2.3rem)}
  .hero h1{margin-bottom:12px}
  .hero h1 .t-pre{margin-bottom:.9em}
  .hero h1 .t-pre--after{margin-top:.9em}
  .hero__rule{margin-bottom:12px}
  .hero__intro .lead{font-size:1rem;line-height:1.7}
  .hero__intro > p:not(.lead){font-size:.9rem;line-height:1.6}
  .hero__intro > p{margin-bottom:.55em}
  .hero__cta{margin-top:14px}
  .hero .clinic-link{margin-top:12px}
  .portrait{max-width:330px}
  .hero .clinic-link{display:none}   /* stejný proklik je v hlavičce i v sekci Klinika */
}
/* ---------- TELEFON A TABLET ----------
   Hero vyplní první obrazovku i tady, ale jinak: fotka je na šířku a její
   velikost se odvozuje od výšky okna (svh), vedlejší odstavce jsou skryté
   (stejný text je v sekci O mně). Díky tomu je jméno i objednání vidět hned,
   ne až po odscrollování pod fotku. Pás předností navazuje pod obrazovkou. */
@media (max-width:1023px){
  .hero{min-height:100svh;padding-block:calc(var(--nav-h) + 1rem) 1.5rem}
  .hero__grid{grid-template-columns:1fr;gap:clamp(16px,2.8svh,30px)}
  .hero .h-display{font-size:clamp(1.95rem,7.4vw,2.6rem)}
  .hero__intro .lead{font-size:1rem;line-height:1.72}
  .hero .clinic-link{display:none} /* stejný proklik je v sekci Klinika */
  .hero h1{margin-bottom:14px}
  .hero h1 .t-pre{margin-bottom:1em}
  .hero h1 .t-pre--after{margin-top:1.1em}
  .hero__rule{margin-bottom:14px}
  .hero__cta{margin-top:20px}
  .portrait{order:-1;width:auto;max-width:none;margin:0}
  .portrait__box{
    --ph:clamp(138px,24svh,250px);
    aspect-ratio:auto;height:var(--ph);width:min(100%,var(--ph));
    margin-inline:auto
  }
  .portrait__box::after{top:-12px;right:-12px;left:12px;bottom:12px;border-radius:18px}
  .portrait__frame{border-radius:18px}
}
/* Nízké telefony (iPhone SE apod.) — poslední utažení */
@media (max-width:1023px) and (max-height:46rem){
  :root{--nav-h:4.25rem}
  .hero{padding-block:calc(var(--nav-h) + .5rem) 1rem}
  .hero .h-display{font-size:clamp(1.8rem,7vw,2.2rem)}
  .hero h1 .t-pre{margin-bottom:.8em}
  .hero h1 .t-pre--after{margin-top:.85em}
  .hero__intro .lead{font-size:.95rem;line-height:1.65}
  .hero__cta{margin-top:16px}
}


/* ============================================================
   PÁS S PŘEDNOSTMI — svislý pruh s krátkým zlatým segmentem,
   stejné řešení jako na webu kliniky
   ============================================================ */
.creds{background:#F4F0EA;border-block:1px solid var(--line)}
.creds__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:2rem 1.5rem;padding-block:3rem
}
@media (min-width:1024px){ .creds__grid{padding-block:2rem} }
.creds__item{position:relative;border-left:1px solid var(--line-2);padding-left:1rem}
.creds__item::before{
  content:"";position:absolute;left:-1px;top:0;width:2px;height:1.75rem;background:var(--gold)
}
.creds__item b{
  display:block;font-family:var(--ff-display);font-size:1.125rem;font-weight:500;
  line-height:1.375;color:var(--text);letter-spacing:-.008em
}
@media (min-width:1024px){ .creds__item b{font-size:1rem} }
@media (min-width:1600px){ .creds__item b{font-size:1.125rem} }
.creds__item p{margin:.25rem 0 0;font-size:.8125rem;line-height:1.625;color:var(--muted)}
@media (max-width:1023px){ .creds__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .creds__grid{grid-template-columns:1fr;gap:1.75rem} }

/* Velmi nízké obrazovky (notebooky 1366x768) — poslední utažení,
   aby se hero i pás vešly do jedné obrazovky bez přetékání. */
@media (min-width:1024px) and (max-height:45rem){
  :root{--nav-h:4.5rem}
  .hero .h-display{font-size:clamp(1.6rem,2.6vw,2rem)}
  .hero__intro .lead{font-size:.95rem;line-height:1.65}
  .hero__cta{margin-top:10px}
  .portrait{max-width:272px}
  .creds__grid{padding-block:1.25rem}
  .creds__item b{font-size:.9375rem}
}

/* Nejužší telefony (320 px) — tlačítka na celou šířku pod sebou */
@media (max-width:360px){
  .portrait__box{--ph:clamp(128px,22svh,250px)}
  .hero h1{margin-bottom:10px}
  .hero__rule{margin-bottom:10px}
  .hero__cta{gap:8px;margin-top:12px}
  .hero__cta .btn{width:100%;justify-content:center}
}