@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/*
  Karty 4:5 pre feed (LinkedIn, Facebook, Instagram) — vizuálny systém v2.

  Prečo vlastná grafika a nie fotka: princípový príspevok o produkte pozície
  nemá s fotkou zo sály nič spoločné. Fotka tam je len preto, aby „tam něco
  bylo" — a čitateľ to pozná. Karta nesie tú istú myšlienku ako text.

  Čo sa v v2 zmenilo a prečo:
  - Obsah bol prilepený dole a horné dve tretiny boli prázdny gradient. Teraz
    je stránka trojdielna (hlava / jadro / päta) a jadro sedí v optickom strede.
  - Štvorstupňový gradient vyzeral lacno. Navy je plochá s jemnou vinetou.
  - Pribudla typografická kotva: číslo série, vlasová zlatá linka a ghost
    monogram — plocha má textúru aj bez fotky.
  - Svetlá varianta je papierová (ivory), nie „biely gradient" — v prémiovom
    pozicovaní číta lepšie a odlišuje nás od tmavých AI vizuálov konkurencie.
*/
:root{
  --navy:#123b6d; --navy-d:#0f3158; --navy-dd:#0a2340;
  --gold:#b9852d; --gold-l:#d2a14a; --orange:#f99c00;
  --ivory:#f7f5ef; --paper:#fbfaf6; --ink:#1e1e1e; --ink-soft:#43464e; --line:#e4ddcc;
  --okraj:96px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
body{font-family:'Inter',system-ui,sans-serif;}

.page{width:1080px;height:1350px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;padding:var(--okraj);}

/* Plochá navy s vinetou. Gradient cez štyri zastávky vyzeral ako šablóna. */
.navy{background:var(--navy-d);color:var(--ivory);}
.navy::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 85% at 22% 12%, rgba(30,84,148,.55) 0%, rgba(15,49,88,0) 62%),
             radial-gradient(90% 70% at 92% 100%, rgba(6,24,45,.75) 0%, rgba(15,49,88,0) 60%);}
.light{background:var(--paper);color:var(--ink);}
.light::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(100% 70% at 15% 0%, rgba(255,255,255,.9) 0%, rgba(247,245,239,0) 60%),
             radial-gradient(90% 60% at 100% 100%, rgba(228,221,204,.55) 0%, rgba(247,245,239,0) 65%);}

/* Obrysové číslo série. Stojí v bloku nad nadpisom — ghost monogram cez celú
   plochu sa neujal (čítal ako chyba renderu) a číslo visiace hore zase
   nechávalo dieru v strede. */
.znak{font-size:184px;font-weight:900;line-height:1;letter-spacing:-8px;margin-bottom:18px;
  color:transparent;-webkit-text-stroke:2px rgba(210,161,74,.32);user-select:none;}
.light .znak{-webkit-text-stroke-color:rgba(185,133,45,.28);}

.bar{position:absolute;top:0;left:0;width:100%;height:10px;z-index:4;
  background:linear-gradient(90deg,var(--gold) 0%,var(--orange) 52%,var(--gold-l) 100%);}

/* ── hlava ─────────────────────────────────────────────────────────── */
.hlava{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;}
.hlava img{height:56px;width:auto;}
.stitok{font-size:19px;letter-spacing:.28em;text-transform:uppercase;font-weight:800;
  color:var(--gold);text-align:right;padding-top:6px;}
.navy .stitok,.foto-page .stitok{color:var(--gold-l);}
.stitok .cislo{display:block;font-size:15px;letter-spacing:.2em;opacity:.65;margin-top:8px;font-weight:700;}

/* ── jadro ─────────────────────────────────────────────────────────── */
/* Text sedí na spodnej tretine, obrysové číslo drží hornú — plocha medzi nimi
   je zámerný nádych, nie diera po zle zalomenom bloku. */
.obsah{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:56px 0 44px;}

/* Vlasová linka nad nadpisom nahrádza prázdnu plochu rytmom. */
.obsah::before{content:"";display:block;width:104px;height:5px;margin-bottom:40px;
  background:var(--gold);}
.navy .obsah::before,.foto-page .obsah::before{background:var(--gold-l);}

h1{font-size:82px;font-weight:900;line-height:1.05;letter-spacing:-2.6px;max-width:850px;}
.light h1{color:var(--navy);}
h1 .accent{color:var(--gold);} .navy h1 .accent,.foto-page h1 .accent{color:var(--gold-l);}

p{font-size:32px;line-height:1.48;margin-top:40px;max-width:790px;}
.light p{color:var(--ink-soft);} .navy p{color:#cfdcee;}

/* ── päta ──────────────────────────────────────────────────────────── */
.pata{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;
  padding-top:30px;border-top:2px solid rgba(185,133,45,.35);
  font-size:23px;font-weight:800;letter-spacing:.1em;color:var(--gold);}
.navy .pata,.foto-page .pata{color:var(--gold-l);border-top-color:rgba(210,161,74,.3);}
.pata .web{opacity:.95;}
.pata .strana{font-weight:700;letter-spacing:.16em;opacity:.75;}

/* ── referencia ────────────────────────────────────────────────────── */
/* Úvodzovky nesie samotný text (telo() ich dopĺňa), preto tu žiadny ::before —
   dva znaky cez seba vyzerali ako artefakt. */
.citat{font-size:56px;line-height:1.26;font-weight:800;letter-spacing:-1.2px;}
.kto{margin-top:46px;padding-top:28px;border-top:3px solid rgba(210,161,74,.45);}
.kto .meno{font-size:31px;font-weight:800;color:var(--gold-l);}
.light .kto .meno{color:var(--gold);}
.kto .firma{font-size:25px;font-weight:600;color:#9fb1cd;margin-top:8px;}
.light .kto .firma{color:var(--ink-soft);}
.vysledok{margin-top:34px;display:inline-block;border-left:6px solid var(--gold-l);
  padding:6px 0 6px 26px;font-size:28px;font-weight:700;}
.vysledok b{color:var(--gold-l);font-size:40px;display:block;margin-top:4px;letter-spacing:-1px;}
.light .vysledok{border-left-color:var(--gold);} .light .vysledok b{color:var(--gold);}

/* ── termín ────────────────────────────────────────────────────────── */
.termin{margin-top:42px;display:flex;flex-direction:column;gap:0;}
.termin div{padding:20px 0;font-size:29px;font-weight:700;
  border-bottom:1px solid rgba(210,161,74,.28);display:flex;gap:22px;}
.termin div:first-child{border-top:1px solid rgba(210,161,74,.28);}
.light .termin div{border-color:var(--line);color:var(--navy);}
.prokoho{margin-top:36px;font-size:28px;line-height:1.5;}
.prokoho b{color:var(--gold-l);font-weight:800;} .light .prokoho b{color:var(--gold);}

/* ── fotka na pozadí (pozvánky, termíny) ───────────────────────────────
   Historicky na Facebooku fungovaly fotky lidí, typografické pozvánky ne.
   Text proto leží na fotce pod navy přechodem, ne na prázdné ploše.
   v2: prechod je vyšší a tvrdší — na fotkách zo sály je horná polovica
   svetlá a biely nadpis v nej mizol. */
.foto{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;}
.foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,35,64,.62) 0%, rgba(10,35,64,.5) 26%,
    rgba(10,35,64,.9) 62%, rgba(10,35,64,.98) 100%);}
.foto-page{color:var(--ivory);}
.foto-page h1{color:var(--ivory);}
.foto-page p{color:#dbe5f2;}
.foto-page .obsah{justify-content:flex-end;}
.foto-page .kto .firma{color:#c8d5e8;}

/* ── portrét u reference ───────────────────────────────────────────────
   Reference bez tváře je jen text v uvozovkách. S tváří je to člověk. */
.portret{position:absolute;right:0;top:0;width:46%;height:100%;z-index:1;
  background-size:cover;background-position:center top;}
.portret::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy-d) 0%,rgba(15,49,88,.6) 34%,rgba(15,49,88,0) 82%);}
.light .portret::after{background:linear-gradient(90deg,var(--paper) 0%,rgba(251,250,246,.55) 34%,rgba(251,250,246,0) 82%);}
.s-portretom .obsah,.s-portretom .pata{max-width:600px;}
.s-portretom .citat{font-size:46px;}
.s-portretom .hlava{width:56%;}
.s-portretom .znak{display:none;}

/* ── karusel ───────────────────────────────────────────────────────────
   Strana karuselu má menší nadpis a viac textu než samostatná karta —
   číta sa v sérii, nie na jeden pohľad. */
.karusel h1{font-size:64px;letter-spacing:-1.8px;}
.karusel .obsah::before{width:72px;height:4px;margin-bottom:34px;}
.karusel p{font-size:30px;}