/* ==========================================================================
   TopPrádielko — landing page
   Rebuilt as static HTML/CSS from the Claude Design prototype.
   Desktop-first: base styles target >=1200px, media queries step down.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --gold-light: #f1d79a;
  --gold: #d6b36e;
  --gold-deep: #eab44a;
  --gold-grad: linear-gradient(115deg, #f1d79a, #d6b36e 55%, #eab44a);

  --surface-1: #171512;
  --surface-2: #1c1a17;
  --surface-3: #141210;
  --black: #0c0c0c;

  --text: #d0cabf;
  --text-2: #cbc5ba;
  --text-3: #c4bfb4;
  --muted: #a49d90;
  --white: #fff;

  --serif: 'Bodoni Moda', Georgia, serif;
  --sans: 'Jost', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1400px;
  --gutter: 56px;
  --section-y: 110px;

  --hairline: linear-gradient(90deg, transparent, var(--gold), transparent);

  /* Lattice tile size — the single source of truth. main.js reads this to space
     the diagonal glints (one per 5th lattice line), so changing it here keeps
     the pattern and the glints in step. */
  --deco-tile: 96px;

  /* Edge fade for the patterned sections. Applied as a MASK, not as an overlay
     painted in the background colour — the deco sections do not share one
     background (#1c1a17 vs #0c0c0c on the booking section), so a colour overlay
     would have to be re-tinted per section and would drift on any bg change. */
  --deco-fade: radial-gradient(ellipse 62% 62% at 50% 50%,
                 #000 0%, #000 32%, rgba(0,0,0,0) 92%);

  --deco: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3E%3Cg%20fill='none'%20stroke='%23d6b36e'%20stroke-width='0.7'%3E%3Cpath%20d='M32%200%20L64%2032%20L32%2064%20L0%2032%20Z'/%3E%3C/g%3E%3Cg%20fill='%23eab44a'%3E%3Ccircle%20cx='32'%20cy='0'%20r='1.6'/%3E%3Ccircle%20cx='64'%20cy='32'%20r='1.6'/%3E%3Ccircle%20cx='32'%20cy='64'%20r='1.6'/%3E%3Ccircle%20cx='0'%20cy='32'%20r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}

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

/* overflow-x on the root reliably clips the off-canvas panel while it sits
   off-screen right (body's overflow-x does not clip position:fixed children,
   which caused a horizontal scrollbar to flash on load) */
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: hidden; }

/* --------------------------------------------------------- scrollbar ------ */
/* Solid gold, client-specified: #e8d29a static, #e0b65f on hover. No gradient. */
/* Firefox: only width + colours are supported (no radius, no hover) */
html {
  scrollbar-width: thin;
  scrollbar-color: #e8d29a var(--black);
}
/* WebKit / Blink (Chrome, Edge, Safari) */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-button { display: none; }   /* no up/down arrow buttons */
*::-webkit-scrollbar-track { background: var(--black); }
*::-webkit-scrollbar-thumb {
  background: #e8d29a;                   /* static */
  border-radius: 999999px;              /* pill */
}
*::-webkit-scrollbar-thumb:hover { background: #e0b65f; }   /* hover */
*::-webkit-scrollbar-corner { background: var(--black); }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.3px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--gold); text-decoration: none; transition: color 250ms ease; }
a:hover { color: var(--gold-light); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; margin: 0; }

p { margin: 0; }

ul { list-style: none; margin: 0; padding: 0; }

button { font: inherit; color: inherit; cursor: pointer; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #22201e; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ utilities -- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 900px; }
.center { text-align: center; }

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-size: 11.5px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

/* eyebrow with gold hairlines either side (hero) */
.eyebrow-flanked {
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.eyebrow-flanked::before,
.eyebrow-flanked::after {
  content: ""; height: 1px; width: 70px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow-flanked::after { background: linear-gradient(90deg, var(--gold), transparent); }

.hairline { height: 1.5px; background: var(--hairline); }

/* gradient border card — strongest at bottom-right */
.card {
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(135deg, rgba(214,179,110,0.03) 30%, rgba(214,179,110,0.55)) border-box;
}

/* faint chesterfield lattice + slow diagonal shimmer */
.deco { position: relative; }
.deco::before,
.deco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.deco::before {
  background-image: var(--deco);
  background-size: var(--deco-tile) var(--deco-tile);
  opacity: 0.072;          /* 40% down from 0.12 */
}

/* both the lattice and the glint layer fade out towards the section edges */
.deco::before,
.deco-glints {
  -webkit-mask-image: var(--deco-fade);
          mask-image: var(--deco-fade);
}

/* Diagonal glints. One thin line per 5th lattice diagonal, each travelling
   ALONG its own diagonal — adjacent lines run opposite ways.
   They must be finite lines: an infinite stripe always reads as moving
   perpendicular to itself (barber-pole illusion), so a sliding repeating
   gradient can never look like diagonal travel.
   The elements are generated in main.js — count and spacing depend on the
   section size, and one pseudo-element cannot produce a whole set.
   No blur: the brief is a thin crisp line, and 30+ blurred layers would each
   force their own compositing layer for nothing. */
.deco { overflow: hidden; }
/* the glint layer is excluded — it must stay absolute and behind the content */
.deco > *:not(.deco-glints) { position: relative; z-index: 1; }

/* section-anchored wrapper so the edge-fade mask does not travel with the
   moving glints (a mask set on each line would slide along with it) */
.deco-glints {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.deco-glint {
  position: absolute;
  top: 50%; left: 50%;
  height: 1px;
  width: var(--len, 380px);
  margin: 0 0 0 calc(var(--len, 380px) / -2);
  background: linear-gradient(90deg,
    rgba(241,215,154,0)    0%,
    rgba(241,215,154,0.05) 58%,
    rgba(241,215,154,0.17) 86%,
    rgba(255,242,205,0.38) 97%,
    rgba(255,242,205,0)    100%);
  pointer-events: none;
  z-index: 0;
  animation: diagGlint var(--dur, 11s) linear infinite;
  animation-delay: var(--delay, 0s);
}

/* rotate(45deg) points the bar's local +X down-right, so the default run is
   "falling". Reversing it makes the line rise instead — adjacent lines alternate. */
.deco-glint.is-up { animation-direction: reverse; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  padding: 17px 38px;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 2.6px; text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease, border-color 250ms ease;
  text-align: center;
}

.btn-gold { background: var(--gold-grad); color: #22201e; }
.btn-gold:hover { color: #22201e; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(214,179,110,0.22); }

.btn-outline { border-color: rgba(214,179,110,0.55); color: var(--gold); background: transparent; }
.btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-2px); }

.btn-sm { padding: 12px 26px; font-size: 11.5px; letter-spacing: 2.2px; }

.btn-text {
  font-size: 12.5px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--text-2); border-bottom: 1px solid rgba(214,179,110,0.5); padding-bottom: 4px;
}
.btn-text:hover { color: var(--gold-light); border-color: var(--gold-light); }

/* Sheen sweeping along the BOTTOM edge only — a comet with a fading tail.
   Two layers travelling together: ::before is a wide blurred halo, ::after the
   thin bright core. The gradient is dark at the left and peaks near the right,
   so the bright head leads and the tail trails off into nothing.
   Sized in % of the button so it scales with any button width.
   overflow:hidden clips it to the pill, so it slides in and out along the curve. */
.btn-sheen { position: relative; overflow: hidden; }

.btn-sheen::before,
.btn-sheen::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -34%;
  width: 34%;
  pointer-events: none;
  animation: btnSheen 7s linear infinite;
}

/* soft halo — scaled down with the core so the whole streak stays fine */
.btn-sheen::before {
  height: 3px;
  background: linear-gradient(90deg,
    rgba(255,240,200,0)    0%,
    rgba(255,240,200,0.08) 50%,
    rgba(255,240,200,0.40) 90%,
    rgba(255,240,200,0)    100%);
  filter: blur(2px);
}

/* bright core */
.btn-sheen::after {
  height: 1.5px;
  background: linear-gradient(90deg,
    rgba(241,215,154,0)    0%,
    rgba(241,215,154,0.18) 45%,
    rgba(255,245,215,0.80) 88%,
    rgba(255,255,240,1)    97%,
    rgba(255,255,240,0)    100%);
}

/* --------------------------------------------------------------- header -- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 300ms ease, backdrop-filter 300ms ease, box-shadow 300ms ease;
}
.site-header.is-stuck {
  background: rgba(12,12,12,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(214,179,110,0.18);
}
/* NOTE: backdrop-filter is removed on mobile (see the <=1023 block). It makes
   the header a containing block for the fixed off-canvas panel, which iOS Safari
   then sizes to the header height instead of the viewport — clipping the menu
   after the page has been scrolled. There is no off-canvas on desktop, so the
   blur is kept there only. */

.header-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 26px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 66px; height: auto; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 23px; color: var(--white); line-height: 1; }
.brand-sub { font-size: 10px; font-weight: 500; letter-spacing: 4.5px; text-transform: uppercase; color: var(--gold); }

.primary-nav { display: flex; align-items: center; gap: 34px; }
.primary-nav a { font-size: 13px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--text-2); }
.primary-nav a:hover { color: var(--gold-light); }
.primary-nav .btn { color: #22201e; }
/* off-canvas-only parts: hidden in the desktop header row */
.nav-close, .nav-contact, .nav-scrim { display: none; }

/* hamburger — hidden on desktop.
   Hairline bars in stepped widths, right-aligned so they read as a cascade.
   The 44px box stays for the tap target; only the bars are small. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0;
  flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 5px;
  transition: opacity 250ms ease;
}
/* hidden once the off-canvas is open — the panel's X and the scrim close it */
body.nav-open .nav-toggle { opacity: 0; pointer-events: none; }
.nav-toggle span {
  display: block; height: 1px; background: var(--gold);
  transition: width 300ms cubic-bezier(0.22,0.8,0.3,1),
              transform 300ms cubic-bezier(0.22,0.8,0.3,1),
              opacity 200ms ease, background 250ms ease;
}
.nav-toggle span:nth-child(1) { width: 26px; }
.nav-toggle span:nth-child(2) { width: 20px; }
.nav-toggle span:nth-child(3) { width: 14px; }

/* hover levels the cascade out */
.nav-toggle:hover span { width: 26px; background: var(--gold-light); }
/* no open-state morph: the off-canvas panel has its own close X, and the
   hamburger sits under the scrim once the menu is open */

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  isolation: isolate;      /* contains the overlay's multiply blend */
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Flat black multiply at 30%, as specified. isolate keeps the blend inside the
   hero so it darkens the photo only, never the sections behind it. */
.hero-overlay {
  position: absolute; inset: 0;
  background: #000;
  mix-blend-mode: multiply;
  opacity: 0.6;
}
.hero-content {
  position: relative; z-index: 1;
  max-width: 820px; padding: 140px var(--gutter) 90px;
  text-align: center;
  animation: fadeUp 0.9s cubic-bezier(0.22,0.8,0.3,1) both;
}
/* The gold heading is background-clipped, so a plain text-shadow can't sit under
   it. drop-shadow on the element casts off the glyph shapes instead — it keeps
   the letters legible where the photo runs light (the pale wall on the left)
   without touching the photo or the multiply overlay. */
.hero h1 {
  font-size: 65px; line-height: 1.08; margin: 0 0 26px;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.55));
}
.hero-lead {
  font-size: 18px; font-weight: 300; line-height: 1.8; color: var(--text);
  margin: 0 auto 40px; max-width: 640px; text-wrap: pretty;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.hero .eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- trust -- */
.trust {
  background: var(--surface-1);
  border-top: 1.5px solid transparent; border-bottom: 1.5px solid transparent;
  border-image: var(--hairline) 1;
}
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 18px; padding-block: 26px; }
.trust-inner img { width: 34px; height: auto; flex: none; }
.trust-inner p { font-size: 11.5px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--text-3); text-align: center; }

/* -------------------------------------------------------------- pillars -- */
.pillars { background: var(--surface-1); padding-block: var(--section-y); }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pillar { padding: 52px 40px; text-align: center; }
.numeral { display: block; font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--gold); margin-bottom: 18px; }
.pillar h3 { font-size: 26px; margin-bottom: 18px; }
.pillar p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--text-2); text-wrap: pretty; }

/* ---------------------------------------------------- split (2-col) ------ */
.split { background: var(--surface-2); padding-block: var(--section-y); }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.split-body h2 { font-size: 46px; line-height: 1.15; margin-bottom: 26px; }
.split-body p { font-size: 16.5px; font-weight: 300; line-height: 1.85; color: var(--text-2); margin-bottom: 20px; text-wrap: pretty; }
.split-body .btn { margin-top: 14px; }

/* circular photo with offset gold ring behind it */
.ring-figure { position: relative; margin: 0; display: flex; justify-content: center; }
/* height:auto is required — without it the img's height="" attribute acts as a
   presentational hint, both axes become definite and aspect-ratio is ignored. */
.circle-photo {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px; height: auto; aspect-ratio: 1;
  border-radius: 50%; object-fit: cover;
}
.ring {
  position: absolute; z-index: 0;
  width: min(100%, 440px); aspect-ratio: 1;
  top: 34px; left: 50%; transform: translateX(calc(-50% + 34px));
  border: 1px solid rgba(214,179,110,0.45);
  border-radius: 50%;
}
.ring-glow {
  position: absolute; inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(241,215,154,0.95) 18deg, transparent 40deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: ringGlow 7s linear infinite;
}

/* gap must clear the gold ring, which sits ~34px below the photo, or the
   caption overlaps it (worst on desktop) */
.ring-figure.has-caption { flex-direction: column; align-items: center; gap: 54px; }
.figure-caption { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.cap-title { font-family: var(--serif); font-size: 20px; color: var(--gold-light); }
.cap-sub { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }

.photo-placeholder {
  display: grid; place-items: center;
  background: var(--surface-3);
  border: 1px dashed rgba(214,179,110,0.35);
  color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; text-align: center;
}

/* stats + analog clock */
.stats { display: flex; gap: 64px; margin-top: 44px; flex-wrap: wrap; }
/* each stat is a centred column so the number+clock row sits centred over its
   label instead of hanging off its left edge */
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-top { display: flex; align-items: center; gap: 14px; }
.stat-num { font-family: var(--serif); font-size: 52px; line-height: 1; }
.stat-label { display: block; margin-top: 8px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }

.clock {
  position: relative; width: 46px; height: 46px; flex: none;
  border: 1px solid rgba(214,179,110,0.5); border-radius: 50%;
}

/* the rotor carries the big hand AND its trail so they sweep together */
.clock-rotor {
  position: absolute; inset: 0;
  animation: clockBig 5.2s cubic-bezier(0.45,0,0.2,1) infinite;
}

/* radar-style conic trail: gold at the hand, fading to transparent behind it.
   Its opacity is animated separately so it only shows during the sweep and
   clears away during the pause. */
.clock-trail {
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(241,215,154,0.55) 0deg,
    rgba(241,215,154,0)    24deg,
    rgba(241,215,154,0)    232deg,
    rgba(241,215,154,0.30) 360deg);
  opacity: 0;
  animation: clockTrail 5.2s ease-out infinite;
}

.hand {
  position: absolute; left: 50%; bottom: 50%;
  transform-origin: 50% 100%;
  background: var(--gold-light);
  border-radius: 1px;
}
.hand-big { width: 1px; height: 17px; margin-left: -0.5px; }
/* small hand advances 12 -> 1 while the big hand sweeps a full circle */
.hand-small {
  width: 1.4px; height: 11px; margin-left: -0.7px; opacity: 0.8;
  animation: clockSmall 5.2s cubic-bezier(0.45,0,0.2,1) infinite;
}

/* dot where the two hands meet */
.clock-dot {
  position: absolute; top: 50%; left: 50%;
  width: 3.2px; height: 3.2px; margin: -1.6px 0 0 -1.6px;
  border-radius: 50%;
  background: var(--gold-light);
}

/* -------------------------------------------------------------- veľkosti -- */
.sizes { background: var(--black); padding-block: var(--section-y); }
.sizes h2 { font-size: 46px; margin-bottom: 22px; }
.sizes > .wrap > p { font-size: 16.5px; font-weight: 300; line-height: 1.85; color: var(--text-2); text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 40px 0 34px; }
.chip {
  padding: 11px 24px; border-radius: 999px;
  border: 1px solid #33302b; color: var(--text-3);
  font-size: 13px; letter-spacing: 1.4px;
  transition: border-color 250ms ease, color 250ms ease;
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip-highlight { border-color: var(--gold); color: var(--gold); background: rgba(214,179,110,0.08); }
.fineprint { font-size: 13px; font-weight: 300; line-height: 1.8; color: var(--muted); max-width: 720px; margin: 0 auto; }

/* ------------------------------------------------------------ statement -- */
.statement {
  position: relative; min-height: 62vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.statement-bg {
  position: absolute; inset: 0;
  background-image: url(../img/toppradielko-66.webp);
  background-size: cover;
  background-position: center 28%;
  background-attachment: fixed;   /* parallax; disabled on touch below */
}
.statement-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.statement-body { position: relative; z-index: 1; padding-block: 100px; }
.statement h2 { font-size: 44px; line-height: 1.3; color: var(--white); margin-bottom: 38px; }
.quote-mark { display: block; font-family: var(--serif); font-style: italic; font-size: 62px; color: var(--gold); line-height: 1; margin-bottom: 10px; }

/* -------------------------------------------------------------- predajňa -- */
.shop-address { font-style: normal; display: flex; flex-direction: column; gap: 6px; margin: 26px 0 24px; }
.addr-street { font-family: var(--serif); font-size: 23px; color: var(--gold-light); }
.addr-city { font-size: 15px; font-weight: 300; color: var(--text-2); }

/* opening hours */
.shop-hours { margin: 0 0 30px; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.shop-hours div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(214,179,110,0.14);
}
.shop-hours dt { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.shop-hours dd { margin: 0; font-family: var(--serif); font-size: 17px; color: var(--gold-light); }

/* --------------------------------------------------------------- galéria -- */
.gallery-section { background: var(--surface-1); padding-block: var(--section-y); }
.gallery-section h2 { font-size: 46px; margin-bottom: 16px; }
.gallery-hint { font-size: 13px; letter-spacing: 1.4px; color: var(--muted); margin-bottom: 46px; }

.gallery-wrap { position: relative; }
.gallery {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.gallery::-webkit-scrollbar { display: none; }
.gal-item {
  flex: 0 0 calc((100% - 30px) / 4);
  height: 400px; margin: 0;
  border-radius: 18px; overflow: hidden;
  scroll-snap-align: start;
  background: var(--surface-3);
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.gal-item.is-empty {
  display: grid; place-items: center;
  border: 1px dashed rgba(214,179,110,0.28);
  color: rgba(164,157,144,0.5); font-family: var(--serif); font-size: 26px;
}

.gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px;
  color: var(--gold); transition: color 250ms ease, transform 250ms ease;
  /* legible over photos without a heavy disc, keeping the design's bare chevron */
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.8));
}
.gal-arrow:hover { color: var(--gold-light); }
.gal-prev { left: 4px; }
.gal-next { right: 4px; }
.gal-arrow[disabled] { opacity: 0.25; cursor: default; }

/* -------------------------------------------------------- lightbox ------- */
body.lb-lock { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: none;
  background: rgba(7,7,7,0.97);
  opacity: 0;
  transition: opacity 220ms ease;
}
.lightbox:not([hidden]) { display: block; }
.lightbox.is-open { opacity: 1; }

/* stage covers the viewport; taps on the empty area close, the image itself zooms */
.lb-stage {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  touch-action: none;          /* we handle drag/swipe/pan ourselves */
}
.lb-img {
  max-width: 92vw; max-height: 86vh;
  border-radius: 6px;
  transition: transform 260ms cubic-bezier(0.22,0.8,0.3,1);
  will-change: transform;
  cursor: grab;
  user-select: none; -webkit-user-drag: none;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.lb-img:active { cursor: grabbing; }

.lb-close, .lb-arrow, .lb-counter { position: absolute; z-index: 2; }

.lb-close {
  top: 16px; right: 20px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: none; border: 0;
  color: rgba(241,215,154,0.85);
  transition: color 200ms ease, transform 300ms cubic-bezier(0.22,0.8,0.3,1);
}
.lb-close:hover { color: var(--gold-light); transform: rotate(90deg); }

.lb-arrow {
  top: 50%; transform: translateY(-50%);
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: none; border: 0;
  color: rgba(241,215,154,0.8);
  transition: color 200ms ease;
  filter: drop-shadow(0 1px 5px rgba(0,0,0,0.7));
}
.lb-arrow:hover { color: var(--gold-light); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }

.lb-counter {
  bottom: 20px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: 2.5px; color: var(--muted);
}

/* --------------------------------------------------------------- recenzie -- */
.reviews { background: var(--black); padding-block: var(--section-y); }
.reviews h2 { font-size: 46px; margin-bottom: 56px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.review { padding: 44px 38px; display: flex; flex-direction: column; }
.review .quote-mark { font-size: 46px; margin-bottom: 6px; }
.review blockquote {
  margin: 0 0 30px;
  font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.7;
  color: var(--text-2); text-wrap: pretty; flex: 1;
}
.review-foot {
  display: flex; align-items: center; gap: 16px;
  padding-top: 22px;
  border-top: 1.5px solid transparent;
  border-image: linear-gradient(90deg, rgba(214,179,110,0.5), transparent) 1;
}
.review-foot img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.review-name { display: block; font-size: 15px; color: var(--gold); margin-bottom: 3px; }
.stars { display: block; font-size: 13px; color: var(--gold-deep); letter-spacing: 2px; }
.review-src { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.review-cta { margin-top: 70px; }
.review-cta h3 { font-size: 30px; margin-bottom: 16px; }
.review-cta p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--text-2); max-width: 660px; margin: 0 auto 30px; text-wrap: pretty; }

/* ------------------------------------------------------------ rezervácia -- */
.booking { background: var(--black); padding-block: var(--section-y); }
.booking h2 { font-size: 46px; margin-bottom: 22px; }
.booking > .wrap > p { font-size: 16.5px; font-weight: 300; line-height: 1.85; color: var(--text-2); margin-bottom: 54px; text-wrap: pretty; }

.form-card {
  border: 1px solid transparent; border-radius: 28px;
  padding: 54px 52px;
  background:
    linear-gradient(var(--surface-3), var(--surface-3)) padding-box,
    linear-gradient(135deg, rgba(214,179,110,0.03) 30%, rgba(214,179,110,0.55)) border-box;
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 30px; }
.field-full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field label { font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold); }
.field input {
  background: transparent; border: 0; border-bottom: 1px solid #45423f;
  padding: 10px 2px; color: var(--white);
  font-family: var(--sans); font-size: 15.5px; font-weight: 300;
  transition: border-color 250ms ease;
}
.field input::placeholder { color: var(--text-3); opacity: 0.55; }
.field input:focus { outline: none; border-bottom-color: var(--gold); }
.field input:user-invalid { border-bottom-color: #b3564a; }

.form-note { font-size: 13px; font-weight: 300; line-height: 1.75; color: var(--muted); margin: 34px 0 20px; }
/* submit sizes to its content like every other button, centred under the form */
.form-card .btn { display: flex; width: fit-content; margin-inline: auto; }

/* honeypot — off-screen, never shown to people */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* GDPR consent — custom checkbox: thin gold border, transparent, gold check */
.consent {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 24px; cursor: pointer;
}
/* native box invisible but real-sized over the custom box, so :required
   validation can anchor its message and the target stays clickable */
.consent input {
  position: absolute; top: 1px; left: 0;
  width: 20px; height: 20px; margin: 0;
  opacity: 0; cursor: pointer;
}
.consent-box {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1px solid #45423f; border-radius: 5px;
  background: transparent;
  display: grid; place-items: center;
  color: var(--gold-light);
  transition: border-color 200ms ease, background 200ms ease;
}
.consent-box svg { opacity: 0; transform: scale(0.6); transition: opacity 160ms ease, transform 200ms cubic-bezier(0.22,0.8,0.3,1); }
.consent:hover .consent-box { border-color: rgba(214,179,110,0.7); }
.consent input:checked + .consent-box { border-color: var(--gold); }
.consent input:checked + .consent-box svg { opacity: 1; transform: scale(1); }
.consent input:focus-visible + .consent-box { outline: 2px solid var(--gold); outline-offset: 2px; }
.consent input:user-invalid + .consent-box { border-color: #b3564a; }
.consent-text { font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--text-3); }
.consent-text a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.consent-text a:hover { color: var(--gold-light); }

.form-error {
  font-size: 14px; color: #e39a8f; line-height: 1.6;
  margin: 0 0 20px; text-align: center;
}

.form-thanks { text-align: center; padding: 20px 0; }
.form-thanks h3 { font-size: 32px; margin-bottom: 16px; }
.form-thanks p { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--text-2); }

/* --------------------------------------------------------------- médiá -- */
.media {
  background: var(--surface-1);
  padding-block: 70px;
  border-top: 1.5px solid transparent;
  border-image: var(--hairline) 1;
}
.media-logos { display: flex; align-items: center; justify-content: center; gap: 70px; flex-wrap: wrap; margin-top: 34px; }
.media-logos img { opacity: 0.5; transition: opacity 300ms ease; }
.media-logos a { display: inline-flex; }
/* heights by class, not nth-child, so wrapping a logo in a link can't break them */
.media-dk { height: 52px; }
.media-break { height: 58px; }
.media-telerano { height: 88px; }
.media-logos img:hover,
.media-logos a:hover img { opacity: 1; }

/* -------------------------------------------------------------- pätička -- */
.site-footer {
  position: relative;
  background: var(--black);
  border-top: 1.5px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(214,179,110,0.55), transparent) 1;
}
/* dark circle poking above the top hairline like a cap */
.footer-cap {
  position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
  width: 230px; height: 230px; border-radius: 50%;
  background: var(--black);
  display: grid; place-items: center;
  z-index: 2;
}
.footer-cap a { display: block; line-height: 0; transition: transform 300ms cubic-bezier(0.22,0.8,0.3,1), filter 300ms ease; }
.footer-cap a:hover { transform: scale(1.04); filter: drop-shadow(0 6px 18px rgba(214,179,110,0.28)); }
.footer-cap img { width: 198px; height: auto; }

.footer-grid {
  padding-block: 80px 40px;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 80px; align-items: start;
}
.site-footer h4 { font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer-about p { font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--muted); text-wrap: pretty; }

.footer-brand {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding-top: 77px;
}
.footer-brand .brand-name { font-size: 30px; }
.footer-brand .brand-sub { font-size: 11px; letter-spacing: 4px; }
.socials { display: flex; gap: 18px; margin-top: 6px; }

.footer-nav { display: flex; flex-direction: column; gap: 14px; font-size: 14px; justify-self: end; text-align: right; }
.footer-nav a { color: var(--text-2); }
.footer-nav a:hover { color: var(--gold-light); }

/* "Nastavenia cookies" — a button that looks like a footer link */
.cookie-settings-link { display: block; background: none; border: 0; margin: 0; padding: 0; font-family: inherit; font-size: 14px; line-height: inherit; text-align: inherit; color: var(--text-2); cursor: pointer; transition: color 200ms ease; }
.cookie-settings-link:hover { color: var(--gold-light); }
.doc-foot-nav .cookie-settings-link { font-size: 13px; }

.legal {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 36px;
  font-size: 13px; color: var(--muted); line-height: 1.7; text-align: center;
  margin-top: 30px;
}
.legal-name { color: var(--gold); }

.footer-bar { background: var(--gold-grad); margin-top: 40px; }
.footer-bar-inner {
  display: flex; justify-content: center; align-items: center; gap: 6px 22px; flex-wrap: wrap;
  padding-block: 18px;
  font-size: 12.5px; letter-spacing: 1px; color: #22201e; text-align: center;
}
.footer-bar .dot { opacity: 0.5; }
.heart { font-variant-emoji: text; }

/* ----------------------------------------------------------- animations -- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Big hand sweeps a full circle over ~42% of the 5.2s loop (~2.2s), then holds
   for the rest (~3s pause) before repeating. */
@keyframes clockBig {
  0%   { transform: rotate(0deg); }
  42%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
/* small hand steps 12 -> 1 during the sweep, then holds */
@keyframes clockSmall {
  0%   { transform: rotate(0deg); }
  42%  { transform: rotate(30deg); }
  100% { transform: rotate(30deg); }
}
/* trail fades in with the sweep and clears during the pause */
@keyframes clockTrail {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  42%  { opacity: 1; }
  58%  { opacity: 0; }
  100% { opacity: 0; }
}
/* --px/--py place the line on its diagonal; rotate(45deg) lays it along that
   diagonal; the final translateX then moves it INSIDE the rotated frame, i.e.
   along its own axis. That last part is what makes the travel read as diagonal
   rather than as a sideways sweep. */
@keyframes diagGlint {
  0%   { opacity: 0; transform: translate(var(--px), var(--py)) rotate(45deg) translateX(calc(var(--travel) * -1)); }
  10%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) rotate(45deg) translateX(var(--travel)); }
}
@keyframes ringGlow {
  0%    { opacity: 0; transform: rotate(0turn); }
  8%    { opacity: 1; }
  21%   { opacity: 1; }
  28.6% { opacity: 0; transform: rotate(1turn); }
  100%  { opacity: 0; transform: rotate(1turn); }
}
/* Sheen crosses the bottom edge in ~2s, then rests ~5s (7s loop).
   Travel is left:-34% -> 100%, i.e. 134% of the button width. The steps are
   hand-spaced so it creeps off the start and accelerates into the finish.
   Timing function is linear on purpose — an ease set on the animation would be
   re-applied between every keyframe pair and make the motion lurch. */
@keyframes btnSheen {
  0%   { left: -34%;   opacity: 0; }
  3%   { opacity: 1; }
  8%   { left: -24.6%; }
  14%  { left: -5.9%; }
  20%  { left: 25%; }
  25%  { left: 65.2%; }
  28%  { left: 100%;   opacity: 1; }
  30%  { left: 100%;   opacity: 0; }
  100% { left: 100%;   opacity: 0; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ------------------------------------------- tablet landscape  <=1199px -- */
@media (max-width: 1199px) {
  :root { --gutter: 40px; --section-y: 90px; }

  .hero h1 { font-size: 51px; }
  .hero-lead { font-size: 17px; }

  .split-grid { gap: 56px; }
  .split-body h2, .sizes h2, .reviews h2, .booking h2, .gallery-section h2 { font-size: 40px; }
  .statement h2 { font-size: 38px; }

  .pillar { padding: 44px 30px; }
  .pillar h3 { font-size: 23px; }

  .gal-item { flex: 0 0 calc((100% - 20px) / 3); height: 340px; }

  .stats { gap: 44px; }
  .stat-num { font-size: 46px; }

  .footer-grid { gap: 46px; }
  .media-logos { gap: 50px; }
}

/* -------------------------------------------- tablet portrait  <=1023px -- */
@media (max-width: 1023px) {
  :root { --gutter: 34px; --section-y: 76px; }

  /* nav collapses into an off-canvas panel */
  .nav-toggle { display: flex; }

  /* no backdrop-filter here: it would make the header a containing block for the
     fixed panel and iOS Safari clips the menu to the header height after scroll.
     Solid-ish background gives the same legibility without the bug. */
  .site-header.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(12,12,12,0.94); }

  /* backdrop over the remaining ~20%; click closes */
  .nav-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 40;
    background: rgba(8,8,8,0.6);
    opacity: 0;
    transition: opacity 320ms ease;
  }
  .nav-scrim[hidden] { display: none; }
  .nav-scrim.is-open { opacity: 1; }

  /* slides in from the right (right-handed reach) */
  .primary-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 80%; max-width: 360px;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 4px;
    padding: 96px 30px 36px;
    background: var(--surface-3);
    border-left: 1px solid rgba(214,179,110,0.22);
    box-shadow: -24px 0 60px rgba(0,0,0,0.5);
    transform: translateX(100%);
    transition: transform 400ms cubic-bezier(0.22,0.8,0.3,1);
    z-index: 50;
    overflow-y: auto;
  }
  .primary-nav.is-open { transform: translateX(0); }
  body.nav-open { overflow: hidden; }

  /* only the plain nav links get the tall touch padding — NOT the pill button,
     whose own left/right padding would otherwise be flattened to 0 */
  .primary-nav > a:not(.btn) { font-size: 17px; letter-spacing: 2.6px; padding: 13px 0; }
  .primary-nav > .btn { margin-top: 16px; }

  /* close X in the panel corner */
  .nav-close {
    display: grid; place-items: center;
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px;
    background: none; border: 0;
    color: var(--gold);
    transition: color 200ms ease, transform 300ms cubic-bezier(0.22,0.8,0.3,1);
  }
  .nav-close:hover { color: var(--gold-light); transform: rotate(90deg); }

  /* phone / email / navigate, pinned to the bottom of the panel */
  .nav-contact {
    display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
    width: 100%; margin-top: auto; padding-top: 26px;
    border-top: 1px solid rgba(214,179,110,0.18);
  }
  .nav-contact .nav-tel { font-family: var(--serif); font-size: 20px; color: var(--gold-light); letter-spacing: 0.5px; text-transform: none; padding: 4px 0; }
  .nav-contact .nav-mail { font-size: 14px; color: var(--text-2); letter-spacing: 0.5px; text-transform: none; padding: 4px 0; }

  /* Navigovať as a plain underlined text link with a subtle map-pin, so it does
     not compete with the gold Rezervovať pill above it */
  .nav-navigate {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 6px; padding: 4px 0;
    font-size: 14px; letter-spacing: 0.5px; text-transform: none;
    color: var(--gold);
  }
  .nav-navigate-label {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(214,179,110,0.5);
    transition: text-decoration-color 200ms ease;
  }
  .nav-navigate:hover { color: var(--gold-light); }
  .nav-navigate:hover .nav-navigate-label { text-decoration-color: var(--gold-light); }
  .nav-pin { flex: none; transform-origin: 50% 100%; animation: pinBob 2.4s ease-in-out infinite; }

  @keyframes pinBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }

  .hero { min-height: 88vh; }
  .hero h1 { font-size: 43px; }
  .hero-content { padding-top: 130px; }

  /* stack the 2-column sections; photo always leads */
  .split-grid { grid-template-columns: 1fr; gap: 50px; }
  .split .ring-figure { order: -1; }
  .split-body { text-align: center; }
  .stats { justify-content: center; }
  .shop-address { align-items: center; }
  .shop-hours { margin-inline: auto; }   /* centre the hours block like the rest */

  .pillar-grid { grid-template-columns: 1fr; gap: 22px; }
  .pillar { padding: 40px 34px; }

  .review-grid { grid-template-columns: 1fr; gap: 22px; }

  .gal-item { flex: 0 0 calc((100% - 10px) / 2); height: 320px; }

  /* background-attachment:fixed is broken/janky on touch devices */
  .statement-bg { background-attachment: scroll; }

  .footer-grid { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .footer-brand { order: -1; padding-top: 130px; }
  .footer-nav { justify-self: center; text-align: center; }
  .footer-cap { width: 190px; height: 190px; top: -42px; }
  .footer-cap img { width: 160px; }

  /* legal info: a predictable centred column, so wrapping never staggers the rows */
  .legal { flex-direction: column; align-items: center; gap: 7px; }
}

/* --------------------------------------------- mobile landscape <=767px -- */
@media (max-width: 767px) {
  :root { --gutter: 30px; --section-y: 62px; }

  .header-inner { padding: 18px var(--gutter); }
  .brand-mark { width: 54px; }
  .brand-name { font-size: 20px; }
  .brand-sub { font-size: 10px; letter-spacing: 3.2px; }

  /* touch targets: pad the links out to ~40px without changing type size.
     gap is zeroed where padding now supplies the spacing. */
  .footer-nav { gap: 0; }
  .footer-nav a,
  .footer-nav .cookie-settings-link { padding: 10px 0; }
  /* column already set at <=1023; tighten row spacing, links keep tap padding */
  .legal { gap: 3px; }
  .legal a { display: inline-block; padding: 8px 0; }
  .socials { gap: 8px; }
  .socials a { padding: 10px; }
  .btn-text { display: inline-block; padding: 8px 0; }

  .hero h1 { font-size: 32px; }
  .hero-lead { font-size: 15.5px; margin-bottom: 32px; }
  /* stacked but sized to content (align-items:center is inherited from base) */
  .hero-actions { flex-direction: column; gap: 20px; }
  .eyebrow-flanked { gap: 12px; }
  .eyebrow-flanked::before, .eyebrow-flanked::after { width: 34px; }

  .split-body h2, .sizes h2, .reviews h2, .booking h2, .gallery-section h2 { font-size: 31px; }
  .statement h2 { font-size: 27px; }
  .quote-mark { font-size: 48px; }

  .circle-photo, .ring { max-width: 320px; width: min(100%, 320px); }
  .ring { top: 22px; transform: translateX(calc(-50% + 22px)); }

  .trust-inner { flex-direction: column; gap: 12px; padding-block: 22px; }
  .trust-inner p { font-size: 11px; letter-spacing: 1.8px; }

  .gal-item { flex: 0 0 82%; height: 300px; }

  .form-card { padding: 34px 24px; border-radius: 22px; }
  .field-grid { grid-template-columns: 1fr; gap: 26px; }
  /* 16px minimum stops iOS Safari from zooming in when a field is focused */
  .field input { font-size: 16px; }

  .review { padding: 34px 26px; }
  .media-logos { gap: 36px; }
  .media-dk { height: 40px; }
  .media-break { height: 44px; }
  .media-telerano { height: 66px; }

  .legal { font-size: 12px; }
  .footer-bar-inner { font-size: 11.5px; }
  /* the hard breaks are a desktop line-length choice; on narrow screens they
     produce ragged half-lines, so let the text wrap on its own */
  .footer-about br { display: none; }
}

/* ---------------------------------------------- mobile portrait <=567px -- */
@media (max-width: 567px) {
  :root { --gutter: 30px; --section-y: 54px; }

  .hero h1 { font-size: 27px; line-height: 1.14; }
  .hero-content { padding-top: 116px; padding-bottom: 70px; }
  .hero-lead { font-size: 15px; }

  .split-body h2, .sizes h2, .reviews h2, .booking h2, .gallery-section h2 { font-size: 27px; }
  .statement h2 { font-size: 23px; }

  .btn { padding: 15px 26px; font-size: 11.5px; letter-spacing: 2px; }

  .circle-photo, .ring { max-width: 260px; width: min(100%, 260px); }
  .ring { top: 16px; transform: translateX(calc(-50% + 16px)); }

  .chips { gap: 8px; }
  .chip { padding: 9px 16px; font-size: 12px; }

  .stats { gap: 28px; }
  .stat-num { font-size: 38px; }
  .clock { width: 38px; height: 38px; }
  .hand-big { height: 14px; }
  .hand-small { height: 9px; }

  .gal-item { flex: 0 0 88%; height: 260px; }

  .pillar { padding: 32px 22px; }
  .review blockquote { font-size: 16px; }
  .footer-cap { width: 150px; height: 150px; top: -34px; }
  .footer-cap img { width: 126px; }
  .footer-brand { padding-top: 100px; }
}

/* ------------------------------------------------------------ a11y prefs -- */
/* NOTE: the prefers-reduced-motion override was removed on purpose — the client
   chose to show the (gentle) animations to everyone, since many iOS users have
   "Reduce Motion" enabled without realising it and would otherwise never see
   them. Deliberate decision, not an oversight. */

/* ==========================================================================
   LEGAL / DOCUMENT PAGES — obchodné podmienky, ochrana údajov, cookies
   ========================================================================== */
/* legal pages reuse the homepage's fixed .site-header (+ main.js), so the
   content just needs top padding to clear it */
.doc-body { display: flex; flex-direction: column; min-height: 100vh; background: var(--black); }

.doc { width: 100%; max-width: 840px; margin: 0 auto; padding: 132px var(--gutter) 90px; flex: 1 0 auto; box-sizing: border-box; }
.doc-eyebrow { font-size: 11.5px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.doc h1 { font-size: 42px; line-height: 1.14; margin: 0 0 12px; }
.doc-updated { font-size: 13px; color: var(--muted); margin: 0 0 44px; }
.doc h2 { font-size: 25px; margin: 46px 0 14px; }
.doc h3 { font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: 0.3px; color: var(--gold-light); margin: 28px 0 10px; }
.doc p { font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--text-2); margin: 0 0 16px; text-wrap: pretty; }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; }
.doc li { font-size: 15.5px; font-weight: 300; line-height: 1.8; color: var(--text-2); margin-bottom: 8px; }
.doc a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(214,179,110,0.4); }
.doc a:hover { color: var(--gold-light); text-decoration-color: var(--gold-light); }
.doc address { font-style: normal; color: var(--text-2); font-weight: 300; line-height: 1.7; margin: 0 0 18px; }
.doc address .addr-name { color: var(--gold-light); }
.doc-note {
  border-left: 2px solid rgba(214,179,110,0.4);
  padding: 2px 0 2px 18px; margin: 0 0 18px;
  color: var(--muted); font-size: 14px; line-height: 1.7;
}

/* slim footer for doc pages (reuses .legal / .legal-name from the homepage) */
.doc-footer { border-top: 1.5px solid transparent; border-image: linear-gradient(90deg,transparent,rgba(214,179,110,0.4),transparent) 1; }
.doc-footer .wrap { padding-block: 34px 30px; }
.doc-foot-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 24px; }
.doc-foot-nav a { font-size: 13px; color: var(--text-2); }
.doc-foot-nav a:hover { color: var(--gold-light); }
.doc-copy { text-align: center; font-size: 12.5px; letter-spacing: 1px; color: var(--muted); margin: 20px 0 0; }

@media (max-width: 767px) {
  .doc { padding-top: 116px; }
  .doc h1 { font-size: 32px; }
  .doc h2 { font-size: 21px; }
}

/* ==========================================================================
   NÁŠ PRÍBEH (story subpage) — reuses .split/.statement/.ring-figure/.deco
   from the homepage; only the intro + closing CTA need their own rules
   ========================================================================== */
.story-intro { background: var(--black); padding: 150px var(--gutter) 96px; text-align: center; }
.story-intro h1 { font-size: 52px; line-height: 1.12; margin: 0 0 22px; }
.story-lead { font-size: 18px; font-weight: 300; line-height: 1.85; color: var(--text-2); max-width: 640px; margin: 0 auto; text-wrap: pretty; }

.story-cta { background: var(--black); padding-block: var(--section-y); text-align: center; }
.story-cta h2 { font-size: 44px; margin: 0 0 20px; }
.story-cta p { font-size: 16.5px; font-weight: 300; line-height: 1.85; color: var(--text-2); max-width: 600px; margin: 0 auto 32px; text-wrap: pretty; }

/* the family photo + Ivka's letter */
.story-letter { background: var(--surface-2); padding-block: var(--section-y); }
.story-letter .ring-figure { margin-bottom: 48px; }
.story-letter h2 { font-size: 40px; text-align: center; margin: 0 0 34px; }
.letter { max-width: 700px; margin: 0 auto; text-align: center; }
.letter p { font-size: 16.5px; font-weight: 300; line-height: 1.9; color: var(--text-2); margin: 0 0 20px; text-wrap: pretty; }
.letter .letter-open { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--gold-light); margin-bottom: 24px; }
.letter .letter-emph { color: var(--gold-light); font-size: 18px; }
.letter .letter-sign { color: var(--text); }
.heart-gold { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-left: 3px; }

@media (max-width: 767px) {
  .story-intro { padding-top: 118px; }
  .story-intro h1 { font-size: 34px; }
  .story-cta h2 { font-size: 30px; }
  .story-letter h2 { font-size: 28px; }
  .letter .letter-open { font-size: 19px; }
}

/* ==========================================================================
   COOKIE CONSENT — corner banner + preferences modal (built in main.js)
   ========================================================================== */
.cookie-banner {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: min(360px, calc(100vw - 32px));
  border: 1px solid transparent; border-radius: 16px;
  /* black inside, gold gradient frame that fades all the way to transparent */
  background:
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, rgba(214,179,110,0) 20%, rgba(214,179,110,0.75)) border-box;
  box-shadow: 0 22px 55px rgba(0,0,0,0.55);
  padding: 24px 30px 22px;
  color: var(--text-2);
  text-align: center;
  opacity: 0; transform: translateY(14px);
  transition: opacity 300ms ease, transform 340ms cubic-bezier(0.22,0.8,0.3,1);
}
.cookie-banner.is-visible { opacity: 1; transform: none; }

.ck-title { font-family: var(--serif); font-size: 20px; color: var(--gold-light); margin: 0 0 8px; }
.ck-text { font-size: 13.5px; font-weight: 300; line-height: 1.65; margin: 0 0 18px; color: var(--text-3); }
.ck-text a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.ck-text a:hover { color: var(--gold-light); }

.ck-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.ck-btn { font: inherit; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; padding: 11px 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: color 200ms ease, border-color 200ms ease, filter 200ms ease; }
.ck-btn-primary { background: var(--gold-grad); color: #22201e; padding-left: 34px; padding-right: 34px; }
.ck-btn-primary:hover { filter: brightness(1.06); }
.ck-btn-ghost { background: transparent; border-color: rgba(214,179,110,0.4); color: var(--text-2); }
.ck-btn-ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }
.ck-btn-text { background: transparent; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 11px 6px; cursor: pointer; }
.ck-btn-text:hover { color: var(--gold-light); }

/* small privacy link, centered under the buttons */
.ck-privacy { margin: 14px 0 0; }
.ck-privacy a { font-size: 11.5px; font-weight: 300; letter-spacing: 0.3px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; transition: color 200ms ease; }
.ck-privacy a:hover { color: var(--gold-light); }

/* --- preferences modal (opened from "Preferencie") --- */
.cookie-modal {
  position: fixed; inset: 0; z-index: 320;
  display: none; align-items: flex-end; justify-content: flex-end;
  padding: 20px; background: rgba(7,7,7,0.45);
  opacity: 0; transition: opacity 240ms ease;
}
.cookie-modal:not([hidden]) { display: flex; }
.cookie-modal.is-open { opacity: 1; }
.ck-modal-card {
  width: min(380px, 100%); max-height: min(80vh, 620px); overflow-y: auto;
  border: 1px solid transparent; border-radius: 18px;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(135deg, rgba(214,179,110,0) 20%, rgba(214,179,110,0.75)) border-box;
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
  padding: 28px 28px 24px;
  transform: translateY(14px) scale(0.985);
  transition: transform 280ms cubic-bezier(0.22,0.8,0.3,1);
}
.cookie-modal.is-open .ck-modal-card { transform: none; }
.ck-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ck-modal-head .ck-title { margin: 0; }
.ck-modal-close { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 0; color: var(--gold); cursor: pointer; transition: color 200ms ease, transform 300ms ease; }
.ck-modal-close:hover { color: var(--gold-light); transform: rotate(90deg); }

.ck-prefs { display: flex; flex-direction: column; gap: 16px; margin: 0 0 22px; text-align: left; }
.ck-item-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck-item-title { font-size: 13.5px; letter-spacing: 0.4px; color: var(--text); }
.ck-lock { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-left: 8px; }
.ck-item-desc { font-size: 12px; font-weight: 300; line-height: 1.55; color: var(--muted); margin: 5px 0 0; }
.ck-modal-card .ck-actions { justify-content: flex-end; }

/* toggle switch — gold when on */
.ck-switch { position: relative; width: 40px; height: 22px; flex: none; }
.ck-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ck-track { position: absolute; inset: 0; border-radius: 999px; background: #2a2723; border: 1px solid #45423f; transition: background 200ms ease, border-color 200ms ease; }
.ck-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); transition: transform 220ms cubic-bezier(0.22,0.8,0.3,1), background 200ms ease; }
.ck-switch input:checked + .ck-track { background: rgba(214,179,110,0.28); border-color: var(--gold); }
.ck-switch input:checked + .ck-track::after { transform: translateX(18px); background: var(--gold-light); }
.ck-switch input:disabled { cursor: default; }
.ck-switch input:disabled + .ck-track { opacity: 0.55; }
.ck-switch input:focus-visible + .ck-track { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 767px) {
  .cookie-banner { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .cookie-modal { padding: 12px; justify-content: center; }
  .ck-modal-card { width: 100%; }
}