/* ============================================================
   Myšlenky srdce - jediný stylový soubor celého webu.
   Chybí ti komponenta? PŘIDEJ JI SEM, nezakládej další soubor.
   Barvy a písma: mozek/firemni/pravda/design.md
   ============================================================ */

:root{
  --purpurova:      #961175;
  --purpurova-tmava:#6d0c55;
  --ruzova-jemna:   #f4e6f0;
  --pozadi:         #fffdfc;
  --pozadi-teple:   #fbf4f8;
  --linka:          #ecdfe8;
  --text:           #2b2230;
  --text-tlumeny:   #5c5160;
  --zlata:          #b98f4e;
  --zlata-svetla:   #e6c081;
  --zlata-trpyt:    #f0e8ba;

  --pismo-nadpis: Georgia, "Times New Roman", serif;
  --pismo-text:   "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --radius-s: 16px;
  --sloupec:  700px;
  --obal:     1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--pismo-text);
  font-size:18px;
  line-height:1.65;
  color:var(--text);
  background:var(--pozadi);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--purpurova); }

h1,h2,h3{ font-family:var(--pismo-nadpis); color:var(--purpurova-tmava); font-weight:400; margin:0 0 .5em; }
h1{ font-size:clamp(2rem,4.2vw,3.05rem); line-height:1.18; }
h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.22; }
h3{ font-size:1.05rem; line-height:1.35; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

/* ---------- pásy přes celou šířku a obal uvnitř ---------- */
.pas{ position:relative; width:100%; }
.pas--svetly{ background:var(--pozadi); }
.pas--teply{ background:var(--pozadi-teple); }
.obal{ position:relative; z-index:2; max-width:var(--obal); margin:0 auto; padding:0 34px; }
.sekce{ padding:76px 0; }
.sloupec-textu{ max-width:var(--sloupec); }
.stred{ text-align:center; }
.stred .sloupec-textu{ margin-left:auto; margin-right:auto; }

/* ---------- srdce z loga místo znaku ---------- */
.srdce-ikona{
  display:inline-block; width:20px; height:20px;
  object-fit:contain; vertical-align:-.25em;
}
.srdce-ikona--drobne{ width:16px; height:16px; }
.srdce-ikona--citace{ width:36px; height:36px; margin:0 0 6px; }
.srdce-ikona--velke{ width:52px; height:52px; margin:0 auto 14px; }

/* ---------- štítek nad nadpisem ---------- */
.stitek{
  font-family:var(--pismo-text);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--purpurova);
  font-weight:700;
  margin:0 0 .5em;
}

/* ---------- tlačítko ---------- */
.tlacitko{
  display:inline-flex; align-items:center; gap:.6em;
  min-height:52px; padding:14px 34px;
  border-radius:999px; border:0;
  background:linear-gradient(120deg,var(--purpurova-tmava),var(--purpurova));
  color:#fff; font-family:var(--pismo-text); font-size:1rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  box-shadow:0 10px 26px rgba(150,17,117,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.tlacitko:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(150,17,117,.34); }
.tlacitko--svetle{
  background:#fff; color:var(--purpurova-tmava);
  box-shadow:0 10px 26px rgba(0,0,0,.20);
}
.tlacitko--drobne{ min-height:46px; padding:11px 26px; font-size:.96rem; }
.tlacitko .srdce-ikona{ width:18px; height:18px; vertical-align:middle; }
.pojistka{ font-size:.88rem; color:var(--text-tlumeny); margin:.9em 0 0; }

/* ---------- hlavička ---------- */
.hlavicka{
  display:flex; align-items:center; justify-content:flex-end;
  gap:26px; padding:24px 0 0; position:relative; z-index:3;
}
.menu{ display:flex; gap:26px; flex-wrap:wrap; }
.menu a{
  color:var(--purpurova-tmava); text-decoration:none;
  font-size:.98rem; padding:4px 0; border-bottom:2px solid transparent;
}
.menu a:hover{ border-bottom-color:var(--purpurova); }

.logo{ display:block; margin-bottom:22px; }
.logo img{ width:270px; }

/* ---------- úvod ---------- */
.hero__obal{ padding-top:0; padding-bottom:0; }
.hero__foto{
  position:absolute; inset:0; z-index:1;
  background:url("obrazky/jana-hero.jpg") right 20% center / cover no-repeat;
}
.hero__foto::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(255,253,252,.92) 0%, rgba(255,253,252,.55) 9%, rgba(255,253,252,0) 20%, rgba(255,253,252,0) 82%, rgba(255,253,252,.78) 100%),
    linear-gradient(to right,
      var(--pozadi) 0%,
      var(--pozadi) 30%,
      rgba(255,253,252,.94) 40%,
      rgba(255,253,252,.62) 49%,
      rgba(255,253,252,.26) 58%,
      rgba(255,253,252,.06) 66%,
      rgba(255,253,252,0) 74%);
}
.hero__obsah{ position:relative; z-index:2; padding:10px 0 64px; }
.hero__text{ max-width:530px; }
.hero h1{ margin-bottom:.55em; }
.hero__perex{ font-size:1.06rem; color:var(--text-tlumeny); margin-bottom:.4em; }
.hero__perex--silny{ color:var(--purpurova-tmava); font-weight:600; margin-bottom:0; }
.hero__akce{ margin-top:32px; }

/* citace volně přes fotku, bez rámečku. Bílá zář místo podkladu, ať je čitelná. */
.citace-pres-foto{
  position:absolute; right:34px; bottom:48px; z-index:3;
  max-width:400px; margin:0; text-align:right;
  font-family:var(--pismo-nadpis); font-style:italic;
  font-size:1.22rem; line-height:1.55; color:var(--purpurova-tmava);
  text-shadow:0 0 14px rgba(255,253,252,.95), 0 0 28px rgba(255,253,252,.85), 0 1px 2px rgba(255,253,252,.9);
}

/* ---------- jak pracuji ---------- */
.tri{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:28px; margin:50px 0 0;
}
.pilir{ text-align:center; padding:0 14px; position:relative; }
.pilir + .pilir::before{
  content:""; position:absolute; left:-14px; top:74px; bottom:10px;
  width:1px; background:var(--linka);
}
.pilir__ikona{
  width:118px; height:118px; margin:0 auto 22px;
  border-radius:50%; display:grid; place-items:center;
  background:var(--ruzova-jemna);
  color:var(--purpurova);
}
.pilir--zlaty .pilir__ikona{ background:#fbf1dd; color:var(--zlata); }
.pilir h3{
  font-family:var(--pismo-text); font-size:.92rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--purpurova-tmava);
  margin-bottom:.7em;
}
.pilir--zlaty h3{ color:var(--zlata); }
.pilir p{ font-size:18px; color:var(--text-tlumeny); }

.shrnuti{
  margin:50px auto 0; max-width:760px; text-align:center;
  font-size:18px; color:var(--text-tlumeny);
}
.shrnuti strong{ color:var(--purpurova); font-weight:700; }

/* ---------- magnet ---------- */
.magnet{ color:#fff; background:var(--purpurova-tmava); }
.magnet__foto{
  position:absolute; inset:0; z-index:1;
  background:url("obrazky/vecerni-psani.jpg") center right / cover no-repeat;
}
.magnet__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right,
    rgba(78,9,60,.95) 0%,
    rgba(78,9,60,.90) 32%,
    rgba(78,9,60,.58) 48%,
    rgba(78,9,60,.20) 64%,
    rgba(78,9,60,0) 80%);
}
.magnet__obsah{ padding:76px 0; max-width:600px; }
.magnet__logo{ width:230px; margin:0 0 24px; }
.magnet h2{ color:var(--zlata-svetla); }
.magnet__veta{ font-size:1.1rem; color:#f6e9f3; }
.magnet__bonus{
  margin:30px 0; padding:16px 0;
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
  font-size:18px; color:#f6e9f3;
}
.cenovka{ margin:0 0 24px; font-family:var(--pismo-nadpis); }
.cenovka b{ font-size:2.1rem; font-weight:400; color:#fff; }
.magnet .pojistka{ color:#e6cde0; }

/* ---------- velká myšlenka a ohlasy ---------- */
.myslenka{ background:var(--pozadi); }
.myslenka__pozadi{
  position:absolute; inset:0; z-index:1;
  background:url("obrazky/akvarel.jpg") center / cover no-repeat;
  opacity:.55;
}
.myslenka__pozadi::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(255,253,252,.74), rgba(255,253,252,.9));
}
.myslenka__obsah{ padding-top:80px; padding-bottom:80px; }
.citat-velky{
  max-width:820px; margin:0 auto; text-align:center;
  font-family:var(--pismo-nadpis); font-size:clamp(1.3rem,2.3vw,1.75rem);
  line-height:1.48; color:var(--purpurova-tmava);
}
.citat-velky em{ font-style:italic; color:var(--purpurova); }

.reference{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  margin:54px auto 0; max-width:1020px;
}
.ohlas{
  margin:0;
  background:rgba(255,255,255,.86);
  border:1px solid var(--linka);
  border-radius:var(--radius-s);
  padding:26px 26px 22px;
}
.ohlas p{ font-size:18px; color:var(--text); }
.ohlas .uvozovka{
  font-family:var(--pismo-nadpis); font-size:2.6rem; line-height:.55;
  color:var(--zlata); display:block; margin-bottom:.28em;
}
.ohlas footer{
  margin-top:14px; font-size:.88rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--purpurova);
}

/* ---------- deník ---------- */
.denik{ display:grid; grid-template-columns:1.02fr .98fr; align-items:center; }
.denik__text{ padding:76px 34px 76px 0; }
.denik__podnadpis{
  font-family:var(--pismo-nadpis); font-style:italic;
  font-size:1.35rem; color:var(--zlata); margin:-.25em 0 1.3em;
}
.denik__body{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px; }
.denik__body li{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--pozadi); border:1px solid var(--linka);
  border-radius:14px; padding:14px 18px;
}
.denik__body .srdce-ikona{ flex:0 0 auto; margin-top:3px; }
.denik__body b{ display:block; color:var(--purpurova-tmava); font-weight:600; }
.denik__body span{ font-size:18px; color:var(--text-tlumeny); }
.denik__fakta{ font-size:18px; color:var(--text-tlumeny); }
.denik__akce{ margin-top:28px; }
/* Fotka deníku má pozadí už vypálené v barvě sekce (#fbf4f8), žádné prolínání.
   Když se změní barva téhle sekce, musí se znovu vyrobit i obrázek. */
.denik__foto img{ width:100%; }
.tip{
  display:inline-block; background:var(--ruzova-jemna); color:var(--purpurova-tmava);
  border-radius:999px; padding:8px 18px; font-size:.92rem; margin:0 0 24px;
}

/* ---------- kdo tě provází ---------- */
/* Fotka je v rámečku vpravo, přes celou výšku bloku. Text vlevo na bílé. */
.o-mne__foto{
  position:absolute; right:0; top:0; bottom:0; width:40%; z-index:1;
  overflow:hidden;
}
.o-mne__foto img{
  width:100%; height:100%; object-fit:cover; object-position:45% 50%;
}
.o-mne .obal{ padding-top:76px; padding-bottom:76px; }
.o-mne__text{ max-width:560px; }
.o-mne__text p{ font-size:18px; color:var(--text-tlumeny); }
.o-mne__text strong{ color:var(--purpurova-tmava); }
.o-mne__podpis{ width:147px; margin:26px 0 0 auto; }

/* ---------- patička ---------- */
.paticka{ padding:48px 0; text-align:center; color:var(--text-tlumeny); }
.paticka__logo{ width:220px; margin:0 auto 18px; }
.paticka__menu{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px 26px; margin:0 0 18px; padding:0; list-style:none; }
.paticka__menu a{ color:var(--purpurova-tmava); text-decoration:none; font-size:.96rem; }
.paticka__menu a:hover{ text-decoration:underline; }
.paticka__adresa{ font-size:.92rem; letter-spacing:.08em; }
.paticka__adresa .srdce-ikona{ margin-left:4px; }

/* ---------- tablet ---------- */
@media (max-width:960px){
  .tri{ grid-template-columns:1fr; gap:38px; }
  .pilir + .pilir::before{ display:none; }
  .reference{ grid-template-columns:1fr; }
  .denik{ grid-template-columns:1fr; }
  .denik__text{ padding:56px 0 8px; }
  .denik__foto{ padding:8px 0 56px; }
  .citace-pres-foto{ max-width:330px; }
  .o-mne__text{ max-width:520px; }
}

/* ---------- mobil ---------- */
@media (max-width:760px){
  body{ font-size:17px; }
  .obal{ padding:0 22px; }
  .sekce{ padding:52px 0; }

  /* na mobilu jde fotka pod text, ať je nahoře logo a nadpis */
  .hero{ display:flex; flex-direction:column; }
  .hero__obal{ display:contents; }
  .hlavicka{ order:1; padding:20px 22px 0; justify-content:center; }
  .hero__obsah{ order:2; padding:6px 22px 0; }
  .hero__foto{ order:3; }
  .citace-pres-foto{ order:4; }

  .menu{ justify-content:center; gap:16px; }
  .menu a{ font-size:.92rem; }
  .hlavicka .tlacitko{ display:none; }
  .logo img{ width:220px; }
  .hero__text{ max-width:none; }
  .hero__foto{
    position:relative; inset:auto; height:330px;
    background-position:right 24% center;
    margin-top:30px;
  }
  .hero__foto::after{
    background:linear-gradient(to bottom,
      var(--pozadi) 0%, rgba(255,253,252,.92) 14%, rgba(255,253,252,.38) 30%, rgba(255,253,252,0) 52%);
  }
  .citace-pres-foto{ position:static; max-width:none; margin:-70px 22px 24px; text-align:left; }

  /* magnet: fotka jako pruh nahoře, text pod ní na plné barvě */
  .magnet{ display:flex; flex-direction:column; }
  .magnet__foto{
    order:1; position:relative; inset:auto; height:240px;
    background-position:right center;
  }
  .magnet__foto::after{
    background:linear-gradient(to bottom,
      rgba(78,9,60,.28) 0%, rgba(78,9,60,.35) 55%, rgba(109,12,85,.92) 88%, var(--purpurova-tmava) 100%);
  }
  .magnet .obal{ order:2; }
  .magnet__obsah{ padding:10px 0 52px; max-width:none; }
  .magnet__logo{ width:190px; }

  .myslenka__obsah{ padding-top:54px; padding-bottom:54px; }

  /* kdo tě provází: fotka jako pruh nad textem */
  .o-mne{ display:flex; flex-direction:column; }
  .o-mne__foto{
    order:1; position:relative; inset:auto; top:auto;
    width:100%; height:320px;
  }
  .o-mne__foto img{ object-position:45% 35%; }
  .o-mne .obal{ order:2; padding-top:44px; padding-bottom:52px; }
  .o-mne__text{ max-width:none; }
  .o-mne__podpis{ width:180px; }

  .paticka{ padding:40px 0; }
  .pilir__ikona{ width:104px; height:104px; }
}