/* ═══ Béžová domovská (16. 9.; podľa mockup/codex-llab-home.html) — lokál aj produkcia ═══
 * Len domovská — zapína sa vo functions.php prepínačom LLAB_HOME_BEZOVA. main.css sa nemení.
 * Vrátenie: LLAB_HOME_BEZOVA na false a nasadiť tému.
 * Poradie sekcií ostáva; mení sa podklad, karty, rádiusy, tiene, hero, výška citátu a medzera medzi sekciami (64 px). */

body.home{
  --bez-papier:#f6f2ec;
  --bez-tien-sm:0 10px 38px rgba(14,14,41,.07);
  --bez-tien-lg:0 26px 90px rgba(14,14,41,.16);
  --bez-ciara:rgba(16,25,39,.12);
  /* #E3E7ED na béžovej zaniká (rámčeky pilulek, deliace čiary pri Leovi); priesvitná tmavá
     vyzerá na bielych kartách takmer rovnako a na papieri ostane viditeľná */
  --line:var(--bez-ciara);
  background:linear-gradient(180deg,#f6f2ec 0%,#eeece7 48%,#e1e7e9 100%);
}

/* hero: tmavá karta, fotka ako pozadie pravej časti, text biely na prechode (ako v makete).
   Rieši prázdnu prvú obrazovku — malý portrét a veľa voľnej plochy okolo. */
body.home .hero{padding-top:24px}
body.home .hero__g{
  position:relative;isolation:isolate;
  width:calc(100% - 2 * var(--pad));max-width:calc(var(--wrap) - 2 * var(--pad));margin-inline:auto;
  grid-template-columns:minmax(0,1fr);
  min-height:min(640px, calc(100svh - 71px - 40px));
  padding:72px 64px;
  background:#080a1d;border-radius:24px;overflow:hidden;box-shadow:var(--bez-tien-lg);
}
body.home .hero__g::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#080a1d 0%,#080a1d 42%,rgba(8,10,29,.55) 66%,rgba(8,10,29,.08) 100%)}
body.home .hero__p{position:absolute;inset:0 0 0 42%;z-index:-2;width:auto;max-width:none;aspect-ratio:auto;border-radius:0;box-shadow:none;justify-self:auto}
/* fotka (23. 9.): Leo s tabletom, zrkadlovo — pozerá k textu. x 30 % posunie postavu doprava, aby tablet
   nebol pod tmavým prechodom a pravá ruka ostala celá (porovnané 50/30/15 %). Pri inej fotke prehodnotiť. */
body.home .hero__p img{width:100%;height:100%;object-fit:cover;object-position:30% 22%}
body.home .hero__t{max-width:560px;color:#fff}
body.home .hero h1{color:#fff}
body.home .hero__hl{color:#7da2ff}
body.home .hero .eyebrow{color:#9db8ff}
body.home .hero .lead{color:rgba(255,255,255,.8)}
body.home .hero .btn--g{border-color:rgba(255,255,255,.55);color:#fff}
body.home .hero .btn--g:hover{background:#fff;border-color:#fff;color:var(--ink)}

@media (max-width:980px){
  /* na úzkej šírke by text cez fotku bol nečitateľný → fotka pod textom, v tej istej karte */
  body.home .hero__g{min-height:0;padding:40px 32px;gap:28px}
  body.home .hero__g::after{content:none}
  body.home .hero__p{position:relative;inset:auto;z-index:auto;width:100%;max-width:none;aspect-ratio:16/9;max-height:380px;border-radius:16px;justify-self:stretch}
  body.home .hero__p img{object-position:50% 25%}
}
@media (max-width:700px){
  body.home .hero__g{padding:28px 20px 20px;border-radius:16px;gap:24px}
  body.home .hero__p{aspect-ratio:4/3}
}

/* medzery medzi sekciami domovskej 88 → 64 px (23. 9.): sekcie sú v kartách s vlastným vnútorným okrajom,
   takže plná medzera medzi nimi pôsobila prázdne. Len nad 700 px — mobil má vlastných 44 px (main.css). */
@media (min-width:701px){body.home{--gap:64px}}

/* citát (23. 9.): vyššia a menej orezaná fotka — celá hlava aj ramená. Výška len tam, kde je text cez fotku;
   pod 1220 px (main.css) je fotka nad textom v pomere strán — pevná výška by tam text citátu odrezala. */
@media (min-width:1220px){
  body.home .quote{height:420px}
  body.home .quote img{object-position:50% 14%}
}
@media (max-width:1219px){body.home .quote img{object-position:50% 20%}}

/* hlavička a mobilné menu v tóne papiera, nie biele */
body.home .hdr{background:rgba(246,242,236,.9);border-bottom-color:var(--bez-ciara)}
/* len rozbaľovacie mobilné menu (main.css: ≤1000 px) — na desktope je .nav priesvitná časť hlavičky */
@media (max-width:1000px){body.home .nav{background:var(--bez-papier)}}
body.home .partners__row{border-color:var(--bez-ciara)}

/* biele karty: panel procesu bez rámčeka, s tieňom a väčším rádiusom */
body.home .panel{border-radius:24px}
body.home .panel--w{border:0;box-shadow:var(--bez-tien-sm)}
body.home .panel--d,
body.home .vid,
body.home .quote{border-radius:24px;box-shadow:var(--bez-tien-lg)}

/* sekcie, ktoré dnes plávajú na bielej ploche, dostanú bielu kartu.
   Vonkajší okraj karty lícuje s obsahom ostatných sekcií (ako .panel vo .wrap). */
body.home #principy > .wrap,
body.home #cennik > .wrap,
body.home #learn > .wrap{
  width:calc(100% - 2 * var(--pad));
  max-width:calc(var(--wrap) - 2 * var(--pad));
  margin-inline:auto;
  padding:56px 48px;
  background:#fff;
  border-radius:24px;
  box-shadow:var(--bez-tien-sm);
}

/* sivé karty (#F7F8FA) by na béžovej pôsobili špinavo → biele s tieňom */
body.home .who li,
body.home .story{background:#fff;box-shadow:var(--bez-tien-sm)}
body.home .pbox{box-shadow:var(--bez-tien-lg)}
body.home .vyst__metriky{box-shadow:var(--bez-tien-sm)}
body.home .media .pill{background:rgba(255,255,255,.65)}

@media (max-width:700px){
  body.home #principy > .wrap,
  body.home #cennik > .wrap,
  body.home #learn > .wrap{padding:28px 20px;border-radius:16px}
  body.home .panel,
  body.home .panel--d,
  body.home .vid,
  body.home .quote{border-radius:16px}
}