/* =====================================================
   Villa Colomer — design CSS (adaptace návrhu na bloky)
   ===================================================== */

:root{
  --paper:#F6EFE1;
  --sand:#EBDFC7;
  --travertine:#DBC7A3;
  --terracotta:#C4623B;
  --terra-deep:#9E4526;
  --saffron:#E4A22B;
  --olive:#6E7357;
  --olive-deep:#4B4F3B;
  --ink:#28251E;
  --ink-soft:#6A6456;
  --pool:#2E8C9E;
  --pool-deep:#1E6675;
  --midnight:#123B45;
  --white:#FBF7EE;
  --line:rgba(40,37,30,.16);
  --line-soft:rgba(40,37,30,.09);
  --ff-display:"Fraunces",Georgia,serif;
  --ff-body:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--pool);color:var(--white)}

h1,h2,h3{font-family:var(--ff-display);font-weight:400;line-height:1.04;letter-spacing:-.01em}
.eyebrow{
  font-family:var(--ff-body);font-size:.72rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--terracotta);
}

/* ---------- Reveal-on-scroll (přidává JS, v editoru neaktivní) ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Zrno přes celou stránku ---------- */
/* Bez mix-blend-mode — fixní fullscreen blend vrstva rozbíjí kompozitor a stojí výkon */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.hero,section,header.nav,#lb,#loader,footer.site-footer{position:relative;z-index:2}

/* ---------- Organické skvrny ---------- */
.blob{position:absolute;z-index:0;pointer-events:none;filter:blur(2px);opacity:.85}
.blob.b-terra{background:radial-gradient(circle at 35% 30%,var(--saffron),var(--terracotta) 70%)}
.blob.b-sea{background:radial-gradient(circle at 40% 35%,#4FB4C4,var(--pool-deep) 72%)}
.blob.b-olive{background:radial-gradient(circle at 40% 35%,#8B9270,var(--olive-deep) 75%)}

/* ---------- Vlnovka mezi sekcemi ---------- */
.wave{display:block;width:100%;height:44px;color:inherit}
.wave svg{display:block;width:100%;height:100%}

/* ---------- Motiv citrusu ---------- */
.motif{width:64px;height:64px;color:var(--terracotta);opacity:.9;margin:22px 0 4px}

/* ---------- Chip ---------- */
.chip{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 13px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.35);
  font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta)}
.chip::before{content:"";width:9px;height:9px;border-radius:2px;transform:rotate(45deg);flex:none;background:var(--terracotta)}

/* ---------- Podtržení klikyhákem ---------- */
.squig{position:relative;display:inline-block}
.squig::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.36em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 7 C 18 1, 30 11, 46 6 S 74 1, 90 7 S 112 10, 118 5' fill='none' stroke='%23C4623B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  background-size:auto 100%;opacity:.9;
}

/* ---------- Loader ---------- */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--paper);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.6rem;
  transition:opacity .9s ease,visibility .9s ease;
}
#loader.done{opacity:0;visibility:hidden}
#loader .lm{font-family:var(--ff-display);font-size:clamp(1.6rem,4vw,2.4rem);font-style:italic;color:var(--ink);letter-spacing:.02em}
#loader .lbar{width:150px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
#loader .lbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--saffron),var(--terracotta));animation:load 1.6s cubic-bezier(.6,.02,.2,1) forwards}
#loader .sun{width:34px;height:34px;color:var(--terracotta);animation:spin 3.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes load{to{width:100%}}
@media (prefers-reduced-motion:reduce){#loader .sun{animation:none}#loader .lbar i{animation:none;width:100%}}
/* Bez JS se loader vůbec nezobrazí */
html:not(.js) #loader{display:none}

/* ---------- Nav ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(20px,5vw,60px);
  transition:background .5s ease,padding .5s ease,box-shadow .5s ease;
}
body.admin-bar header.nav{top:32px}
header.nav.solid{background:rgba(243,238,228,.9);backdrop-filter:blur(12px);padding:16px clamp(20px,5vw,60px);box-shadow:0 1px 0 var(--line-soft)}
.brand,.brand a{font-family:var(--ff-display);font-size:1.15rem;letter-spacing:.02em;color:#fff;transition:color .5s;font-weight:400}
header.nav.solid .brand,header.nav.solid .brand a{color:var(--ink)}
.navwrap{display:flex;gap:32px;align-items:center}
nav.navlinks{gap:32px}
.navlinks ul{display:flex;gap:32px;align-items:center;list-style:none;flex-wrap:nowrap}
.navlinks a{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.9;transition:color .5s,opacity .3s}
header.nav.solid .navlinks a{color:var(--ink)}
.navlinks a:hover{opacity:.6}
/* !important: core layout styly (.wp-block-navigation-is-layout-flex) se tisknou až za theme CSS */
@media (max-width:820px){nav.navlinks{display:none !important}}

/* ---------- Sekce ---------- */
section{position:relative}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,60px)}
.band{padding:clamp(80px,12vh,150px) 0}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.hero .bg,.bleed .bg{position:absolute;inset:-8% 0;margin:0;will-change:transform}
.hero .bg img,.bleed .bg img{width:100%;height:100%;object-fit:cover}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,18,.35) 0%,rgba(20,22,18,0) 30%,rgba(20,22,18,.15) 60%,rgba(20,22,18,.62) 100%)}
.hero .inner{position:relative;z-index:2;padding:0 clamp(20px,5vw,60px) clamp(48px,8vh,90px);width:100%;color:#fff}
.hero .eyebrow{color:rgba(255,255,255,.82)}
.hero h1{font-size:clamp(3rem,11vw,9rem);color:#fff;font-weight:300;margin:.18em 0 .28em;letter-spacing:-.02em}
.hero h1 em{font-style:italic;font-weight:300}
.hero .sub{font-size:clamp(1rem,1.6vw,1.25rem);color:rgba(255,255,255,.9);font-weight:300;max-width:34ch}
.hero .scrollcue{position:absolute;bottom:26px;right:clamp(20px,5vw,60px);z-index:2;color:#fff;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:12px;opacity:.85}
.hero .scrollcue i{display:block;width:1px;height:44px;background:rgba(255,255,255,.6);position:relative;overflow:hidden}
.hero .scrollcue i::after{content:"";position:absolute;inset:0;background:#fff;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.hero .scrollcue i::after{animation:none}}

/* ---------- Story ---------- */
.story{background:var(--paper);overflow:hidden}
.story .grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,6vw,80px);align-items:start}
@media(min-width:900px){.story .grid{grid-template-columns:0.9fr 1.1fr}}
.story h2{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:300}
.story h2 em{font-style:italic}
.story .lead{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:300;color:var(--ink);line-height:1.5}
.story .body > p{color:var(--ink-soft);margin-bottom:1.15em;max-width:52ch}
.story .body > p.lead{color:var(--ink)}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 34px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.meta-row p{font-size:.82rem;color:var(--ink-soft);margin:0}
.meta-row p b,.meta-row p strong{display:block;font-family:var(--ff-display);font-size:1.7rem;color:var(--terracotta);font-weight:400;letter-spacing:-.01em}

/* ---------- Celoplošný obrazový pás ---------- */
.bleed{position:relative;height:82vh;min-height:460px;overflow:hidden}
.bleed .cap{position:absolute;left:clamp(20px,5vw,60px);bottom:clamp(24px,5vh,50px);color:#fff;z-index:2;max-width:30ch}
.bleed .cap .eyebrow{color:rgba(255,255,255,.85)}
.bleed .cap .capline{font-family:var(--ff-display);font-style:italic;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:300;margin-top:.4em;line-height:1.15}
.bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45));pointer-events:none}
.bleed .cap{z-index:3}

/* ---------- Proč se hosté vracejí ---------- */
.love{background:var(--white)}
.love .head{max-width:44ch;margin-bottom:clamp(40px,6vh,70px)}
.love h2{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:300;margin-top:.3em}
.love-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(min-width:640px){.love-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.love-grid{grid-template-columns:1fr 1fr 1fr}}
.love-cell{position:relative;background:var(--white);padding:clamp(26px,3vw,40px);min-height:210px;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s ease;overflow:hidden}
.love-cell.ac-pool{--ac:var(--pool)}
.love-cell.ac-saffron{--ac:var(--saffron)}
.love-cell.ac-terracotta{--ac:var(--terracotta)}
.love-cell.ac-olive{--ac:var(--olive)}
.love-cell::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac,var(--terracotta));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.love-cell:hover{background:var(--paper)}
.love-cell:hover::before{transform:scaleX(1)}
.love-cell .n{font-family:var(--ff-display);font-size:1.4rem;color:var(--ac,var(--terracotta));font-variant-numeric:tabular-nums;font-style:italic}
.love-cell h3{font-size:1.5rem;font-weight:400;margin-top:auto}
.love-cell h3 + p{font-size:.9rem;color:var(--ink-soft);margin-top:10px}

/* ---------- Prostory ---------- */
.spaces{background:var(--paper)}
.spaces .intro-wrap{padding-top:clamp(70px,10vh,120px);padding-bottom:clamp(20px,4vh,50px);max-width:1280px;margin:0 auto}
.spaces .intro-wrap > div{max-width:44ch}
.spaces h2{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:300;margin-top:.3em}
.space{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch;border-top:1px solid var(--line)}
.space:last-child{border-bottom:1px solid var(--line)}
@media(min-width:860px){.space{grid-template-columns:repeat(2,minmax(0,1fr))}.space.flip .ph{order:2}}
.space .ph{position:relative;overflow:hidden;min-height:340px;aspect-ratio:4/3;min-width:0;max-width:100%}
/* na mobilu nesmí aspect-ratio + min-height vynutit šířku přes viewport */
@media(max-width:859px){.space .ph{min-height:0}}
.space .ph figure{position:absolute;inset:0;margin:0}
.space .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.space:hover .ph img{transform:scale(1.05)}
.space .tx{padding:clamp(36px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.space .tx .idx{font-size:.72rem;letter-spacing:.2em;color:var(--terracotta);margin-bottom:18px;font-weight:500}
.space .tx h3{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:300}
.space .tx h3 em{font-style:italic}
.space .tx h3 + p{color:var(--ink-soft);margin-top:16px;max-width:46ch}

/* ---------- Galerie ---------- */
.gallery{background:var(--midnight);color:var(--paper)}
.gallery .head{margin-bottom:clamp(36px,5vh,60px)}
.gallery h2{color:var(--white);font-size:clamp(2rem,4.2vw,3.2rem);font-weight:300;margin-top:.3em}
.gallery .eyebrow{color:var(--saffron)}
.gallery .head p:not(.eyebrow){color:rgba(251,249,244,.6);margin-top:14px;max-width:40ch}
.wp-block-gallery.masonry{display:block;columns:2;column-gap:14px}
@media(min-width:760px){.wp-block-gallery.masonry{columns:3;column-gap:16px}}
/* :not(#individual-image) kvůli specificitě core gallery stylů */
.wp-block-gallery.masonry.has-nested-images figure.wp-block-image:not(#individual-image){
  width:100%;break-inside:avoid;margin:0 0 14px;overflow:hidden;cursor:pointer;position:relative;background:#3a382f;
}
@media(min-width:760px){.wp-block-gallery.masonry.has-nested-images figure.wp-block-image:not(#individual-image){margin-bottom:16px}}
.wp-block-gallery.masonry .wp-block-image img{width:100%;height:auto;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .3s}
.wp-block-gallery.masonry .wp-block-image::after{content:"Zvětšit";position:absolute;left:14px;bottom:12px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(8px);transition:.4s;pointer-events:none}
.wp-block-gallery.masonry .wp-block-image:hover img{transform:scale(1.06)}
.wp-block-gallery.masonry .wp-block-image:hover::after{opacity:1;transform:none}

/* ---------- Okolí ---------- */
.explore{background:var(--white);overflow:hidden}
.explore .top{display:grid;grid-template-columns:1fr;gap:36px;margin-bottom:clamp(36px,5vh,56px)}
@media(min-width:900px){.explore .top{grid-template-columns:1fr 1fr;align-items:end}}
.explore h2{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:300;margin-top:.3em}
.explore h2 em{font-style:italic}
.explore .top p:not(.eyebrow){color:var(--ink-soft);max-width:44ch}
.explore-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(min-width:600px){.explore-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.explore-grid{grid-template-columns:repeat(3,1fr)}}
.poi{background:var(--white);padding:26px 26px 30px;transition:background .4s}
.poi:hover{background:var(--paper)}
.poi .d{font-family:var(--ff-display);font-size:1.5rem;color:var(--pool-deep);font-weight:400}
.poi h4{font-size:1.02rem;font-weight:500;margin:6px 0 4px;letter-spacing:.01em;font-family:var(--ff-body)}
.poi p:not(.d){font-size:.86rem;color:var(--ink-soft)}
.mapwrap{margin-top:30px;border:1px solid var(--line);overflow:hidden;height:420px;background:var(--sand)}
.mapwrap iframe{width:100%;height:100%;border:0;filter:grayscale(.25) sepia(.08)}

/* ---------- Vybavení ---------- */
.amen{background:var(--paper);overflow:hidden}
.amen .head{margin-bottom:clamp(36px,5vh,54px)}
.amen h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:300;margin-top:.3em}
.amen-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(min-width:680px){.amen-list{grid-template-columns:repeat(3,1fr)}}
.amen-item{display:flex;align-items:center;gap:16px;padding:22px 8px;border-top:1px solid var(--line);font-size:.98rem}
.amen-item .ic{width:22px;height:22px;flex:none}
.amen-item p{margin:0}
.amen-item:nth-child(1),.amen-item:nth-child(2),.amen-item:nth-child(3){border-top:none}
@media(max-width:679px){.amen-item:nth-child(3){border-top:1px solid var(--line)}.amen-item:nth-child(2){border-top:none}}

/* ---------- Informace pro hosty (details akordeon) ---------- */
.guest{background:var(--white)}
.guest .lead{max-width:40ch;margin-bottom:clamp(34px,5vh,50px)}
.guest h2{font-size:clamp(2rem,4vw,3rem);font-weight:300;margin-top:.3em}
.acc{border-top:1px solid var(--line)}
.acc .wp-block-details{border-bottom:1px solid var(--line)}
.acc .wp-block-details summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 4px;font-family:var(--ff-display);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:400;color:var(--ink);
}
.acc .wp-block-details summary::-webkit-details-marker{display:none}
.acc .wp-block-details summary::after{
  content:"";width:16px;height:16px;flex:none;transition:transform .4s;
  background:
    linear-gradient(var(--terracotta),var(--terracotta)) center/100% 1px no-repeat,
    linear-gradient(var(--terracotta),var(--terracotta)) center/1px 100% no-repeat;
}
.acc .wp-block-details[open] summary::after{transform:rotate(45deg)}
.acc .wp-block-details > :not(summary){color:var(--ink-soft);max-width:60ch;padding:0 4px}
.acc .wp-block-details > p{margin-bottom:.6em}
.acc .wp-block-details > p:last-child{padding-bottom:28px}
.acc .wp-block-details p b,.acc .wp-block-details p strong{color:var(--ink);font-weight:500}
.acc .wp-block-details a{color:var(--pool-deep);border-bottom:1px solid var(--line)}

/* ---------- Patička ---------- */
footer.site-footer{background:var(--ink);color:rgba(251,249,244,.7);padding:clamp(50px,8vh,80px) 0 40px}
.fgrid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:760px){.fgrid{grid-template-columns:1.4fr 1fr 1fr}}
.brand-f{font-family:var(--ff-display);font-size:1.6rem;color:var(--white);margin-bottom:14px}
footer.site-footer p{font-size:.9rem;line-height:1.7}
footer.site-footer h5{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--travertine);margin-bottom:16px;font-weight:500;font-family:var(--ff-body)}
.flink{margin-bottom:9px}
.flink a{transition:color .3s}
.flink a:hover{color:var(--white)}
footer.site-footer .base{margin-top:clamp(40px,6vh,64px);padding-top:24px;border-top:1px solid rgba(251,249,244,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer.site-footer .base p{font-size:.78rem;color:rgba(251,249,244,.45)}

/* ---------- Podstránky ---------- */
.subpage .wrap.band{padding-top:clamp(120px,18vh,200px)}
.subpage h1{font-size:clamp(2.4rem,6vw,4rem);font-weight:300;margin-bottom:.6em}

/* ---------- Úpravy pro editor (Site Editor / editor stránky) ---------- */
.editor-styles-wrapper #loader{position:static;display:none}
.editor-styles-wrapper header.nav{position:sticky;background:var(--midnight)}
.editor-styles-wrapper .hero{height:auto;min-height:480px}