/*
Theme Name:  Betoon Production
Theme URI:   https://betoonproduction.com
Author:      Betoon Production
Description: Vlastná šablóna pre Betoon Production — video, foto, event produkcia v Bratislave.
Version:     1.0.0
Requires at least: 6.3
Tested up to: 6.7
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: betoon
*/

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }

/* ── SKIP LINK ─────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  padding: 0.5rem 1.2rem;
  background: var(--accent); color: #000; font-weight: 700;
  border-radius: 4px; z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ── FOCUS VISIBLE ─────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ── SCREEN-READER ONLY ────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #0a0a0a;
  color: #d8d8d8;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* the OS cursor stays on by default; JS only hides it once the custom
   cursor has actually attached, so a script error or disabled JS never
   leaves a visitor with no visible pointer at all */
body.cursor-ready { cursor: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  /* --muted is ~5:1 against --bg (WCAG AA needs 4.5:1) — it's used for real
     content (nav links, event card text, footer, form labels), not just
     decoration, so it needs to stay readable, not just "look" muted */
  --accent:   #E8971A;
  --accent-h: #f0a830;
  --bg:       #0a0a0a;
  --bg-alt:   #111111;
  --surface:  #141414;
  --border:   #1c1c1c;
  --text:     #d8d8d8;
  --muted:    #808080;
  --muted-l:  #888;
  --white:    #ffffff;
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
#cursor {
  position: fixed;
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease),
              background 0.3s, border 0.3s, opacity 0.25s,
              border-radius 0.3s var(--ease), padding 0.3s var(--ease);
}
#cursor.hovering {
  width: 40px; height: 40px;
  background: transparent;
  border: 1.5px solid var(--accent);
}
#cursor.labeled {
  width: auto; height: auto;
  padding: 13px 20px;
  border-radius: 999px;
  background: rgba(10,10,10,0.65);
  border: 1.5px solid var(--accent);
  backdrop-filter: blur(8px);
}
#cursor-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff;
  white-space: nowrap; opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
#cursor.labeled #cursor-label { opacity: 1; }
#cursor.hidden { opacity: 0; }
@media (hover: none) {
  #cursor { display: none; }
  body, button, a, input, select, textarea { cursor: auto; }
  button { cursor: pointer; }
}

/* ── NAV ───────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  transition: background 0.4s, border-color 0.4s, transform 0.35s var(--ease);
}
nav.nav-hidden { transform: translateY(-100%); }

#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 301;
  height: 3px; width: 0%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(232,151,26,0.6);
  transition: width 0.1s linear;
  pointer-events: none;
}
nav.scrolled {
  background: rgba(10,10,10,0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 0.9rem; font-weight: 700;
  color: var(--white); letter-spacing: -0.01em;
  z-index: 302;
}
.nav-logo img { height: 32px; }
.nav-links { display: flex; gap: 2.2rem; position: relative; }
.nav-links a {
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); transition: color 0.2s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a.hl { color: var(--accent); }
.nav-links a.hl:hover { color: var(--accent-h); }
.nav-links a.nav-active { color: var(--white); }
.nav-ink {
  position: absolute; bottom: -6px; height: 2px;
  background: var(--accent); border-radius: 1px;
  transition: left 0.4s var(--ease), width 0.4s var(--ease), opacity 0.3s;
  opacity: 0; pointer-events: none;
}

/* hamburger */
.burger {
  display: none; flex-direction: column;
  justify-content: center; gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none;
  cursor: pointer; padding: 6px; z-index: 302;
}
.burger span {
  display: block; height: 1.5px;
  background: var(--white); border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.3s, width 0.3s;
}
.burger span:nth-child(2) { width: 60%; }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; width: 100%; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* full-screen nav overlay */
.nav-overlay {
  position: fixed; inset: 0; z-index: 301;
  background: rgba(8,8,8,0.97);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.4rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* visibility is the actual on/off switch (guards against a closed,
     opacity:0 full-viewport layer ever painting over content beneath it);
     opacity only drives the fade — delay hiding until the fade finishes,
     but flip visible immediately when opening */
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.nav-overlay.open { opacity: 1; visibility: visible; pointer-events: all; transition-delay: 0s; }
.nav-overlay a {
  font-size: clamp(2.2rem, 7vw, 5rem);
  font-weight: 800; color: var(--muted-l);
  letter-spacing: -0.03em; line-height: 1.15;
  transition: color 0.2s, transform 0.6s var(--ease), opacity 0.6s var(--ease);
  transform: translateY(24px); opacity: 0;
}
.nav-overlay.open a { transform: translateY(0); opacity: 1; }
.nav-overlay.open a:nth-child(1) { transition-delay: 0.06s; }
.nav-overlay.open a:nth-child(2) { transition-delay: 0.1s; }
.nav-overlay.open a:nth-child(3) { transition-delay: 0.14s; }
.nav-overlay.open a:nth-child(4) { transition-delay: 0.18s; }
.nav-overlay.open a:nth-child(5) { transition-delay: 0.22s; }
.nav-overlay.open a:nth-child(6) { transition-delay: 0.26s; }
.nav-overlay a:hover { color: var(--white); }
.nav-overlay a.hl { color: var(--accent); }
.nav-overlay a.hl:hover { color: var(--accent-h); }
.nav-overlay a.nav-active { color: var(--white); font-weight: 700; }

/* ── HERO ──────────────────────────────────────────────────── */
#domov {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
.hero-left {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 9rem 2.5rem 5rem;
  z-index: 1;
}
.hero-right {
  position: relative; overflow: hidden;
  clip-path: inset(0 0 100% 0);
  animation: imgReveal 1.4s var(--ease) 0.1s both;
}
@keyframes imgReveal { to { clip-path: inset(0 0 0% 0); } }
.hero-right img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  filter: brightness(0.55) saturate(0.8);
}
.hero-right::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--bg) 0%, transparent 35%),
              linear-gradient(to top, var(--bg) 0%, transparent 20%);
}

/* hero text: curtain line reveal */
.hero-eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  animation: fadeUp 0.8s var(--ease) 0.1s both;
}
.hero-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--accent);
}
.hero-title {
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  font-weight: 900; color: var(--white);
  letter-spacing: -0.04em; line-height: 1.06;
  margin: 1.2rem 0 1.8rem;
}
.hero-title .hl { color: var(--accent); }
.tline { overflow: hidden; display: block; padding-bottom: 0.1em; margin-bottom: -0.06em; }
.tline-inner { display: block; animation: lineUp 1s var(--ease) both; }
.tline:nth-child(1) .tline-inner { animation-delay: 0.2s; }
.tline:nth-child(2) .tline-inner { animation-delay: 0.32s; }
.tline:nth-child(3) .tline-inner { animation-delay: 0.44s; }
@keyframes lineUp { from { transform: translateY(112%); } }

.hero-body {
  font-size: 0.95rem; color: var(--muted-l);
  max-width: 440px; line-height: 1.8; margin-bottom: 2.5rem;
  animation: fadeUp 0.9s var(--ease) 0.55s both;
}
.hero-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem;
  animation: fadeUp 0.9s var(--ease) 0.65s both;
}
.hero-stats {
  display: flex; gap: 3rem;
  margin-top: 4.5rem; padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  animation: fadeUp 0.9s var(--ease) 0.75s both;
}
.stat-val {
  font-size: 2.2rem; font-weight: 800;
  color: var(--white); letter-spacing: -0.04em; line-height: 1;
}
.stat-val sup { font-size: 1.1rem; color: var(--accent); vertical-align: super; }
.stat-label {
  font-size: 0.65rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted-l); margin-top: 0.35rem;
}
.scroll-cue {
  position: fixed; bottom: 2rem; z-index: 140;
  left: calc(50% - 14px);
  color: var(--muted-l); width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  animation: cue-bounce 2s ease-in-out infinite;
  transition: opacity 0.6s;
}
.scroll-cue.hidden { opacity: 0; pointer-events: none; animation: none; }
.scroll-cue svg { width: 22px; height: 22px; }
@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--accent); color: #000;
  padding: 0.9rem 2rem; border-radius: 2px;
  font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
}
.btn:hover { background: var(--accent-h); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,151,26,0.25); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-ghost {
  background: transparent; color: var(--muted-l);
  border: 1px solid rgba(255,255,255,0.28); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--white); background: transparent; box-shadow: none; }
.btn-ghost:active { transform: translateY(0); }

/* ── MARQUEE ───────────────────────────────────────────────── */
.marquee-section {
  padding: 2.8rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.marquee-track {
  display: flex; gap: 3.5rem; align-items: center;
  width: max-content;
  animation: marquee 24s linear infinite;
}
.marquee-section:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track img {
  height: 32px; width: auto; max-width: 100px;
  object-fit: contain; flex-shrink: 0;
  filter: grayscale(1) brightness(1.8) contrast(0.7);
  opacity: 0.4;
  transition: opacity 0.3s, filter 0.3s;
}
.marquee-track img:hover { opacity: 0.9; filter: grayscale(0) brightness(1); }

/* ── SCROLL REVEAL ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

.sh { overflow: hidden; display: block; padding-bottom: 0.1em; margin-bottom: -0.06em; }
.sh-inner { display: block; transform: translateY(112%); transition: transform 1s var(--ease); }
.sh.in .sh-inner { transform: translateY(0); }

/* word-split headings: JS wraps words in .word spans */
.heading .sh-inner { transform: none; transition: none; }
.heading .word { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--ease); }
.heading .sh.in .word { transform: translateY(0); }

.clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); }
.clip-reveal.in { clip-path: inset(0 0 0% 0); }

/* stagger helper */
.stagger .reveal:nth-child(1) { transition-delay: 0s; }
.stagger .reveal:nth-child(2) { transition-delay: 0.07s; }
.stagger .reveal:nth-child(3) { transition-delay: 0.14s; }
.stagger .reveal:nth-child(4) { transition-delay: 0.21s; }
.stagger .reveal:nth-child(5) { transition-delay: 0.28s; }
.stagger .reveal:nth-child(6) { transition-delay: 0.35s; }
.stagger .reveal:nth-child(7) { transition-delay: 0.42s; }
.stagger .reveal:nth-child(8) { transition-delay: 0.49s; }

/* ── SECTIONS ──────────────────────────────────────────────── */
.section { position: relative; padding: 7rem 2.5rem; }
.section-alt { background: var(--bg-alt); }
.container { max-width: 1160px; margin: 0 auto; }

/* ── SECTION DIVIDERS ──────────────────────────────────────── */
.s-divider { line-height: 0; display: block; }
.s-divider svg { display: block; width: 100%; height: 72px; }
.s-divider--to-alt { background: var(--bg-alt); }
.s-divider--to-dark { background: var(--bg); }
.s-divider--to-alt polygon { fill: var(--bg); }
.s-divider--to-dark polygon { fill: var(--bg-alt); }

.eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.67rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.2rem;
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--accent); }

h2.heading {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900; color: var(--white);
  letter-spacing: -0.04em; line-height: 1.06;
  margin-bottom: 1.4rem;
}
.lead {
  font-size: 0.97rem; color: var(--muted-l);
  max-width: 560px; line-height: 1.8;
  margin-bottom: 4rem;
}

/* ── SERVICES ──────────────────────────────────────────────── */
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
}
.service-card {
  padding: 2rem 1.6rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: background 0.3s;
}
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.service-card:hover { background: var(--surface); }
.service-card:hover::before { transform: scaleX(1); }
.svc-num {
  font-size: 2rem; font-weight: 900;
  letter-spacing: -0.04em; color: var(--accent);
  opacity: 0.2; line-height: 1;
  margin-bottom: 1.2rem;
  transition: opacity 0.3s;
}
.service-card:hover .svc-num { opacity: 0.6; }
.svc-title {
  font-size: 0.95rem; font-weight: 700;
  color: var(--white); margin-bottom: 0.55rem; line-height: 1.3;
}
.svc-text { font-size: 0.82rem; color: var(--muted-l); line-height: 1.7; }

/* ── PROCESS ───────────────────────────────────────────────── */
.process-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden; margin-bottom: 5rem;
}
.process-item {
  background: var(--bg-alt); padding: 2rem 1.6rem;
  display: flex; gap: 1.2rem;
  transition: background 0.3s;
}
.process-item:hover { background: var(--surface); }
.process-n {
  font-size: 2rem; font-weight: 900;
  color: var(--accent); opacity: 0.18;
  line-height: 1; flex-shrink: 0; min-width: 2.4rem;
  letter-spacing: -0.04em;
  transition: opacity 0.3s;
}
.process-item:hover .process-n { opacity: 0.4; }
.process-text { font-size: 0.84rem; color: var(--muted-l); line-height: 1.7; }

/* ── VIDEO ─────────────────────────────────────────────────── */
.video-grid {
  display: flex; overflow-x: auto; overflow-y: hidden; gap: 1rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  padding-bottom: 1.25rem;
  scrollbar-width: thin; scrollbar-color: var(--accent) var(--border);
  cursor: grab;
}
.video-grid:active { cursor: grabbing; }
.video-grid::-webkit-scrollbar { height: 3px; }
.video-grid::-webkit-scrollbar-track { background: var(--border); border-radius: 2px; }
.video-grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
.video-wrap {
  flex: 0 0 420px; scroll-snap-align: start;
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border-radius: 2px; background: var(--surface);
  border: 1px solid var(--border);
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.video-placeholder img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.video-placeholder::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.42);
  transition: background 0.3s;
}
.video-placeholder:hover::before { background: rgba(0,0,0,0.25); }
.video-play {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: none;
  display: flex; align-items: center; justify-content: center;
  color: #111;
  transition: transform 0.25s var(--ease), background 0.2s;
}
.video-play:hover { transform: scale(1.12); background: var(--accent); }
.video-play svg { margin-left: 3px; }

/* ── GALLERY ───────────────────────────────────────────────── */
.gallery-wrap { max-width: 1400px; margin: 0 auto; padding: 0 2.5rem; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 160px; gap: 6px;
}
.gi { overflow: hidden; border-radius: 3px; cursor: pointer; }
/* .gi clips overflow, which can clip a regular outline — use an inset
   box-shadow instead so the keyboard focus ring is never cut off */
.gi:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }
.gi img.blurring {
  filter: blur(4px); transform: scale(1.04);
  transition: filter 0.35s ease, transform 0.35s ease;
  will-change: filter;
}
.gi img.loaded { filter: none; transform: scale(1); }
.gi img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) brightness(0.82);
  transition: transform 0.7s var(--ease), filter 0.5s;
  /* while lazy-loaded images are still loading (or if one fails), browsers
     render the alt text inside the image box as fallback content — push it
     out of view rather than removing the attribute, so it stays readable to
     screen readers but doesn't visually sit on top of the photo */
  text-indent: 100%; white-space: nowrap; overflow: hidden;
}
/* hover-only zoom/dim polish: on touch, an element with :hover styles but no
   matching hover *event* often needs a first tap just to apply :hover and a
   second to actually click through — keep these off touch so a single tap
   reliably opens the lightbox */
@media (hover: hover) and (pointer: fine) {
  .gi:hover img { will-change: transform; transform: scale(1.05); filter: saturate(1) brightness(1); }
}

/* class-based spans (used by standalone index.html) */
.gi.c8  { grid-column: span 8; }
.gi.c4  { grid-column: span 4; }
.gi.c6  { grid-column: span 6; }
.gi.c5  { grid-column: span 5; }
.gi.c7  { grid-column: span 7; }
.gi.c3  { grid-column: span 3; }
.gi.r2  { grid-row: span 2; }

/* dynamic galleries (desktop/tablet): CSS columns masonry — natural aspect
   ratios, no fixed row height. column-fill:balance asks the browser to
   balance column heights instead of just filling column 1 completely
   before moving to column 2; a JS-based reflow (distributing .gi into
   explicit column wrappers by estimated height) was tried here and reverted
   — it caused the gallery to disappear entirely at some window widths and
   wasn't worth the risk for what's a cosmetic imbalance at worst. */
.gallery-grid--photos,
.gallery-grid--events {
  display: block;
  columns: 4;
  column-gap: 6px;
  column-fill: balance;
  grid-template-columns: unset;
  grid-auto-rows: unset;
}
.gallery-grid--photos .gi,
.gallery-grid--events .gi {
  break-inside: avoid;
  margin-bottom: 6px;
  grid-column: unset;
  grid-row: unset;
  cursor: pointer;
}
.gallery-grid--photos .gi img,
.gallery-grid--events .gi img {
  height: auto;
  object-fit: unset;
}

/* gallery isolation: dim siblings on parent hover (pointer-capable devices only, see above) */
@media (hover: hover) and (pointer: fine) {
  .gallery-grid--photos .gi.in,
  .gallery-grid--events .gi.in { transition: opacity 0.35s; }
  .gallery-grid--photos:hover .gi.in,
  .gallery-grid--events:hover .gi.in { opacity: 0.25; }
  .gallery-grid--photos .gi.in:hover,
  .gallery-grid--events .gi.in:hover { opacity: 1; }
}

/* ── LIGHTBOX ──────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(4,4,4,0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.lightbox.open { opacity: 1; visibility: visible; pointer-events: all; transition-delay: 0s; }
.lightbox .lb-img {
  /* leaves room below for .lb-counter (and .lb-caption, on photos that have
     one), which sit in normal flex flow now rather than absolutely
     positioned at a fixed distance from the viewport bottom — that fixed
     offset could land inside a tall image's own bottom edge and overlap it,
     since the image is only bounded by vh, not by how much space the
     caption underneath actually needs. Most photos have no custom caption,
     so the default only reserves enough room for the counter; .has-caption
     (added by JS when a photo does have one) reserves more. */
  max-width: min(90vw, 1200px); max-height: 85vh;
  object-fit: contain; display: block;
  transform: scale(0.95);
  transition: transform 0.4s var(--ease), opacity 0.25s;
  border-radius: 2px;
}
.lightbox.has-caption .lb-img { max-height: 76vh; }
.lightbox.open .lb-img { transform: scale(1); }
.lb-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 44px; height: 44px;
  background: none; border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted-l); font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.lb-close:hover { border-color: var(--accent); color: var(--accent); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  background: none; border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted-l); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}
.lb-nav:hover { border-color: var(--accent); color: var(--accent); }
.lb-prev { left: 1.2rem; }
.lb-next { right: 1.2rem; }
@media (max-width: 680px) {
  .lb-prev { left: 0.5rem; }
  .lb-next { right: 0.5rem; }
  .lb-nav { width: 40px; height: 40px; }
}
.lb-caption {
  margin-top: 1rem;
  font-size: 0.82rem; color: rgba(255,255,255,0.55); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(80vw, 800px); text-align: center;
  pointer-events: none;
}
.lb-counter {
  margin-top: 0.4rem;
  font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em;
  pointer-events: none;
}

/* ── SCROLL TO TOP ─────────────────────────────────────────── */
.scroll-top {
  position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 9997;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); opacity: 0; pointer-events: none;
  transition: opacity 0.3s, color 0.2s, border-color 0.2s;
}
.scroll-top.visible { opacity: 1; pointer-events: all; }
.scroll-top:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 680px) { .scroll-top { bottom: 6rem; right: 1rem; } }

/* ── EVENT CARDS ───────────────────────────────────────────── */
.event-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden; margin-bottom: 3.5rem;
}
.event-card {
  background: var(--bg-alt); padding: 2.5rem 2rem;
  display: flex; gap: 1.5rem; align-items: flex-start;
  transition: background 0.3s;
}
.event-card:hover { background: var(--surface); }
.event-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1rem;
  transition: border-color 0.3s;
}
.event-card:hover .event-icon { border-color: var(--accent); }
.event-card-title { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.4rem; }
.event-card-text  { font-size: 0.83rem; color: var(--muted); line-height: 1.65; }

/* ── CONTACT ───────────────────────────────────────────────── */
.contact-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 6rem; }
.cform { display: flex; flex-direction: column; gap: 0.55rem; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.cform input,
.cform select,
.cform textarea {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 2px; color: var(--text);
  padding: 0.9rem 1rem; font-size: 0.84rem;
  font-family: inherit; width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.cform input::placeholder,
.cform textarea::placeholder { color: var(--muted); }
.cform select {
  color: var(--muted); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 15px;
  padding-right: 2.6rem;
}
.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,151,26,0.1), 0 4px 16px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.cform textarea { min-height: 130px; resize: vertical; }
.cform .f-invalid { border-color: #e84040 !important; }
.f-err { font-size: 0.75rem; color: #e84040; margin-top: 0.3rem; }
.f-err-server { font-size: 0.8rem; color: #e84040; margin-top: 0.6rem; }
.f-consent { font-size: 0.72rem; color: var(--muted); line-height: 1.5; margin-top: 0.2rem; }
.cform select.has-value { color: var(--text); }
.form-success {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; padding: 3.5rem 1rem; text-align: center;
}
.form-success svg { color: var(--accent); }
.form-success h3 { font-size: 1.3rem; font-weight: 700; color: var(--white); }
.form-success p { color: var(--muted-l); }

.cinfo { display: flex; flex-direction: column; gap: 2.4rem; }
.ci-label {
  font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted); margin-bottom: 0.3rem;
}
.ci-val { font-size: 1rem; color: var(--white); font-weight: 500; }
.ci-val a { color: var(--white); transition: color 0.2s; }
.ci-val a:hover { color: var(--accent); }
.ci-val { position: relative; }
.copy-toast {
  position: absolute; top: -2rem; left: 0;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--accent); pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
}
.copy-toast.show { opacity: 1; transform: translateY(0); }
.ci-sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.7; }
hr.divider { border: none; border-top: 1px solid var(--border); margin: 0.5rem 0; }

/* ── FOOTER ────────────────────────────────────────────────── */
footer {
  background: #070707; border-top: 1px solid var(--border);
  padding: 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.2rem;
}
.foot-copy { font-size: 0.76rem; color: var(--muted); line-height: 1.9; }
.foot-copy strong { color: #444; display: block; }
.foot-social { display: flex; gap: 0.8rem; }
.foot-social a {
  width: 44px; height: 44px; border: 1px solid var(--border);
  border-radius: 2px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: color 0.2s, border-color 0.2s;
}
.foot-social a:hover { color: var(--accent); border-color: var(--accent); }

/* ── SHARED FADE ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── MOBILE FLOATING CTA ───────────────────────────────────── */
.mobile-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  height: 62px;
  background: var(--bg-alt); border-top: 1px solid var(--border);
  padding: 0.75rem 1.2rem;
  align-items: center; justify-content: center;
  flex-wrap: nowrap;
}
.mobile-cta-link {
  width: 100%; height: 100%;
  background: var(--accent); color: #000; border-radius: 2px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-width: 0; overflow: hidden;
}
.mobile-cta-link svg { flex-shrink: 0; }
.mobile-cta-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; }
  .gi.c8 { grid-column: span 6; }
  .gi.c4 { grid-column: span 3; }
  .gi.c6 { grid-column: span 6; }
  .gi.c5 { grid-column: span 3; }
  .gi.c7 { grid-column: span 3; }
  .gi.c3 { grid-column: span 3; }
  .gallery-grid--photos,
  .gallery-grid--events { columns: 3; }
}

@media (max-width: 960px) {
  #domov {
    grid-template-columns: 1fr;
    /* background-image set dynamically via PHP inline style; prefer the
       smaller --hero-bg-url-mobile size over the full desktop image */
    background-image: var(--hero-bg-url-mobile, var(--hero-bg-url, none));
    background-size: cover; background-position: center 20%;
  }
  #domov::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.72) 100%);
  }
  .hero-left { padding: 7.5rem 2rem 4rem; position: relative; z-index: 1; }
  .hero-right { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-wrap { grid-template-columns: 1fr; gap: 3.5rem; }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; }
  .gi.c8,.gi.c6 { grid-column: span 4; }
  .gi.c4,.gi.c5,.gi.c7,.gi.c3 { grid-column: span 2; }
  .gallery-grid--photos,
  .gallery-grid--events { columns: 2; }
}

@media (max-width: 680px) {
  nav { padding: 0 1rem; height: 56px; }
  html { scroll-padding-top: 56px; }
  .nav-links { display: none; }
  .burger { display: flex; }

  .gallery-wrap { padding: 0 1rem; }
  /* CSS multi-column ("columns") masonry has long-standing WebKit bugs with
     tap hit-testing in non-first columns — real touches on a phone can miss
     or hit the wrong element there even though clicks work fine in every
     desktop test. Use a plain 2-column grid on mobile instead: it trades the
     organic masonry heights for reliable taps, which matters more here. */
  .gallery-grid--photos,
  .gallery-grid--events {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    columns: unset;
    gap: 6px;
  }
  .gallery-grid--photos .gi,
  .gallery-grid--events .gi {
    break-inside: unset;
    margin-bottom: 0;
  }
  .gallery-grid--photos .gi img,
  .gallery-grid--events .gi img {
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  .mobile-cta { display: flex; }
  /* on many phones the hero's own content (title, body, buttons, stats) is
     already taller than the viewport, so anything placed after it — fixed
     or in normal flow — ends up below the fold, which defeats the point of
     a "scroll for more" hint. Touch users don't need one anyway; drop it
     here and keep it desktop-only, where the hero actually fits and it
     serves a clearer purpose. */
  .scroll-cue { display: none; }
  body { padding-bottom: 62px; }

  .section { padding: 4rem 1rem; }
  .lead { margin-bottom: 2.5rem; }

  .hero-left { padding: 5.5rem 1rem 3rem; }
  .hero-title { font-size: clamp(2.4rem, 10vw, 4rem); }
  .hero-eyebrow { font-size: 0.62rem; }
  .hero-body { font-size: 0.9rem; margin-bottom: 2rem; }
  /* the hero is taller than one mobile screen, so by the time you scroll to
     the stats the title/buttons above (and the plain border-top divider) have
     already scrolled out of view — give the block its own visible container
     so the numbers still read as a clear, intentional group on their own */
  .hero-stats {
    gap: 1.4rem; flex-wrap: wrap; margin-top: 2.5rem; padding: 1.3rem 1.2rem;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 4px;
  }
  .stat-val { font-size: 1.7rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; text-align: center; padding: 1rem; }

  .services-grid { grid-template-columns: 1fr; }
  .process-grid  { grid-template-columns: 1fr; }
  .event-grid    { grid-template-columns: 1fr; }
  .cform-row     { grid-template-columns: 1fr; }
  .video-wrap    { flex: 0 0 85vw; }

  .stagger .reveal { transition-delay: 0s !important; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 3px; }
  .gi.c8,.gi.c6,.gi.c5,.gi.c7,.gi.c4,.gi.c3 { grid-column: span 2; }
  .gi.r2 { grid-row: span 1; }
  /* dynamic galleries: stay 2 columns on mobile */
  /* opacity-only: a translateY transform on a masonry column child (.gi sits
     inside a CSS `columns` layout) hits a WebKit bug where later columns can
     mis-hit-test taps against the pre-transition box, so taps land on the
     wrong element or nothing at all — most visible as "second column doesn't
     open" since that's the first non-first column on a 2-up mobile grid */
  .clip-reveal { clip-path: none; opacity: 0; transition: opacity 0.7s var(--ease); }
  .clip-reveal.in { opacity: 1; }

  .cform input,
  .cform select,
  .cform textarea { font-size: 1rem; padding: 0.85rem 0.9rem; }

  .event-card { padding: 1.6rem 1.2rem; gap: 1rem; }
  .cinfo { gap: 1.8rem; }
  footer { flex-direction: column; align-items: flex-start; padding: 2rem 1rem; gap: 1rem; }
}

@media (max-width: 390px) {
  .hero-title { font-size: clamp(2rem, 9.5vw, 2.8rem); }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 190px; }
  .gi.c8,.gi.c6,.gi.c5,.gi.c7,.gi.c4,.gi.c3 { grid-column: span 1; }
  .gallery-grid--photos,
  .gallery-grid--events { grid-template-columns: 1fr; }
  .gallery-grid--photos .gi img,
  .gallery-grid--events .gi img { aspect-ratio: 4 / 3; }
  .section { padding: 3.5rem 1rem; }
}

/* ── WORDPRESS ADMIN BAR OFFSET ────────────────────────────── */
@media screen and (min-width: 601px) {
  .admin-bar nav { top: 32px; }
}
@media screen and (max-width: 600px) {
  .admin-bar nav { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal   { opacity: 1; transform: none; }
  .sh-inner { transform: none; }
  .heading .word { transform: none; }
  .sh, .tline { padding-bottom: 0; margin-bottom: 0; }
  .clip-reveal { clip-path: none; opacity: 1; transform: none; }
  .tline-inner { transform: none; }
  .hero-right  { clip-path: none; }
  .marquee-track { animation: none; }
}