/* =============================================================
   O NÁS — onas1.css
   Styly jen pro tuhle stránku. Společný vzhled (hlavička, patička,
   tlačítka, písma) sedí ve style1.css, který se načítá před tímhle.

   Pozadí i dekorace jsou shodné s galerií a ceníkem: světlý oddíl
   nahoře, růžový pruh dole, neonové srdce v mezeře nad prvním
   oddílem a kytičky po stranách na širokých monitorech.
   ============================================================= */

/* ---------- nadpis stránky ----------
   POZOR: stejné hodnoty jsou i v galerie1.css a cenik1.css — když
   tady něco změníš, změň to i tam, ať nadpisy zůstanou stejné. */
.hlava--stranka{margin-bottom:0}
.hlava--stranka .hlava__titul{
  font-size:clamp(2.2rem,4.9vw,calc(3.75rem + var(--vic,0px) * .011));
  line-height:1.18;
}
.hlava--stranka .hlava__popis{max-width:48ch}

/* ---------- oddíly ---------- */
.onas-blok{position:relative;overflow:visible}

/* Mezera pod nadpisem stránky. Srdce visí kusem nahoru do prostoru
   nad oddílem (viz .velke-srdce). ID přebije .section ze style1.css. */
#kdojsme{padding-top:clamp(36px,7vw,120px)}

/* Postup sedí na světle růžovém pruhu přes celou šířku okna,
   takže oba oddíly jdou od sebe rozeznat i bez čtení nadpisu.
   Odsazení je schválně stejné jako v galerii a ceníku. */
.onas-blok--postup{
  overflow:hidden;                       /* kvůli ratolesti v rohu */
  background:var(--band);
  padding-block:clamp(44px,5.4vw,72px);
  margin-bottom:clamp(48px,7vw,110px);   /* odstup od kontaktu */
}

.listy-onas{
  position:absolute;right:-46px;top:8%;
  width:clamp(110px,12vw,170px);height:auto;
  fill:none;stroke:var(--pink-light);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.16;transform:rotate(-14deg);pointer-events:none;
}
.onas-blok .wrap{position:relative;z-index:1}

/* ---------- podnadpis oddílu ----------
   Stejná řeč jako v galerii a ceníku: rukopisný nadpis a pod ním
   krátká linka se srdíčkem uprostřed. */
.podnadpis{text-align:center;margin-bottom:clamp(26px,3.4vw,40px)}
.podnadpis h2{
  font-family:var(--display-nadpis);font-weight:400;
  font-size:clamp(1.75rem,3.5vw,calc(2.65rem + var(--vic,0px) * .008));
  line-height:1.2;
  color:var(--ink);
}
.podnadpis p{margin-top:8px;font-size:13.5px;color:var(--muted)}
.podnadpis::after{
  content:"";display:block;
  width:clamp(120px,15.5vw,185px);height:9px;
  margin:15px auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 176'%3E%3Cpath fill='%23FE9FD0' d='M100 168C42 124 6 92 6 56 6 27 28 8 54 8c19 0 35 11 46 26C111 19 127 8 146 8c26 0 48 19 48 48 0 36-36 68-94 112Z'/%3E%3C/svg%3E")
      center/10px 9px no-repeat,
    linear-gradient(90deg,transparent,var(--pink-soft) 24%,transparent 45%,transparent 55%,var(--pink-soft) 76%,transparent)
      center/100% 1px no-repeat;
}


/* =============================================================
   KDO JSME — fotka vedle textu
   ============================================================= */

/* Ta díra uprostřed byla tím, že sloupec pro fotku byl mnohem širší
   než sama fotka. Tady si šířky sloupců řídíme sami: první sloupec je
   přesně tak široký jako fotka, druhý dostane text, a celá dvojice se
   vycentruje. Volné místo tak zbyde po stranách, ne mezi nimi.

   Tři čísla na doladění:
     první clamp   = šířka fotky na velkém monitoru
     640px         = strop pro šířku textu
     gap           = mezera mezi fotkou a textem */
.onas-blok .split{
  display:grid;
  grid-template-columns:clamp(300px,30vw,480px) minmax(0,640px);
  justify-content:center;
  align-items:center;
  gap:clamp(22px,3vw,44px);
}

/* Fotka vyplní svůj sloupec, výšku si dopočítá z poměru 4:5.
   Výřez řeší object-fit, obrázek se nedeformuje. */
.uvod__foto{
  aspect-ratio:4/5;
  width:100%;
  border-radius:var(--r-img);
  box-shadow:0 14px 34px rgba(254,159,208,.20);
}
.uvod__foto img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.02);
}

/* ---------- čísla pod textem ----------
   Popisky drž krátké a podobně dlouhé (viz komentář v HTML),
   ať se žádný nezalomí na dva řádky a čísla zůstanou v jedné lince. */
.fakta{
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:start;
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(24px,3.2vw,32px);
  padding-top:clamp(20px,2.6vw,26px);
  border-top:1px solid var(--line);
}
.fakt b{
  display:block;line-height:1.1;
  font-family:var(--display-nadpis);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2rem);color:var(--pink);
}
.fakt span{
  display:block;margin-top:7px;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--muted);line-height:1.5;
}


/* =============================================================
   JAK TO PROBÍHÁ
   .steps a .step byly ve style1.css jen v responzivních pravidlech,
   základ chyběl. Tady je celý, včetně zalomení na užších oknech.
   ============================================================= */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,30px);
}
.step{
  padding-left:clamp(18px,2vw,26px);
  border-left:1px solid var(--line);
}
.step:first-child{padding-left:0;border-left:0}

/* na růžovém pruhu musí být dělící linky o něco teplejší,
   jinak působí šedě — stejně jako tabulka v ceníku */
.onas-blok--postup .step{border-left-color:rgba(120,30,72,.14)}

.step__cislo{
  display:block;margin-bottom:12px;
  font-family:var(--display-nadpis);font-weight:400;
  font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1;
  color:var(--pink);
}
.step h3{
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;margin-bottom:9px;color:var(--ink);
}
.step p{font-size:13.5px;line-height:1.62;color:var(--muted)}


/* ---------- velké srdce nad prvním oddílem ----------
   Stejná velikost i umístění jako v galerii. Sedí v levé části,
   v mezeře mezi nadpisem stránky a nadpisem Kdo jsme.
   Na užších obrazovkách se skryje, aby nelezlo do textu. */
.velke-srdce{
  display:none;
  position:absolute;z-index:0;
  left:clamp(-20px,2.5vw,70px);
  top:clamp(-30px,-1vw,0px);
  width:clamp(150px,17vw,260px);height:auto;
  fill:none;stroke:#FFB0D2;stroke-width:1.5;stroke-linejoin:round;
  filter:
    drop-shadow(0 0 3px var(--pink-neon))
    drop-shadow(0 0 14px rgba(255,92,158,.6))
    drop-shadow(0 0 38px rgba(255,92,158,.32));
  opacity:.55;pointer-events:none;
  transform:rotate(-10deg);
}

/* ---------- kytičky po stranách ----------
   Obsah má omezenou šířku, takže na širokých monitorech zbývá
   po stranách prázdno. Kytičky ho zaplní — ale jen tam, kde je
   na ně opravdu místo, jinak by lezly do textu. ---------- */
.kyticka{display:none}

@media (min-width:1100px){
  .velke-srdce{display:block}
}

@media (min-width:1400px){
  .kyticka{
    display:block;position:absolute;top:50%;
    width:clamp(90px,7vw,130px);height:auto;
    fill:none;stroke:var(--pink-light);stroke-width:1.2;
    stroke-linecap:round;stroke-linejoin:round;
    opacity:.3;pointer-events:none;
  }
  .kyticka--l{left:2.2vw;transform:translateY(-50%) rotate(12deg)}
  /* pravá je zrcadlově otočená, ať to nevypadá jako kopie */
  .kyticka--p{right:2.2vw;transform:translateY(-50%) scaleX(-1) rotate(12deg)}
}

/* ---------- responzivita ----------
   Tenhle soubor se načítá až za style1.css, takže pravidla pro
   .steps musí být tady — jinak by je základ nahoře přebil. */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 24px}
  .step{padding-left:clamp(18px,2vw,24px)}
  .step:nth-child(odd){padding-left:0;border-left:0}
}

@media (max-width:900px){
  /* od téhle šířky jde fotka nad text, přes celou šířku a v poměru 4:3 */
  .onas-blok .split{grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:26px}
  .uvod__foto{aspect-ratio:4/3}
  .listy-onas{opacity:.1;right:-64px}
}

@media (max-width:560px){
  .listy-onas{display:none}
  .fakta{grid-template-columns:1fr;gap:15px}
  .steps{grid-template-columns:1fr;gap:20px}
  .step{
    padding-left:0;border-left:0;
    padding-top:20px;border-top:1px solid var(--line);
  }
  .step:first-child{padding-top:0;border-top:0}
  .onas-blok--postup .step{border-top-color:rgba(120,30,72,.14)}
}