@font-face{font-family:"Hanken Grotesk";src:url(assets/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";src:url(assets/fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* brand C04 */
  --ivory:#f0ede6;
  --ink:#171717;
  --tomato:#c93a2e;   /* samo malo: točka i pokazivač */
  --olive:#777968;
  --ink-soft:#45443f;
  --on-dark-soft:#bdb9b0;
  --on-dark-dim:#8f8c87;

  --line-w:clamp(4px,.42vw,7px);
  --header:76px;
  --gutter:clamp(20px,4.4vw,72px);
  --max:1360px;
  --col-gap:clamp(16px,2vw,32px);
  --section:clamp(112px,13vw,208px);
  --hero-line:.82;      /* crta u heroju: niže od sredine, da stane visoka fotografija */

  --ease:cubic-bezier(.16,1,.3,1);
  /* font: mijenja se u „Varijante" (html[data-font]) */
  --font:"Hanken Grotesk";
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:var(--header);scrollbar-color:var(--ink) var(--ivory);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 16px/1.55 var(--font),system-ui,sans-serif;font-kerning:normal;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--ivory)}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{font-weight:400;text-wrap:balance}
strong{font-weight:600}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.i{width:18px;height:18px;flex:none}
.i.flip{transform:rotate(180deg)}
.on-dark{color:var(--ivory)}

.skip-link{position:fixed;z-index:100;top:12px;left:12px;padding:12px 16px;background:var(--ink);color:var(--ivory);transform:translateY(-200%)}
.skip-link:focus{transform:none}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}

/* header */
.site-header{position:fixed;z-index:50;inset:0 0 auto;height:var(--header);display:flex;align-items:center;justify-content:space-between;padding-inline:max(var(--gutter),(100% - var(--max)) / 2);background:var(--ivory)}
.wordmark{position:relative;font-size:31px;font-weight:500;letter-spacing:-.035em;line-height:1;padding-bottom:7px}
.wordmark::after{content:"";position:absolute;left:0;right:-14%;bottom:0;height:3px;background:currentColor}
.wordmark-light{color:var(--ivory)}
.logo{display:block;line-height:0}
.logo img{height:40px;width:auto}
.logo-footer img{height:44px}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);font-size:15px;font-weight:450}
.site-nav a:not(.btn){min-height:44px;display:inline-flex;align-items:center;text-underline-offset:7px;text-decoration-thickness:1.5px}
.site-nav a:not(.btn):hover,.site-nav a[aria-current="true"]{text-decoration-line:underline}

/* prekidač jezika HR / EN */
.lang-switch{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:450}
.lang-switch span{color:var(--ink-soft)}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:44px;color:var(--ink-soft);text-decoration:none}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a[aria-current="true"]{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}

/* gumbi i linkovi */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:12px 18px;border:1.5px solid transparent;font-size:15px;font-weight:500;line-height:1.2;background:none;transition:background-color .25s,color .25s,border-color .25s}
.btn .i{transition:transform .45s var(--ease)}
.btn:hover .i{transform:translate(3px,-3px)}
.btn-ink{background:var(--ink);color:var(--ivory)}
.btn-ink:hover{background:#000}
.btn-light{background:var(--ivory);color:var(--ink)}
.btn-light:hover{background:#fff}
.site-nav .btn{min-height:44px;padding:10px 16px;font-size:14px}
.text-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:15px;font-weight:450;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.text-link:hover{text-decoration-thickness:2px}
.caps{font-size:12.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase}
.ph{text-decoration:underline dotted 1.5px;text-underline-offset:.2em}

/* tekst stoji na crti */
.on-line{letter-spacing:-.035em;line-height:.98;text-box:trim-end alphabetic;margin-bottom:var(--baseline-fix,0)}
@supports not (text-box:trim-end alphabetic){.on-line{--baseline-fix:calc(-1em * var(--bl,.148))}}

/* HERO — crta nisko, visoka fotografija i naslov stoje na njoj */
.hero-above{height:calc(100svh * var(--hero-line));min-height:520px;padding-top:var(--header)}
.hero-above>.grid{height:100%;grid-template-rows:minmax(0,1fr);align-items:end}
.hero-title{grid-column:1 / span 7;grid-row:1;font-size:clamp(46px,6.2vw,96px);font-weight:300}
.hero-photo{grid-column:8 / -1;grid-row:1;align-self:stretch;margin-top:clamp(8px,2svh,24px);overflow:hidden;background:#d9d4ca}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;filter:saturate(.92) contrast(1.02)}
.hero-below{background:var(--ink);min-height:max(56svh,420px);display:flex}
.hero-below>.grid{grid-template-rows:auto 1fr auto;padding-block:clamp(40px,6svh,72px) clamp(28px,4svh,44px)}
.hero-text{grid-column:1 / span 6}
.hero-text .lede{margin-top:18px;max-width:46ch;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--on-dark-soft)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tomato);margin-right:14px;vertical-align:.1em}
.hero-actions{grid-column:9 / -1;display:flex;flex-wrap:wrap;align-items:center;align-self:start;gap:16px 32px}
.hero-actions .text-link{color:var(--ivory)}
/* hero varijante: visoka slika (zadano) · bez slike · cvjetovi */
.sr-only{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-flowers{display:none}
/* boja cvjetova: crna · olive · olive s jednim crvenim (tomato samo kao mali naglasak) */
html[data-cvijet="olive"] .flw,html[data-cvijet="akcent"] .flw{color:var(--olive)}
html[data-cvijet="akcent"] .flw:nth-child(8){color:var(--tomato)}
/* varijante fonta */
/* bez slike: tekst ostaje na istom mjestu */
.hero[data-hero="bez"] .hero-photo{display:none}
/* cvjetovi: mreža 3 × 4 cvjetova s pločica glavne dvorane, okreću se na skrol */
.hero[data-hero="cvjetovi"] .hero-photo{display:none}
.hero[data-hero="cvjetovi"] .hero-flowers{display:grid;grid-column:8 / -1;grid-row:1;align-self:stretch;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));place-items:center;margin-top:clamp(8px,2svh,24px);min-height:0}
.flw{width:min(74%,calc((100svh * var(--hero-line) - var(--header) - 24px) / 4 * .78));height:auto;aspect-ratio:1;color:var(--ink);transform:rotate(var(--a,0deg));will-change:transform}
.hero-space{grid-column:1 / -1;grid-row:3;height:clamp(64px,9svh,104px)}
.hero-facts{grid-column:1 / -1;grid-row:3;align-self:end;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:56px;font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-soft);font-variant-numeric:tabular-nums}

/* PROSTOR — uvod i prostorije na ivory podlozi */
.rooms{position:relative;background:var(--ivory);padding-block:var(--section)}
.intro-title{grid-column:1 / span 6;grid-row:1;align-self:start;font-size:clamp(36px,4.4vw,70px);line-height:1.02;letter-spacing:-.035em}
.intro-facts{grid-column:8 / -1;grid-row:1;align-self:start;display:grid;gap:14px;font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:60ch}
.room-list{position:relative;margin-top:clamp(120px,14vw,240px)}
.room-row{position:relative;grid-column:1 / -1}
.room-btn{display:grid;padding:0;border:0;background:none;color:var(--ink);text-align:left}
.room-btn::after{content:"";position:absolute;inset:0;z-index:3} /* cijeli red/kartica je klikabilna */
.room-btn:focus-visible{outline:none}
.room-row:has(.room-btn:focus-visible){outline:2px solid var(--ink);outline-offset:6px}
.r-idx{font-size:14px;font-weight:500;letter-spacing:.18em;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.r-name{font-weight:300;line-height:1.02;letter-spacing:-.035em;transition:color .4s var(--ease)}
.r-area:empty::before{content:"\00a0"}
.r-area{font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:color .4s var(--ease)}
.r-photo{position:relative;overflow:hidden;background:#d9d4ca}
.r-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);filter:saturate(.92) contrast(1.02);transition:transform 1.2s var(--ease)}
.room-row:hover .r-photo img{transform:scale(1.04)}

.btn-line{border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--ivory)}
.intro-actions{grid-column:8 / -1;grid-row:2;display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.dl-meta{margin-left:-6px;font-size:12px;letter-spacing:.12em;opacity:.7}

/* PRIKAZ · ČETIRI SLIKE i POLA-POLA — četiri uspravne fotografije jedna do druge */
.rooms:is([data-layout="slike"],[data-layout="pola"]) .room-list{row-gap:56px;grid-template-columns:repeat(5,minmax(0,1fr))}
.rooms:is([data-layout="slike"],[data-layout="pola"]) .room-row{grid-column:span 1;display:flex;flex-direction:column}
.rooms:is([data-layout="slike"],[data-layout="pola"]) .r-photo{order:-1;aspect-ratio:3 / 4}
.rooms:is([data-layout="slike"],[data-layout="pola"]) .room-btn{grid-template-columns:auto 1fr;align-items:baseline;row-gap:10px;padding-top:24px}
.rooms:is([data-layout="slike"],[data-layout="pola"]) .r-idx{grid-row:1;grid-column:1}
.rooms:is([data-layout="slike"],[data-layout="pola"]) .r-area{grid-row:1;grid-column:2;justify-self:end;font-size:clamp(18px,1.5vw,22px)}
.rooms:is([data-layout="slike"],[data-layout="pola"]) .r-name{grid-row:2;grid-column:1 / -1;font-size:clamp(20px,1.9vw,28px);line-height:1.1}

/* POLA-POLA: pozadina od ruba do ruba prelazi iz ivory u crnu kroz sredinu fotografija */
.rooms[data-layout="pola"] .room-list{container-type:inline-size}
.rooms[data-layout="pola"] .room-list::before{content:"";position:absolute;z-index:0;left:calc(50% - 50vw);width:100vw;top:calc((100cqw - 4 * var(--col-gap)) / 5 * 4 / 3 * .5);bottom:calc(-1 * var(--section));background:var(--ink)}
.rooms[data-layout="pola"] .room-row{z-index:1}
.rooms[data-layout="pola"] .room-btn{color:var(--ivory)}
.rooms[data-layout="pola"] .r-idx{color:var(--on-dark-soft)}

/* opcija: pola-pola u brand olive umjesto crne (tekst ink; sitni tekst #000 radi kontrasta 4.7:1) */
html[data-pola="olive"] .rooms[data-layout="pola"] .room-list::before{background:var(--olive)}
html[data-pola="olive"] .rooms[data-layout="pola"] .room-btn{color:var(--ink)}
html[data-pola="olive"] .rooms[data-layout="pola"] .r-idx,
html[data-pola="olive"] .rooms[data-layout="pola"] .r-area{color:#000}

/* PRIKAZ · IZBORNIK — popis lijevo, jedna velika fotografija desno (uvijek vidljiva) */
.rooms[data-layout="izbornik"] .room-list{grid-template-rows:repeat(5,1fr)}
.rooms[data-layout="izbornik"] .room-row{display:contents}
.rooms[data-layout="izbornik"] .room-btn{grid-column:1 / span 6;grid-template-columns:auto 1fr auto;column-gap:clamp(16px,2vw,32px);align-items:center;align-content:center;border-top:1px solid #17171730}
.rooms[data-layout="izbornik"] .room-row:nth-child(1) .room-btn{grid-row:1}
.rooms[data-layout="izbornik"] .room-row:nth-child(2) .room-btn{grid-row:2}
.rooms[data-layout="izbornik"] .room-row:nth-child(3) .room-btn{grid-row:3}
.rooms[data-layout="izbornik"] .room-row:nth-child(4) .room-btn{grid-row:4}
.rooms[data-layout="izbornik"] .room-row:nth-child(5) .room-btn{grid-row:5;border-bottom:1px solid #17171730}
.rooms[data-layout="izbornik"] .room-btn::after{display:none}
.rooms[data-layout="izbornik"] .room-btn:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.rooms[data-layout="izbornik"] .r-name{font-size:clamp(28px,3vw,48px);color:#8a8780}
.rooms[data-layout="izbornik"] .r-area{font-size:clamp(18px,1.6vw,24px);color:#8a8780}
.rooms[data-layout="izbornik"] .room-row.is-current .r-name,
.rooms[data-layout="izbornik"] .room-row.is-current .r-area{color:var(--ink)}
.rooms[data-layout="izbornik"] .r-photo{grid-column:8 / -1;grid-row:1 / span 5;aspect-ratio:4 / 5;opacity:0;transition:opacity .5s var(--ease);cursor:pointer}
.rooms[data-layout="izbornik"] .room-row.is-current .r-photo{opacity:1;z-index:1}
.rooms[data-layout="izbornik"] .room-row:hover .r-photo img{transform:none}
.rooms[data-layout="izbornik"] .r-photo:hover img{transform:scale(1.04)}

/* PRIKAZ · REDOVI — ime i kvadratura lijevo, fotografija stalno vidljiva desno */
.rooms[data-layout="redovi"] .room-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end;padding-block:clamp(40px,5vw,72px);border-top:1px solid #17171730}
.rooms[data-layout="redovi"] .room-row:last-child{border-bottom:1px solid #17171730}
.rooms[data-layout="redovi"] .room-btn{grid-column:1 / span 7;row-gap:14px}
.rooms[data-layout="redovi"] .r-name{font-size:clamp(40px,5vw,80px)}
.rooms[data-layout="redovi"] .r-area{font-size:clamp(20px,1.8vw,26px)}
.rooms[data-layout="redovi"] .r-photo{grid-column:8 / -1;aspect-ratio:3 / 2}

/* crveni pokazivač „Fotografije" — samo uz miš */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .rooms.is-live:not([data-layout="izbornik"]) .room-row,.rooms.is-live:not([data-layout="izbornik"]) .room-btn::after,.rooms.is-live[data-layout="izbornik"] .r-photo{cursor:none}
  .cursor{display:flex;position:fixed;left:0;top:0;z-index:6;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:var(--tomato);color:#fff;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;font-weight:500;pointer-events:none;transform:translate3d(var(--cx,-200px),var(--cy,-200px),0) scale(var(--cs,0));transition:transform .08s linear}
  .cursor .i{width:16px;height:16px}
}

/* prekidač prikaza (samo za odabir — maknuti prije objave) */
.layout-switch{position:fixed;z-index:60;right:16px;bottom:16px;display:grid;gap:4px;padding:6px;background:var(--ink);color:var(--ivory);font-size:13px;box-shadow:0 6px 24px #17171740}
.layout-switch summary{min-height:36px;display:flex;align-items:center;padding:0 12px;cursor:pointer;list-style:none;font-weight:500}
.layout-switch summary::-webkit-details-marker{display:none}
.layout-switch summary::after{content:"+";margin-left:12px;color:var(--on-dark-soft)}
.layout-switch[open] summary::after{content:"–"}
.layout-switch[open] summary{margin-bottom:4px}
.layout-switch .sw-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding-left:8px;max-width:min(760px,calc(100vw - 32px))}
.layout-switch .sw-row+.sw-row{margin-top:4px}
.layout-switch span{width:6.5em;color:var(--on-dark-soft)}
.layout-switch button{min-height:36px;white-space:nowrap;padding:6px 12px;border:1px solid #f0ede650;background:none;color:var(--ivory);font-size:13px}
.layout-switch button[aria-pressed="true"]{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}

/* hero: rječnička definicija imena */
.hero-def{margin-bottom:22px;font-size:15px;color:var(--on-dark-soft)}
.hero-def b{font-weight:600;color:var(--ivory)}
.hero-text .lede{max-width:62ch}

/* zajedničko za nove sekcije */
.section-title{grid-column:1 / span 7;font-size:clamp(36px,4.4vw,70px);font-weight:400;line-height:1.02;letter-spacing:-.035em}
.section-lede{grid-column:9 / -1;align-self:end;max-width:40ch;font-size:clamp(16px,1.2vw,18px);color:var(--ink-soft)}

/* KALEO — samostalna sekcija ispod prostorija, crta na vrhu */
.kaleo-sec{padding-block:var(--section)}
.kaleo{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:28px}
.kaleo-head{grid-column:1 / span 6}
.kaleo-head .caps{color:var(--ink-soft)}
.kaleo-title{margin-top:16px;font-size:clamp(36px,4.4vw,70px);font-weight:300;line-height:1.05;letter-spacing:-.03em}
.kaleo-body{grid-column:8 / -1;display:grid;gap:24px;justify-items:start}
.kaleo-body>p{font-size:clamp(16px,1.2vw,18px);color:var(--ink-soft);max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}

/* NAJAM OPREME — za sada prazne kockice u brand zelenoj */
.rent{padding-block:0 var(--section)}
.rent .section-lede{grid-column:8 / -1;max-width:46ch}
.rent-dl{grid-column:8 / -1;grid-row:2;justify-self:start;margin-top:28px}

/* opcija: cijela sekcija najma na brand olive */
html[data-najam="olive"] .rent{background:var(--olive);padding-block:var(--section)}
html[data-najam="olive"] .rent .section-title{color:var(--ink)}
html[data-najam="olive"] .rent .section-lede{color:#000}

/* ČESTA PITANJA */
.faq{padding-block:var(--section) 0}
.faq .section-title{grid-column:1 / span 5;align-self:start}
.faq-list{grid-column:6 / -1;border-top:1px solid #17171730}
.faq-item{border-bottom:1px solid #17171730}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:26px 0;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.015em;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .i{width:22px;height:22px;transition:transform .35s var(--ease)}
.faq-item[open] summary .i{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.faq-item p{max-width:60ch;padding:0 0 28px;font-size:16px;color:var(--ink-soft)}

/* LOKACIJA */
.location{padding-block:0 var(--section)}
/* Crta odvaja KALEO dio (produkcija + najam opreme) od lokacije; ista crta kao nekad iznad „Više od prostora.” */
.location>.grid::before{content:"";grid-column:1 / -1;border-top:1px solid #17171730;margin-bottom:var(--section)}
.loc-text{grid-column:1 / span 5;align-self:start}
.location h2{font-size:clamp(36px,4.4vw,70px);line-height:1.02;letter-spacing:-.035em}
.loc-text>p+p{margin-top:0}
.loc-text>p{margin:24px 0 28px;max-width:44ch;font-size:clamp(16px,1.2vw,18px);color:var(--ink-soft)}
.loc-quote{margin:0 0 28px;max-width:calc(44ch + 20px);padding-left:18px;border-left:2px solid var(--ink)}
.loc-quote p{font-size:clamp(16px,1.2vw,18px);color:var(--ink)}
.loc-facts{margin:36px 0 28px;display:grid;gap:14px}
.loc-facts div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;font-size:15px}
.loc-facts dt{color:var(--ink-soft)}
.loc-photo{overflow:hidden;background:#d9d4ca}
.loc-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.loc-a{grid-column:7 / span 3;aspect-ratio:2/3}
.loc-b{grid-column:10 / span 3;aspect-ratio:2/3}
.loc-lists{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--col-gap);margin-top:clamp(72px,9vw,128px);padding-top:clamp(36px,4vw,56px);border-top:1px solid #17171730}
.loc-lists h3,.loc-about h3{font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.loc-lists ul{margin-top:18px;display:grid;gap:12px;font-size:15px;line-height:1.5}
.loc-about{grid-column:1 / span 7;margin-top:clamp(48px,6vw,80px);display:grid;gap:14px}
.loc-about p{font-size:16px;color:var(--ink-soft);max-width:62ch}
.loc-about .sources{font-size:13px}
.faq-item p a,.footer-info a,.contact-facts a{text-decoration:underline;text-underline-offset:4px}

/* KONTAKT (zadržano) */
.wall{position:relative;display:grid;grid-template-rows:calc(100svh * .6) minmax(calc(100svh * .4),auto)}
.wall-above{position:relative;z-index:1;padding-top:var(--header);min-height:0}
.wall-above>.grid{height:100%;grid-template-rows:minmax(0,1fr);align-items:end}
.wall-below{position:relative;background:var(--below,var(--ink));box-shadow:inset 0 var(--line-w) 0 var(--ink)}
.wall-below .grid{padding-top:clamp(28px,4.5svh,52px);padding-bottom:clamp(28px,4.5svh,52px);align-items:start}
.wall-contact .wall-below>.grid:first-child{padding-top:clamp(40px,7svh,80px)}
.contact-title{grid-column:1 / span 9;grid-row:1;align-self:end;font-size:clamp(42px,5.6vw,90px);font-weight:300}
.contact-main{grid-column:1 / span 8}
.email-row{display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap}
.email{font-size:clamp(26px,4vw,62px);letter-spacing:-.035em;line-height:1.15;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.16em;overflow-wrap:anywhere}
.email:hover{text-decoration-thickness:3px}
.copy{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1.5px solid #f0ede660;background:none;color:var(--ivory)}
.copy:hover{border-color:var(--ivory)}
.copy svg{width:20px;height:20px}
.copy-status{min-height:22px;margin-top:10px;font-size:14px;color:var(--on-dark-soft)}
.contact-hint{max-width:46ch;font-size:16px;color:var(--on-dark-soft)}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:28px}
.btn-outline-light{border-color:#f0ede680;color:var(--ivory)}
.btn-outline-light:hover{background:var(--ivory);color:var(--ink)}
.footer-info{display:grid;gap:6px;line-height:1.5}
.contact-facts{grid-column:9 / -1;display:grid;gap:16px;align-self:end}
.contact-facts div{display:grid;grid-template-columns:7em 1fr;gap:16px;font-size:15px}
.contact-facts dt{color:var(--on-dark-soft)}
.site-footer{grid-template-columns:auto 1fr auto;align-items:end;gap:32px;margin-top:clamp(56px,10svh,120px);border-top:1px solid #f0ede633;font-size:14px;color:var(--on-dark-soft)}
.wall-contact .wall-below .grid.site-footer{padding-top:28px;padding-bottom:36px}
.site-footer .text-link{color:var(--ivory)}
.site-footer .wordmark,.site-footer .logo{justify-self:start}

/* galerija */
.gallery{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:16px var(--gutter) 24px;border:0;background:var(--ink);color:var(--ivory)}
.gallery::backdrop{background:var(--ink)}
.gallery[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.gallery-bar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:24px;font-size:15px}
.gallery-count{font-variant-numeric:tabular-nums;color:var(--on-dark-soft)}
.gallery-stage{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:24px;min-height:0;padding-top:16px;touch-action:pan-y}
.gallery-stage img{max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;object-fit:contain;min-height:0;user-select:none;-webkit-user-drag:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1.5px solid #f0ede650;background:none;color:var(--ivory)}
.icon-btn:hover{border-color:var(--ivory)}
.icon-btn svg{width:22px;height:22px}
body.gallery-lock{overflow:hidden}


/* tablet */
@media (max-width:1060px){
  .intro-title{grid-column:1 / -1}
  .intro-facts{grid-column:1 / span 8;grid-row:auto;margin-top:28px}
  .intro-title{grid-row:auto}
  .hero-title{grid-column:1 / span 8}
  .hero-photo{grid-column:8 / -1}
  .hero-actions{grid-column:1 / -1;margin-top:28px}
  .hero-text{grid-column:1 / span 9}
  .loc-text{grid-column:1 / span 6}
  .section-title,.faq .section-title{grid-column:1 / -1}
  .section-lede{grid-column:1 / span 8;margin-top:20px}
  .intro-actions,.rent-dl{grid-column:1 / -1;grid-row:auto}
  .rent .section-lede{grid-column:1 / span 8}
  .faq-list{grid-column:1 / -1;margin-top:40px}
  .kaleo-head,.kaleo-body{grid-column:1 / -1}
  .loc-lists{grid-template-columns:1fr 1fr}
  .loc-about{grid-column:1 / -1}
  .contact-main{grid-column:1 / -1}
  .contact-facts{grid-column:1 / -1;margin-top:40px}
}

/* mobitel */
@media (max-width:760px){
  .lang-switch{font-size:14px;gap:0;margin-right:4px}
  .lang-switch a{min-width:40px;min-height:44px}
  .site-nav a[href="#prostorije"]{display:none}
  .logo img{height:32px}
  .logo-footer img{height:38px}
  :root{--header:64px;--gutter:20px;--col-gap:12px;--hero-line:.84;--section:64px}
  .rent{padding-top:var(--section)}
  .wall-contact{grid-template-rows:auto minmax(calc(100svh * .4),auto)}
  .wall-contact .wall-above{padding-top:calc(var(--section) * 2)}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wordmark{font-size:27px;padding-bottom:6px}
  .site-nav{gap:16px;font-size:14px}
  .site-nav a[href="#lokacija"]{display:none}
  .site-nav .btn{padding:8px 12px;font-size:13px;gap:12px;min-height:44px}

  .hero-above>.grid{grid-template-rows:minmax(0,1fr) auto}
  .hero-photo{grid-column:1 / -1;grid-row:1;margin:10px 0 18px}
  .hero-title{grid-column:1 / -1;grid-row:2;font-size:clamp(38px,11vw,52px)}
  .hero-below{min-height:auto}
  .hero-text,.hero-actions{grid-column:1 / -1}
  .hero-actions{margin-top:24px;gap:12px 24px}
  .hero-text .lede{font-size:15.5px}
  .caps{font-size:11.5px;letter-spacing:.2em}
  .hero-facts{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;font-size:11.5px;letter-spacing:.16em}

  .room-list{margin-top:clamp(96px,26vw,140px)}
  .rooms:is([data-layout="slike"],[data-layout="pola"]) .room-list{row-gap:36px;grid-template-columns:minmax(0,1fr)}
  .rooms:is([data-layout="slike"],[data-layout="pola"]) .r-photo{aspect-ratio:4 / 3}
  .rooms:is([data-layout="slike"],[data-layout="pola"]) .room-row{grid-column:span 1}
  .rooms:is([data-layout="slike"],[data-layout="pola"]) .room-btn{padding-top:14px;row-gap:6px}
  .rooms:is([data-layout="slike"],[data-layout="pola"]) .r-idx{font-size:13px}
  .rooms:is([data-layout="slike"],[data-layout="pola"]) .r-area{font-size:18px}
  .rooms:is([data-layout="slike"],[data-layout="pola"]) .r-name{font-size:24px}
  .rooms[data-layout="pola"] .room-list::before{top:calc(100cqw * 3 / 4 * .5)}
  .rooms:is([data-layout="redovi"],[data-layout="izbornik"]) .room-list{grid-template-rows:none}
  .rooms:is([data-layout="redovi"],[data-layout="izbornik"]) .room-row{display:grid;grid-column:1 / -1;grid-template-columns:1fr;row-gap:20px;padding-block:32px;border-top:1px solid #17171730}
  .rooms:is([data-layout="redovi"],[data-layout="izbornik"]) .room-row:last-child{border-bottom:1px solid #17171730}
  .rooms:is([data-layout="redovi"],[data-layout="izbornik"]) .room-btn{grid-column:1 / -1;grid-row:auto;grid-template-columns:auto 1fr;row-gap:14px;border:0;padding:0}
  .rooms:is([data-layout="redovi"],[data-layout="izbornik"]) .r-idx{grid-column:1 / -1}
  .rooms:is([data-layout="redovi"],[data-layout="izbornik"]) .r-name{grid-column:1 / -1;font-size:clamp(34px,10vw,46px);color:var(--ink)}
  .rooms:is([data-layout="redovi"],[data-layout="izbornik"]) .r-area{grid-column:1 / -1;font-size:20px;color:var(--ink)}
  .rooms:is([data-layout="redovi"],[data-layout="izbornik"]) .r-photo{grid-column:1 / -1;grid-row:auto;aspect-ratio:4 / 3;opacity:1}
  .rooms[data-layout="izbornik"] .room-btn::after{display:block}
  .rooms[data-layout="izbornik"] .room-row:nth-child(n) .room-btn{grid-row:auto;border:0}
  .layout-switch button{padding:6px 8px;font-size:12px}
  .layout-switch{right:8px;bottom:8px}
  .layout-switch[open]{left:8px}
  .layout-switch span{display:none}
  .layout-switch button{flex:1}
  .layout-switch .sw-row{width:100%}

  .intro-facts{grid-column:1 / -1}
  .loc-text{grid-column:1 / -1}
  .loc-a,.loc-b{margin-top:48px}
  .loc-a{grid-column:1 / span 2}
  .loc-b{grid-column:3 / span 2}
  .section-lede,.rent .section-lede{grid-column:1 / -1}
  .loc-lists{grid-template-columns:1fr;gap:32px}
  .site-footer{grid-template-columns:1fr auto}
  .footer-info{grid-column:1 / -1;grid-row:2}
  .hero[data-hero="cvjetovi"] .hero-flowers{grid-column:1 / -1;grid-row:1;margin:10px 0 18px}
  .flw{width:min(70%,calc((100svh * var(--hero-line) - var(--header) - 140px) / 4 * .8))}
  .loc-facts div,.contact-facts div{grid-template-columns:6.5em 1fr}

  .contact-title{grid-column:1 / -1;font-size:clamp(38px,11vw,52px)}
  .contact-main,.contact-facts{grid-column:1 / -1}
  .email{font-size:clamp(22px,7vw,34px)}
  .site-footer{grid-template-columns:1fr auto;row-gap:16px}
  .site-footer>span{grid-column:1 / -1;grid-row:2}

  .gallery{padding:10px 12px 16px}
  .gallery-stage{grid-template-columns:minmax(0,1fr);gap:0}
  .gallery-stage .icon-btn{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}