/* =============================================================
   CENÍK — cenik1.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í: bílý oddíl pro tetování,
   růžový pruh pro piercing, neonové srdce v mezeře nad prvním
   seznamem a kytičky po stranách na širokých monitorech.

   K ČEMU SMĚŘUJE CENÍK
   Žádné kartičky, stíny ani placky. Ceník je tabulka: vlasové linky,
   velká čísla zarovnaná na jednu pravou hranu, název tiše vlevo.
   Barva a ozdoba jsou schválně jen na dvou místech — na číslech
   a na slově „zdarma", které je psané rukopisným písmem studia.
   ============================================================= */

/* ---------- nadpis stránky ---------- */
.hlava--stranka{margin-bottom:0}
/* Nadpis „Ceník".
   POZOR: úplně stejné hodnoty jsou i v galerie1.css — když tady něco
   změníš, změň to i tam, ať nadpisy obou stránek zůstanou stejné.
   Poslední číslo v clamp je strop; ta část s --vic je jen dorůstání
   na monitorech širších než 1440 px. */
.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:44ch}

/* ---------- oddíly ceníku ---------- */
/* POZOR na .cenik-blok: ve style1.css je to růžový pruh z úvodní
   stránky (background:var(--band) + margin-top). Tady je to jen
   obal oddílu, takže obojí vypínáme — jinak by celý ceník od
   tabulky dolů seděl na růžové. Pozadí pak vychází stejně jako
   v galerii: světlý přechod z body, růžová jen pod piercingem. */
.cenik-blok{
  position:relative;overflow:visible;
  background:none;
  margin-top:0;
}

/* Mezera pod nadpisem stránky. Srdce už tady nepotřebuje celou výšku —
   visí kusem nahoru do prostoru nad oddílem (viz .velke-srdce).
   ID přebije .section ze style1.css. */
#tetovani{
  padding-top:clamp(26px,3.6vw,60px);
  padding-bottom:clamp(30px,4vw,56px);
}

/* Piercing 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ť jsou obě
   stránky k nerozeznání. */
.cenik-blok--piercing{
  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 patičky */
}

.listy-cenik{
  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;
}
.cenik-blok .wrap{position:relative;z-index:1}

/* ---------- podnadpis oddílu ---------- */
.podnadpis{text-align:center;margin-bottom:clamp(22px,3vw,36px)}
/* Nadpisy „Tetování" a „Piercing" — stejné hodnoty jsou i v galerie1.css. */
.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);
}
/* krátká linka se srdíčkem, stejná řeč jako v galerii a na úvodu */
.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;
}

/* =============================================================
   TABULKA CEN

   Řádky nemají vlastní pozadí ani rámeček — drží je vlasová linka
   pod každým z nich. Text sahá až k okrajům sloupce, žádné vnitřní
   odsazení po stranách; díky tomu čte oko dvě jasné svislé hrany:
   názvy vlevo, čísla vpravo. To je celá přehlednost, nic dalšího
   k tomu není potřeba.
   ============================================================= */
.cenik-list{
  list-style:none;
  max-width:820px;margin:0 auto;padding:0;
  border-top:1px solid rgba(28,18,24,.18);   /* linka, kde tabulka začíná */
}

.cenik-list .polozka{
  display:flex;align-items:baseline;
  gap:clamp(16px,4vw,48px);
  padding-block:clamp(13px,1.5vw,19px);
  border-bottom:1px solid rgba(28,18,24,.1);
  transition:border-color .2s ease;
}

/* Na růžovém pruhu musí být linky o něco teplejší, aby nebyly šedé. */
.cenik-blok--piercing .cenik-list{border-top-color:rgba(120,30,72,.24)}
.cenik-blok--piercing .cenik-list .polozka{border-bottom-color:rgba(120,30,72,.14)}

/* ---------- název ---------- */
.cenik-list .polozka__nazev{
  flex:1 1 auto;min-width:0;
  font-size:clamp(15px,1.5vw,17px);font-weight:500;line-height:1.4;
  letter-spacing:-.005em;
  color:var(--ink);
  transition:color .2s ease;
}

/* ---------- cena ----------
   Číslo je největší prvek řádku a jediné barevné. tabular-nums drží
   číslice v jedné hraně, takže sloupec cen stojí rovně i bez linek. */
.cenik-list .cena{
  flex:0 0 auto;
  min-width:clamp(88px,10vw,118px);
  text-align:right;white-space:nowrap;
  font-size:clamp(19px,2.3vw,27px);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:#FE9FD0;
}

/* měna drží u horní hrany číslice, jako v sazbě cenových tabulek */
.cenik-list .cena__mena{
  margin-left:3px;
  font-size:.42em;font-weight:600;
  vertical-align:.95em;
  letter-spacing:0;
  color:var(--muted);
}

/* „od" je jen upřesnění, ne součást částky — zůstává malé a tiché */
.cenik-list .cena__od{
  margin-right:7px;
  font-size:.44em;font-weight:500;
  letter-spacing:.01em;
  color:var(--muted);
}

/* Kde by stálo číslo, stojí rukopis. Slovo se tím čte jako cena,
   ne jako poznámka, a nepotřebuje k tomu žádnou placku. */
.cenik-list .zdarma{
  display:inline;
  font-family:var(--display-nadpis);font-weight:400;
  font-size:.86em;line-height:1;
  letter-spacing:0;
  color:#FE9FD0;
}

/* ---------- najetí myší ----------
   Řádek se nikam nehýbe ani se nepodbarvuje. Zvýrazní se jen jeho
   linka a název ztmavne do růžové — oko tak vidí, kde je. */
@media (hover:hover){
  .cenik-list .polozka:hover{border-bottom-color:#FE9FD0}
  .cenik-list .polozka:hover .polozka__nazev{color:#D8306F}
}

/* ---------- velké srdce nad prvním seznamem ----------
   Stejná velikost jako v galerii. Mezera pod nadpisem stránky je
   teď kratší, tak srdce vystupuje kusem nad oddíl — stejně jako
   v galerii. Nic ho neuřízne, kreslí se přes pozadí sekce nad ním.
   Zároveň je posunuté o kus doleva: tabulka je široká 820 px, takže
   po stranách zbývá volný pruh a srdce se do textu nedostane.
   Na užších obrazovkách se skryje. */
.velke-srdce{
  display:none;
  position:absolute;z-index:0;
  left:clamp(-30px,1.2vw,50px);
  top:clamp(-46px,-2vw,-14px);
  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á šířku nejvýš 1280 px, 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 ---------- */
@media (max-width:900px){
  .listy-cenik{opacity:.1;right:-64px}
}

@media (max-width:560px){
  .listy-cenik{display:none}
  .cenik-list .polozka{gap:14px;padding-block:12px}
  .cenik-list .polozka__nazev{font-size:14.5px;line-height:1.35}
  .cenik-list .cena{font-size:19px;min-width:76px}
  .cenik-list .cena__mena{font-size:.5em;vertical-align:.8em}
  .cenik-list .cena__od{font-size:.52em;margin-right:5px}
}