/* ============================================================
   JL HOME — styles v3
   Neutrálna kameňová paleta (schválené 28. 8. 2026). Solid light header,
   straight edges only, large uniform imagery.
   Tenor Sans display + Plus Jakarta Sans body.
   ============================================================ */

:root{
  /* Colours — warm, from their interiors */
  --bg:        #F3F3F1;
  --surface:   #F9F9F8;
  --sand:      #CCCCC7;
  --sand-soft: #E9E9E6;
  --ink:       #1C1C1B;
  --ink-soft:  #565651;
  --muted:     #757570;
  --line:      rgba(28, 28, 27, .14);

  /* Fonts */
  --font-display: 'Tenor Sans', 'Avenir Next', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-brand:   'Cinzel', 'Tenor Sans', Georgia, serif;   /* písmo schváleného loga */

  /* Rhythm */
  --wrap: 1200px;
  --wrap-wide: 1560px;
  --pad: clamp(20px, 5vw, 64px);
  --section-y: clamp(36px, 4.5vh, 62px);
  --header-h: 92px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap-wide{ width:100%; max-width:var(--wrap-wide); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--section-y); }

/* ---------- Typography ---------- */
.h-display{
  text-wrap:balance;
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.16;
  letter-spacing:.02em;
  font-size:clamp(1.9rem, 3.6vw, 3rem);
  margin:0 0 .7em;
}
.h-display em, .hero-title em{ font-style:normal; }
.eyebrow{
  font-family:var(--font-brand);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.68rem;
  font-weight:400;
  color:var(--muted);
  margin:0 0 1.6rem;
}
p{ margin:0 0 1.15rem; color:var(--ink-soft); max-width:58ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.71rem;
  font-weight:400;
  padding:1.15em 2.5em;
  border:1px solid currentColor;
  background:transparent;
  border-radius:0;
  transition:background .45s ease, color .45s ease;
  cursor:pointer;
}
.btn-dark{ color:var(--ink); }
.btn-dark:hover{ background:var(--ink); color:var(--bg); }
.btn-light{ color:#F3F3F1; border-color:rgba(243,243,241,.55); }
.btn-light:hover{ background:#F3F3F1; color:var(--ink); }
.eyebrow-light{ color:rgba(243,243,241,.85); }

/* ---------- Header — solid, calm ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:var(--bg);
  padding-block:24px;
  transition:padding .5s ease, box-shadow .5s ease, background .5s ease;
}
.site-header.scrolled{ background:var(--surface); box-shadow:0 1px 0 var(--line); padding-block:14px; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

/* Logo je schválený súbor v krivkách, nie preklep fontom.
   V hlavičke ide samotný nápis: podtitul by bol pri tejto veľkosti nečitateľný. */
.brand{ display:flex; align-items:center; line-height:0; }
.brand-logo{ height:26px; width:auto; transition:opacity .4s ease; }
.brand:hover .brand-logo{ opacity:.62; }
.brand-logo-light{ display:none; }

/* V pätke je priestor, tak ide plný lockup aj s popisom činnosti.
   Pod 70 px sa popis zlieva do šedej čiary, preto 78 px. */
.footer-logo{ height:78px; width:auto; }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,42px); }
.nav a{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); position:relative; transition:color .3s;
}
.nav a:hover{ color:var(--ink); }
.nav a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--ink); transition:width .35s ease; }
.nav a:hover::after{ width:100%; }
.nav .nav-cta{ color:var(--ink); }

.nav-toggle{ display:none; background:none; border:0; width:34px; height:24px; position:relative; cursor:pointer; }
.nav-toggle span{ position:absolute; left:4px; right:4px; height:1.5px; background:var(--ink); transition:.35s; }
.nav-toggle span:first-child{ top:7px; }
.nav-toggle span:last-child{ bottom:7px; }

/* ---------- Hero — split screen ---------- */
.hero{
  display:grid; grid-template-columns:44% 56%;
  min-height:100svh;
  padding-top:var(--header-h);
}
.hero-content{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,6vw,96px);
  padding-right:clamp(32px,4vw,72px);
}
.hero-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.2rem, 3.9vw, 3.7rem); line-height:1.14; letter-spacing:.02em;
  margin:0 0 .7em; max-width:12ch;
}
.hero-sub{ font-size:clamp(.95rem,1.2vw,1.08rem); max-width:38ch; margin-bottom:2.8rem; }
.hero-content .btn{ align-self:flex-start; }
.hero-media{ overflow:hidden; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05);
  animation:heroSettle 3s cubic-bezier(.16,.6,.2,1) forwards;
}
@keyframes heroSettle{ to{ transform:scale(1); } }

/* ---------- Hero variant B — fullscreen photo ---------- */
.hero-full{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-full .hero-media{ position:absolute; inset:0; }
.hero-full .hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-full-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,19,.52) 0%, rgba(20,20,19,.20) 34%, rgba(20,20,19,.30) 58%, rgba(16,16,15,.70) 100%); }
.hero-full .hero-content{
  position:relative; z-index:2;
  /* `padding:0` tu kedysi zmazalo aj bočné odsadenie z .wrap a text potom
     na mobile sedel priamo na hrane obrazovky. Bočné odsadenie musí ostať. */
  padding-inline:var(--pad);
  padding-bottom:clamp(76px,12vh,140px); padding-top:150px;
}
.hero-full .hero-title{ color:#F3F3F1; max-width:16ch; }
.hero-full .hero-sub{ color:rgba(243,243,241,.88); }
.hero-full .hero-scroll{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); margin:0; z-index:2; }
/* variant B: transparent header with light text over the hero photo */
body.variant-b .site-header:not(.scrolled){ background:transparent; }
body.variant-b .site-header:not(.scrolled) .nav a{ color:#F3F3F1; }
body.variant-b .site-header:not(.scrolled) .brand-logo-ink{ display:none; }
body.variant-b .site-header:not(.scrolled) .brand-logo-light{ display:block; }
body.variant-b .site-header:not(.scrolled) .nav-toggle span{ background:#F3F3F1; }

/* ---------- Štúdio ---------- */
.studio{ background:var(--bg); }
.studio-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(48px,7vw,120px); align-items:center; }
.studio-media{ position:relative; }
.studio-media .framed{ margin:0; padding:0; border:0; }
.studio-media .framed img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.studio-text .h-display{ max-width:16ch; margin-bottom:1.2em; }

/* ---------- Služby — three quiet columns ---------- */
/* Táto sekcia znesie viac vzduchu, tri stĺpce textu tesne pod sebou pôsobili natlačene. */
.services{ padding-block:clamp(76px,9.5vh,132px); }
.section-head{ margin-bottom:clamp(18px,2.2vw,30px); }
.section-lead{ margin:0; max-width:46ch; font-size:.97em; }
/* Anna: „nadpis a fotky sú od seba ďaleko, priveľa priestoru.“ */
.section-head-tesne{ margin-bottom:clamp(16px,1.8vw,24px); }
.index-section{ padding-block:clamp(36px,4.5vh,62px); }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,4.5vw,72px); }
.service{ padding-top:.4rem; }
.service h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.25rem,1.7vw,1.5rem); line-height:1.3; letter-spacing:.02em;
  margin:0 0 .8em;
}
.service p{ margin:0; font-size:.93em; }

/* ---------- Realizácie: veľké striedavé bloky ----------
   Zámerne NIE rovnomerná mriežka dlaždíc. Interiérové štúdio predáva hotové
   miestnosti, takže každý projekt dostane vlastný riadok a poriadnu plochu. */
/* Sekcia nemá vlastný podklad. Pruhovanie striedajúcich sa plôch je preč,
   rytmus stránky robia samotné fotky. */
.work-section{ background:var(--bg); }
.works{ display:flex; flex-direction:column; gap:clamp(64px,9vw,140px); }
.work{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px); align-items:center; cursor:pointer;
}
/* Striedanie riešime priamym určením stĺpca, nie cez order.
   order sa pri mriežke ľahko prebije iným pravidlom a striedanie potom ticho prestane fungovať. */
.work-media{ grid-column:1; }
.work-text{ grid-column:2; }
.work:nth-child(even){ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); }
.work:nth-child(even) .work-media{ grid-column:2; }
.work:nth-child(even) .work-text{ grid-column:1; }
.work-media{ overflow:hidden; position:relative; }
.work-media img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:16/11;
  transition:transform 1.6s cubic-bezier(.16,.6,.2,1);
}
.work:hover .work-media img{ transform:scale(1.035); }
.work-kind{
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.24em;
  font-size:.6rem; color:var(--muted); margin:0 0 1.1rem;
}
.work-text h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2.1rem); line-height:1.2; letter-spacing:.02em;
  margin:0 0 .8rem;
}
.work-desc{ margin:0 0 1.8rem; font-size:.95em; max-width:38ch; }
.work-more{
  display:inline-flex; align-items:baseline; gap:.9em;
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.2em;
  font-size:.66rem; color:var(--ink);
  padding-bottom:.6em; border-bottom:1px solid var(--line);
  transition:border-color .4s ease;
}
.work-more em{ font-style:normal; letter-spacing:.16em; color:var(--muted); }
.work:hover .work-more{ border-color:var(--ink); }

/* ---------- Kontakt ---------- */
.contact{ background:var(--bg); }
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(48px,7vw,120px); align-items:start; }
.contact-sub{ margin-bottom:2.6rem; }
.contact-direct{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.9rem; }
.contact-direct li{ display:flex; flex-direction:column; gap:.35rem; }
.contact-direct .lbl{ font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.26em; font-size:.6rem; color:var(--muted); }
.contact-direct a, .contact-direct .val{ font-family:var(--font-display); font-size:1.18rem; letter-spacing:.03em; }
.contact-direct a:hover{ color:var(--ink-soft); }

.contact-form{ display:flex; flex-direction:column; gap:clamp(22px,2.4vw,30px); }
.field{ display:flex; flex-direction:column; gap:.7rem; }
.field label{ font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.2em; font-size:.62rem; color:var(--muted); }
.field input, .field textarea{
  font-family:var(--font-body); font-size:1rem; font-weight:300; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.65rem 0; border-radius:0; transition:border-color .4s;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--ink); }
/* bez ťahadla v rohu, rovno dosť vysoká */
.field textarea{ resize:none; min-height:132px; }
.contact-form .btn{ align-self:flex-start; margin-top:.5rem; color:var(--ink); }
.contact-form .btn:hover{ background:var(--ink); color:var(--surface); }
.form-note{ margin:0; color:var(--ink); font-size:.9rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg); border-top:1px solid var(--line); padding-block:clamp(48px,6vw,76px); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.footer-brand{ display:flex; flex-direction:column; line-height:1; }
.footer-brand .brand-name{ font-size:1.05rem; }
.footer-meta{ text-align:right; }
.footer-meta p{ margin:0; font-size:.78rem; color:var(--muted); }
.footer-meta p:first-child{ color:var(--ink-soft); margin-bottom:.35rem; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(20,20,19,.94); opacity:0; visibility:hidden;
  /* visibility bez trvania, len s oneskorením: pri otvorení je prvok viditeľný
     okamžite (inak sa naň nedá dať fokus), pri zatvorení až po dobehnutí fadu */
  transition:opacity .45s ease, visibility 0s linear .45s;
  padding:clamp(16px,4vw,56px);
}
.lightbox.open{
  opacity:1; visibility:visible;
  transition:opacity .45s ease, visibility 0s linear 0s;
}
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain;
  opacity:0; transform:scale(.985); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.lightbox.open img{ opacity:1; transform:none; }
.lb-btn{
  position:absolute; background:none; border:0; color:rgba(243,243,241,.75); cursor:pointer;
  font-family:var(--font-body); transition:color .3s; user-select:none;
}
.lb-btn:hover{ color:#fff; }
.lb-close{ top:clamp(14px,3vw,28px); right:clamp(16px,3vw,36px); font-size:2rem; line-height:1; }
.lb-prev, .lb-next{ top:50%; transform:translateY(-50%); font-size:2.6rem; padding:.2em .4em; }
.lb-prev{ left:clamp(6px,2vw,24px); }
.lb-next{ right:clamp(6px,2vw,24px); }
.lb-count{ position:absolute; bottom:clamp(14px,3vw,28px); left:50%; transform:translateX(-50%);
  color:rgba(243,243,241,.7); font-size:.74rem; letter-spacing:.22em;
  font-variant-numeric:tabular-nums; }
.lb-title{ position:absolute; top:clamp(16px,3vw,30px); left:50%; transform:translateX(-50%);
  color:rgba(243,243,241,.85); font-family:var(--font-brand); font-size:.95rem; letter-spacing:.14em; text-transform:uppercase; }

.work:focus-visible, a:focus-visible, button:focus-visible{
  outline:1px solid var(--ink); outline-offset:6px;
}

/* ---------- Reveal (gentle, enhancement only) ---------- */
.has-js .reveal{ opacity:0; transform:translateY(18px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,.6,.2,1); }
.has-js .reveal.in{ opacity:1; transform:none; }

/* Image curtain reveal — photo softly "opens" on scroll */
.has-js .reveal-img{
  clip-path:inset(0 0 16% 0);
  opacity:0; transform:translateY(26px);
  transition:clip-path 1.3s cubic-bezier(.16,.6,.2,1), opacity 1s ease, transform 1.3s cubic-bezier(.16,.6,.2,1);
}
.has-js .reveal-img.in{ clip-path:inset(0 0 0 0); opacity:1; transform:none; }
.has-js .work:nth-child(even) .work-media{ transition-delay:.12s; }

/* ---------- Hero scroll line — quiet vertical pulse ---------- */
.hero-scroll{ display:block; width:1px; height:58px; overflow:hidden; margin-top:clamp(40px,7vh,72px); }
.hero-scroll span{ display:block; width:1px; height:58px; background:var(--ink-soft); opacity:.55; animation:scrolldown 2.6s ease-in-out infinite; }
.hero-scroll-light span{ background:rgba(243,243,241,.8); }
@keyframes scrolldown{ 0%{transform:translateY(-100%);} 50%{transform:translateY(0);} 100%{transform:translateY(100%);} }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero-content{ padding:clamp(40px,8vw,64px) var(--pad) clamp(32px,6vw,48px); }
  .hero-title{ max-width:none; }
  .hero-media{ height:62vh; }

  .studio-grid{ grid-template-columns:1fr; gap:56px; }
  .studio-media{ max-width:460px; }
  .services-grid{ grid-template-columns:1fr; gap:40px; }
  .contact-grid{ grid-template-columns:1fr; }
  .work{ grid-template-columns:1fr; gap:22px; }
  .work:nth-child(even){ grid-template-columns:1fr; }
  .work-media, .work:nth-child(even) .work-media{ grid-column:1; grid-row:1; }
  .work-text,  .work:nth-child(even) .work-text{ grid-column:1; grid-row:2; }
  .works{ gap:clamp(56px,10vw,84px); }

  .nav{ position:fixed; inset:0 0 0 auto; width:min(78vw,340px); background:var(--surface);
    border-left:1px solid var(--line);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:28px;
    padding:0 40px; transform:translateX(100%); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
  .nav a{ color:var(--ink); font-size:1.02rem; }
  body.nav-open .nav{ transform:translateX(0); }
  .nav-toggle{ display:block; z-index:60; }
  /* Obe čiarky musia skončiť na zvislom strede tlačidla, inak sa neprekrížia
     a namiesto krížika vznikne „>". Pevné odsadenie 11 px fungovalo len pri
     tlačidle vysokom 24 px, na telefóne má 44 px. */
  body.nav-open .nav-toggle span:first-child{ top:50%; bottom:auto; transform:translateY(-50%) rotate(45deg); }
  body.nav-open .nav-toggle span:last-child{ top:50%; bottom:auto; transform:translateY(-50%) rotate(-45deg); }

  /* Vysúvacie menu je svetlý panel, takže text v ňom musí byť tmavý aj na úvodnej
     stránke s variantom B. Pravidlo pre priehľadnú hlavičku nad hero fotkou je
     špecifickejšie než .nav a, takže ho tu treba prebiť. Bez toho je biele na bielom
     a z menu nevidno nič. */
  body.variant-b .site-header:not(.scrolled) .nav a{ color:var(--ink); }
  body.variant-b .site-header:not(.scrolled) .nav a:hover{ color:var(--ink); }

  /* Krížik na zatvorenie leží nad tým istým svetlým panelom. Kým je menu zavreté,
     dve čiarky ležia nad tmavou fotkou a musia zostať biele. */
  body.variant-b.nav-open .site-header:not(.scrolled) .nav-toggle span{ background:var(--ink); }
}

@media (max-width:560px){
  .field input{ padding-block:.85rem; }
  .contact-form .btn{ width:100%; text-align:center; }

  /* na dotyk sa listuje prstom, šípky nech neprekážajú cez fotku */
  .lb-prev, .lb-next{ font-size:2rem; top:auto; bottom:clamp(10px,3vw,20px); transform:none; }
  .lb-prev{ left:clamp(10px,5vw,28px); }
  .lb-next{ right:clamp(10px,5vw,28px); }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-logo{ height:60px; }
  .brand-logo{ height:22px; }
  .footer-meta{ text-align:left; }
  .hero-media{ height:52vh; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .has-js .reveal, .has-js .reveal-img{ opacity:1; transform:none; transition:none; clip-path:none; }
  .hero-media img{ transform:none; }
  .marquee-track{ animation:none; }
}

/* ==========================================================================
   VERZIA B — vlastné bloky
   Zámerne iná logika ako vo verzii A: tam sú projekty veľké striedavé bloky,
   tu je z nich zoznam, ku ktorému sa vedľa prepína jedna veľká fotka.
   ========================================================================== */

/* ---------- Realizácie ako index s prepínanou fotkou ---------- */
.index{
  display:grid; grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:clamp(26px,3.4vw,56px); align-items:start;
}
.index-list{ border-top:1px solid var(--line); }
.index-row{
  display:block; width:100%; text-align:left; background:none; border:0;
  border-bottom:1px solid var(--line); padding:clamp(20px,2.5vw,32px) 0;
  cursor:pointer; color:var(--ink); font:inherit;
}
.index-line{ display:flex; flex-direction:column; gap:.55em; }
.index-name{
  font-family:var(--font-display); font-weight:400; letter-spacing:.02em;
  font-size:clamp(1.35rem,2.6vw,2.05rem); line-height:1.15;
  transition:transform .5s cubic-bezier(.16,.6,.2,1);
}
.index-meta{
  display:flex; gap:.9em; align-items:baseline;
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.22em;
  font-size:.6rem; color:var(--muted);
}
.index-meta em{ font-style:normal; }
.index-row:hover .index-name,
.index-row:focus-visible .index-name{ transform:translateX(14px); }
.index-row:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }

.index-visual{
  position:sticky; top:calc(var(--header-h) + clamp(16px,3vh,40px));
  aspect-ratio:5/4; overflow:hidden; background:var(--sand-soft);
}
.index-visual img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .5s ease;
}
.index-visual.meni img{ opacity:0; }
.index-thumb{ display:none; }

/* ---------- Služby v dvoch stĺpcoch ---------- */
.services-split{ background:var(--bg); }
.svc-split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,6vw,100px); align-items:start;
}
.svc-intro .h-display{ margin:0 0 1rem; font-size:clamp(1.55rem,2.5vw,2rem); }
.svc-intro p{ margin:0; max-width:34ch; }
.svc-list{ display:flex; flex-direction:column; }
.svc-item{ padding:clamp(20px,2.4vw,30px) 0; border-top:1px solid var(--line); }
.svc-item:last-child{ border-bottom:1px solid var(--line); }
.svc-item h3{
  font-family:var(--font-display); font-weight:400; letter-spacing:.02em;
  font-size:clamp(1.05rem,1.6vw,1.24rem); margin:0 0 .5rem;
}
.svc-item p{ margin:0; font-size:.94em; max-width:52ch; }

/* ---------- Štúdio ako široký pás s odsadeným textom ---------- */
.studio-band{ background:var(--bg); padding-top:0; }
.band-media{ margin:0 0 clamp(40px,6vw,80px); }
.band-media img{ width:100%; aspect-ratio:21/9; object-fit:cover; display:block; }
.band-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(24px,5vw,80px); align-items:start;
}
.band-grid .h-display{ margin:0; }
.band-text p{ margin:0 0 1.1em; }
.band-text p:last-child{ margin-bottom:0; }

@media (max-width:860px){
  /* Prepínaná fotka nemá na úzkej obrazovke kam ísť, tak dostane každý
     riadok vlastnú fotku nad textom. */
  .index{ grid-template-columns:1fr; gap:0; }
  .index-visual{ display:none; }
  .index-thumb{ display:block; margin-bottom:16px; }
  .index-thumb img{ width:100%; aspect-ratio:16/11; object-fit:cover; display:block; }
  .index-row:hover .index-name{ transform:none; }
  .svc-split{ grid-template-columns:1fr; }
  .band-grid{ grid-template-columns:1fr; }
  .band-media img{ aspect-ratio:16/10; }
}


/* ==========================================================================
   DOPLNKY (14. 9. 2026)
   ========================================================================== */

/* ---------- Striedanie fotiek v úvode ----------
   Fotky ležia na sebe, mení sa iba priehľadnosť, takže prechod je pokojný. */
.hero-full .hero-media{ position:absolute; inset:0; }
.hero-full .hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:none; animation:none;
  transition:opacity 1.3s ease;
}
.hero-full .hero-media img.je-vidno{ opacity:1; }
/* Zoom je animácia, nie prechod.
   Prechod sa musí rozbehnúť z hodnoty, ktorú prehliadač už stihol vykresliť, a keď sa to
   nestihne, ticho sa nespustí — presne to sa dialo prvej fotke hneď po načítaní stránky.
   Animácia s `forwards` sa spustí vždy a po dobehnutí drží koncovú mierku, takže pri
   odchode fotky nie je čo šklbnúť. */
.hero-full .hero-media img.zoom{
  animation:heroZoom 6s cubic-bezier(.16,.72,.28,1) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
/* Keby JavaScript nebežal, nech je aspoň prvá fotka staticky vidno. */
html:not(.has-js) .hero-full .hero-media img:first-child{ opacity:1; }


/* ---------- Názov projektu: podčiarknutie sa dokreslí ---------- */
.index-name{ position:relative; display:inline-block; padding-bottom:.12em; }
.index-name::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.16,.6,.2,1);
}
.index-row:hover .index-name::after,
.index-row:focus-visible .index-name::after{ transform:scaleX(1); }

/* ---------- Blog ---------- */
.blog{ background:var(--bg); }
.clanky{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.5vw,56px); }
.clanok{ padding-top:clamp(18px,2vw,26px); border-top:1px solid var(--line); }
.clanok-stav{
  display:inline-block; margin-bottom:.9rem;
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.22em;
  font-size:.58rem; color:var(--muted);
}
.clanok h3{
  font-family:var(--font-display); font-weight:400; letter-spacing:.02em;
  font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.3; margin:0 0 .6rem;
}
.clanok p{ margin:0; font-size:.93em; }

/* ---------- Ikony sociálnych sietí ---------- */
.socialne{ list-style:none; margin:2.4rem 0 0; padding:0; display:flex; gap:1.1rem; }
.socialne a{
  display:grid; place-items:center; width:40px; height:40px;
  border:1px solid var(--line); border-radius:50%;
  transition:border-color .4s ease, background .4s ease;
}
.socialne a:hover{ border-color:var(--ink); background:var(--ink); }
.socialne svg{ width:17px; height:17px; fill:none; stroke:var(--ink); stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .4s ease, fill .4s ease; }
.socialne svg .plna{ fill:var(--ink); stroke:none; transition:fill .4s ease; }
.socialne a:hover svg{ stroke:var(--bg); }
.socialne a:hover svg .plna{ fill:var(--bg); }

@media (max-width:860px){
  .clanky{ grid-template-columns:1fr; gap:26px; }
}

@media (prefers-reduced-motion:reduce){
  .predel span::before, .hero-scroll span{ animation:none; }
  .hero-full .hero-media img{ animation:none; transition:none; }
}


/* ---------- Široký pás v Blogu ----------
   Anna chcela do sekcie obrázok po dĺžke. Ide cez celú šírku, mimo `.wrap`. */
.blog-pas{ position:relative; margin:0 0 clamp(28px,3.5vw,48px); overflow:hidden; }
.blog-pas img{ width:100%; aspect-ratio:21/8; object-fit:cover; display:block; }
/* Nadpis sekcie leží v obrázku. Závoj drží text čitateľný aj na svetlej fotke. */
.blog-pas::after{
  content:""; position:absolute; inset:0;
  background:rgba(18,18,17,.42);
}
.blog-pas-text{
  position:absolute; z-index:2; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--pad);
}
.blog-pas-text .h-display{ color:#F3F3F1; margin:0 0 .5em; }
.blog-pas-text p{ color:rgba(243,243,241,.9); margin:0; max-width:44ch; text-wrap:balance; }
@media (max-width:860px){
  .blog-pas img{ aspect-ratio:16/9; }
}

/* ---------- Predel medzi sekciami ----------
   Presne tá istá konštrukcia ako čiarka v úvode, ktorá sa Anne páčila:
   okienko s overflow:hidden a vnútri prúžok, ktorý ním prechádza.
   Predtým to bolo cez opacity a čiarka bola väčšinu času neviditeľná. */
.predel{
  display:flex; justify-content:center;
  padding-block:clamp(4px,.7vw,8px);
}
.predel span{
  display:block; width:1px; height:46px; overflow:hidden;
}
.predel span::before{
  content:""; display:block; width:1px; height:46px;
  background:var(--ink-soft); opacity:.6;
  animation:scrolldown 3s ease-in-out infinite;
}

/* ---------- Články v Blogu vedú na podstránku ---------- */
.clanok a{ display:block; color:inherit; }
.clanok a:hover h3{ opacity:.6; }
.clanok h3{ transition:opacity .4s ease; }
.clanok-viac{
  display:inline-block; margin-top:1rem;
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.2em;
  font-size:.6rem; color:var(--ink);
  padding-bottom:.5em; border-bottom:1px solid var(--line);
  transition:border-color .4s ease;
}
.clanok a:hover .clanok-viac{ border-color:var(--ink); }

/* ---------- Podstránka článku ---------- */
.clanok-stranka{ padding-top:calc(var(--header-h) + clamp(28px,4vh,56px)); }
.clanok-navrat{ margin:0 0 1.6rem; }
.clanok-navrat a{
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.2em;
  font-size:.6rem; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:.4em;
}
.clanok-navrat a:hover{ color:var(--ink); border-color:var(--ink); }
.clanok-stranka .clanok-stav{ margin-bottom:1rem; }
.clanok-stranka .h-display{ max-width:20ch; }
.clanok-perex{ font-size:1.05em; max-width:52ch; margin:0 0 clamp(26px,3.5vw,44px); text-wrap:pretty; }
/* Obrázok v článku patrí do rovnakého stĺpca ako text.
   Cez celú šírku pôsobil neúmerne široko oproti úzkemu textu. */
.clanok-foto{
  width:100%; max-width:var(--wrap); margin:0 auto clamp(26px,3.5vw,44px);
  padding-inline:var(--pad);
}
.clanok-foto::after{ display:none; }
.clanok-foto img{ aspect-ratio:16/9; }
.clanok-telo p{ max-width:60ch; }
.clanok-telo .btn{ margin-top:.6rem; }

/* ==========================================================================
   MOBIL · doladenie (1. 10. 2026)
   ========================================================================== */

@media (max-width:860px){
  /* CHYBA, ktorá kazila úvod: pravidlá `.hero-media{height:62vh/52vh}` zostali
     zo starej verzie so split herom. Vo fullscreen here spôsobili, že fotka
     pokryla len polovicu obrazovky a pod ňou ostala prázdna plocha. */
  .hero-full .hero-media{ height:auto !important; inset:0; }

  /* Text bol na mobile pridrobný. Drobné verzálky dvíham na čitateľnú mieru. */
  .eyebrow{ font-size:.78rem; letter-spacing:.24em; }
  .index-meta{ font-size:.7rem; letter-spacing:.16em; }
  .work-kind, .clanok-stav{ font-size:.7rem; letter-spacing:.18em; }
  .contact-direct .lbl, .field label{ font-size:.72rem; letter-spacing:.18em; }
  .footer-meta p{ font-size:.86rem; }
  .btn{ font-size:.78rem; }
  .index-name{ font-size:clamp(1.35rem,6.4vw,1.75rem); }

  /* Klikacie plochy majú mať aspoň 44 px, inak sa do nich prstom netrafíš. */
  .nav a{ padding-block:.55rem; }
  .nav-toggle{ width:44px; height:44px; }
  .nav-toggle span{ left:9px; right:9px; }
  .socialne a{ width:46px; height:46px; }
  .contact-direct a{ display:inline-block; padding-block:.3rem; }

  /* Vlasová čiarka v úvode sa na dotyk aj tak nedá trafiť, nech nie je odkaz. */
  .hero-full .hero-scroll{ pointer-events:none; }

  /* Galéria: väčšie a lepšie umiestnené šípky, nech neprekrývajú fotku. */
  .lb-close{ width:48px; height:48px; display:grid; place-items:center;
             top:8px; right:8px; font-size:1.8rem; }
  .lb-prev, .lb-next{ width:52px; height:52px; display:grid; place-items:center;
             font-size:2rem; top:auto; bottom:14px; transform:none;
             background:rgba(20,20,19,.55); border-radius:50%; }
  .lb-prev{ left:14px; }
  .lb-next{ right:14px; }
  .lb-count{ bottom:28px; }
  .lb-title{ font-size:.86rem; max-width:62vw; text-align:center; line-height:1.3; }
}

@media (max-width:560px){
  /* to isté, nech sa stará výška nevráti ani na úzkych displejoch */
  .hero-full .hero-media{ height:auto !important; }
  .blog-pas img{ aspect-ratio:4/3; }
  .blog-pas-text .h-display{ font-size:clamp(1.8rem,9vw,2.4rem); }
}

/* ---------- Tlačidlo Späť nahor ---------- */
.nahor{
  position:fixed; right:clamp(14px,4vw,28px); bottom:clamp(14px,4vw,28px); z-index:60;
  width:48px; height:48px; display:grid; place-items:center;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:50%;
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .4s ease, visibility .4s, transform .4s cubic-bezier(.16,.6,.2,1),
             background .4s ease, color .4s ease;
  box-shadow:0 2px 14px rgba(20,20,19,.10);
}
.nahor.vidno{ opacity:1; visibility:visible; transform:none; }
.nahor:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.nahor svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6;
            stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion:reduce){
  .nahor{ transition:opacity .2s ease, visibility .2s; }
}

@media (max-width:860px){
  /* logo v hlavičke a mail v pätke mali primalú klikaciu plochu */
  .brand{ padding-block:11px; }
  .footer-meta a{ display:inline-block; padding-block:.55rem; }
}

/* Po kliknutí na položku v menu sa nadpis sekcie schovával pod pevnú hlavičku.
   scroll-margin posunie cieľ skoku o jej výšku nižšie. */
section[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }
@media (max-width:860px){
  section[id]{ scroll-margin-top:84px; }
}

/* ==========================================================================
   MOBIL · oživenie sekcií (2. 10. 2026)
   Na desktope tvoria štruktúru stĺpce. Keď sa poskladajú pod seba, splynú.
   Namiesto deliacich čiar dávame jemné prechody, aby to ostalo pokojné.
   ========================================================================== */

@media (max-width:860px){

  /* ---------- Od návrhu po kľúče: kroky dostanú číslo s prechodom ---------- */
  .services-grid{ counter-reset:krok; gap:0; }
  .service{
    counter-increment:krok;
    position:relative;
    padding:clamp(26px,5vw,36px) 0 clamp(26px,5vw,36px) 58px;
  }
  /* Číslo je vyplnené prechodom, hore sýte, dole sa vytráca. */
  .service::before{
    content:counter(krok, decimal-leading-zero);
    position:absolute; left:0; top:clamp(22px,4.6vw,32px);
    font-family:var(--font-brand); font-size:2.1rem; line-height:1; letter-spacing:.02em;
    background:linear-gradient(180deg, var(--ink-soft) 0%, rgba(28,28,27,.14) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  /* Zvislá niť vedľa čísla spája kroky do postupnosti, na koncoch sa stráca. */
  .service::after{
    content:""; position:absolute; left:17px; top:0; bottom:0; width:1px;
    background:linear-gradient(180deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
  }
  .service:first-child::after{ background:linear-gradient(180deg, transparent 30%, var(--line) 60%, var(--line) 78%, transparent); }
  .service:last-child::after{ background:linear-gradient(180deg, transparent, var(--line) 22%, var(--line) 42%, transparent 72%); }
  .service h3{ margin-bottom:.55em; }
  .service p{ max-width:36ch; }

  /* ---------- Kontakt: údaje dostanú vlastnú plochu s jemným prechodom ---------- */
  .contact-direct{
    position:relative; gap:1.4rem;
    margin-top:2rem; padding:clamp(22px,5vw,30px) clamp(18px,4.5vw,24px);
    background:linear-gradient(180deg, rgba(28,28,27,.045), rgba(28,28,27,0));
    border-radius:2px;
  }
  .contact-direct::before{
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
  }
  .contact-direct .lbl{ margin-bottom:.1rem; }
  .contact-direct a, .contact-direct .val{ font-size:1.08rem; }

  /* formulár oddelíme vzduchom a vlasovou niťou, nie čiarou cez celú šírku */
  .contact-form{ position:relative; margin-top:clamp(30px,6vw,44px); padding-top:clamp(26px,5vw,36px); }
  .contact-form::before{
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
  }
  .socialne{ margin-top:1.8rem; }
}

/* Obrázky sú obalené v <picture> kvôli WebP. `display:contents` zariadi,
   že sa obal nesprá­va ako prvok rozloženia a všetky doterajšie pravidlá
   písané na `img` platia ďalej bez zmeny. */
picture{ display:contents; }

/* ============================================================
   Podstránka Projekty
   Mriežka kariet, aby bolo vidieť všetky projekty naraz.
   Zoznam s jednou veľkou fotkou z úvodnej stránky by sa pri
   desiatich položkách natiahol cez niekoľko obrazoviek.
   ============================================================ */
.index-viac{
  display:flex; align-items:center; gap:clamp(14px,2vw,26px);
  flex-wrap:wrap; margin:clamp(26px,3.4vw,44px) 0 0;
}
.index-viac-pozn{
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.22em;
  font-size:.6rem; color:var(--muted);
}

.podstranka-hlava{ padding-top:calc(var(--header-h) + clamp(28px,5vh,64px)); }
.podstranka-hlava .h-display{ margin:.25em 0 .6rem; }
.omrvinky{
  display:flex; gap:.7em; align-items:baseline;
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.22em;
  font-size:.6rem; color:var(--muted);
}
.omrvinky a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; }
.omrvinky a:hover{ color:var(--ink); border-bottom-color:var(--line); }

.projekty-mriezka{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(22px,2.6vw,40px) clamp(18px,2.2vw,32px);
}
.projekt-karta{
  display:flex; flex-direction:column; gap:.75em;
  width:100%; text-align:left; background:none; border:0; padding:0;
  cursor:pointer; color:var(--ink); font:inherit;
}
.projekt-foto{
  display:block; overflow:hidden; background:var(--sand-soft);
  aspect-ratio:4/3;
}
.projekt-foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.16,.6,.2,1);
}
.projekt-karta:hover .projekt-foto img,
.projekt-karta:focus-visible .projekt-foto img{ transform:scale(1.04); }
.projekt-karta:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }
.projekt-nazov{
  font-family:var(--font-display); font-weight:400; letter-spacing:.02em;
  font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.2;
}
.projekt-meta{
  display:flex; gap:.9em; align-items:baseline; flex-wrap:wrap;
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.22em;
  font-size:.6rem; color:var(--muted);
}
.projekt-meta em{ font-style:normal; }

.podstranka-pata .section-lead{ margin-bottom:1.4rem; }

/* Desať projektov v troch stĺpcoch nechá poslednú kartu samu vľavo
   a vedľa nej dve prázdne polia. Posunieme ju do stredu. */
.projekt-karta:last-child:nth-child(3n+1){ grid-column:2; }

/* Hlava podstránky už dýcha vlastným odsadením, sekcia pod ňou
   nemusí pridávať ďalšie. */
.podstranka-hlava{ padding-bottom:clamp(10px,1.4vh,18px); }

@media (max-width:1040px){
  .projekty-mriezka{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .projekt-karta:last-child:nth-child(3n+1){ grid-column:auto; }
}
@media (max-width:700px){
  /* hlavička je na telefóne nižšia ako premenná --header-h, inak nad
     omrvinkami ostane pás prázdna na dva prsty */
  .podstranka-hlava{ padding-top:calc(var(--header-h) + clamp(6px,1.6vh,18px)); }
  .projekty-mriezka{ grid-template-columns:minmax(0,1fr); gap:clamp(26px,6vw,36px); }
  .projekt-foto{ aspect-ratio:3/2; }
  .index-viac .btn{ width:100%; text-align:center; }
  .index-viac-pozn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .projekt-foto img{ transition:none; }
  .projekt-karta:hover .projekt-foto img{ transform:none; }
}

/* ============================================================
   Fotka v sekcii Kontakt
   Na telefóne bol celý záver stránky len text a formulár.
   Fotka cez celú šírku dá sekcii váhu hneď pod nadpisom.
   Na veľkej obrazovke je kontakt dvojstĺpcový a dobre vyzerá
   aj bez nej, preto sa zobrazuje len do 860 px.
   ============================================================ */
.kontakt-foto{ display:none; }

@media (max-width:860px){
  .kontakt-foto{
    display:block; margin:clamp(26px,6vw,36px) 0 0; overflow:hidden;
    /* von z odsadenia .wrap, nech ide fotka od kraja po kraj */
    margin-inline:calc(var(--pad) * -1);
    width:calc(100% + var(--pad) * 2);
    background:var(--sand-soft);
  }
  .kontakt-foto img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
  /* panel s údajmi už nemusí odsadzovať od textu, odsadzuje ho fotka */
  .contact-direct{ margin-top:clamp(24px,5vw,32px); }
}

/* ============================================================
   Telo článku
   Doteraz mal blog len placeholder odstavce, takže nadpisy,
   zoznamy a otázky nemali štýl. Šírka textu je držaná na 60ch,
   lebo dlhší riadok sa na veľkom monitore číta ťažko.
   ============================================================ */
.clanok-meta{
  display:flex; gap:1.4em; align-items:baseline; margin:0 0 1.1rem;
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.22em;
  font-size:.6rem; color:var(--muted);
}
.clanok-telo h2{
  font-family:var(--font-display); font-weight:400; letter-spacing:.02em;
  font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.25;
  max-width:34ch; margin:clamp(34px,4vw,52px) 0 .7rem;
  /* balance rozdelí nadpis na rovnako dlhé riadky, aby sa „4 až 8" neoddelilo
     od slova „týždňov". pretty zasa nenechá v odseku samotné slovo na konci. */
  text-wrap:balance;
}
.clanok-telo h2:first-child{ margin-top:0; }
.clanok-telo p{ max-width:60ch; margin:0 0 1.05rem; text-wrap:pretty; }
.clanok-telo ul{ max-width:60ch; margin:0 0 1.05rem; padding-left:1.1rem; }
.clanok-telo li{ margin-bottom:.6rem; padding-left:.3rem; text-wrap:pretty; }
.clanok-telo li::marker{ color:var(--muted); }
.clanok-telo strong{ font-weight:500; }
.clanok-telo a:not(.btn){ border-bottom:1px solid var(--sand); }
.clanok-telo a:not(.btn):hover{ border-color:var(--ink); }
.clanok-telo p.clanok-cta{ margin-top:clamp(36px,5vw,56px); }

/* Otázky a odpovede. <details> preto, lebo prehliadač rieši otváranie sám
   a bez JavaScriptu zostane obsah čitateľný aj vyhľadávačom. */
/* Časté otázky sú doplnok, nie ďalšia kapitola, preto menší nadpis. */
.clanok-telo h2.faq-nadpis{ font-size:clamp(1.02rem,1.5vw,1.16rem); margin-top:clamp(40px,5.5vw,64px); }
.faq{ max-width:60ch; border-top:1px solid var(--line); }
.faq:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.05rem 2rem 1.05rem 0; position:relative;
  font-family:var(--font-display); font-size:1.02rem; letter-spacing:.01em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.5rem; top:50%; width:9px; height:9px;
  border-right:1px solid var(--ink-soft); border-bottom:1px solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s;
}
.faq[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq summary:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
.faq p{ margin:0 0 1.2rem; color:var(--ink-soft); }

.dalsie-clanky{ border-top:1px solid var(--line); }
.clanok h3{ text-wrap:balance; }
.clanok-dalsie-nadpis{
  font-family:var(--font-brand); text-transform:uppercase; letter-spacing:.24em;
  font-size:.62rem; color:var(--muted); font-weight:400;
  margin:0 0 clamp(18px,2.4vw,30px);
}

@media (max-width:700px){
  .clanok-telo h2{ margin-top:clamp(28px,7vw,38px); }
  .clanok-cta .btn{ width:100%; text-align:center; }
}
@media (prefers-reduced-motion: reduce){
  .faq summary::after{ transition:none; }
}

/* Pasca na robotov. Nesmie byť display:none, niektoré roboty taký prvok
   preskočia. Takto je mimo obrazovky, čítačka ho preskočí cez aria-hidden. */
.pasca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note-chyba{ color:#8A3A32; }

/* ============================================================
   Lišta so súhlasom s meraním
   V EÚ sa merací kód nesmie spustiť pred súhlasom, takže táto
   lišta nie je ozdoba, je podmienka, aby sa smel pustiť pixel.
   Nezakrýva obsah, drží sa dole a po rozhodnutí zmizne.
   ============================================================ */
.suhlas{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,40px);
  padding:clamp(16px,2vw,22px) var(--pad);
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -10px 30px rgba(28,28,27,.06);
  transform:translateY(100%); transition:transform .45s cubic-bezier(.16,.6,.2,1);
}
.suhlas.vidno{ transform:translateY(0); }
.suhlas-text{ margin:0; max-width:74ch; font-size:.88rem; color:var(--ink-soft); }
.suhlas-text a{ border-bottom:1px solid var(--sand); color:var(--ink); }
.suhlas-text a:hover{ border-color:var(--ink); }
.suhlas-tlacidla{ display:flex; gap:12px; flex-shrink:0; }
.suhlas .btn{ white-space:nowrap; }

@media (max-width:760px){
  .suhlas{ flex-direction:column; align-items:stretch; gap:14px; }
  .suhlas-tlacidla{ display:grid; grid-template-columns:1fr 1fr; }
  .suhlas .btn{ width:100%; text-align:center; }
  /* nech lišta neprekrýva tlačidlo Späť nahor */
  .suhlas ~ .nahor{ bottom:calc(env(safe-area-inset-bottom, 0px) + 150px); }
}
@media (prefers-reduced-motion: reduce){
  .suhlas{ transition:none; }
}