/* =============================================================
   TETOVAČKY PRAHA — style1.css
   01 Proměnné              07 Tatéři
   02 Základ a reset        08 Jak to probíhá
   03 Opakované prvky       09 Kontakt a mapa
   04 Rámečky pro fotky     10 Patička
   05 Hlavička a menu       11 Lightbox
   06 Hero a neonové srdce  12 Animace, responzivita
   ============================================================= */

/* ---------- 01 Proměnné ---------- */
:root{
  --pink:#FE9FD0;
  --pink-dark:#E8399A;
  --pink-light:#FFBEDE;
  --pink-neon:#F970BB;
  --pink-soft:#FDDAED;
  --pink-pale:#FEF0F9;
  --bg:#FDF2FA;
  --bg-2:#FCEAF6;
  --band:#FCEDF7;
  --panel:#FDF0F9;
  --ink:#3E3B3D;
  --ink-2:#5A5457;
  --muted:#8E7F85;
  --line:#F5D3E2;

  --glow-sm:0 5px 14px rgba(254,159,208,.16);
  --glow-md:0 12px 28px rgba(254,159,208,.22);
  --glow-lg:0 18px 44px rgba(254,159,208,.28);

  /* Písmo
     --display-hero  hlavní nadpis v heru, navazuje na psané logo
     --display       ostatní nadpisy, verzálky s prostrkáním
     --body          běžný text

     Psané písmo v heru zůstává. Zbytek webu jede na DM Sans —
     geometrický bezpatkový s měkčími tvary, takže se s Pacificem
     nebije. Chceš jiný? Přepiš dva řádky níž a název v <link>
     v hlavičce každé stránky. Sedly by taky:
       'Manrope'       … modernější, o kus techničtější
       'Figtree'       … přátelský, kulatější
       'Plus Jakarta Sans' … úřednější, víc do byznysu           */
  --display-hero:'Pacifico',cursive;
  /* Nadpisy sekcí (Galerie, Ceník…).
     Teď jedou na psaném písmu z loga — web pak drží na dvou
     písmech místo tří. Chceš zpátky střízlivější verzi?
     Přepiš tenhle řádek na var(--display) a v .hlava__titul
     odkomentuj tři řádky označené VERZÁLKY. */
  --display-nadpis:'Pacifico',cursive;
  --display:'DM Sans',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;

  /* Šířka obsahu. Do 1760 px zůstává 1280 px jako dřív,
     na velkých monitorech se rozšíří max. na 1760 px,
     ať stránka netrčí jako úzký sloupec uprostřed. */
  --max:clamp(1280px, 100vw - 400px, 1760px);

  /* ---- pomocník pro velké monitory ----
     --vic říká, o kolik pixelů je okno širší než 1440 px
     (pod 1440 px je to 0, nad 2560 px se zastaví na 1120).
     Používá se níž v sekci 06b k plynulému zvětšování hera. */
  --vic:clamp(0px, 100vw - 1440px, 1120px);
  --pad:clamp(20px,5vw,60px);

  /* výška informační lišty nahoře — mění se v responzivitě (sekce 12b).
     Počítá se z ní odsazení hera i hlaviček podstránek, takže stačí
     přepsat tady a zbytek se posune sám. */
  --topbar-h:40px;

  /* barva informační lišty — značková růžová.
     Tmavší varianta (lepší kontrast bílého textu): var(--pink-dark) */
  --topbar-bg:var(--pink);

  /* zaoblení — hrany jsou schválně ostré */
  --r-btn:0px;
  --r-img:3px;
  --r-card:3px;

  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 02 Základ a reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--body);
  font-size:15.5px;
  line-height:1.68;
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(900px 520px at 76% -8%, rgba(254,159,208,.30), transparent 62%),
    radial-gradient(700px 460px at 2% 40%, rgba(255,196,225,.22), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
svg{display:block}

:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--pink);color:#fff;padding:12px 20px;
}
.skip:focus{left:0}

/* ---------- 03 Opakované prvky ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

.section{padding-block:clamp(48px,6vw,78px)}
.section + .section{padding-top:0}

.eyebrow{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--pink);
}
.eyebrow--center{text-align:center}

.h2{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,2.9vw,2.05rem);
  line-height:1.2;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);
}

.rule{
  display:block;width:56px;height:2px;
  background:linear-gradient(90deg,var(--pink),rgba(254,159,208,0));
  margin:clamp(18px,2.6vw,26px) 0;
}
.rule--sm{width:38px;margin:16px 0 18px}

.arrow{width:24px;height:10px;flex:none;overflow:visible}
.arrow path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

.i{width:16px;height:16px;flex:none;fill:none;stroke:var(--pink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.textlink{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--pink);
}
.textlink .arrow{transition:transform .4s var(--ease)}
.textlink:hover{color:var(--pink-dark)}
.textlink:hover .arrow{transform:translateX(7px)}

/* --- blobová tlačítka ---
   Měkké „inkoustové" skvrny místo hranatého tlačítka. Tvar dělá
   border-radius s osmi hodnotami (čtyři vodorovné poloměry / čtyři
   svislé), takže se dá plynule přemorfovat při najetí — žádné SVG
   ani obrázky, škáluje to samo.

   Jeden blob:   <a class="blob" href="…"><span>Text</span></a>
   Řada blobů:   <div class="bloby"> …několik .blob… </div>
                 (v řadě si střídají odstín, tvar i výšku samy)
   Aktivní:      přidej třídu .is-active — text zůstane podtržený

   Vlastní odstín jednoho blobu: style="--blob-bg:var(--pink-dark)"   */
.blob{
  position:relative;
  display:inline-grid;place-items:center;
  /* pevné proporce ~1,5:1 — bez nich se z blobu stane placatá elipsa */
  width:clamp(158px,18vw,196px);
  min-height:clamp(108px,12vw,132px);
  padding:14px clamp(20px,2.2vw,26px);
  background:var(--blob-bg,var(--pink));
  color:#fff;
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;
  line-height:1.6;text-align:center;text-wrap:balance;
  border-radius:66% 34% 55% 45% / 32% 58% 42% 68%;
  box-shadow:0 14px 30px rgba(232,57,154,.22);
  transition:border-radius .7s var(--ease),transform .45s var(--ease),
             box-shadow .45s ease,background .35s ease;
}
.blob:hover{
  border-radius:41% 59% 27% 73% / 58% 47% 53% 42%;
  transform:translateY(-5px) rotate(-2deg);
  box-shadow:0 20px 42px rgba(232,57,154,.32);
}
.blob:active{transform:translateY(-1px) rotate(-1deg)}

/* podtržení jako v předloze — vyjíždí zprostřed do stran */
.blob span{position:relative;display:inline-block}
.blob span::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-4px;height:1px;
  background:currentColor;opacity:.9;
  transition:left .4s var(--ease),right .4s var(--ease);
}
.blob:hover span::after,
.blob.is-active span::after{left:0;right:0}

/* --- řada blobů (navigační pruh mezi sekcemi) --- */
.bloby{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(6px,1.2vw,16px);
}
.bloby .blob{
  width:clamp(118px,13vw,152px);
  min-height:clamp(92px,10vw,114px);
  padding:12px 16px;
  letter-spacing:.13em;
}
/* čtyři varianty tvaru a odstínu se cyklicky střídají —
   lichý = světlá #FE9FD0, sudý = tmavě sytá, ať kontrast sedí */
.bloby .blob:nth-child(4n+2){
  --blob-bg:#D42090;
  border-radius:38% 62% 70% 30% / 63% 33% 67% 37%;
  margin-top:16px;
}
.bloby .blob:nth-child(4n+3){
  --blob-bg:#FE9FD0;
  border-radius:41% 59% 27% 73% / 58% 47% 53% 42%;
}
.bloby .blob:nth-child(4n+4){
  --blob-bg:#E8399A;
  border-radius:29% 71% 47% 53% / 51% 33% 67% 49%;
  margin-top:10px;
}
.bloby .blob:hover{border-radius:58% 42% 33% 67% / 63% 58% 42% 37%}

/* --- tlačítka ---
   Vychází z neonu v heru: tmavé sklo, kolem něj rozsvícená trubice
   a jemná záře. Obrysové tlačítko je "zhasnutá" trubice, která se
   po najetí rozsvítí. Žádné přechody ani orámky navíc. */
.btn{
  position:relative;
  display:inline-flex;align-items:center;
  border-radius:var(--r-btn);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  transition:transform .3s var(--ease),box-shadow .4s ease,
             background .35s ease,color .35s ease,
             border-color .35s ease,text-shadow .35s ease;
}

/* světlo, které jde za kurzorem (souřadnice dodává script1.js) */
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;opacity:0;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,140,195,.30),transparent 62%);
  transition:opacity .35s ease;
}
.btn:hover::before{opacity:1}

.btn > span{position:relative;z-index:2;padding:16px 24px}
.btn:has(.arrow) > span{padding-right:20px}

/* předěl v trubici před šipkou */
.btn:has(.arrow) > span::after{
  content:"";position:absolute;right:0;top:15px;bottom:15px;width:1px;
  background:var(--divider,rgba(255,255,255,.3));
  transition:top .35s var(--ease),bottom .35s var(--ease),background .35s ease;
}
.btn:hover > span::after{top:10px;bottom:10px}

.btn > .arrow{position:relative;z-index:2;margin:0 22px 0 18px;transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover > .arrow{transform:translateX(5px)}
.btn:active{transform:translateY(0)}

/* hlavní — rozsvícený neon na tmavém skle */
.btn--pink{
  --divider:rgba(255,160,200,.36);
  background:#2A1620;color:#fff;
  border:1.5px solid var(--pink-light);
  box-shadow:
    0 6px 18px rgba(60,20,40,.18),
    inset 0 0 12px rgba(255,92,158,.16);
}
.btn--pink:hover{
  border-color:var(--pink);
  box-shadow:
    0 9px 22px rgba(60,20,40,.22),
    inset 0 0 14px rgba(255,92,158,.24);
}

/* vedlejší — zhasnutá trubice, po najetí se rozsvítí */
.btn--soft{
  --divider:rgba(254,159,208,.28);
  background:transparent;color:var(--pink);
  border:1.5px solid var(--pink-soft);
}
.btn--soft:hover{
  color:var(--pink-dark);
  border-color:var(--pink);
  background:rgba(255,255,255,.55);
}

/* v patičce na růžovém podkladu — bílá trubice */
.btn--light{
  --divider:rgba(255,255,255,.4);
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.75);
}
.btn--light:hover{
  border-color:#fff;
  background:rgba(255,255,255,.14);
}

/* ---------- 04 Rámečky pro fotky ---------- */
/* Když fotka chybí, ukáže se růžový rámeček s názvem souboru. */
.frame{
  position:relative;display:block;overflow:hidden;
  background:linear-gradient(140deg,#FCE2EC 0%,#F9CFDF 50%,#F6BFD4 100%);
}
.frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease),filter .5s ease,opacity .5s ease;
}
.frame.is-missing img{opacity:0}
.frame.is-missing::before{
  content:"";position:absolute;inset:8px;border:1.5px dashed rgba(254,159,208,.45);
}
.frame.is-missing::after{
  content:attr(data-file);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:12px;text-align:center;
  font-size:10.5px;letter-spacing:.08em;font-weight:600;color:var(--pink);
}

/* ---------- 04b Informační lišta ----------
   Růžový proužek úplně nahoře: vlevo sítě, uprostřed otevírací doba,
   vpravo adresa a telefon. Zůstává vidět pořád, i po odscrollování.

   Odstín se řídí proměnnou --topbar-bg (nastavená v sekci 01).
   Chceš tmavší a čitelnější? Přepiš ji na var(--pink-dark).
   Chceš, aby se lišta při scrollu sbalila? Přidej si sem:
     .topbar{transition:height .35s var(--ease),opacity .3s ease}
     .header.is-stuck .topbar{height:0;opacity:0}                      */
.topbar{
  height:var(--topbar-h);
  overflow:hidden;
  background:var(--topbar-bg);
  color:#fff;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 6px 18px rgba(232,57,154,.20);
  position:relative;z-index:2;
}

.topbar__inner{
  max-width:var(--max);margin:0 auto;
  height:var(--topbar-h);
  padding-inline:var(--pad);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(12px,2vw,28px);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;
}

/* růžová je moc sytá na to, aby se v ní ztratil běžný obrys focusu */
.topbar :focus-visible{outline-color:#fff}

/* ikonky obecně */
.topbar svg{
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.topbar__ikona{width:14px;height:14px;flex:none;stroke:rgba(255,255,255,.8)}

/* vlevo — sociální sítě */
.topbar__soc{
  justify-self:start;
  display:flex;align-items:center;gap:clamp(6px,1vw,12px);
}
.topbar__soc a{
  display:grid;place-items:center;width:26px;height:26px;
  color:rgba(255,255,255,.88);
  transition:color .3s ease,transform .3s var(--ease),filter .3s ease;
}
.topbar__soc svg{width:15px;height:15px}
.topbar__soc a:hover{
  color:#fff;transform:translateY(-2px);
  filter:drop-shadow(0 0 7px rgba(255,255,255,.75));
}

/* uprostřed — otevírací doba */
.topbar__hodiny{
  justify-self:center;
  display:flex;align-items:center;gap:9px;
  color:rgba(255,255,255,.92);
}
.topbar__hodiny b{font-weight:700;color:#fff}
.topbar__tecka{
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.55);
}

/* vpravo — adresa a telefon */
.topbar__kontakt{
  justify-self:end;
  display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);
}
.topbar__polozka{
  display:inline-flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.92);
  transition:color .3s ease,text-shadow .3s ease;
}
.topbar__polozka:hover{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.5)}
.topbar__polozka:hover .topbar__ikona{stroke:#fff}

/* ---------- 05 Hlavička a menu ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .35s ease,box-shadow .35s ease;
}
.header.is-stuck{
  background:rgba(252,241,245,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(254,159,208,.12),0 10px 28px rgba(254,159,208,.07);
}

/* Tři sloupce: logo vlevo, navigace přesně uprostřed stránky,
   vpravo místo pro hamburger. Prostřední sloupec je "auto",
   krajní stejně široké (1fr), takže navigace zůstane na středu
   bez ohledu na to, jak široké je logo. */
.header__inner{
  max-width:var(--max);margin:0 auto;
  padding:12px var(--pad);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(12px,2.4vw,32px);
}

.logo{display:block;justify-self:start}
.frame--logo{
  width:clamp(96px,9.5vw,138px);aspect-ratio:1.3/1;
  background:none;
  filter:drop-shadow(0 4px 14px rgba(254,159,208,.30));
}
.frame--logo img{object-fit:contain}
.frame--logo.is-missing{background:linear-gradient(140deg,#FCE2EC,#F7C4D9)}

/* Menu jede na blobových tlačítkách — tvar, morfování a stíny řeší
   komponenta .blob v sekci 03b, tady se jen nastaví velikost do
   hlavičky a značka aktivní položky.

   Chceš v blobech psané písmo z loga místo verzálek? Přidej si do
   .nav .blob řádek font-family:var(--display-hero) a zruš
   text-transform i letter-spacing.                                  */
.nav{
  display:flex;align-items:center;justify-self:center;
  gap:clamp(4px,.8vw,12px);
}
.nav .blob{
  width:clamp(94px,9.6vw,128px);
  min-height:clamp(74px,7.6vw,94px);
  padding:10px 12px;
  font-size:9.5px;letter-spacing:.12em;line-height:1.4;
  box-shadow:0 8px 20px rgba(232,57,154,.18);
}
.nav .blob:hover{box-shadow:0 14px 30px rgba(232,57,154,.28)}
/* v řadě mezi sekcemi můžou být schody výrazné, v hlavičce by se
   menu rozjelo od loga — tady je stáhneme na náznak */
.nav .blob:nth-child(4n+2){margin-top:8px}
.nav .blob:nth-child(4n+4){margin-top:5px}

/* Značka aktivní položky: místo podtržení se v blobu rozsvítí bílé
   srdíčko — navazuje to na logo stejně jako dřív. Chceš podtržení
   jako v předloze? Smaž tyhle tři pravidla.                         */
.nav .blob span::after{display:none}
.nav .blob::after{
  content:"";position:absolute;left:50%;bottom:clamp(11px,1.3vw,16px);
  width:10px;height:9px;margin-left:-5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 176'%3E%3Cpath fill='%23ffffff' 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/contain no-repeat;
  opacity:0;transform:translateY(5px) scale(.5) rotate(-12deg);
  transition:opacity .3s ease,transform .4s var(--ease);
}
.nav .blob:hover::after,.nav .blob.is-active::after{
  opacity:1;transform:translateY(0) scale(1) rotate(-12deg);
}


.burger{
  display:none;width:44px;height:44px;justify-self:end;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:#fff;box-shadow:var(--glow-sm);border-radius:var(--r-btn);
}
.burger span{
  display:block;width:18px;height:1.6px;background:var(--pink);
  transition:transform .35s var(--ease),opacity .25s ease;
}
.header.is-open .burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.header.is-open .burger span:nth-child(2){opacity:0}
.header.is-open .burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ---------- 06 Hero a neonové srdce ---------- */
.hero{
  position:relative;
  display:grid;grid-template-columns:1fr minmax(0,47%);
  align-items:center;
  min-height:min(94vh,880px);
}

.hero__text{
  /* Text drží u levého okraje a zarovnává se se zbytkem stránky.
     Pravý odstup je schválně velký, aby nadpis nelezl do srdce. */
  margin:0;
  /* 130px je odstup od menu, k tomu se přičte výška informační lišty */
  padding-block:calc(165px + var(--topbar-h)) 70px;
  padding-left:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  padding-right:clamp(28px,6vw,110px);
}
.hero__text .eyebrow{margin-bottom:14px}

.hero__title{
  font-family:var(--display-hero);font-weight:400;text-transform:none;
  font-size:clamp(2.5rem,5.6vw,4.4rem);
  line-height:1.26;letter-spacing:0;
}
.hero__title .line{display:block}
.hero__title .line--pink{
  color:var(--pink);
  display:flex;align-items:center;gap:.28em;
  text-shadow:0 0 26px rgba(254,159,208,.26);
}

/* srdíčko vedle nápisu PŘÍBĚH. — natočené, bez pohybu */
.mini-heart{
  width:.62em;height:auto;flex:none;
  margin-bottom:.12em;
  fill:none;stroke:var(--pink);stroke-width:11;
  filter:drop-shadow(0 0 6px rgba(255,92,158,.55));
  transform:rotate(-16deg);
  transform-origin:center;
}
@keyframes beat{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.14)}
  28%{transform:scale(1)}
  42%{transform:scale(1.09)}
  56%{transform:scale(1)}
}
@keyframes beat{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.14)}
  28%{transform:scale(1)}
  42%{transform:scale(1.09)}
  56%{transform:scale(1)}
}

.hero__lead{color:var(--ink-2);margin-bottom:clamp(24px,3.2vw,34px)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:clamp(28px,3.8vw,48px)}
.hero__place{
  display:flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);
}

/* ---------- 06c Strojek a srdce v heru ----------

   V pravé půlce hera jsou tři prvky: dvě prosvícená srdce (stejná
   jako v hlavičce galerie a ceníku) a přes ně tetovací strojek
   z img/strojek.webp. Srdce leží vzadu jako vodoznak, strojek
   je nad nimi.

   Pozice jsou v procentech, takže drží při jakékoli velikosti.
   Chceš strojek jinde? Uprav mu left a top.
   Větší/menší? Prostřední hodnota v jeho clamp (40vw).
   Světlejší/tmavší srdce? Uprav jim opacity.
   -------------------------------------------------------------- */

.hero__visual{
  position:relative;align-self:stretch;
  min-height:56vw;
  /* Nic tu neořezáváme. Srdce schválně přetéká za pravý okraj (tam
     to ořízne body, které má overflow-x:hidden) a strojek smí na
     užších monitorech kouknout kouskem doleva do mezery před textem. */
  overflow:visible;
}

/* obal srdcí — script1.js s ním jemně hýbe při scrollování */
.znaky{position:absolute;inset:0}

.znak{position:absolute;height:auto;pointer-events:none}

/* --- prosvícená srdce ---
   Vzhled je schválně stejný jako .page-head__heart na podstránkách,
   jen jsou větší a leží pod strojkem. */
.znak--srdce1,
.znak--srdce2{
  z-index:0;
  fill:none;stroke:#FFA8CF;stroke-width:1.6;stroke-linejoin:round;
}

/* velké vpravo nahoře, kusem přetéká za okraj */
.znak--srdce1{
  top:-3%;right:-8%;
  width:clamp(200px,34vw,calc(540px + var(--vic,0px) * .18));
  filter:
    drop-shadow(0 0 3px var(--pink-neon))
    drop-shadow(0 0 18px rgba(255,92,158,.55));
  opacity:.44;
}

/* menší vpravo dole, pootočené, ať to nevypadá jako kopie */
.znak--srdce2{
  bottom:2%;right:-5%;
  width:clamp(110px,17vw,calc(270px + var(--vic,0px) * .09));
  transform:rotate(-14deg);
  filter:
    drop-shadow(0 0 3px var(--pink-neon))
    drop-shadow(0 0 12px rgba(255,92,158,.45));
  opacity:.32;
}

/* --- tetovací strojek ---
   Obrázek z img/. Šířka se počítá ze šířky okna, takže drží poměr
   od notebooku po 4K. Posun a zvětšení při scrollování dodává
   script1.js přes --posun a --zvet, proto je transform poskládaný
   takhle a ne natvrdo. */
.znak--stroj{
  left:38%;top:50%;z-index:2;
  width:clamp(300px, min(40vw, calc(580px + var(--vic,0px) * .19)), 880px);
  transform:translate(-50%,calc(-50% + var(--posun,0px))) scale(var(--zvet,1));
  filter:drop-shadow(0 18px 42px rgba(254,159,208,.16));
  will-change:transform;
}

/* ---------- 06b Hero na velkých monitorech ----------

   Do šířky okna 1440 px se nemění vůbec nic – hero vypadá přesně
   jako dosud. Nad 1440 px všechno plynule roste a nad 2560 px se
   růst zastaví, ať to na ultraširokých monitorech není přehnané.

   Jak to funguje: --vic (nahoře v sekci 01) je "kolik pixelů navíc
   proti 1440 px", tedy 0 až 1120. Číslo za hvězdičkou pak říká,
   jak rychle daná věc roste.

   CHCEŠ TO JEŠTĚ VĚTŠÍ? Zvyš čísla za * (třeba .045 -> .06).
   Naopak menší? Sniž je. Vypnout úplně = smazat celou tuhle sekci. */

.hero{
  /* dřív se výška zasekla na 880 px a text plaval uprostřed prázdna */
  min-height:min(94vh, calc(880px + var(--vic) * .2));
}

.hero__text{
  padding-block:calc(165px + var(--topbar-h) + var(--vic) * .07) calc(70px + var(--vic) * .05);
}

/* TETOVAČKY PRAHA – malý růžový popisek nad nadpisem */
.hero__text .eyebrow{
  font-size:calc(10.5px + var(--vic) * .0035);
  margin-bottom:calc(14px + var(--vic) * .008);
}

/* hlavní nadpis – dřív se zastavil na 4,4 rem (cca 70 px) */
.hero__title{
  font-size:clamp(2.5rem, 5.6vw, calc(4.4rem + var(--vic) * .045));
}

/* čárka pod nadpisem */
.hero__text .rule{
  width:calc(56px + var(--vic) * .05);
  height:calc(2px + var(--vic) * .0009);
  margin:clamp(18px, 2.6vw, calc(26px + var(--vic) * .014)) 0;
}

/* text pod čárkou */
.hero__lead{
  font-size:calc(15.5px + var(--vic) * .0055);
  margin-bottom:clamp(24px, 3.2vw, calc(34px + var(--vic) * .02));
}

/* tlačítka KONTAKT a GALERIE */
.hero__actions{
  gap:calc(14px + var(--vic) * .008);
  margin-bottom:clamp(28px, 3.8vw, calc(48px + var(--vic) * .022));
}
.hero__actions .btn{font-size:calc(10.5px + var(--vic) * .0032)}
.hero__actions .btn > span{padding:calc(16px + var(--vic) * .009) calc(24px + var(--vic) * .012)}
.hero__actions .btn:has(.arrow) > span{padding-right:calc(20px + var(--vic) * .010)}
.hero__actions .btn > .arrow{
  width:calc(24px + var(--vic) * .011);
  height:calc(10px + var(--vic) * .0046);
  margin:0 calc(22px + var(--vic) * .009) 0 calc(18px + var(--vic) * .008);
}

/* PRAHA 2 – NOVÉ MĚSTO */
.hero__place{font-size:calc(10px + var(--vic) * .003)}
.hero__place .i{
  width:calc(16px + var(--vic) * .006);
  height:calc(16px + var(--vic) * .006);
}

/* pravá půlka hera – dřív rostla podle 56vw a na 2K/4K byla nesmyslně
   vysoká, takže hero přetékal přes celou obrazovku */
.hero__visual{min-height:min(56vw, calc(806px + var(--vic) * .26))}

/* Hlavička nad herem, aby nezůstala drobná proti většímu nadpisu.
   Nechceš měnit hlavičku? Smaž tyhle dvě pravidla. */
.frame--logo{width:clamp(96px, 9.5vw, calc(138px + var(--vic) * .05))}
.nav a{font-size:clamp(15px, 1.35vw, calc(18px + var(--vic) * .0035))}

/* ---------- 07 Galerie ---------- */
/* galerie i tatéři mají teď nadpis nad obsahem, ne vedle něj */

.track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * 18px) / 4);
  gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:14px 2px;
  cursor:grab;
}
.track::-webkit-scrollbar{display:none}
.track.is-dragging{cursor:grabbing;scroll-snap-type:none}

.shot{display:block;padding:0;scroll-snap-align:start}
.shot .frame{
  aspect-ratio:4/5;border-radius:var(--r-img);
  box-shadow:0 8px 22px rgba(254,159,208,.18);
  transition:box-shadow .45s ease,transform .45s var(--ease);
}
.shot .frame img{filter:saturate(.9) contrast(1.03)}
.shot:hover .frame{transform:translateY(-5px);box-shadow:0 16px 36px rgba(254,159,208,.30)}
.shot:hover .frame img{transform:scale(1.05);filter:saturate(1) contrast(1.03)}

.dots{display:flex;justify-content:center;gap:9px;margin-top:14px}
.dots button{
  width:8px;height:8px;border-radius:50%;
  background:var(--pink-soft);
  transition:background .3s ease,transform .3s var(--ease),box-shadow .3s ease;
}
.dots button:hover{background:var(--pink-light)}
.dots button[aria-current="true"]{
  background:var(--pink);transform:scale(1.2);
  box-shadow:0 0 0 4px rgba(254,159,208,.15);
}

/* ---------- 08b Ceník na úvodní stránce ---------- */
.cenik-blok{
  position:relative;overflow:hidden;
  background:var(--band);
  padding-block:clamp(44px,5.4vw,70px);
  margin-top:clamp(40px,5vw,64px);
}

/* rostlinné ozdoby v rozích, jen naznačené */
.listy{
  position:absolute;width:clamp(120px,14vw,200px);height:auto;
  fill:none;stroke:var(--pink-light);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.22;pointer-events:none;
}
.listy--vlevo{left:-38px;top:8%;transform:rotate(18deg)}
.listy--vpravo{right:-38px;bottom:6%;transform:rotate(-160deg)}

.tarify{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(24px,3.2vw,36px);
}

.tarif{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(30px,3.2vw,38px) clamp(16px,1.8vw,22px);
  background:rgba(255,255,255,.66);
  border:1px solid var(--line);
  border-radius:var(--r-card);          /* hrany držíme ostré */
  transition:transform .4s var(--ease),box-shadow .4s ease,border-color .3s ease;
}
.tarif:hover{
  transform:translateY(-4px);
  border-color:var(--pink-soft);
  box-shadow:var(--glow-md);
}


.tarif__nazev{
  display:block;font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:var(--pink);margin-bottom:8px;
}
.tarif__velikost{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}

.tarif__cara{
  display:block;width:44px;height:1px;background:var(--pink-soft);
  margin:clamp(14px,1.8vw,18px) 0;
}

.tarif__cena{
  font-size:clamp(21px,2.3vw,27px);font-weight:600;
  color:var(--pink);letter-spacing:.01em;
  margin-bottom:clamp(12px,1.6vw,16px);
}
.tarif__cena i{font-style:normal;font-size:.56em;font-weight:400;margin-right:.3em;opacity:.85}
.tarif__cena--zdarma{text-transform:uppercase;letter-spacing:.1em}

.tarif__popis{
  font-size:13.5px;line-height:1.62;color:var(--muted);
  max-width:26ch;
}


@media (max-width:1080px){
  .tarify{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .tarify{grid-template-columns:1fr}
  .tarif__popis{max-width:34ch}
  .listy{display:none}
}

/* ---------- 09 Kontakt a mapa ---------- */
.contact{
  display:grid;grid-template-columns:1fr 1fr 1.12fr;
  align-items:stretch;
}
.panel{position:relative;overflow:hidden}

.panel--cta{
  background:linear-gradient(125deg,#FFB8DC 0%,#FE9FD0 48%,#E8399A 100%);
  color:#fff;
  display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);
  padding:clamp(34px,4vw,48px) clamp(24px,3vw,40px) clamp(34px,4vw,48px) var(--pad);
}
.panel--cta .h2{color:#fff;max-width:12ch;margin-bottom:22px}

.cta-heart{
  width:clamp(74px,8vw,108px);height:auto;flex:none;
  fill:none;stroke:rgba(255,255,255,.95);stroke-width:4.5;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 16px rgba(255,180,215,.9));
  animation:beat 2.6s ease-in-out infinite;
  transform-origin:center;
}

.sprig{
  position:absolute;right:-8px;bottom:-16px;
  width:clamp(76px,8vw,104px);height:auto;opacity:.35;
  fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}

.panel--info{
  background:var(--panel);
  padding:clamp(30px,3.6vw,44px) clamp(24px,3vw,40px);
  display:flex;flex-direction:column;justify-content:center;
}
.info li{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.info a{transition:color .25s ease}
.info a:hover{color:var(--pink)}

.socials{display:flex;gap:12px;margin-top:20px}
.socials a{
  position:relative;overflow:hidden;isolation:isolate;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;color:var(--pink);
  box-shadow:var(--glow-sm);
  transition:transform .35s var(--ease),box-shadow .35s ease,color .3s ease,background .3s ease;
}
.socials a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.socials a:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg,var(--pink-light),var(--pink));
  color:#fff;box-shadow:var(--glow-md);
}

.panel--map{min-height:210px;position:relative;overflow:hidden;background:#FBDDE8}

/* Mapa je běžný podkladový plán, růžový nádech mu dává až filtr:
   nejdřív se odbarví, pak přibarví do teplého tónu a ten se otočí
   do růžové. Kdyby byl odstín moc silný, sniž saturate(). */
.map{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(1) sepia(.62) hue-rotate(288deg) saturate(2.6)
         brightness(1.04) contrast(.92);
}

/* jemný růžový závoj přes mapu, ať ladí se zbytkem patičky */
.panel--map::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,141,190,.16),rgba(255,200,224,.08));
}

/* štítek s adresou v rohu, odkazuje do map */
.pin{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:0 8px 20px rgba(160,40,90,.16);
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
.pin:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(160,40,90,.24)}
.pin svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--pink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pin span{font-size:11px;letter-spacing:.04em;line-height:1.5;color:var(--muted)}
.pin b{display:block;color:var(--ink);font-weight:700;font-size:12.5px;letter-spacing:.02em}


/* ---------- 10 Patička ---------- */
.legal{background:#FDF6F9}
.legal__inner{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  padding-block:18px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.legal a{color:var(--pink);font-weight:600}
.legal a:hover{color:var(--pink-dark)}

/* ---------- 11 Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,24px);
  padding:clamp(16px,4vw,48px);
  background:rgba(58,22,38,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s ease;
}
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}

.lightbox__stage{
  margin:0;max-width:min(880px,100%);max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transform:scale(.96);transition:transform .35s var(--ease);
}
.lightbox.is-open .lightbox__stage{transform:scale(1)}
.lightbox__stage img{
  max-height:76vh;width:auto;border-radius:var(--r-img);
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.lightbox__stage figcaption{
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-align:center;
}

.lightbox__close{
  position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;
  transition:background .3s ease,transform .3s var(--ease);
}
.lightbox__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lightbox__close:hover{background:var(--pink);transform:rotate(90deg)}

.lightbox__nav{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;
  transition:background .3s ease,transform .3s var(--ease);
}
.lightbox__nav svg{width:22px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lightbox__nav:hover{background:var(--pink);transform:scale(1.08)}

/* =============================================================
   13 PODSTRÁNKY (galerie, tatéři, studio, o nás, kontakt)
   ============================================================= */

/* --- hlavička podstránky --- */
.page-head{
  position:relative;overflow:hidden;
  padding:calc(clamp(130px,15vw,190px) + var(--topbar-h)) 0 clamp(38px,5vw,60px);
}
.page-head__heart{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(38vw,380px);height:auto;z-index:0;opacity:.5;
  fill:none;stroke:#FFA8CF;stroke-width:1.6;stroke-linejoin:round;
  filter:drop-shadow(0 0 3px var(--pink-neon)) drop-shadow(0 0 18px rgba(255,92,158,.55));
  pointer-events:none;
}
.page-head .wrap{position:relative;z-index:1}

.page-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.85rem,3.8vw,2.9rem);line-height:1.16;letter-spacing:.05em;
  display:flex;align-items:center;gap:.3em;flex-wrap:wrap;
  margin-top:12px;
}
.page-lead{color:var(--ink-2);max-width:52ch}

/* --- drobečky --- */
.crumbs{
  display:flex;align-items:center;gap:9px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.crumbs a{color:var(--pink);font-weight:600}
.crumbs a:hover{color:var(--pink-dark)}

/* --- filtry v galerii --- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(22px,3vw,32px)}
.chip{
  padding:10px 18px;border-radius:var(--r-btn);
  border:1.5px solid var(--line);background:rgba(255,255,255,.6);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--ink-2);
  transition:border-color .3s ease,color .3s ease,background .3s ease,box-shadow .3s ease;
}
.chip:hover{border-color:var(--pink-light);color:var(--pink)}
.chip[aria-pressed="true"]{
  border-color:var(--pink);color:#fff;
  background:linear-gradient(135deg,var(--pink-light),var(--pink));
  box-shadow:var(--glow-sm);
}

/* --- mřížka prací --- */
.grid-works{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.grid-works .shot{width:100%}
.grid-works .shot.is-hidden{display:none}

/* --- řádky s tatéry --- */
.artist-row{
  display:grid;grid-template-columns:0.9fr 1.1fr;
  gap:clamp(24px,4vw,54px);align-items:center;
  padding-block:clamp(30px,4vw,48px);
  border-top:1px solid var(--line);
}
.artist-row:first-of-type{border-top:0}
.artist-row:nth-child(even) .artist-row__media{order:2}

.artist-row__media .frame{
  aspect-ratio:4/3;border-radius:var(--r-card);
  box-shadow:0 12px 30px rgba(254,159,208,.20);
}
.artist-row__media .frame img{filter:grayscale(1) sepia(.28) hue-rotate(288deg) saturate(1.6)}

.artist-row h2{
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.45rem,2.8vw,1.95rem);letter-spacing:.09em;margin:10px 0 6px;
}
.artist-row p{color:var(--ink-2);margin-bottom:16px;max-width:46ch}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tag{
  padding:7px 14px;border:1px solid var(--pink-soft);border-radius:var(--r-btn);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--pink);
  background:rgba(255,255,255,.55);
}

/* --- textové bloky a hodnoty --- */
.prose{max-width:62ch}
.prose p{color:var(--ink-2);margin-bottom:16px}
.prose p:last-child{margin-bottom:0}

.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,56px);align-items:center;
}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(22px,3vw,32px)}
.value{
  padding:clamp(22px,2.6vw,30px);
  background:rgba(255,255,255,.55);
  border:1px solid var(--line);border-radius:var(--r-card);
  transition:transform .4s var(--ease),box-shadow .4s ease,border-color .3s ease;
}
.value:hover{transform:translateY(-4px);box-shadow:var(--glow-md);border-color:var(--pink-soft)}
.value .badge{margin-bottom:16px}
.value h3{
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;margin-bottom:9px;
}
.value p{font-size:13.5px;color:var(--muted);line-height:1.62}

/* --- galerie studia --- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.strip .frame{
  aspect-ratio:3/2;border-radius:var(--r-img);
  box-shadow:0 8px 22px rgba(254,159,208,.16);
}

/* --- formulář --- */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);
}
.field input,.field textarea,.field select{
  font:inherit;font-size:14px;color:var(--ink);
  padding:13px 15px;
  background:rgba(255,255,255,.75);
  border:1.5px solid var(--line);border-radius:var(--r-btn);
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;background:#fff;
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(254,159,208,.14);
}
.field.has-error input,.field.has-error textarea{border-color:#E0356F}
.field__err{
  font-size:11px;color:#C8265C;min-height:0;
  opacity:0;transform:translateY(-3px);
  transition:opacity .25s ease,transform .25s ease;
}
.field.has-error .field__err{opacity:1;transform:none}

.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__note{font-size:12px;color:var(--muted)}
.form__done{
  display:none;align-items:center;gap:12px;
  padding:16px 18px;border-radius:var(--r-card);
  background:rgba(255,255,255,.8);border:1.5px solid var(--pink-soft);
  font-size:13.5px;color:var(--ink-2);
}
.form__done.is-visible{display:flex}
.form__done svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--pink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* --- ceník --- */
.prices{border-top:1px solid var(--line)}
.price{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.price b{
  display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:3px;
}
.price span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}
.price em{
  flex:none;font-style:normal;white-space:nowrap;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--pink);
}

/* --- rozbalovací otázky --- */
.faq{border-top:1px solid var(--line);margin-top:clamp(26px,3.4vw,40px)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 0;text-align:left;
  font-size:14px;font-weight:600;color:var(--ink);
  transition:color .3s ease;
}
.faq__q:hover{color:var(--pink)}
.faq__q svg{
  width:16px;height:16px;flex:none;
  fill:none;stroke:var(--pink);stroke-width:1.6;stroke-linecap:round;
  transition:transform .35s var(--ease);
}
.faq__item.is-open .faq__q svg{transform:rotate(45deg)}
.faq__a{
  overflow:hidden;height:0;
  transition:height .38s var(--ease);
}
.faq__a p{padding:0 0 20px;color:var(--ink-2);font-size:13.5px;max-width:64ch}

/* --- pruh s výzvou uvnitř stránky --- */
.band{
  background:linear-gradient(125deg,#FFB8DC 0%,#FE9FD0 48%,#E8399A 100%);
  color:#fff;text-align:center;
  padding-block:clamp(38px,5vw,58px);
  margin-top:clamp(40px,5vw,64px);
}
.band .h2{color:#fff;margin-bottom:10px}
.band p{color:rgba(255,255,255,.9);margin-bottom:24px}
.band .btn{margin-inline:auto}

/* =============================================================
   14 NADPIS SEKCE — srdce, ozdobné linky, podtitul a dělič
   Používá se u galerie, tatérů i ceníku, ať to drží pohromadě.
   ============================================================= */
.hlava{text-align:center;margin-bottom:clamp(26px,3.4vw,40px)}


.hlava__titul{
  font-family:var(--display-nadpis);font-weight:400;
  font-size:clamp(1.75rem,3.6vw,2.7rem);
  line-height:1.32;letter-spacing:0;
  color:var(--ink);

  /* VERZÁLKY — odkomentuj, když se vrátíš k bezpatkovému písmu
  text-transform:uppercase;
  letter-spacing:.14em;
  line-height:1.1;
  */
}

.hlava__popis{
  color:var(--ink-2);margin-top:clamp(10px,1.4vw,14px);
  max-width:56ch;margin-inline:auto;
}

/* dělič: vodorovná linka se srdíčkem uprostřed */
.delic{
  position:relative;display:block;
  width:clamp(150px,20vw,240px);height:11px;
  margin:clamp(14px,1.8vw,20px) auto 0;
}
.delic::before{
  content:"";position:absolute;top:50%;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--pink-soft) 22%,var(--pink-soft) 78%,transparent);
}
.delic::after{
  content:"";position:absolute;top:50%;left:50%;
  width:12px;height:11px;transform:translate(-50%,-50%) rotate(-10deg);
  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/contain no-repeat;
}

/* odkaz vystředěný pod sekcí */
.stred-odkaz{text-align:center;margin-top:clamp(20px,2.6vw,30px)}

/* ---------- 12 Animace odhalení ---------- */
[data-reveal]{opacity:0;transform:translateY(20px)}
[data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .8s ease var(--delay,0s),transform .8s var(--ease) var(--delay,0s);
}

/* ---------- 12b Responzivita ---------- */
@media (max-width:1080px){
  .track{grid-auto-columns:calc((100% - 2 * 18px) / 3)}
  .contact{grid-template-columns:1fr 1fr}
  .panel--map{grid-column:1 / -1;min-height:220px}
}

@media (max-width:900px){
  /* lišta: adresa jde pryč (je i v kontaktu), zbytek se stáhne */
  :root{--topbar-h:38px}
  .topbar__inner{font-size:9.5px;letter-spacing:.1em;gap:10px}
  .topbar__polozka--adresa{display:none}
  .topbar__hodiny .topbar__ikona{display:none}
  .topbar__hodiny{gap:7px}
  .topbar__soc a{width:22px;height:22px}

  .nav{display:none}
  .burger{display:flex}

  /* na mobilu jen dva sloupce: logo a hamburger.
     Rozbalené menu se položí přes celou šířku na druhý řádek. */
  .header__inner{grid-template-columns:1fr auto}
  .logo{grid-area:1 / 1}
  .burger{grid-area:1 / 2}
  .nav{grid-area:2 / 1 / 3 / 3}

  .header.is-open{
    background:rgba(252,241,245,.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 14px 40px rgba(254,159,208,.14);
  }
  /* rozbalené menu: bloby se poskládají na střed a zalomí se */
  .header.is-open .nav{
    display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
    gap:10px;
    justify-self:stretch;margin-top:14px;padding-bottom:16px;
  }
  .header.is-open .nav .blob{
    width:clamp(98px,27vw,132px);min-height:86px;font-size:9.5px;
  }

  .hero{grid-template-columns:1fr;min-height:0}
  .hero__text{order:2;padding:34px var(--pad) 56px;margin:0;max-width:none}

  /* Nahoře je pruh na šířku. Obrázek má měkké okraje sám o sobě,
     takže se tu maska nehodí — jen by ukousla vršek strojku. */
  .hero__visual{
    order:1;min-height:0;aspect-ratio:4/3;margin-top:calc(80px + var(--topbar-h));
    -webkit-mask-image:none;mask-image:none;
  }
  .znak--stroj{left:48%;width:84%}
  .znak--srdce1{top:0;right:-16%;width:56vw}
  .znak--srdce2{bottom:1%;right:-10%;width:26vw}

  .track{grid-auto-columns:calc((100% - 18px) / 2)}


  .steps{grid-template-columns:repeat(2,1fr);gap:26px 22px}
  .step{padding-left:22px}
  .step:nth-child(odd){padding-left:0;border-left:0}

  .contact{grid-template-columns:1fr}
  .panel--cta{padding-inline:var(--pad)}
  .panel--info{padding-inline:var(--pad)}
  .panel--map{min-height:200px}
}

@media (max-width:560px){
  /* na úzkých mobilech zbydou v liště jen sítě a telefon */
  :root{--topbar-h:36px}
  .topbar__hodiny{display:none}
  .topbar__inner{grid-template-columns:auto auto;justify-content:space-between}

  .track{grid-auto-columns:80%}
  .steps{grid-template-columns:1fr}
  .step{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:20px}
  .step:first-child{border-top:0;padding-top:0}
  .hero__actions .btn{flex:1 1 100%}
  .panel--cta{flex-direction:column;align-items:flex-start;text-align:left}
  .lightbox__nav{position:absolute;bottom:24px}
  .lightbox__nav--prev{left:24px}
  .lightbox__nav--next{right:24px}
}

/* ---------- 12c Omezený pohyb ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- 13b Responzivita podstránek ---------- */
@media (max-width:1080px){
  .grid-works{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
  .page-head{padding-top:calc(clamp(112px,20vw,150px) + var(--topbar-h))}
  .page-head__heart{width:min(62vw,340px);opacity:.35;right:-14%}
  .grid-works{grid-template-columns:repeat(2,1fr)}
  .artist-row{grid-template-columns:1fr;gap:22px}
  .artist-row:nth-child(even) .artist-row__media{order:0}
  .split{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  .grid-works{grid-template-columns:1fr 1fr;gap:12px}
  .form__row{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .filters{gap:8px}
  .chip{padding:9px 14px;letter-spacing:.12em}
}