/* ============================================================
   layout.css — kostra widgetu (hlavička, progres, main, pätička)
   Jediná zodpovednosť: rozloženie obrazovky, nie vzhľad prvkov.
   ============================================================ */

.widget{
  display:flex;
  flex-direction:column;
  /* Obsah začína hore, nie na strede a nie na spodku. Značka, priebeh aj
     nadpis otázky tak stoja na každom kroku rovnako vysoko — pri centrovaní
     skákali podľa toho, koľko mala otázka možností (pri štyroch 26 %,
     pri deviatich 5 %). */
  justify-content:flex-start;
  /* Widget má presne výšku okna a sám sa neroluje. Značka, priebeh aj tlačidlá
     tak nikdy nevyrolujú preč a hlavička stojí na každom kroku rovnako vysoko.
     Čo sa nezmestí, listuje vo vlastnom ráme vnútri kroku (text súhlasu,
     pokyny k fotke) alebo v <main> (výsledok s produktami). */
  height:100dvh;
  min-height:0;
  max-width:var(--widget-max-width);
  margin:0 auto;
  background:transparent;
}

/* ---------- pevná fotografia pod obsahom ----------
   Zámerne NIE background-attachment:fixed — tú vlastnosť iOS Safari
   ignoruje a správa sa ako obyčajné pozadie. Samostatná position:fixed
   vrstva funguje všade a v iframe sa ukotví k rámu widgetu.

   Vrstva kopíruje šírku stĺpca widgetu, aby na počítači nevznikol pruh
   fotografie mimo neho. Ako potomok flexboxu nie je flex položkou —
   fixed ju vyberá z toku.

   Závoj: fotografia je spoľahlivo svetlá len po ~46 % šírky, ďalej sú
   vlasy až po čiernu. Keďže sa obsah roluje a pozadie nie, text sa nad
   ne skôr či neskôr dostane. Závoj preto drží aspoň 62 % krytia po celej
   šírke obsahu (--inset-right) a až za ňou mizne — tam už je oko na fotke,
   ktoré ostáva neprekryté. Pri 62 % má hlavný atrament aj nad čiernou 6,04:1. */
.widget::before{
  content:"";
  position:fixed;
  top:0;bottom:0;
  left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--widget-max-width);
  z-index:0;
  pointer-events:none;
  background-color:var(--bone);
  background-image:
    linear-gradient(102deg,
      rgba(250,246,238,.88) 0%,
      rgba(250,246,238,.80) 52%,
      rgba(250,246,238,.62) 78%,
      rgba(250,246,238,0) 94%),
    url("../img/hero.jpg");
  background-size:cover;
  background-position:right top;
  background-repeat:no-repeat;
}
.widget > *{position:relative;z-index:1;}
/* Hlavička stojí o vrstvu vyššie než ostatné časti kostry: pri zhode z-indexu
   rozhoduje poradie v HTML, takže <main> by rozbalenú ponuku jazykov prekreslilo
   obsahom úvodu — aj pre kurzor. Selektor musí byť .widget > header, inak ho
   prebije z-index:1 z pravidla nad ním. */
.widget > header{z-index:3;}

/* ---------- header ---------- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px var(--gutter) 8px;
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:14px;
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1;
}
/* Značku uvádza zlatá hviezdička. Glyf je v CSS, nie v HTML: je čisto
   ozdobný (v šablóne má aria-hidden) a takto ostáva kostra bez obsahu. */
.brand .dot{
  flex:none;
  color:var(--gold);
  font-size:12px;
  line-height:1;
}
.brand .dot::before{content:"\2726";}
/* Pravá strana hlavičky: gulička jazyka, minimalizovanie a „začať odznova“.
   Tlačidlá sú od guličky ďalej než od okraja, aby sa na telefóne nedali
   pomýliť; medzi sebou sa dotýkajú len kruhmi pod kurzorom. */
.header-actions{
  display:flex;align-items:center;gap:8px;
}
.icon-btn{
  border:none;background:none;cursor:pointer;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  line-height:1;
}
.icon-btn[hidden]{display:none;}
.icon-btn + .icon-btn{margin-left:-6px;}
.icon-btn:hover{background:var(--surface-panel);}
.icon-btn:focus-visible{outline:2px solid var(--espresso);outline-offset:2px;}

/* ---------- progress ---------- */
/* Vláska pod značkou je zároveň priebehom. Pravý okraj má spoločný
   s obsahom, takže lícuje s voľbami aj tlačidlami. */
.progress-wrap{padding:0 var(--inset-right) 10px var(--gutter);}
.progress-track{
  height:1px;background:var(--line-strong);opacity:.45;
}
.progress-fill{
  height:1px;margin-top:-1px;
  background:var(--espresso);
  width:0%;
  transition:width .35s ease;
}
.progress-label{
  margin-top:8px;font-size:9.5px;color:var(--ink);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}

/* ---------- main ---------- */
main{
  padding:2px var(--inset-right) 8px var(--gutter);
  display:flex;
  flex-direction:column;
  /* <main> berie zvyšok výšky medzi priebehom a pätičkou a je jediné miesto,
     kde sa kostra roluje — na kroku s výsledkom, kde je produktov ľubovoľne
     veľa. Na ostatných krokoch sa obsah zmestí, prípadne listuje rám vnútri
     kroku (pozri .consent-text a .photo-tips v screens.css). */
  flex:1;
  min-height:0;
  overflow-y:auto;
  /* Dorolovanie nesmie potiahnuť stránku e-shopu pod iframe-om. */
  overscroll-behavior:contain;
  /* Vlásková lišta pri pravom okraji. Preťatá kartička sama nestačila —
     na kroku s deviatimi voľbami aj na výsledku nebolo poznať, že obsah
     pokračuje. Palec je preto viditeľný stále, ale je len 3 px široký a
     v atramente so 34 % krytia, aby v úzkom stĺpci nepôsobil ako chyba.
     Dráha ostáva priehľadná — kreslí sa len poloha, nie celý rozsah.
     Sedí v pravom odsadení (--inset-right), teda za líniou obsahu na
     pruhu fotografie; tam nič neprekrýva a nepohne rozložením kariet.
     Rámy s dlhým textom si svoju vlastnú tenkú lištu ponechávajú. */
  scrollbar-width:thin;
  scrollbar-color:rgba(42,32,24,.34) transparent;
}
main::-webkit-scrollbar{width:3px;}
main::-webkit-scrollbar-track{background:transparent;}
main::-webkit-scrollbar-thumb{background:rgba(42,32,24,.34);border-radius:2px;}
.step{
  /* Krok vypĺňa celé <main>, aby sa rám s dlhým textom mal o čo oprieť
     a mohol si vziať presne toľko výšky, koľko po ostatnom obsahu zvýši. */
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  animation:fadeIn var(--motion-base) ease;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- footer ---------- */
footer{
  padding:12px var(--inset-right) 18px var(--gutter);
  display:flex;gap:9px;
}
footer:empty{display:none;}