/* =========================================================================
   style.css — sdílený styl pro index.html, works.html, about.html.

   Typografie: jedine Inter pres celou aplikaci.
   - 400 (Regular)  — body text v about
   - 600 (SemiBold) — drobne labely a metadata (uppercase 0.12em tracking)
   - 700 (Bold)     — em accenty
   - 900 (Black)    — display: nav, page titles, contact lead/mail, logo
                      (uppercase, -0.04em tracking, s text-shadow glow)

   Barvy přes CSS proměnné — tmavý režim přepisuje jen ty.
   ========================================================================= */

/* ---- 1. BAREVNÉ PROMĚNNÉ ---- */

:root,
[data-theme="light"] {
  --bg:         #f3efe6;   /* pozadí – teplá smetanová, blíž paper feelu z inspirací */
  --bg-soft:    #ebe5d8;   /* jemně tmavší plocha */
  --text:       #14130f;   /* hlavní text – téměř černá s teplým podtónem */
  --text-soft:  #6a6359;   /* vedlejší text – warm grey */
  --line:       #d4cdbe;   /* vlasové linky */
  --accent:     #c14118;   /* terakota / burnt orange — shodne s logo_orange.png */
  --photo-frame:#e8e2d3;   /* jen jemně tmavší než bg, méně saturace — decentní paper rámeček */
}

[data-theme="dark"] {
  --bg:         #0e0d0b;
  --bg-soft:    #1a1916;
  --text:       #f0ece2;
  --text-soft:  #9b948a;
  --line:       #2a2722;
  --accent:     #c14118;   /* stejna terakota jako v light — sjednoceny odstin napric tematy */
  --photo-frame:#ece0c2;   /* stejný krém i v dark mode — vypada jako vytištěná fotka na stole */
}

/* ---- 2. RESET & ZÁKLAD ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* font smoothing – jemnější vykreslení písma na macOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  transition: background 0.4s ease, color 0.4s ease;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* Společné horizontální odsazení od okraje – stejný „grid container". */
.meta-bar,
.hero,
.featured,
.page-head,
.works,
.about,
.contact {
  padding-inline: 5vw;
}

/*
  Levy a pravy padding sekci s obsahem.

  --logo-text-offset: logo PNG ma vlevo cca 67 zdrojovych px transparentniho
  paddingu + jemneho glow halo, nez zacne plne neprusvitny text. Pri
  height: 4.8rem (76.8px) a aspect 1000/254 to vychazi na ~20px (~1.25rem)
  vykresleneho prazdneho prostoru pred prvnim glyfem. Logo SAMOTNE
  neposouvame (zachovava svuj puvodni canvas a glow); content posuneme
  doprava o tento offset, aby titul / text v sloupcich / leve hrany fotek
  v galerii zacinaly presne tam, kde zacina viditelny text loga.

  --nav-gap: jednotny gap v hp-baru. Pouziva se na dvou mistech:
    1) .hp-nav { gap: var(--nav-gap) }  → gap mezi Gallery a About
    2) .hp-bar--top { padding-right: calc(62px + var(--nav-gap)) }
       62px = toggle width (40) + right inset (22); pridavkem nav-gapu
       dosahneme stejneho gapu mezi About a toggle, jaky je Gallery→About.
  Sjednoceny vzorec: gap A↔B v nav baru je vsude --nav-gap pixelu.
  Content sekce sdileji stejny padding-right, aby leva hrana toggle
  ramcovala obsah symetricky.
*/
:root {
  --logo-text-offset: 1.25rem;
  --nav-gap: 32px;
}
.page-head,
.works,
.about {
  padding-left: calc(5vw + var(--logo-text-offset));
  padding-right: calc(62px + var(--nav-gap));
}

.dot { opacity: 0.5; padding: 0 0.4em; }

/* ---- 3. MIKROTYPOGRAFIE (labely) ----
   Sjednoceno na Inter pres celou aplikaci (puvodne JetBrains Mono pres
   tuto sdilenou rule). Homepage hp-meta tradi tuto typografii: Inter
   700 uppercase s 0.12em trackingem. */

.section-head,
.section-head__label,
.section-head__meta,
.page-head__meta,
.works__outro,
.contact__meta,
figcaption {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 600;
}

/* ---- 4. SECTION HEAD (společná hlavička sekce v about.html) ---- */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6vh;
}

/* ---- 5. PAGE HEAD (works.html, about.html) ----
   Menej dominantni nez puvodne — page-head ma „introduce sekci",
   ne byt vizualni anchor. Anchor stranky je porad LOGO v top baru
   (homepage konvence). Title je editorial Instrument Serif s mensimi
   rozmery a tighter padding. */

/*
  Bez max-width — sekce se na vsech sirkach zarovna na stejny levy rail
  (5vw od leve hrany viewportu), takze titul lici s logem v hp-baru.
  Driv tu bylo max-width: 1500 + margin-inline: auto, ale na sirsim okne
  to centrovalo titul do stredu (a logo zustavalo pri okraji) — vznikal
  nesoulad mezi logem a titulem.
*/
.page-head {
  padding-block: 6vh 4vh;
}

.page-head__top {
  display: grid;
  /*
    Auto-fit: kdyz je v page-head__top vic nez jeden child (about.html
    s meta column), grid se rozdeli 7fr 5fr. Kdyz je jen title (works.html),
    title zabira plnou sirku.
  */
  grid-template-columns: 7fr 5fr;
  gap: 4vw;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3vh;
}
.page-head__top:has(.page-head__title:only-child) {
  grid-template-columns: 1fr;
}

.page-head__title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1;
  /* Stejny tracking jako hp-link na homepage — vsechno bold uppercase
     Inter ma -0.04em pro „kompaktni cerny blok" charakter. */
  letter-spacing: -0.04em;
  margin: 0;
  text-transform: uppercase;
  /* Glow stejny jako hp-link nav — sjednoceny visual jazyk. */
  text-shadow:
    0 0 3px  rgba(0, 0, 0, 0.6),
    0 0 6px  rgba(0, 0, 0, 0.52),
    0 0 12px rgba(0, 0, 0, 0.42),
    2px 2px 18px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .page-head__title {
  text-shadow:
    0 0 3px  rgba(240, 236, 226, 0.55),
    0 0 6px  rgba(240, 236, 226, 0.46),
    0 0 12px rgba(240, 236, 226, 0.32),
    2px 2px 18px rgba(240, 236, 226, 0.22);
}
/*
  Akcentni em (napr. „Prague") — oranzova barva PLUS oranzovy glow.
  Bez tohoto override by em dedil text-shadow z .page-head__title
  (cerny/kremovy halo), ktery na oranzovem pisme vypada nepatricne.
  Stejna struktura vrstvy (3/6/12/18px) jako hp-link hover, ladi
  s globalnim akcentem #c14118 (light) / #e85a2a (dark).
*/
.page-head__title em {
  font-style: italic;
  font-weight: 900;
  color: var(--accent);
  text-shadow:
    0 0 3px  rgba(193, 65, 24, 0.7),
    0 0 6px  rgba(193, 65, 24, 0.6),
    0 0 12px rgba(193, 65, 24, 0.5),
    2px 2px 18px rgba(193, 65, 24, 0.35);
}
html[data-theme="dark"] .page-head__title em {
  text-shadow:
    0 0 3px  rgba(193, 65, 24, 0.7),
    0 0 6px  rgba(193, 65, 24, 0.6),
    0 0 12px rgba(193, 65, 24, 0.5),
    2px 2px 18px rgba(193, 65, 24, 0.35);
}

/*
  Modifier --mono: JetBrains Mono varianta pro works.html title.
  Bez glow, light weight (300), normal case (test-mode forsuje lowercase tak ci tak).
  Editorial mono accent — title pusobi „technicky", konzistentne s gallery
  cisly (01)-(12) ktere jsou taky v JetBrains Mono.
*/
.page-head__title--mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}
.page-head__title--mono em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
html[data-theme="dark"] .page-head__title--mono {
  text-shadow: none;
}

.page-head__meta {
  display: grid;
  gap: 6px;
  text-align: right;
  align-self: end;
  /* mikrotypografie se zdědí z výchozího mono pravidla */
}
.page-head__num {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.04em;
  margin-right: 8px;
}

/* ---- 10. WORKS — galerie ---- */

/*
  Bez max-width — galerie ma vlastni max-width 1300px a margin-inline auto,
  takze se centruje v ramci available width sama o sobe.
  Driv max-width: 1500 na .works pridavalo druhy level centrovani,
  ktery na sirsich oknech rozhazoval zarovnani s logem v hp-baru.
*/
.works {
  padding-block: 2vh 8vh;
}

/*
  Cisty 3-sloupcovy grid s drobnejsi mezerou (moodboard layout).
  Fotky maji nativni aspect-ratio 2/3 — zadny crop. Pod kazdou fotkou
  je drobne uppercase cislo (01-12).

  Galerie vyplni cely .works content box — bez max-width, bez margin-inline
  auto. Levy okraj fotek tak lici s 5vw railem (= text loga v hp-baru),
  pravy s padding-right .works (toggle reserve). Gap mezi fotkami zustava
  symetricky, takze cely grid pusobi vyvazene.

  Mezery: column-gap 3vw. row-gap je o vysku figcaption (cca 28px) MENSI,
  aby vizualni mezera mezi spodnim okrajem obrazku v 1. radu a hornim
  okrajem obrazku v 2. radu byla stejna jako horizontalni mezera mezi
  obrazky.
*/
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3vw;
  row-gap: calc(3vw - 28px);
  padding-block: 4vh 8vh;
}

.gallery__item {
  margin: 0;
}
.gallery__item a,
.gallery__item picture {
  display: block;
  overflow: hidden;
}
.gallery__item img {
  width: 100%;
  height: auto;
  /* Native aspect 2/3 (zdrojove fotky 1333x2000) — bez orezu. */
  aspect-ratio: 2 / 3;
  display: block;
  background: var(--bg-soft);
  cursor: pointer;
  filter: saturate(1.02);
  transition: transform 0.6s ease, opacity 0.3s, filter 0.4s ease;
}

/*
  Dark mode: galerie fotek desaturovane, na hoveru se vrati color.
  Konzistentni s chovanim na homepage (hp-photo).
*/
html[data-theme="dark"] .gallery__item img {
  filter: grayscale(1) saturate(1.02);
}
html[data-theme="dark"] .gallery__item:hover img {
  filter: grayscale(0) saturate(1.02);
}
.gallery__item:hover img { transform: scale(1.03); }

/*
  Caption pod fotkou — drobne mono cislo v zavorkach (01), zarovnane vlevo
  pri spodnim okraji obrazku. JetBrains Mono je editorial accent — jedine
  ne-Inter pismo v projektu, pouzite zamerne pro „technicky" feel cisel.
*/
.gallery__item figcaption {
  margin-top: 14px;
  text-align: left;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  text-transform: none;
}

.works__outro {
  margin-top: 8vh;
  text-align: right;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.works__outro a {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.works__outro a em { font-style: italic; }
.works__outro a:hover { color: var(--accent); border-color: var(--accent); }

/* ---- 11. ABOUT ----
   Dva sloupce: vlevo Approach + Equipment pod sebou,
   vpravo Contact (Instagram).
   Stejna sirka sloupcu, sirsi gap pro vzdusnost. */

/*
  Bez max-width — about__cols (max-width 1000) zacina na 5vw od leve hrany
  viewportu, tj. licuje s logem a s page-head titulem. Driv max-width: 1500
  + margin-inline auto centrovalo cely .about a content posuvalo do stredu
  na sirsich oknech.
*/
.about {
  padding-block: 2vh 8vh;
}

.about__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  max-width: 1000px;
  margin: 0 auto 0 0;
}

.about__col-title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 16px;
}
/* Modifier --spaced: dela extra mezeru nahore (mezi Approach a Equipment v levem sloupci). */
.about__col-title--spaced {
  margin-top: 32px;
}

.about__col p {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 40ch;
}
.about__col em {
  font-family: "Inter", system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
}

/* ---- 12. CONTACT ---- */

.contact {
  max-width: 1500px;
  margin-inline: auto;
  padding-block: 4vh 8vh;
}

/*
  Contact links — email + Instagram stacked vertikalne, kazdy big Inter
  Black 900 uppercase. Spodni akcentni (oranzovy) podtrh + glow na hoveru
  konzistentne s hp-link nav.
*/
.contact__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3vh;
}
.contact__link {
  display: inline-block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 6px;
  transition: color 0.2s, text-shadow 0.2s;
}
.contact__link em { font-style: italic; }
.contact__link:hover {
  color: var(--accent);
  text-shadow:
    0 0 3px  rgba(193, 65, 24, 0.7),
    0 0 6px  rgba(193, 65, 24, 0.6),
    0 0 12px rgba(193, 65, 24, 0.5);
}
html[data-theme="dark"] .contact__link:hover {
  text-shadow:
    0 0 3px  rgba(193, 65, 24, 0.7),
    0 0 6px  rgba(193, 65, 24, 0.6),
    0 0 12px rgba(193, 65, 24, 0.5);
}

/* ---- 13. LIGHTBOX (jen works.html) ---- */

.lightbox {
  position: fixed; inset: 0;
  background: rgba(10, 9, 8, 0.94);
  display: grid; place-items: center;
  padding: 4vw;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s;
  z-index: 100;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 20px; right: 28px;
  background: none; border: none; color: #fff;
  font-size: 2.4rem; line-height: 1; cursor: pointer;
  font-family: "Inter", sans-serif;
}
/*
  Cislo fotky v zavorkach v left-bottom rohu lightboxu.
  JetBrains Mono — konzistentni s gallery figcaptions.
*/
.lightbox__caption {
  position: absolute;
  bottom: 24px;
  left: 28px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(240, 236, 226, 0.7);
}

/* ---- 13B. HAMBURGER MENU (jen mobil) ----
   Tri-pruhovy button vpravo nahore + full-screen overlay panel s odkazy
   a theme prepinacem. Na desktopu je vse skryte (display: none); mobile
   media query (max-width 600px) zapne hamburger a skryje desktopovy nav
   + pill toggle. Otevirani / zavirani: js/main.js. */

/*
  Hamburger button — default skryty, mobil ho prepne na flex.
  Velikost 44x44 = doporuceny minimalni tap target (iOS HIG / WCAG 2.5.5).
  Pozice top: 11px na mobilu cili center buttonu (11+22=33) na center loga
  (hp-bar padding-top 14 + 2.4rem/2 = 33.2). Logo a hamburger jsou tak
  opticky na stejne vodorovne linii.
*/
.menu-toggle {
  display: none;             /* viz @media (max-width: 600px) */
  position: fixed;
  top: 11px;
  right: 14px;
  z-index: 11;               /* nad menu-panelem (z 9) i nad pill toggle (z 10) */
  width: 44px;
  height: 44px;
  padding: 13px 11px;        /* vnitrni okraje → bary v 22x18 oblasti */
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  /*
    Glow stejneho rytmu jako text-shadow u hp-linku — multi-vrstvy
    drop-shadow filtru, ktery respektuje tvar 3 pruhu (ne obdelnikovy
    bbox). 3 vrstvy: ostry close-up halo, sirsi mid-halo, jemny rozplyv.
  */
  filter:
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 5px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
  transition: filter 0.25s ease;
}
html[data-theme="dark"] .menu-toggle {
  filter:
    drop-shadow(0 0 2px rgba(240, 236, 226, 0.55))
    drop-shadow(0 0 5px rgba(240, 236, 226, 0.4))
    drop-shadow(0 0 10px rgba(240, 236, 226, 0.25));
}

.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.2s ease,
              background 0.25s ease;
}

/*
  Stav open (aria-expanded="true"): horni a spodni pruh se sklopi do X,
  prostredni zmizi. Translate odpovida spacingu mezi pruhy v 22x18
  bar area (~8px gap).
*/
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/*
  Hover / aktivni stav (tap na mobilu) — pruhy se zbarvi do akcentu
  a glow prejde do oranzove, stejna logika jako hp-link nav hover.
*/
.menu-toggle:hover .menu-toggle__bar,
.menu-toggle:active .menu-toggle__bar {
  background: var(--accent);
}
.menu-toggle:hover,
.menu-toggle:active {
  filter:
    drop-shadow(0 0 2px rgba(193, 65, 24, 0.7))
    drop-shadow(0 0 5px rgba(193, 65, 24, 0.55))
    drop-shadow(0 0 10px rgba(193, 65, 24, 0.4));
}

/*
  Menu panel — full-screen overlay s typografickym layoutem.
  position: fixed inset 0 = pres celou obrazovku. Velke uppercase odkazy
  vlevo, theme button pod nimi. Otevirani: aria-hidden=false → fade in.
*/
.menu-panel {
  display: none;             /* default; mobil zapne na flex */
  position: fixed;
  inset: 0;
  z-index: 9;
  background: var(--bg);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-inline: calc(5vw + var(--logo-text-offset));
  gap: 3vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s linear;
}
.menu-panel[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}
.menu-panel__link {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 13vw, 4.5rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease;
}
.menu-panel__link[aria-current="page"] {
  color: var(--accent);
}
.menu-panel__link:active,
.menu-panel__link:hover {
  color: var(--accent);
}
/* Theme prepinac uvnitr menu panelu — stejny pill switch jako --corner verze,
   pouze inline ve flow (margin-top 5vh via .toggle-switch--in-menu). */

/* ---- 14. SITE FOOTER ----
   Tenka paticka napric vsemi strankami — copyright vlevo, lokace vpravo.
   Pres tenkou top hairline. Konzistentni s pravidlem mikrotypografie
   (Inter SemiBold 0.85rem uppercase 0.12em).
   Na homepage (hp-body grid) sedi automaticky ve 3. radu gridu (auto vyska).
   Na works/about pripneme paticku na spodek viewportu pres flex column
   na body + margin-top: auto na footeru (sticky footer pattern). */

.site-footer {
  padding: 3vh 5vw;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/*
  Sticky footer pattern — body je flex sloupec s min vyskou viewportu;
  footer si vezme zbyly prostor pres margin-top: auto a pripne se ke spodku
  i kdyz je obsah stranky kratky. hp-body (homepage) ma vlastni grid layout
  a sticky footer nepotrebuje, proto :not(.hp-body).
*/
body:not(.hp-body) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body:not(.hp-body) .site-footer {
  margin-top: auto;
}

/* ---- 15. SELEKCE TEXTU ---- */

::selection {
  background: var(--accent);
  color: var(--bg);
}

/*
  Responzivni media queries jsou az na konci souboru (sekce 18) — viz tam.
  Duvod: nektere defaultni rules pro homepage prvky (.hp-logo, .hp-nav,
  .toggle-switch--corner v sekci 16) musi byt v souboru DRIVE nez @media
  override, jinak je default kvuli source order prebije i v mobilnim
  rezimu. Drzime tedy pravidlo "defaults first, overrides last".
*/

/* =========================================================================
   16. HOMEPAGE — Rue Studio layout
   Single-screen: žádné scrollování, fotky v jedné řadě uprostřed,
   tři rohové odkazy nahoře i dole, drobná metadata vlevo nahoře
   a vpravo dole.
   ========================================================================= */

/*
  hp-body je třída přímo na <body>. Zapíná:
  - výška 100vh, overflow hidden (žádné rolování)
  - grid 3 řady: top bar / obsah / bottom bar
*/
.hp-body {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--text);
}

/* ---- 16.1 Horní / dolní lišta s odkazy ---- */

.hp-bar {
  display: flex;
  justify-content: space-between;
  /*
    align-items: center = best practice pro nav bar s vyraznym logem +
    drobnymi labely. Labely a toggle se vertikalne srovnaji s CENTREM loga.
  */
  align-items: center;
  padding: 22px 5vw;
  z-index: 2;
}
/*
  Top bar — pravy padding sjednoceny pres --nav-gap, aby gap mezi About
  a toggle byl stejny jako gap mezi Gallery a About v navu.
  Vypocet: 62px (toggle 40 + inset 22) + var(--nav-gap).
*/
.hp-bar--top {
  padding-right: calc(62px + var(--nav-gap));
}

/*
  Nav vpravo — flex radek s gapem Gallery↔About == var(--nav-gap).
  Pravy okraj nav je dan padding-right rodice (.hp-bar--top), ktery
  reserve presne dost prostoru, aby gap About↔toggle byl identicky.
*/
.hp-nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.hp-link {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.08rem;             /* 0.72rem * 1.5 = +50 % */
  /*
    Vaha 900 (black) — sjednoceno s typografii loga: geometricky grotesk
    v plne cerne vaze. Drive bylo 700, ale logo je vyrazne tezsi.
  */
  font-weight: 900;
  /*
    Tracking vyrazne negativni — pisma v logu sedi tesne pri sobe, az se dotykaji.
    Drive bylo 0.14em (klasicky uppercase wide tracking), -0.04em dela kompaktni blok
    blizky tomu, jak je vysazena PNG verze loga.
  */
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--text);
  /*
    line-height: 1 = vyska radkovani = font-size, glyf zacina temer
    na top edge line-boxu. Default 1.55 (zdedeno z body) by pridal padding
    nad i pod glyf, kvuli kteremu by labely vizualne nepristaly na stejne
    horizontalni linii jako toggle (jeho top edge je presne v rohu).
  */
  line-height: 1;
  transition: color 0.2s, opacity 0.2s, text-shadow 0.2s;
}
.hp-link:hover { color: var(--accent); }
.hp-link--brand { font-weight: 900; } /* sjednoceno s ostatnimi linky */

/*
  Logo necham na puvodnim miste (hp-bar padding-left: 5vw) — viditelny text
  loga zacina na ~5vw + 1.25rem (vlevo v PNG je glow halo + transparentni
  padding). Zarovnani content textu s logem resime na druhe strane:
  .page-head / .about / .works maji padding-left: calc(5vw + 1.25rem),
  takze content lici s textem loga, ne s edge image canvasu.
*/

/*
  Glow / halo efekt na vsech cernych labelech (top i bottom bar).
  Logo PNG ma kolem pisma vyrazny difuzni halo se zlehka posunutim do prava-dolu;
  tady ho napodobujeme tremi vrstvami text-shadow:
   1) blizsi ostry halo (16px blur, sytost ~55 %)
   2) stredni s offsetem (drop-shadow charakter, ~28px blur, ~45 %)
   3) nejvzdalenejsi rozplyvajici se atmosfera (~50px blur, ~25 %)
  :not(.hp-link--brand) preskakuje odkaz s logem PNG (ten ma vlastni glow uvnitr obrazku).
  V tmavem rezimu invertujeme barvu glow na svetlou (stejna logika jako filter: invert(1) na logu).
*/
.hp-bar .hp-link:not(.hp-link--brand) {
  /*
    Vsechny vrstvy maji maly blur a sedi blizko pismen — glow je hustsi
    primo u kontury a do dalky se nerozplyva. Zadny dlouhy halo, zadne
    velke offsety. Posledni vrstva ma jemny posun 2/2px pro decentni
    drop-shadow charakter ladici s posunem v PNG verzi loga.
  */
  text-shadow:
    0 0 3px  rgba(0, 0, 0, 0.6),
    0 0 6px  rgba(0, 0, 0, 0.52),
    0 0 12px rgba(0, 0, 0, 0.42),
    2px 2px 18px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .hp-bar .hp-link:not(.hp-link--brand) {
  text-shadow:
    0 0 3px  rgba(240, 236, 226, 0.55),
    0 0 6px  rgba(240, 236, 226, 0.46),
    0 0 12px rgba(240, 236, 226, 0.32),
    2px 2px 18px rgba(240, 236, 226, 0.22);
}

/*
  Hover: text se barvi na accent → glow musi taky prejit do accent barvy,
  jinak by oranzova pisma mela tmavy halo a vypadalo by to nekonzistentne.
  Stejna struktura vrstvy (3/6/12/18px blur) jen rgba prepsano na oranzovou
  (#c14118 = rgb(193,65,24) v obou tematech — sjednoceny odstin).
  Text-shadow je v transition na .hp-link, zmena se plynule prelije.
*/
.hp-bar .hp-link:not(.hp-link--brand):hover {
  text-shadow:
    0 0 3px  rgba(193, 65, 24, 0.7),
    0 0 6px  rgba(193, 65, 24, 0.6),
    0 0 12px rgba(193, 65, 24, 0.5),
    2px 2px 18px rgba(193, 65, 24, 0.35);
}
html[data-theme="dark"] .hp-bar .hp-link:not(.hp-link--brand):hover {
  text-shadow:
    0 0 3px  rgba(193, 65, 24, 0.7),
    0 0 6px  rgba(193, 65, 24, 0.6),
    0 0 12px rgba(193, 65, 24, 0.5),
    2px 2px 18px rgba(193, 65, 24, 0.35);
}

/*
  Logo veprostred nahore/dole.
  Misto textu "Stepan" zobrazujeme transparentni PNG.
  Pro tmavy rezim mame samostatnou bilou verzi (logo_white.png) — driv jsme
  cerne logo invertovali pres filter: invert(1), ale puvodni glow v PNG se tim
  taky invertoval (svetly halo na okraji vypadal nepatricne). Vyhradni bila
  verze logo_white.png je rezana do stejneho 1000x251 canvasu jako cerna,
  takze swap je pixel-presny a nemeni layout.
*/
/*
  Wrapper kolem dvou stacked img: base v normalnim flow definuje rozmery,
  hover varianta je absolutne pozicovana pres ni a fade-uje opacity.
  Pres `content: url()` neumime animovat — proto stackujeme dva <img>
  a crossfadeujeme.
*/
.hp-logo-wrap {
  position: relative;
  display: block;
  line-height: 0;             /* odstrani spodni inline mezeru */
}
.hp-logo {
  display: block;
  /*
    Velky logo (4.8rem ~ 77px) jako vizualni anchor baru. Labely +
    toggle jsou vertical-centered relativne k jeho centru pres
    align-items: center na .hp-bar.
  */
  height: 4.8rem;
  width: auto;
  object-fit: contain;
  vertical-align: top;         /* zruseni inline-block baseline gap */
}
/*
  Base logo (cerne v light, bile v dark) ma transition opacity ladeny
  s overlay. Pri hoveru base mizi a oranzova overlay se zaroven objevuje.
  Bez tohoto fade-outu by v dark modu prosvital bily glow base PNG
  skrz polo-transparentni okraje oranzove overlay (anti-aliasing kolem pismen).
*/
.hp-logo--base {
  transition: opacity 0.25s ease;
}
.hp-link--brand:hover .hp-logo--base {
  opacity: 0;
}
/*
  Oranzova overlay — lezi pres base img, plnou opacity dostane pri hoveru
  na cely brand link. Transition opacity 0.25s ladi s prechodem barvy
  textovych labelu (About/Gallery).
*/
.hp-logo--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.hp-link--brand:hover .hp-logo--hover {
  opacity: 1;
}

/*
  V tmavem rezimu prepneme jen ZAKLADNI vrstvu na bilou (content: url() —
  instant swap pri prepnuti tematu). Vsechna tri loga (cerne/bile/cervene)
  jsou ted oriznuta identicky (1000x254, content bbox 11,4,987,254), takze
  swap je pixel-presny a netreba zadny kompenzacni offset.
*/
html[data-theme="dark"] .hp-logo--base {
  content: url("../images/logo_white.png");
}

/* ---- 16.1b TOGGLE SWITCH (prepinac dark mode) ----
   Klasicky pill toggle ve stylu iOS: oval „trat" + kruhovy handle, ktery se
   anim. posune zleva (light mode) doprava (dark mode). Uvnitr handle je
   moon LED ikona, ktera sviti — cervene v light, kremove v dark.
   Trat ma jemny inset stin (vypada zanorena do povrchu),
   handle ma raised stin pod sebou (vypada vystoupla nad). */

.toggle-switch {
  /*
    Zakladni vzhled pill switche. Pozice je odlozena do modifier trid:
      --corner = position: fixed v rohu (desktop)
      --in-menu = inline ve flow menu-panelu (mobil uvnitr hamburger menu)
    Tim muzeme mit dve instance ve stejnem DOM (jednu zobrazenou v rohu na
    desktop, druhou skrytou v zavrenem panelu na mobilu) a sdilet click
    handler pres class selektor v JS.

    position: relative — handle je absolute-positioned a potrebuje
    positioning context. Bez toho by se v --in-menu variante navazal na
    nejblizsiho positioned predka (menu-panel s position:fixed) a vyletel
    by ven z trati. --corner ma position:fixed (taky positioned), tam to
    nevadi, ale base musi mit relative pro --in-menu.
  */
  position: relative;
  width: 40px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 10px;            /* pill — radius = polovina vysky */
  /*
    Trat: var(--line) misto var(--text-soft) — splyva vic s okolnim pozadim
    (svetly bezovy v light, tmavy v dark). Slider tak nebije do oci, „bydli"
    v rohu jako tichy ovladaci prvek.
  */
  background: var(--line);
  cursor: pointer;
  /*
    Inset stin uvnitr trati — slabsi nez driv (0.25 -> 0.12), aby ladil
    s decentnejsi barvou trati a netvoril ostry kontrast.
  */
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  transition: background 0.25s ease;
}
.toggle-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/*
  Modifier --corner: position: fixed v top-right rohu (desktop layout).
  Vertikalne v centru radu hp-baru: bar row 77px vys (logo 4.8rem) +
  padding 22px → row center y = 22 + 77/2 = 60.5 → toggle (20px) top = 50.
*/
.toggle-switch--corner {
  position: fixed;
  top: 50px;
  right: 22px;
  z-index: 10;
}

/*
  Modifier --in-menu: pripnuty v levem hornim rohu menu panelu, vertikalne
  centrovany s hamburger ikonou (zrcadlovy roh).
    Hamburger: top 21 + 44/2 = 43 center y.
    Toggle (20 tall) center y = 43 → top = 43 - 10 = 33.
    Left: calc(5vw + --logo-text-offset) → lici s content railem (text logu).
  Pri zavrenem panelu (opacity 0 + visibility hidden) toggle neda kliknout
  ani videt, dokud uzivatel neotevre menu.
*/
.toggle-switch--in-menu {
  position: absolute;
  top: 33px;
  left: calc(5vw + var(--logo-text-offset));
}

/*
  Handle = kruhovy „posuvnik" v trati. Ma vlastni raised stin
  (mekky drop pod + tenkou outline), aby vypadal jako vystouply nad.
  Polohu mezi stavy menime pres transform: translateX
  (vypocet: width(40) - handle(16) - 2*padding(2) = 20px).
*/
.toggle-switch__handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);          /* handle ma barvu pozadi stranky — „prochazi" trati */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    /* hladky lesk top edge handle */
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    /* tenka outline pro definici tvaru */
    0 0 0 0.5px rgba(0, 0, 0, 0.12),
    /* mekky drop pod handle — raised feel */
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.18);
  /* Smooth slide + barvy zmena */
  transition:
    transform 0.28s cubic-bezier(0.4, 0.0, 0.2, 1),
    background 0.25s ease;
}

/* STAV: aria-pressed=true (dark mode aktivni) → handle vpravo. */
.toggle-switch[aria-pressed="true"] .toggle-switch__handle {
  transform: translateX(20px);
}

/*
  LED moon ikona uvnitr handle. Stejna logika jako u predchozi verze
  — light mode akcentni oranzova, dark mode kremove. drop-shadow filter
  dela halo kopirujici siluetu mesice (ne obdelnikovy bbox).
*/
.toggle-switch__icon {
  width: 9px;
  height: 9px;
  pointer-events: none;
  transition: filter 0.25s ease;
  /* Light mode (OFF stav) — oranzova s glow */
  filter:
    drop-shadow(0 0 2px rgba(193, 65, 24, 0.95))
    drop-shadow(0 0 5px rgba(193, 65, 24, 0.65))
    drop-shadow(0 0 10px rgba(193, 65, 24, 0.4));
}
.toggle-switch__icon path {
  fill: var(--accent);
  transition: fill 0.25s ease;
}

/* Dark mode (ON stav) — kremova s glow. */
.toggle-switch[aria-pressed="true"] .toggle-switch__icon path {
  fill: #fff5d8;
}
.toggle-switch[aria-pressed="true"] .toggle-switch__icon {
  filter:
    drop-shadow(0 0 2px rgba(255, 245, 216, 0.95))
    drop-shadow(0 0 6px rgba(255, 220, 160, 0.6))
    drop-shadow(0 0 12px rgba(255, 200, 120, 0.35));
}

/* ---- 16.2 Střední plocha (stage) – pruh fotek + plovoucí metadata ---- */

.hp-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding-inline: 0;         /* fotky můžou sahat až k okrajům viewportu */
  min-height: 0;             /* aby grid pracoval s 1fr výškou */
}

/*
  Pruh fotek — vodorovný flex.
  overflow-x: auto povoluje horizontální scroll (na trackpadu i myší).
  padding-block dává prostor pro hover scale, aby se zvětšená fotka
  nedotkla okrajů a nebyla oříznutá.
*/
.hp-strip {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 8vh;            /* prostor pro hover scale 1.35 */
  padding-inline: 0;             /* fotky až k okrajům viewportu */
  /* Smooth photo-by-photo snap při scrollování. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* Schování scrollbaru, aby pruh zůstal čistý. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /*
    Edge fade vignette — fotky na okrajích postupně mizí do pozadí.
    mask-image říká prohlížeči, kde má prvek vykreslit:
    - černá = plně viditelné
    - průhledná = neviditelné
    Lineární gradient od průhledné přes černou zpět k průhledné
    vytvoří plynulý vyblednutý okraj na obou stranách.
    -webkit-mask-image je fallback pro Safari.
  */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 2%,    /* uplne kraj zakryt */
    black 6%,          /* od 6 % plne viditelne */
    black 94%,
    transparent 98%,   /* a stejne tak na druhe strane */
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 2%,
    black 6%,
    black 94%,
    transparent 98%,
    transparent 100%
  );
}
.hp-strip::-webkit-scrollbar { display: none; }

.hp-photo {
  margin: 0;
  flex: 0 0 auto;
  /*
    Vsechny fotky stejne velke. Zoom samotne fotky resime pres transform: scale
    (NE pres width / margin) — width nebo margin by zmenily layout a vsechno
    napravo od fotky by se posunulo, vcetne te hovernute (margin-right leveho
    souseda fyzicky odtlaci hovernutou fotku doprava). Plus zmena layoutu
    triggeruje scroll-snap, ktery cely radek na zaver „doreze" do snap pozice
    — proto te divne post-zoom poskakovani.

    Resime to cele pres transform — transform NEMENI layout. Hovernuta fotka
    se scale-uje ze sveho stredu, sousedi se translate-uji do stran (viz nize),
    scroll-snap zustava ticho. Zadne layout shifty, zadny drift, zadny re-snap.
  */
  width: clamp(150px, 14vw, 230px);
  aspect-ratio: 2 / 3;            /* height se dopocita z width */
  overflow: hidden;
  background: var(--bg-soft);
  cursor: pointer;
  scroll-snap-align: center;
  position: relative;             /* aby z-index na hover fungoval */
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.4s ease;
}

/*
  Dark mode: vsechny fotky desaturovane do cernobile, na hoveru
  obnovi se barva. Tim hovered fotka „vyleti" jak velikosti (scale 1.35),
  tak barevnym kontrastem oproti sedi sousedu — vyrazne zaostri pozornost.
*/
html[data-theme="dark"] .hp-photo img {
  filter: grayscale(1);
}
html[data-theme="dark"] .hp-photo:hover img {
  filter: grayscale(0);
}
.hp-photo:hover {
  /* +35 % velikosti pres scale — fotka roste ze sveho stredu, neunasi se. */
  transform: scale(1.35);
  z-index: 5;                     /* zvetsena fotka jde nad sousedy */
  /*
    Uzky „polaroid" ramecek. Pres box-shadow (ne border), aby to nezmenilo
    rozmery a nezasahovalo do scale animace.
    --- DOCASNE VYPNUTO (kazi minimalismus) ---
    Pro znovuzapnuti odkomentuj radek nize. Promenna --photo-frame
    je dal definovana v :root a [data-theme="dark"], netreba nic dalsiho.
  */
  /* box-shadow: 0 0 0 12px var(--photo-frame); */
}

/*
  Sousedi se „rozdvoji" kolem zoomnute fotky pres transform: translateX.
  Vsichni vlevo se posunou doleva, vsichni vpravo doprava — efekt jako
  kdyby lupa rozhrnula radu. Pouziva se transform (NE margin), aby:
   - se nezmenil layout (zadne posunuti hovernute fotky),
   - se neretriggeroval scroll-snap (zadne post-zoom doreze).
  Push ~ pulka zvetseni fotky (0.35/2 * width) + 12px ramecek.

  :has(~ .hp-photo:hover)  = ja mam nekde napravo hovernuteho sourozence
                              → posunu se doleva
  .hp-photo:hover ~ .hp-photo = ja jsem napravo od hovernuteho sourozence
                              → posunu se doprava
*/
.hp-photo:has(~ .hp-photo:hover) {
  transform: translateX(calc(-1 * clamp(40px, 2.8vw, 55px)));
}
.hp-photo:hover ~ .hp-photo {
  transform: translateX(clamp(40px, 2.8vw, 55px));
}

/*
  Pojistka — pri hoveru vypneme scroll-snap na celem pruhu, aby browser
  nezacal nic „doreze-vat", i kdyby z nejakeho duvodu prece doslo k reflow.
*/
.hp-strip:has(.hp-photo:hover) {
  scroll-snap-type: none;
}

/* ---- 16.3 Plovoucí metadata bloky ---- */

.hp-meta {
  position: absolute;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.05rem;            /* 0.7rem * 1.5 = +50 % */
  font-weight: 700;
  /* Tighter tracking — pismena bliz sobe nez puvodnich 0.12em. */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.5;
  pointer-events: none;         /* aby překryv nerušil hover na fotkách */
}
.hp-meta__num { margin-bottom: 8px; }

/* Vlevo nahoře nad pruhem. */
.hp-meta--tl {
  top: 8%;
  left: 8vw;
}
/* Vpravo dole pod pruhem – zrcadlí Rue Studio. */
.hp-meta--br {
  bottom: 8%;
  right: 8vw;
  text-align: right;
}

/* ---- 16.4 Responzivní pro homepage ---- */

@media (max-width: 900px) {
  .hp-bar { padding: 16px 5vw; }
  .hp-meta { display: none; }            /* na malém okně by se překrývalo */
  .hp-photo       { width: clamp(120px, 18vw, 180px); }
  .hp-photo:hover { transform: scale(1.35); }   /* +35 % přes scale */
  .hp-strip { gap: 12px; padding-block: 4vh; }
}

@media (max-width: 600px) {
  .hp-stage { padding-inline: 0; }
  .hp-strip {
    -webkit-overflow-scrolling: touch;
    padding-block: 3vh;
  }
  /* Vetsi fotky pro mobil — z 140 na 180px aby byly citelnejsi. */
  .hp-photo { width: 180px; }

  /*
    Re-zobrazit "Selected Works…" caption pod stripem. Tablet @media
    (≤900px) vyse v souboru ho schoval pres .hp-meta { display: none }
    kvuli prekryvu s fotkami; mobil ma pod stripem dost vertikalniho
    prostoru, takze caption zase ukazujeme. Mensi font, posuvame blize
    k pravemu spodnimu rohu (5vw, 3vh).
  */
  .hp-meta--br {
    display: block;
    bottom: 3vh;
    right: 5vw;
    font-size: 0.75rem;
  }
  /*
    Touch zarizeni nemaji skutecny hover — tap na fotku trigerne :hover
    a fotka se zoom-ne pres scale(1.35). Strip ma vsak overflow-y: hidden
    a omezeny padding-block, takze zvetsena fotka se orize. Na mobilu
    proto hover scale vypneme.

    Stejne tak rusi sousedni translateX (rozhrnuti) — bez vyrazneho
    zoomnuti uprostred nedava efekt smysl.
  */
  .hp-photo:hover { transform: none; }
  .hp-photo:has(~ .hp-photo:hover),
  .hp-photo:hover ~ .hp-photo { transform: none; }
  .hp-link { font-size: 0.66rem; letter-spacing: 0.1em; }
}

/* =========================================================================
   17. TEST MODE — zkušební změny (snadno reverzibilní)
   Aktivuje se třídou `test-mode` na <body>.
   Pro vrácení původního stavu: smaž třídu v index.html a tento blok.

   - Všechen text lowercase
   - Plovoucí metadata „Selected Works…" v šedé (text-soft), zbytek zůstává černý
   - Vignette na okrajích pruhu fotek nahrazen postupným blur efektem
     (jako pohled přes zamlžené sklo)
   ========================================================================= */

/* Lowercase úplně všude uvnitř body.test-mode. */
.test-mode,
.test-mode * {
  text-transform: lowercase !important;
}

/*
  Vyjimka: akcentovany em v page-head titulu (napr. „Prague") si necha
  puvodni kapitalizaci z HTML — velke P pusobi jako vizualni dukaz,
  ze jde o vlastni jmeno mesta, ne jen popis.
*/
.test-mode .page-head__title em {
  text-transform: none !important;
}

/* Plovoucí metadata blocky ztlumíme do šedé a o 15 % zmenšíme. */
.test-mode .hp-meta {
  color: var(--text-soft);
  font-size: 0.89rem;             /* 1.05rem * 0.85 ≈ 0.89rem */
}

/* Černé odkazy v horní/dolní liště o 15 % větší — Contact / Gallery. */
.test-mode .hp-link {
  font-size: 1.24rem;             /* 1.08rem * 1.15 ≈ 1.24rem */
}

/* Vypneme vignette masku na pruhu — místo ní řešíme blur jako overlay. */
.test-mode .hp-strip {
  -webkit-mask-image: none;
  mask-image: none;
}

/*
  Blur overlay na okrajích pruhu fotek.
  Dva pseudo-elementy na .hp-stage:
  - position: absolute, sahají od horního ke spodnímu okraji stage
  - backdrop-filter: blur — rozmaže to, co je za nimi (tj. fotky)
  - mask-image gradient: na vnějším kraji efekt plný, dovnitř postupně mizí.
    Šířka 6 % odpovídá vignette, kterou jsme nahradili (mask 0–6 %).
  - pointer-events: none, aby nezablokovaly hover na fotky.
*/
.test-mode .hp-stage::before,
.test-mode .hp-stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11vw;                    /* širší pás — vyraznejsi „zamlzene sklo" */
  pointer-events: none;
  z-index: 6;                     /* nad zvětšenou fotkou (z-index: 5 na hover) */
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* Levý okraj — efekt plný vlevo, postupně mizí doprava. */
.test-mode .hp-stage::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, transparent 100%);
}

/* Pravý okraj — zrcadlově. */
.test-mode .hp-stage::after {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
  mask-image: linear-gradient(to left, black 0%, transparent 100%);
}

/* =========================================================================
   18. RESPONZIVNÍ — media queries
   Drzime na uplnem konci souboru, aby overrides spolehlive prebily
   defaultni rules definovane v sekcich 16 (HOMEPAGE) a drive. Pri equal
   specificity rozhoduje source order, takze pozdejsi @media vyhraje.
   ========================================================================= */

/* Tablet */
@media (max-width: 900px) {
  .page-head__top { grid-template-columns: 1fr; gap: 3vh; }
  .page-head__meta { text-align: left; }

  /* Tablet — gallery zachova 3 sloupce; vyrovnany visual gap. */
  .gallery {
    column-gap: 2.5vw;
    row-gap: calc(2.5vw - 26px);
  }

  .about__cols { grid-template-columns: 1fr; gap: 4vh; }
}

/* Mobil */
@media (max-width: 600px) {
  body { font-size: 15px; }

  /*
    Mobilni override --logo-text-offset. Logo zmenseno na 3.6rem (75 %
    desktop velikosti), takze offset viditelneho textu klesa proporcne
    (0.95rem misto desktop 1.25rem). Vypocet: 1.25rem * (3.6/4.8) = 0.94rem.
  */
  :root { --logo-text-offset: 0.95rem; }

  /*
    Logo na mobilu mensi nez 4.8rem desktop, ale dostatecne velke aby
    bylo citelne a tvorilo brand anchor. 3.6rem = 57.6px na vysku,
    image ~227px sirky → vejde se pohodlne vedle hamburgeru (44px)
    na 375px viewportu s breathing roomem ~70px.
  */
  .hp-logo { height: 3.6rem; }

  /*
    Hamburger top: prepocet vertikalniho srovnani s vetsim logem.
    hp-bar padding-top 14px + logo height 3.6rem (57.6px) / 2 = 42.8px
    → center hamburger buttonu (44px tall) na top = 42.8 - 22 = 20.8
    → top: 21px.
  */
  .menu-toggle { top: 21px; }

  /*
    Hamburger se zobrazi, desktopovy nav + corner pill toggle se schovaji.
    Pill toggle uvnitr panelu (.toggle-switch--in-menu) zustava — uzivatel
    ho vidi po otevreni hamburger menu. Top bar ma tedy na mobilu jen logo
    vlevo a hamburger button vpravo.
  */
  .menu-toggle { display: flex; }
  .menu-panel { display: flex; }
  .hp-nav { display: none; }
  .toggle-switch--corner { display: none; }

  /* hp-bar — uzsi vertikalni padding, symetricke vodorovne okraje. */
  .hp-bar { padding: 14px 5vw; }
  /*
    Padding-right na hp-bar--top uz neni potreba zvetsovat (corner toggle
    je skryty, hamburger je position: fixed mimo flow). Resetujeme zpet
    na 5vw, aby bar byl symetricky.
  */
  .hp-bar--top { padding-right: 5vw; }

  /*
    Content sekce — padding-inline symetricky na obou stranach,
    s offsetem pro logo text. Tim se 1-sloupcova galerie prirozene
    vycentruje a zaroven lici s textem loga na leve strane.
  */
  .page-head,
  .works,
  .about {
    padding-left: calc(5vw + var(--logo-text-offset));
    padding-right: calc(5vw + var(--logo-text-offset));
  }

  /*
    Page-head titul zmensit na mobil — clamp(2.4, 6vw, 5) by aktivovalo
    spodni mez 2.4rem na 375px viewportu, coz na uzkem contentu zalomi
    titul do mnoha radku. Snizujeme spodni mez a meritko.
  */
  .page-head__title {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }

  /*
    Mobil — gallery jeden sloupec. Pri 1fr neni column-gap relevantni,
    row-gap je vertikalni mezera mezi fotkami (a jejich figcaption).
    Padding na .works je symetricky → sloupec vyplnuje content box,
    ktery je sam o sobe vycentrovany.
  */
  .gallery {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 4vh;
  }
}