/* =============================================================
   GALERIE — galerie1.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.
   ============================================================= */

/* ---------- nadpis stránky ---------- */
.hlava--stranka{margin-bottom:0}

/* Nadpis „Galerie".
   POZOR: úplně stejné hodnoty jsou i v cenik1.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:48ch}

/* ---------- oddíly galerie ---------- */
.galerie-blok{position:relative}

/* Piercing sedí na světle růžovém pruhu přes celou šířku okna,
   takže obě galerie jdou od sebe rozeznat i bez čtení nadpisu. */
.galerie-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-galerie{
  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;
}
.galerie-blok .wrap{position:relative;z-index:1}

/* ---------- podnadpis oddílu ---------- */
.podnadpis{text-align:center;margin-bottom:clamp(26px,3.4vw,40px)}
/* Nadpisy „Tetování" a „Piercing" — stejné hodnoty jsou i v cenik1.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);
}
.podnadpis p{margin-top:8px;font-size:13.5px;color:var(--muted)}
/* krátká linka se srdíčkem, stejná řeč jako sekce 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;
}

/* =============================================================
   MŘÍŽKA PRACÍ
   10 fotek + 2 zvětšené (každá zabere 2×2 pole) = 16 polí,
   16 polí / 4 sloupce = přesně 4 řádky, žádná díra.

   DVĚ VĚCI, NA KTERÝCH TO STOJÍ:

   1) Fotka je normálně v toku a výšku dlaždice určuje ona.
      Dokud byl rámeček s fotkou absolutně napozicovaný, neměla
      dlaždice žádný obsah a její výška visela na aspect-ratio.
      Jenže aspect-ratio na <button> část prohlížečů ignoruje —
      dlaždice pak měly nulovou výšku, mřížka neměla co rozestoupit
      a všech deset fotek se poskládalo přes sebe. Teď má dlaždice
      výšku z fotky, takže se to stát nemůže.

   2) Selektory jsou schválně dlouhé (.galerie-blok .grid-works .shot).
      Vzhled dlaždice i rámečku je nejspíš i ve style1.css a tamní
      pravidla jsou specifičtější než holé .shot — přebít je jde jen
      delším selektorem, ne tím, že tenhle soubor načítáme později.
   ============================================================= */
.galerie-blok .grid-works{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;
  gap:clamp(12px,1.6vw,20px);   /* mezery mezi fotkami */
}

/* dlaždice = holé tlačítko, žádná vlastní výška ani poměr stran */
.galerie-blok .grid-works .shot{
  position:relative;
  display:block;
  margin:0;padding:0;border:0;
  background:none;
  -webkit-appearance:none;appearance:none;
  cursor:pointer;
  min-width:0;                 /* dlaždice nikdy nerozšoupne svůj sloupec */
  border-radius:var(--r-img);
}

/* rámeček je jen obal kolem fotky — v toku, ne absolutně */
.galerie-blok .grid-works .shot .frame{
  position:static;
  display:block;
  width:100%;height:auto;
  aspect-ratio:auto;
  overflow:hidden;             /* fotka se ořízne uvnitř rámečku */
  border-radius:inherit;
  box-shadow:0 8px 22px rgba(254,159,208,.16);
  transition:box-shadow .45s ease,transform .45s var(--ease);
}

/* Fotka drží čtvercový formát a ořízne se doprostřed.
   aspect-ratio na <img> funguje spolehlivě všude — na rozdíl od <button>.
   Zároveň si tím stránka rezervuje místo dřív, než se fotka stáhne,
   takže při načítání nic neposkakuje. */
.galerie-blok .grid-works .shot .frame img{
  position:static;
  display:block;
  width:100%;height:auto;
  aspect-ratio:1;
  object-fit:cover;object-position:center;
  border-radius:inherit;
  filter:saturate(.92) contrast(1.02);
  transition:transform .45s var(--ease),filter .45s ease;
}

/* Zvětšené dlaždice — které to jsou, se určuje v administraci
   (zaškrtávátko „velká" u fotky), proto třída, ne pořadí.
   Šířka = dva sloupce + mezera; fotka je čtvercová, takže výška vyjde
   na dva řádky + mezeru. Sedí do svého místa přesně. */
.galerie-blok .grid-works .shot--velka{
  grid-column:span 2;
  grid-row:span 2;
}

/* růžový závoj přes fotku */
.galerie-blok .grid-works .shot::before{
  content:"";position:absolute;inset:0;z-index:2;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(to top,rgba(224,64,154,.52),rgba(255,140,190,.1));
  opacity:0;transition:opacity .4s ease;
}
/* kolečko s lupou uprostřed */
.galerie-blok .grid-works .shot::after{
  content:"";position:absolute;z-index:3;
  left:50%;top:50%;width:46px;height:46px;
  margin:-23px 0 0 -23px;border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.94)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FE9FD0' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 20 20M11 8.6v4.8M8.6 11h4.8'/%3E%3C/svg%3E")
    center/21px no-repeat;
  opacity:0;transform:scale(.55);
  transition:opacity .35s ease,transform .4s var(--ease);
}

.galerie-blok .grid-works .shot:hover .frame{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(254,159,208,.3);
}
.galerie-blok .grid-works .shot:hover .frame img{
  transform:scale(1.07);filter:saturate(1) contrast(1.02);
}
.galerie-blok .grid-works .shot:hover::before,
.galerie-blok .grid-works .shot:focus-visible::before{opacity:1}
.galerie-blok .grid-works .shot:hover::after,
.galerie-blok .grid-works .shot:focus-visible::after{opacity:1;transform:scale(1)}

/* dlaždice se odhalují po vlnách, ne všechny naráz */
.grid-works .shot:nth-child(2){transition-delay:.05s}
.grid-works .shot:nth-child(3){transition-delay:.1s}
.grid-works .shot:nth-child(4){transition-delay:.15s}
.grid-works .shot:nth-child(5){transition-delay:.2s}
.grid-works .shot:nth-child(6){transition-delay:.25s}
.grid-works .shot:nth-child(7){transition-delay:.3s}

/* ---------- velké srdce v mezeře nad galerií ----------
   Sedí v levé části, v prostoru mezi nadpisem stránky a nadpisem
   Tetování. Na užších obrazovkách se skryje, aby nelezlo do fotek. */
#tetovani{padding-top:clamp(36px,7vw,120px)}

.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á šíř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 fotek. ---------- */
.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){
  /* 2 sloupce, všechny dlaždice stejné */
  .galerie-blok .grid-works{grid-template-columns:repeat(2,1fr)}
  .galerie-blok .grid-works .shot--velka{
    grid-column:span 1;grid-row:span 1;
  }
  .listy-galerie{opacity:.1;right:-64px}
}

@media (max-width:560px){
  .listy-galerie{display:none}
  .galerie-blok .grid-works .shot::after{
    width:38px;height:38px;margin:-19px 0 0 -19px;background-size:18px;
  }
}