/* =========================================================
   Písmo je uložené priamo na tomto webe, nie u Googlu.
   Dôvod: pri načítaní z fonts.googleapis.com by prehliadač každého
   návštevníka poslal jeho IP adresu Googlu do USA ešte predtým, než
   čokoľvek odklikne — to je podľa GDPR problém a bez súhlasu sa to nesmie.
   Takto je web bez jediného cudzieho spojenia a načíta sa aj rýchlejšie.

   Sú to variabilné písma (os hrúbky 400–900), preto stačia dva súbory
   na všetky hrúbky. Delenie na „latin" a „latin-ext" je nutné —
   samotná latinka nemá ľ š č ť ž ň ď, rozšírená zase á í é ú ô.
   ========================================================= */
@font-face{
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/playfair-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/playfair-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Škorvagová — fotografka
   Papierový podklad, krémová a jedna červená, serifové písmo.
   ========================================================= */

:root{
  /* Celý web stojí na dvoch farbách: krémovej a tmavočervenej.
     Všetko ostatné sú len priehľadnosti tej istej červenej. */
  --cream:     #F2EBE2;
  --red:       #511D10;

  --shell:     var(--cream);
  --clay:      var(--red);
  --clay-soft: #6E2A18;
  --cream-2:   #E6DCCF;
  --ink:       var(--red);
  --ink-2:     rgba(81, 29, 16, .78);
  --ink-3:     rgba(81, 29, 16, .55);
  --line:      rgba(81, 29, 16, .22);
  --line-soft: rgba(81, 29, 16, .11);

  /* svetlé odtiene na červenom páse */
  --on-red:    rgba(242, 235, 226, .84);
  --on-red-2:  rgba(242, 235, 226, .62);
  --on-red-ln: rgba(242, 235, 226, .28);

  /* Celý web je v jednom písme. --display je nadpisové, --sans bežný text;
     teraz sú obe rovnaké. Písmo je uložené v priečinku fonts/ — viď @font-face
     úplne hore. Ak by ste chceli iné, stiahnite si ho a nahraďte tam. */
  --display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:    var(--display);

  --frame: 1180px;
  --gap: clamp(.6rem, 1.4vw, 1.15rem);
  --pad: clamp(1.5rem, 5vw, 6rem);

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* jemné zrno papiera — vykresľuje ho prehliadač, žiadny obrázok sa nenačítava.
     Prvá vrstva je drobné zrno, druhá veľmi mäkké fľaky ako pri ručnom papieri.
     Silu vzoru ladíte hodnotami opacity vnútri oboch obrázkov. */
  --paper:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23a)' opacity='0.135'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='620' height='620' filter='url(%23b)' opacity='0.09'/%3E%3C/svg%3E");
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background-color: var(--shell);
  background-image: var(--paper);
  background-blend-mode: multiply, multiply;
  background-size: 260px 260px, 620px 620px;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, blockquote, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--clay); color: var(--cream); }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream); padding: .75rem 1.25rem; font-size: .85rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 1px solid var(--clay-soft); outline-offset: 3px; }

/* ---------- rám a panely ---------- */
.frame { display: block; }

/* obsah panelu sa na veľmi širokých monitoroch nerozťahuje donekonečna */
.panel--pad > * { max-width: 1680px; margin-inline: auto; }
/* Od tabletu nahor držíme obsah užší, než je samotná sekcia — po oboch bokoch
   tak ostane voľné miesto a fotky v galérii nie sú neúmerne veľké. Zužujeme
   všetky sekcie rovnako, aby nadpisy zostali na jednej zvislici. Na telefóne
   nie, tam je každý pixel šírky vzácny.
   Výnimkou je text pod hero fotkou — ten ide zámerne až k okraju, viď .hero__text. */
@media (min-width: 761px){
  .panel--pad > * { max-width: min(1240px, 84vw); }
}
.panel{
  position: relative;
  background: transparent;
  overflow: hidden;
}
.panel--pad { padding: clamp(3.25rem, 7vw, 7rem) var(--pad); }
section[id] { scroll-margin-top: 90px; }

/* ---------- spoločná typografia ---------- */
.display{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1.22;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem);
  text-wrap: balance;
}
.display--big{
  font-size: clamp(1.6rem, 1.05rem + 2.3vw, 2.9rem);
  letter-spacing: .03em;
  line-height: 1.18;
}
.display--rule { margin-bottom: 1.5rem; }

/* štítok s čiarkami po stranách:  —— AKO PRACUJEM ——  */
.eyebrow{
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--display);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 1.1rem;
}
/* obe čiary sú rovnaké a nikdy sa nezmrštia na nulu, aj keď je stĺpec úzky */
.eyebrow::before,
.eyebrow::after{
  content: "";
  height: 1px;
  background: currentColor;
  opacity: .45;
  width: clamp(1.75rem, 4vw, 3.25rem);
  flex: 0 0 auto;
}

/* drobné popisky, tlačidlá a odkazy majú rovnaké písmo ako nadpisy */
.link-arrow, .btn, .nav__links a, .nav__cta, .menu__links a,
.faq__item summary, .wordmark__links a, .field label,
.form__hint, .steps__num { font-family: var(--display); }

.link-arrow{
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .3rem;
  transition: opacity .35s var(--ease), letter-spacing .35s var(--ease);
}
.link-arrow::after { content: " →"; }
.link-arrow:hover { opacity: .6; letter-spacing: .26em; }
.link-arrow--light { color: var(--cream); }

/* ---------- navigácia ---------- */
.nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .5s var(--ease);
}
.nav__inner{
  max-width: 1680px;
  margin-inline: auto;
  padding: clamp(.9rem, 1.8vw, 1.35rem) var(--pad);
  display: grid;
  /* odkazy | prepínač jazyka | červené tlačidlo — tri stĺpce, aby jazyk
     zostal VĽAVO od tlačidla a tlačidlo ostalo úplne na kraji */
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1.5rem;
}
.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); }
.nav__links a{
  text-decoration: none;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.nav__links a:hover { border-bottom-color: currentColor; }

.nav__logo{
  justify-self: center;
  font-family: var(--display);
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  transition: color .45s var(--ease);
}
/* Prepínač jazyka — hneď vľavo od červeného tlačidla, ako jeho vedľajší
   náprotivok: rovnaký tvar aj odsadenie, ale len obrys namiesto výplne.
   Výplň tu mať nemôže: kým je hlavička na fotke, je priesvitná, po
   odscrollovaní sa podfarbí krémovou — béžová výplň by v nej zmizla.
   Preto sa rovnako ako tlačidlo prepína z krémového obrysu na červený. */
.nav__lang{
  justify-self: end;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(242, 235, 226, .55);
  padding: .6rem 1.2rem;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.nav__lang:hover { background: var(--cream); color: var(--red); border-color: var(--cream); }
.nav.is-solid .nav__lang,
.nav--solid .nav__lang { color: var(--red); border-color: rgba(81, 29, 16, .45); }
.nav.is-solid .nav__lang:hover,
.nav--solid .nav__lang:hover { background: var(--red); color: var(--cream); border-color: var(--red); }

.nav__cta{
  justify-self: end;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  /* tlačidlo je vyplnené červenou, aby bolo vidieť aj cez fotku */
  color: var(--cream);
  background: var(--red);
  border: 1px solid var(--red);
  padding: .6rem 1.2rem;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.nav__cta:hover { background: var(--cream); color: var(--red); border-color: var(--cream); }

.nav.is-solid{
  background: rgba(242, 235, 226, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav.is-solid .nav__links a,
.nav.is-solid .nav__logo { color: var(--red); }
.nav.is-solid .nav__cta { border-color: var(--red); }
.nav.is-solid .nav__cta:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.nav.is-solid .nav__burger span { background: var(--red); }

.nav__burger{
  display: none;
  justify-self: end;
  background: none; border: 0; padding: .6rem;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; gap: 6px;
}
.nav__burger span{
  display: block; height: 1px; width: 24px;
  background: var(--cream);
  transition: transform .45s var(--ease), background .4s;
}
.nav__burger[aria-expanded="true"] span { background: var(--ink); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* mobilné menu */
.menu{
  position: fixed; inset: 0; z-index: 90;
  background-color: var(--cream);
  background-image: var(--paper);
  background-blend-mode: multiply, multiply;
  background-size: 260px 260px, 620px 620px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem;
  opacity: 0; transition: opacity .45s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__links { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
/* jazyk v mobilnom menu — menší než ostatné položky, je to vedľajšia voľba */
.menu__links a.menu__lang{
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .75;
  margin-top: .4rem;
}
.menu__links a{
  font-family: var(--display);
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}
.menu__foot{
  position: absolute; bottom: clamp(2rem, 8vh, 4rem);
  font-size: .74rem; letter-spacing: .12em; color: var(--ink-3); text-decoration: none;
}
/* menu má krémové pozadie, takže navigácia ostáva tmavá aj po otvorení */

/* ---------- 1. prvý slajd: fotka od kraja po kraj + text pod ňou ----------
   Fotka pre počítač je už orezaná v súbore — z originálu je preč 22 % zhora
   (strop aj s lampami) a 12 % zdola (kus podlahy). Na stránke sa preto zobrazuje
   prakticky celá; spodná hranica výšky je nastavená tak, aby sa z nej ubralo
   nanajvýš pár percent a rámy obrazov (3–73 % výšky) zostali vždy celé.
   Podklad je krémový papier ako inde. */
.hero{
  /* výška je presne prvá obrazovka — až vtedy má fotka podľa čoho sa zmenšiť */
  height: 100svh;
  height: 100dvh;
  min-height: 620px;         /* poistka na veľmi nízkom okne */
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 0 clamp(2rem, 6vh, 4rem);
}
.hero__frame{
  width: 100%;
  min-height: 0;
  display: grid;
  /* fotka si vezme presne toľko výšky, koľko zostane po texte — nikdy ho nevytlačí */
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3.5vh, 2.5rem);
}

.hero__media{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: calc(100vw * 0.349);    /* pod túto hranicu by sa orezali obrazy */
  max-height: calc(100vw * 0.3712);   /* nad ňu už niet čo ukázať — celá fotka */
  overflow: hidden;
}
.hero__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;   /* prípadný zvyšok orezu sa rozdelí hore aj dole */
}

/* stmavenie hornej hrany (pod navigáciu) a spodnej (pod meno).
   Bez neho by navigácia na stene fotky mala kontrast len 2,7:1. */
.hero__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(40, 14, 9, .52) 0%, rgba(40, 14, 9, 0) 26%),
    linear-gradient(to top,    rgba(40, 14, 9, .58) 0%, rgba(40, 14, 9, 0) 34%);
}
.hero__mark{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 var(--pad) clamp(.85rem, 2.2vw, 1.75rem);
  color: var(--cream);
}
.hero__name{
  font-family: var(--display);
  font-weight: 500;
  text-transform: lowercase;   /* logo sa píše všetko malým: skorvagova */
  font-size: clamp(1.35rem, .8rem + 1.7vw, 2.3rem);
  letter-spacing: .16em;
  line-height: 1;
}

/* text pod fotkou */
.hero__text{
  max-width: 1180px;
  padding-inline: var(--pad);   /* text drží odsadenie, fotka nad ním nie */
}
/* Text pod hero fotkou ide zámerne až k okraju stránky — ďalej vľavo než
   nadpisy sekcií pod ním. Je to úvod, má sa odlíšiť. Preto tu NEPLATÍ
   zúženie, ktoré má zvyšok webu. */
.hero__text .display--big { margin-bottom: clamp(1rem, 2.5vh, 1.75rem); }
.hero__note{
  margin-top: clamp(.55rem, 1.3vh, .9rem);
  max-width: 64ch;
  color: var(--ink-2);
  font-size: clamp(.88rem, .84rem + .25vw, 1rem);
  line-height: 1.6;
}
@media (max-width: 560px){
  /* na úzkom displeji nechávame vety plynúť, nie lámať napevno */
  .hero__note br { display: none; }
}

/* To isté, čo platí na telefóne (viď nižšie), platí aj na tabletoch držaných
   na výšku: výšku hero fotky určuje šírka okna, takže na vysokom displeji sa
   nemá o čo oprieť a pod ňou ostávala prázdna diera — nameraných 527 px pri
   768 × 1024 a 656 px pri 820 × 1180. Roztiahnuť fotku nejde, orezali by sa
   jej boky a z troch obrazov by ostal prostredný. Preto ani tu nedržíme hero
   na celú obrazovku a necháme ho vysoké presne podľa obsahu.
   Hranica 5/4 je zvolená tak, aby sa nedotkla displejov na šírku:
   1024 × 768 má pomer 4/3 a počítač 1440 × 900 dokonca 1,6. */
@media (min-width: 761px) and (max-aspect-ratio: 5 / 4){
  .hero { height: auto; min-height: 0; }
  .hero__frame { grid-template-rows: auto auto; align-content: start; }
  .hero__media { height: auto; aspect-ratio: 2400 / 891; min-height: 0; max-height: none; }
}

@media (max-width: 760px){
  /* Fotka je pri plnej šírke vysoká len 211 px (16:9) a natiahnuť ju nejde —
     orezali by sa jej boky a z troch obrazov by ostal prostredný. Preto tu
     hero NEDRŽÍME na celú obrazovku: je vysoké presne podľa obsahu, inak by
     sa obsah vycentroval a nad fotkou by ostala prázdna diera. */
  .hero{
    height: auto;
    min-height: 0;
    padding-top: 4.5rem;              /* len toľko, aby fotka nebola pod navigáciou */
    padding-bottom: clamp(2rem, 6vh, 3rem);
  }
  .hero__frame { grid-template-rows: auto auto; align-content: start; }
  /* na telefóne ide neorezaná verzia, tá má pomer 16:9 */
  .hero__media { height: auto; aspect-ratio: 16 / 9; min-height: 0; max-height: none; }
  .hero__name { font-size: clamp(1.3rem, 6vw, 2rem); }
  /* tu fotka nesiaha po horný okraj, burger teda leží na kréme a musí byť tmavý */
  .nav__burger span { background: var(--red); }
}

.hero__scroll{
  position: absolute;
  left: 50%; bottom: clamp(1.5rem, 3vh, 2.5rem);
  transform: translateX(-50%);
  z-index: 3;
  width: 44px; height: 60px;
  display: grid; place-items: center;
}
.hero__scroll span{
  display: block; width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(81,29,16,0), rgba(81,29,16,.7));
  transform-origin: top;
  animation: scrollCue 2.6s var(--ease) infinite;
}
@keyframes scrollCue{
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  75%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(48px); opacity: 0; }
}

/* ---------- posúvanie po sekciách (slajdy) ---------- */
html { scroll-snap-type: y proximity; }

.hero,
.frame > section { scroll-snap-align: start; }

/* sekcia začína presne na hornom okraji, navigácia sa cez ňu prekrýva */
section[id] { scroll-margin-top: 0; }

/* Na mobile a tablete je hlavička pevná a plná — zakrývala by začiatok sekcie
   (nadpis „Kontaktný formulár" bol napoly pod ňou). Sekcia preto zastane tesne
   pod hlavičkou; jej presnú výšku dopĺňa skript do premennej --nav-h.
   Rovnakú hodnotu používa aj skok z menu, takže prichytávanie potom nepohne. */
@media (max-width: 980px){
  section[id] { scroll-margin-top: var(--nav-h, 4.5rem); }
}

/* Vizuálne sekcie majú výšku celej obrazovky, aby fungovali ako slajdy —
   ale len na počítači. Na telefóne je ich obsah nízky a pri vystredení by
   nad ním ostala prázdna diera (hero aj publikácie mali cez 200 px). */
@media (min-width: 761px){
  #publikacie { min-height: 100svh; }
}
/* Hero drží celú obrazovku len na displejoch na šírku. Na tablete na výšku
   by pod textom ostalo prázdno — fotka sa tam nemá ako natiahnuť, jej výšku
   určuje šírka okna. Viď výnimku pri .hero vyššie. */
@media (min-width: 761px) and (min-aspect-ratio: 5 / 4){
  .hero { min-height: 100svh; }
}
@media (max-width: 760px){
  #publikacie{
    min-height: 0;
    align-content: start;
    padding-block: clamp(2.5rem, 8vw, 3.5rem);
  }
}

/* obsah slajdu drží v strede výšky */
/* Tieto sekcie sú mriežka kvôli zvislému vycentrovaniu obsahu. V mriežke ale
   `margin-inline: auto` (z .panel--pad > *) vypne roztiahnutie a blok sa zmrští
   na šírku obsahu a vycentruje — nadpisy potom v každej sekcii začínali inde
   (72, 124 a 257 px). Preto im šírku určujeme výslovne. */
#publikacie > *,
#ako-to-prebieha > * { width: 100%; }
#publikacie{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}

/* ---------- Aj mimo môjho portfólia — titulky časopisov ----------
   Tri obálky vedľa seba. Zvislý formát 3:4 je bežný pomer titulnej strany
   časopisu; keď doplníte skutočné titulky, orežú sa naň. */
.press{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}
.press__item{
  overflow: hidden;
  background: var(--cream-2);
  box-shadow: 0 18px 40px rgba(81, 29, 16, .16);
  cursor: pointer;   /* kliknutím sa fotka otvorí na celú obrazovku */
}
.press__item img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* orez ťaháme k spodnému okraju, aby nápis VOGUE ostal v náhľade celý */
  object-position: 50% 100%;
  transition: transform 1.1s var(--ease), filter .7s var(--ease);
}
/* fotografia s nápisom VOGUE pri ľavom okraji — orez musí ísť sprava,
   inak by mriežka nápis odrezala */
.press__item--vlavo img { object-position: 0% 100%; }

/* rovnaké správanie ako v galérii: čiernobiele vždy a všade — aj na dotykových
   displejoch, kde myš neexistuje. Farbu fotka dostane buď pod myšou, alebo
   po kliknutí, keď sa otvorí na celú obrazovku (lightbox filter nemá). */
.press__item img { filter: grayscale(1); }
@media (hover: hover){
  .press__item:hover img { filter: grayscale(0); transform: scale(1.04); }
}
/* aj na telefóne zostávajú tri titulky vedľa seba — sú malé, ale hneď je
   vidieť, že ide o tri publikácie. Medzeru zmenšujeme, nech sú čo najväčšie. */
@media (max-width: 640px){
  .press { gap: .5rem; }
}

/* ---------- panel s fotkou vedľa textu (Ticho, O mne) ---------- */
.panel--split{
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  align-items: stretch;
}
.split__media { overflow: hidden; }
.split__media img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.split__body{
  padding: clamp(2.25rem, 4vw, 3.5rem) clamp(2rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.split__inset{
  width: min(100%, 270px);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.split__inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__text{
  color: var(--ink-2);
  max-width: 40ch;
  font-size: .92rem;
  margin-bottom: 1.5rem;
}
.split__sign{
  font-family: var(--display);
  font-size: 1.5rem;
  margin-top: .25rem;
}
.panel--flip .split__media { order: 2; }
.panel--flip .split__body  { order: 1; }

/* ---------- zlatá hodina ---------- */
.panel--clay{
  background: var(--cream);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, .4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad);
  align-items: center;
}
.clay__col{
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.clay__big { overflow: hidden; }
/* pomer 3:2 = presne pomer strán zdrojovej fotky, takže sa nič neoreže */
.clay__big img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.clay__body .display{
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.8rem);
  margin-bottom: 1rem;
}
.clay__body p{
  color: var(--ink-2);
  font-size: .92rem;
  margin-bottom: 1.5rem;
}

/* ---------- úvodný text sekcie ---------- */
.lead{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.lead__text { color: var(--ink-2); font-size: .92rem; max-width: 46ch; }
.lead__text + .lead__text { margin-top: 1rem; }


/* ---------- výstava Múzy — jediný červený pás na stránke ---------- */
.panel--red{
  background-color: var(--red);
  color: var(--cream);
}
.panel--red::before{
  content: "";
  position: absolute; inset: 0;
  background-image: var(--paper);
  background-size: 260px 260px, 620px 620px;
  mix-blend-mode: overlay;
  opacity: .9;
  pointer-events: none;
}
.panel--red .eyebrow { color: rgba(242, 235, 226, .72); }
.panel--red .lead__text { color: var(--on-red); }
.panel--red .vystava__sub { border-bottom-color: var(--on-red-ln); }
.panel--red .vystava__col p { color: var(--on-red); }

/* kroky a otázky na červenom podklade — béžové písmo */
.panel--red .steps__item { border-top-color: var(--on-red-ln); }
.panel--red .steps__num { color: var(--on-red-2); }
.panel--red .steps__item p { color: var(--on-red); }
.panel--red .link-arrow { color: var(--cream); }

.vystava{
  padding-top: clamp(3.25rem, 7vw, 7rem);
  display: grid;
  align-content: center;
}
.vystava__media { overflow: hidden; }
.vystava__media img { width: 100%; height: auto; }
.vystava__inner{
  max-width: 1680px;
  margin-inline: auto;
  padding: 0 var(--pad) clamp(2.5rem, 5vw, 4.5rem);
}
.vystava__head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.vystava__cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 4rem);
}
@media (max-width: 820px){ .vystava__cols { grid-template-columns: 1fr; } }
.vystava__sub{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .82rem;
  padding-bottom: .8rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.vystava__col p { color: var(--ink-2); font-size: .9rem; }
.vystava__col p + p { margin-top: 1rem; }
/* prvá veta stojí sama a je väčšia — nesie celú myšlienku */
.vystava__opener{
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem) !important;
  line-height: 1.45;
  color: var(--ink) !important;
  text-wrap: balance;
}

/* ---------- tri fotografie v jednom rade, zarovnané ---------- */
.trio{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.5rem);
}
.trio__item { overflow: hidden; }
.trio__item img{
  width: 100%;
  /* pevná výška = všetky tri sedia v jednej línii a zmestia sa na slajd */
  height: clamp(300px, 56svh, 720px);
  object-fit: cover;
}
@media (max-width: 560px){
  .trio { grid-template-columns: 1fr; }
  .trio__item img { aspect-ratio: 3 / 4; }
}

/* ---------- galéria ---------- */
/* mriežka — všetky dlaždice majú rovnaký pomer strán, takže rady sedia v línii */
.gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
/* Dva stĺpce až na telefóne. Na tablete zostávajú tri — pri dvoch stĺpcoch
   by boli fotky neúmerne veľké a sekcia by sa roztiahla cez pol obrazovky. */
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.gallery__item{
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.gallery__item.is-in { opacity: 1; transform: none; }
.gallery__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter .7s var(--ease);
}

/* tenký rámik, ktorý sa dokreslí až pri prejdení myšou */
.gallery__item::after{
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(242, 235, 226, .55);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

/* Čiernobiele sú vždy — na počítači, tablete aj telefóne. Farbu fotka dostane
   pod myšou, a na dotykových displejoch až po kliknutí, keď sa otvorí na celú
   obrazovku. Zväčšenie a rámik nechávame len myši, na dotyk by po ťuknutí
   ostávali visieť. */
.gallery__item img { filter: grayscale(1); }
@media (hover: hover){
  .gallery__item:hover img { filter: grayscale(0); transform: scale(1.06); }
  .gallery__item:hover::after { opacity: 1; }
}

.gallery__more { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.gallery__more[hidden] { display: none !important; }

/* ---------- tlačidlá ---------- */
.btn{
  display: inline-block;
  border: 0;
  padding: .95rem 2.2rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--solid { background: var(--clay); color: var(--cream); }
.btn--solid:hover { background: var(--ink); }
.btn--solid:disabled { opacity: .45; cursor: not-allowed; }
.btn--wide { width: 100%; }
#show-dates { justify-self: start; margin-top: .5rem; }

/* ---------- tmavý panel: kôň vpravo, text v prázdnom mieste vľavo ---------- */
.dark{
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  background: #0C0907;
  overflow: hidden;
}
.dark__media { position: absolute; inset: 0; }
.dark__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.dark--text-right .dark__media img { object-position: 26% 50%; }
.dark__body{
  position: relative;
  z-index: 2;
  color: var(--cream);
  width: min(42%, 560px);
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 6vw, 5rem) var(--pad);
}
.dark--text-right .dark__body{
  margin-left: auto;
  padding-left: 0;
  padding-right: var(--pad);
}
.dark__body .display { margin-bottom: 1.1rem; }
.dark__body p { color: rgba(242, 235, 226, .8); font-size: .95rem; max-width: 42ch; }
.dark__body p + p { margin-top: 1rem; }
.eyebrow--light { color: rgba(242, 235, 226, .6); }

@media (max-width: 820px){
  .dark { align-items: end; min-height: 620px; }
  .dark__media img { object-position: 62% 30%; }
  /* text dostane vlastný tmavý pás cez celú šírku, aby bol čitateľný
     a nekončil v polovici obrazovky */
  /* selektor je zámerne rovnako „silný" ako .dark--text-right .dark__body,
     inak by odsadenie zľava prebilo pravidlo pre počítač a text by sa lepil na okraj */
  .dark .dark__body{
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: 2.25rem var(--pad) 2.5rem var(--pad);
    background: rgba(12, 9, 7, .88);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-top: 1px solid rgba(242, 235, 226, .14);
  }
}

/* ---------- veľká fotka na výšku, text na druhej strane ---------- */
.portrait{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2.5rem, 5vw, 5rem) var(--pad);
}
.portrait__media { order: 2; overflow: hidden; }
.portrait__media img{
  width: 100%;
  height: clamp(400px, 76svh, 880px);
  object-fit: cover;
}
.portrait__body { order: 1; max-width: 46ch; }
.portrait__body .display { margin-bottom: 1.4rem; }
.portrait__body p { color: var(--ink-2); }
.portrait__body p + p { margin-top: 1rem; }
.portrait__body .link-arrow { margin-top: 1.75rem; }

@media (max-width: 900px){
  .portrait{
    grid-template-columns: 1fr;
    padding: clamp(2.5rem, 6vw, 4rem) var(--pad);
    gap: 2rem;
  }
  .portrait__media { order: 1; }
  .portrait__body { order: 2; max-width: none; }
  .portrait__media img { aspect-ratio: 3 / 4; }
}

/* ---------- 5. predel s efektom ---------- */
.band{
  margin-block: clamp(3rem, 7vw, 6.5rem);
  height: clamp(340px, 62vh, 620px);
  display: grid;
  /* text drží vľavo dole, kde je pozadie tmavé a voľné */
  place-items: end start;
}
.band__frame { position: absolute; inset: 0; overflow: hidden; }
.band__img{
  position: absolute; left: 0; top: -18%;
  width: 100%; height: 136%;
  object-fit: cover;
  will-change: transform;
}
.band::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(38, 24, 18, .55) 0%, rgba(38, 24, 18, .12) 45%, rgba(38, 24, 18, .08) 100%);
}
.band__quote{
  position: relative; z-index: 2;
  padding: 0 var(--pad) clamp(2rem, 4vw, 3.25rem);
  text-align: left;
  color: var(--cream);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: clamp(1.05rem, .85rem + .9vw, 1.55rem);
  line-height: 1.4;
  text-shadow: 0 2px 30px rgba(20, 12, 8, .6);
  max-width: 34ch;
}

@media (max-width: 640px){
  .band { place-items: center; }
  .band__quote { text-align: center; max-width: 20ch; }
}

/* ---------- vytlačené fotografie v červenom páse ----------
   Celá sekcia (nadpis + fotky + kroky) sa má zmestiť na jednu obrazovku,
   preto sú medzery viazané na výšku okna (vh), nie na jeho šírku. */
#ako-to-prebieha{
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding-block: clamp(2rem, 4vh, 3.5rem);
}
#ako-to-prebieha .lead { margin-bottom: clamp(.9rem, 2.2vh, 1.75rem); }

.polaroids{
  /* Zámerne `margin-block`, nie skratka `margin`. Skratka by prepísala aj bočné
     okraje na nulu a tým zrušila `margin-inline: auto` zo spoločného pravidla
     `.panel--pad > *` — fotky by sa prilepili o 91 px viac vľavo než nadpis
     a kroky pod nimi. */
  margin-block: 0 clamp(1rem, 2.5vh, 2rem);
}
.polaroids img{
  width: 100%;
  height: auto;
  /* fotka sa zmenší, keď je okno nízke — object-fit ju nechá v správnom pomere
     a vycentruje; okolo je priehľadné pozadie, takže to nie je vidieť */
  max-height: clamp(200px, 44svh, 540px);
  object-fit: contain;
}

/* ---------- kroky ---------- */
.steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps__item { border-top: 1px solid var(--line); padding-top: 1.35rem; }
.steps__num{
  display: block;
  font-family: var(--display);
  font-size: .95rem;
  color: var(--clay);
  letter-spacing: .14em;
  margin-bottom: .8rem;
}
.steps__item h3{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 1.02rem;
  margin-bottom: .55rem;
}
.steps__item p { color: var(--ink-2); font-size: .88rem; line-height: 1.7; }

/* ---------- FAQ ---------- */
/* Šírku tu zámerne NEURČUJEME — preberá ju spoločné pravidlo `.panel--pad > *`
   úplne hore. Kým tu stálo vlastné `max-width: 1680px`, bolo neskôr v súbore
   a spoločné pravidlo prebíjalo: Časté otázky ako jediná sekcia ostali široké
   cez celú stránku a začínali o 91 px viac vľavo než všetko ostatné. */
.faq__title{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  margin-bottom: 1.5rem;
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary{
  list-style: none; cursor: pointer;
  padding: 1.25rem 3rem 1.25rem 0;
  position: relative; font-size: .95rem;
  transition: color .3s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--clay); }
.faq__item summary::after{
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .45s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq__answer{
  padding: 0 3rem 1.5rem 0;
  color: var(--ink-2); font-size: .9rem; max-width: 62ch;
  animation: faqIn .5s var(--ease) both;
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 8. kontakt na fotke ---------- */
.panel--contact{
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) var(--pad);
  min-height: clamp(600px, 80vh, 900px);
}
.contact__media { position: absolute; inset: 0; }
/* fotka za formulárom je čiernobiela — pozadie nemá súťažiť s formulárom
   a krémová karta na šedom podklade vystúpi silnejšie než na farebnom */
.contact__media img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
}
/* Na úzkom displeji je zo širokej fotky vidieť len asi pätinu šírky. Silueta
   dievčaťa a koňa je až v pravej tretine, preto zaostrujeme doprava — inak by
   na mobile ostala na obrazovke len prázdna obloha. */
@media (max-width: 760px){
  .contact__media img { object-position: 80% 50%; }
}
.panel--contact::after{
  content: ""; position: absolute; inset: 0;
  background: rgba(38, 24, 18, .18);   /* fotka je silueta a sama tmavá — stačí jemné stlmenie */
}
.contact__card{
  position: relative; z-index: 2;
  background-color: var(--cream);
  background-image: var(--paper);
  background-blend-mode: multiply, multiply;
  background-size: 260px 260px, 620px 620px;
  width: min(100%, 540px);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.contact__card .display { margin-bottom: .9rem; }
.contact__lead { color: var(--ink-2); font-size: .88rem; margin-bottom: 1.75rem; }

/* ---------- formulár ---------- */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .4rem; }
.field label{
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
}
.field__opt { text-transform: none; letter-spacing: .02em; color: var(--ink-3); }
.field input, .field textarea{
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--line);
  padding: .6rem 0; font: inherit; color: var(--ink); border-radius: 0;
  transition: border-color .4s var(--ease);
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--clay); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #B4553F; }
.field__err { font-size: .74rem; color: #B4553F; line-height: 1.5; }
.field__err:empty { display: none; }
.field--msg { margin-top: .35rem; }

.form__hint { font-size: .88rem; color: var(--ink-2); }


.form__note { font-size: .72rem; color: var(--ink-3); line-height: 1.6; text-align: center; }
.form__status { margin-top: 1rem; font-size: .86rem; text-align: center; color: #B4553F; }
.form__status:empty { display: none; }

.form__done { text-align: center; padding: 1.5rem 0; animation: stepIn .7s var(--ease) both; }
.form__done-mark { font-size: 1.4rem; color: var(--clay); margin-bottom: 1rem; }
.form__done h3{
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.3rem; margin-bottom: .8rem;
}
.form__done p { color: var(--ink-2); font-size: .9rem; }

/* ---------- 9. veľký podpis ---------- */
.panel--mark{
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad) clamp(1.75rem, 3vw, 2.5rem);
  text-align: left;
  border-top: 1px solid var(--line-soft);
}
/* ———— SKORVAGOVA. ———————————————— */
.wordmark{
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.5vw, 2rem);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, .85rem + .55vw, 1.35rem);
  text-transform: lowercase;   /* logo sa píše všetko malým: skorvagova. */
  letter-spacing: .34em;
  color: var(--ink);
}
.wordmark span { white-space: nowrap; }
.wordmark::before,
.wordmark::after{
  content: ""; height: 1px; background: currentColor; opacity: .4;
}
.wordmark::before { width: clamp(2rem, 7vw, 6rem); flex: 0 0 auto; }
.wordmark::after  { flex: 1 1 auto; }

.wordmark__sub{
  margin-top: .9rem;
  font-size: .64rem; letter-spacing: .38em; text-transform: uppercase; color: var(--ink-3);
}
.wordmark__links{
  display: flex; justify-content: flex-start; gap: 2rem; flex-wrap: wrap;
  margin-top: 2.25rem;
}
.wordmark__links a{
  text-decoration: none; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 1px solid transparent; padding-bottom: .25rem;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.wordmark__links a:hover { color: var(--ink); border-bottom-color: var(--line); }
.wordmark__legal{
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: .68rem; color: var(--ink-3);
}

/* ---------- lightbox ---------- */
.lb{
  position: fixed; inset: 0; z-index: 150;
  background: rgba(30, 20, 14, .97);
  display: grid; place-items: center;
  padding: clamp(1rem, 5vh, 4rem) clamp(1rem, 8vw, 6rem);
  opacity: 0; transition: opacity .45s var(--ease);
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__figure { max-width: 100%; max-height: 100%; display: grid; place-items: center; }
.lb__figure img{
  max-width: 100%; max-height: 84svh; width: auto; object-fit: contain;
  opacity: 0; transition: opacity .5s var(--ease);
}
.lb__figure img.is-loaded { opacity: 1; }
.lb__close, .lb__nav{
  position: absolute; background: none; border: 0;
  color: rgba(242, 235, 226, .62); line-height: 1; z-index: 2;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.lb__close { top: clamp(.75rem, 3vh, 2rem); right: clamp(1rem, 4vw, 2.5rem); font-size: 2.2rem; width: 48px; height: 48px; }
.lb__nav { top: 50%; transform: translateY(-50%); font-size: 2.8rem; width: clamp(44px, 6vw, 64px); height: 84px; }
.lb__nav--prev { left: clamp(.25rem, 2vw, 1.5rem); }
.lb__nav--next { right: clamp(.25rem, 2vw, 1.5rem); }
.lb__close:hover { color: #fff; transform: rotate(90deg); }
.lb__nav--prev:hover { color: #fff; transform: translate(-4px, -50%); }
.lb__nav--next:hover { color: #fff; transform: translate(4px, -50%); }
.lb__count{
  position: absolute; bottom: clamp(1rem, 3vh, 2rem); left: 50%; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .28em; color: rgba(242, 235, 226, .5);
}
body.is-locked { overflow: hidden; }

/* ---------- odhaľovanie pri scrollovaní ---------- */
.reveal{
  opacity: 0; transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responzívne ---------- */
@media (max-width: 980px){
  .nav__links--left { display: none; }
  .nav__cta { display: none; }
  /* jazyk sa presúva do rozbaľovacieho menu, v lište naň nie je miesto */
  .nav__lang { display: none; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__logo { justify-self: start; }
  .nav__burger { display: flex; }

  .panel--split { grid-template-columns: 1fr; }
  .panel--flip .split__media, .panel--split .split__media { order: 1; }
  .panel--flip .split__body,  .panel--split .split__body  { order: 2; }
  .split__media img { min-height: 0; aspect-ratio: 4/3; }

  .lead { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 780px){
  .panel--clay { grid-template-columns: 1fr; }
}

/* ---------- galéria na telefóne ----------
   Štyri ukážky (2 × 2), bez sprievodného textu a s tlačidlom pod nimi,
   aby sa celá sekcia zmestila na jednu obrazovku. Počet fotiek (4 namiesto 6)
   sa nastavuje v js/main.js — cez CSS to nejde, inak by lightbox listoval
   aj fotky, ktoré na stránke nie sú vidieť. */
@media (max-width: 760px){
  /* pri formulári na telefóne fotku nedávame — ostáva čistý papierový podklad */
  .panel--contact .contact__media,
  .panel--contact::after { display: none; }
  .panel--contact { min-height: 0; }

  #galeria .lead__text { display: none; }
  #galeria .lead { margin-bottom: clamp(1.25rem, 4vw, 2rem); }
  #galeria .gallery__more { margin-top: clamp(1.25rem, 4vw, 2rem); }
}

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .gallery__item { opacity: 1; transform: none; }
}

@media print { .nav, .lb, .form, .band { display: none; } }

/* ---------- textová stránka (zásady ochrany údajov) ---------- */
.nav--solid{
  position: static;
  background-color: var(--cream);
  background-image: var(--paper);
  background-blend-mode: multiply, multiply;
  background-size: 260px 260px, 620px 620px;
  border-bottom: 1px solid var(--line-soft);
}
.nav--solid .nav__links a { color: var(--red); }

.doc{
  max-width: 62rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.doc .display--big { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.doc__lead{
  font-size: clamp(1rem, .92rem + .4vw, 1.2rem);
  line-height: 1.65;
  max-width: 60ch;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.doc h2{
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .82rem;
  color: var(--clay);
  margin: clamp(2rem, 4vw, 2.75rem) 0 .75rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line-soft);
}
.doc p { max-width: 68ch; color: var(--ink-2); margin-bottom: .9rem; line-height: 1.75; }
.doc p strong { color: var(--ink); font-weight: 500; }
.doc a { color: var(--ink); text-underline-offset: .25em; }
.doc__list { max-width: 68ch; margin-bottom: .9rem; }
.doc__list li{
  color: var(--ink-2); line-height: 1.75; margin-bottom: .7rem;
  padding-left: 1.1rem; position: relative;
}
.doc__list li::before{
  content: ""; position: absolute; left: 0; top: .75em;
  width: .4rem; height: 1px; background: var(--line);
}
.doc code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: var(--cream-2); padding: .1em .4em;
}
.doc__datum{ margin-top: clamp(2rem, 5vw, 3rem); font-size: .82rem; color: var(--ink-3); }