/* BARBERIS — lapidárny register: mramor, lapis, atrament. Cinzel + Albert Sans. */
:root{
  --marble:#F2EFE9; --marble-2:#E8E3D9; --stone:#CEC6B8; --stone-d:#8C8578;
  --ink:#15171C; --ink-2:#262A33; --text:#2B2E36; --muted:#595D68;
  --lapis:#233F94; --lapis-d:#1A2F70; --lapis-t:#DCE3F5; --sky:#8FA8F0; --sky-l:#C3D0F7;
  --display:'Cinzel', 'Times New Roman', serif;
  --body:'Albert Sans', system-ui, sans-serif;
  --nav:4.4rem; --r:3px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:clamp(15px, .55vw + 11px, 19px); scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--marble); color:var(--text); font:400 1rem/1.6 var(--body); overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:var(--lapis)}
h1,h2,h3{font-family:var(--display); font-weight:700; color:var(--ink); line-height:1.08; margin:0; letter-spacing:.02em}
h2{font-size:clamp(1.9rem, 3.4vw, 2.9rem)}
.wrap{width:min(100% - 2.5rem, 72rem); margin-inline:auto}
@media (max-width:600px){.wrap{width:calc(100% - 2rem)}}
section[id]{scroll-margin-top:var(--nav)}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:100}
.skip:focus{left:1rem}
:focus-visible{outline:3px solid var(--sky); outline-offset:3px}

.eyebrow{font:600 .78rem/1 var(--body); letter-spacing:.28em; text-transform:uppercase; color:var(--lapis); margin:0 0 1rem; display:flex; align-items:center; gap:.8rem}
.eyebrow::before{content:""; width:2.2rem; height:2px; background:currentColor}
.eyebrow--sky{color:var(--sky)}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.7rem 1.3rem; border-radius:var(--r); font:600 .95rem/1 var(--body); letter-spacing:.04em; text-decoration:none; border:2px solid transparent; transition:background .2s, color .2s, border-color .2s, transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn--lapis{background:var(--lapis); color:#fff}
.btn--lapis:hover{background:var(--lapis-d)}
.btn--line{border-color:var(--ink); color:var(--ink); background:transparent}
.btn--line:hover{background:var(--ink); color:var(--marble)}
.btn--sky{background:var(--sky); color:var(--ink)}
.btn--sky:hover{background:var(--sky-l)}
.btn--lineinv{border-color:var(--marble); color:var(--marble)}
.btn--lineinv:hover{background:var(--marble); color:var(--ink)}
.btn--big{min-height:52px; padding:.9rem 1.6rem; font-size:1rem}

.doplnit{display:inline-block; background:#FFE8A3; color:#4A3500; border:1px dashed #B58900; padding:.15rem .5rem; border-radius:2px; font:600 .82rem/1.45 var(--body); letter-spacing:0; text-transform:none}
p.doplnit,.kontakt .doplnit,.foot .doplnit,.cennik .doplnit{background:#FFE8A3; color:#4A3500}

/* NAV */
.nav{position:sticky; top:0; z-index:50; background:var(--marble); border-bottom:1px solid var(--stone)}
.nav__in{display:flex; align-items:center; gap:1.5rem; height:var(--nav)}
.nav__logo{display:flex; align-items:center; min-height:44px}
.nav__logo img{height:2.3rem; width:auto}
.nav__links{display:flex; gap:1.6rem; margin-left:auto}
.nav__links a{color:var(--ink); text-decoration:none; font-weight:500; font-size:.92rem; padding:.6rem 0; min-height:44px; display:inline-flex; align-items:center; position:relative}
.nav__links a::after{content:""; position:absolute; left:0; right:0; bottom:.45rem; height:2px; background:var(--lapis); transform:scaleX(0); transition:transform .25s}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__burger{display:none; margin-left:auto; width:48px; height:48px; border:0; background:transparent; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:7px}
.nav__burger span{display:block; width:26px; height:2px; background:var(--ink); transition:transform .25s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.drawer{background:var(--marble); color:var(--ink); border-top:1px solid var(--stone); display:flex; flex-direction:column; align-items:center; padding:1rem 1rem 1.5rem; gap:.2rem}
.drawer a{color:var(--ink); text-decoration:none; font:600 1.05rem/1 var(--body); min-height:48px; display:flex; align-items:center}
.drawer a.btn--lapis{color:#fff; margin-top:.6rem; padding-inline:1.6rem}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
}
@media (min-width:901px){.drawer{display:none!important}}

/* HERO */
.hero{min-height:calc(100svh - var(--nav)); display:flex; flex-direction:column; justify-content:center; padding:2.5rem 0 2rem; background:
  linear-gradient(90deg, transparent calc(100% - 1px), rgba(35,63,148,.06) 0) 0 0/ 6rem 100%, var(--marble)}
.hero__in{display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center}
.hero__text{min-width:0}
.hero__h{font-size:clamp(2.6rem, min(6.2vw, 9.5svh), 5.6rem); letter-spacing:.015em; margin-bottom:1.3rem}
.hero__lead{font-size:1.15rem; max-width:34rem; color:var(--text); margin:0 0 1.8rem}
.hero__lead strong{color:var(--lapis)}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem}
.hero__note{font-size:.88rem; color:var(--muted); margin:1rem 0 0}
.hero__arch{position:relative; margin:0; justify-self:end; width:100%; max-width:27rem}
.hero__arch picture{display:block; border-radius:999px 999px 4px 4px; overflow:hidden; border:.55rem solid #fff; box-shadow:0 0 0 1px var(--stone), 0 30px 60px -30px rgba(21,23,28,.45); aspect-ratio:4/5; max-height:calc(100svh - var(--nav) - 11rem)}
.hero__arch img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.hero__stamp{position:absolute; left:-2.4rem; bottom:1.6rem; width:5.6rem; height:5.6rem; color:var(--lapis); background:var(--marble); border-radius:50%; padding:.8rem; box-shadow:0 0 0 1px var(--stone)}
.facts{list-style:none; margin:2.2rem 0 0; padding:1.1rem 0 0; border-top:1px solid var(--stone); display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.facts li{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.facts b{font:700 1.15rem/1.2 var(--display); color:var(--ink)}
.facts span{font-size:.86rem; color:var(--muted)}
@media (max-width:900px){
  .hero{padding-top:1.4rem}
  .hero__in{grid-template-columns:1fr; gap:1.6rem}
  .hero__arch{justify-self:center; max-width:17rem; order:-1}
  .hero__arch picture{aspect-ratio:1/1; max-height:none}
  .hero__stamp{width:4rem; height:4rem; left:-1.4rem; bottom:.6rem; padding:.55rem}
  .hero__h{font-size:clamp(2.2rem, 10vw, 3.4rem)}
  .hero__lead{font-size:1.05rem; margin-bottom:1.3rem}
  .facts{grid-template-columns:1fr; gap:.6rem; margin-top:1.6rem}
  .facts li{flex-direction:row; gap:.6rem; align-items:baseline}
}
@media (max-width:420px){.hero__cta .btn{flex:1 1 100%}}

/* SECTIONS */
section{padding:clamp(4rem, 8vw, 7rem) 0}
.head{margin-bottom:2.8rem; max-width:40rem}
.head--row{max-width:none; display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap}
.head__side{max-width:22rem; margin:0; color:var(--muted); font-size:.95rem}

/* SLUŽBY — chrám: štít, päť stĺpov, základ */
.sluzby{background:var(--marble-2); color:var(--text)}
.chram{max-width:62rem; margin:0 auto}
.chram__stit{position:relative; height:clamp(4.5rem, 9vw, 7rem); background:var(--lapis); clip-path:polygon(50% 0, 100% 100%, 0 100%); display:flex; align-items:flex-end; justify-content:center; padding-bottom:.9rem}
.chram__stit span{font:700 clamp(.8rem, 1.4vw, 1.05rem)/1 var(--display); letter-spacing:.5em; color:var(--marble); margin-right:-.5em}
.chram__stlpy{list-style:none; margin:0; padding:.55rem 0 0; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.6rem, 1.6vw, 1.4rem); border-top:.55rem solid var(--ink)}
.stlp{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--marble); color:var(--ink); padding:0 .7rem 1.6rem; min-height:16rem; min-width:0;
  background-image:repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), rgba(35,63,148,.12) calc(20% - 2px) 20%); background-size:100% 100%; background-position:0 5.2rem; background-repeat:no-repeat}
.stlp svg{width:112%; margin:0 -6%; height:auto; aspect-ratio:80/32; color:var(--lapis); display:block}
.stlp__num{font:700 2.2rem/1 var(--display); color:var(--lapis); margin:1.4rem 0 auto; opacity:.9}
.stlp h3{font:600 1.02rem/1.3 var(--body); letter-spacing:0; color:var(--ink); margin-top:1.4rem; background:var(--marble); padding:.3rem .2rem}
.chram__zaklad{height:.55rem; background:var(--ink); margin-top:.55rem; box-shadow:0 .55rem 0 -.1rem var(--stone-d)}
.cennik{text-align:center; margin:2.6rem auto 0; max-width:40rem; color:var(--text)}
.cennik .doplnit{display:block; margin:0 auto .6rem; width:fit-content}
@media (max-width:900px){
  .chram__stit{height:3.4rem}
  .chram__stlpy{grid-template-columns:1fr; gap:.5rem}
  .stlp{flex-direction:row; min-height:0; padding:.8rem 1rem; gap:1rem; text-align:left; background-image:none}
  .stlp svg{width:3.4rem; margin:0; flex:none}
  .stlp__num{margin:0; font-size:1.3rem; width:2.2rem; flex:none}
  .stlp h3{margin:0; padding:0}
}
.js .vynor{opacity:0; transform:translateY(1.4rem); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.js .vynor.je{opacity:1; transform:none}
@media (min-width:901px){
  .js .stlp.vynor{transform:scaleY(.2); transform-origin:50% 100%}
  .js .stlp.vynor.je{transform:none}
}
@media (prefers-reduced-motion:reduce){.js .vynor,.js .stlp.vynor{opacity:1; transform:none; transition:none}}

/* O NÁS */
.onas{background:var(--marble)}
.onas__in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center}
.onas__foto{margin:0}
.onas__foto picture{display:block; border-radius:4px 4px 999px 999px; overflow:hidden; border:.55rem solid #fff; box-shadow:0 0 0 1px var(--stone)}
.onas__foto img{aspect-ratio:4/5; width:100%; object-fit:cover; object-position:40% 50%}
.onas__text{min-width:0}
.onas__text h2{margin-bottom:1.3rem}
.onas__text>p{max-width:36rem}
.citat{margin:1.8rem 0; padding:1.2rem 0 1.2rem 1.4rem; border-left:4px solid var(--lapis)}
.citat p{margin:0 0 .5rem; font:500 1.2rem/1.45 var(--body); color:var(--ink)}
.citat cite{font-style:normal; font-size:.86rem; color:var(--muted)}
@media (max-width:800px){.onas__in{grid-template-columns:1fr}.onas__foto{max-width:22rem}}

/* RECENZIE */
.recenzie{background:var(--ink); color:var(--marble); overflow:hidden}
.recenzie h2{color:var(--marble)}
.rec__head{display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap; margin-bottom:2.4rem}
.rec__meta{max-width:24rem; margin:0; color:#B9BCC6; font-size:.95rem}
.rec__meta a{color:var(--sky)}
.pas{display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.4rem max(1.25rem, calc((100vw - 72rem)/2)) 1.4rem; scroll-padding-inline:max(1.25rem, calc((100vw - 72rem)/2)); scrollbar-width:thin; scrollbar-color:var(--lapis) transparent}
@media (max-width:600px){.pas{padding-inline:1rem; scroll-padding-inline:1rem}}
.doska{flex:0 0 min(84vw, 23rem); scroll-snap-align:start; margin:0; background:var(--marble); color:var(--ink); padding:1.6rem 1.5rem 1.4rem; display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem; border-radius:2px; position:relative;
  box-shadow:inset 0 0 0 1px var(--stone), inset 0 0 0 .45rem var(--marble), inset 0 0 0 calc(.45rem + 1px) var(--stone)}
.doska blockquote{margin:0; font-size:.98rem; line-height:1.55; color:var(--text)}
.doska figcaption{font:700 .95rem/1.2 var(--display); color:var(--ink); display:flex; flex-direction:column; gap:.3rem}
.doska figcaption span{font:500 .8rem/1 var(--body); color:var(--lapis); letter-spacing:.05em}
.pas__ovl{display:flex; gap:.6rem; justify-content:flex-end}
.kruh{width:48px; height:48px; border-radius:50%; border:2px solid var(--sky); background:transparent; color:var(--sky); font-size:1.5rem; line-height:1; cursor:pointer}
.kruh:hover{background:var(--sky); color:var(--ink)}

/* GALÉRIA */
.galeria{background:var(--marble)}
.mriezka{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
.mriezka li{min-width:0; overflow:hidden; border-radius:2px; background:var(--marble-2)}
.mriezka img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .6s}
.mriezka li:hover img{transform:scale(1.04)}
@media (max-width:700px){.mriezka{grid-template-columns:repeat(2,1fr); gap:.5rem}.mriezka--desk{display:none}}

/* KONTAKT */
.kontakt{background:var(--lapis-d); color:var(--marble)}
.kontakt h2{color:#fff; margin-bottom:1.4rem}
.kontakt__in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 6vw, 5rem)}
.tel{display:block; font:700 clamp(2rem, 4.4vw, 3.3rem)/1 var(--body); color:#fff; text-decoration:none; margin-bottom:1.6rem; letter-spacing:.02em}
.kontakt__dl{margin:0; display:grid; gap:1.6rem}
.kontakt__dl div{border-top:1px solid rgba(195,208,247,.35); padding-top:1rem}
.kontakt dt{font:600 .75rem/1 var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--sky-l); margin-bottom:.6rem}
.kontakt dd{margin:0; color:#fff; line-height:1.6}
.kontakt dd a{color:#fff; display:inline-flex; align-items:center; min-height:44px}
.hodiny{border-collapse:collapse; width:100%; max-width:22rem; margin-bottom:.8rem}
.hodiny th{text-align:left; font-weight:400; color:var(--sky-l); padding:.3rem 1rem .3rem 0}
.hodiny td{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; color:#fff}
@media (max-width:800px){.kontakt__in{grid-template-columns:1fr}}

/* FOOTER */
.foot{background:var(--ink); color:#B9BCC6; padding:2.6rem 0 6rem; font-size:.88rem}
.foot__in{display:flex; flex-direction:column; gap:.4rem}
.foot__logo{height:2.2rem; width:auto; margin-bottom:1rem}
.foot p{margin:0}
.foot a{color:#fff; display:inline-flex; min-height:44px; align-items:center}
@media (min-width:901px){.foot{padding-bottom:2.6rem}}

/* MOBILNÁ LIŠTA */
.lista{position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; gap:.6rem; padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background:var(--marble); border-top:1px solid var(--stone)}
.lista .btn{flex:1}
@media (max-width:900px){.lista{display:flex}}
.tel{min-height:44px}
@media (max-width:600px){.eyebrow{letter-spacing:.18em; font-size:.72rem}.eyebrow::before{width:1.4rem}}
@media (max-width:600px){.pas{align-items:flex-start}}