/* Hotel Dominus — Lim, krečnjak i mesing.
   Raspored: jedna kolona teksta poravnata lijevo, široke fotografije, sobe kao redovi sa privjeskom za ključ. */
:root{
  --stone:#ECEDE8;      /* krečnjak, podloga */
  --stone-2:#E1E3DC;    /* dublji kamen, trake */
  --lim:#1D4547;        /* rijeka Lim */
  --lim-deep:#122C2E;
  --brass:#B1843A;      /* mesing privjeska */
  --brass-ink:#7A5A22;
  --ink:#152120;
  --mute:#58635F;
  --line:rgba(21,33,32,.14);
  --ok:#2F6B4F; --bad:#A04A38; --warn:#9C7A2E;
  --card:#F6F6F3;
  --on-dark:#EEF0EB;
  --display:"Gloock",Georgia,"Times New Roman",serif;
  --text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:3px;
}
@media (prefers-color-scheme:dark){:root{
  --stone:#101A19;--stone-2:#16231F;--lim:#1F4F51;--lim-deep:#0B1716;--brass:#CFA45C;--brass-ink:#E0BC7C;
  --ink:#E8ECE6;--mute:#A2ADA8;--line:rgba(232,236,230,.16);--ok:#6CC49A;--bad:#E58F7C;--warn:#D9B964;--card:#17221F;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stone);color:var(--ink);font:400 17px/1.65 var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.mute{color:var(--mute)}

/* Dugmad */
.btn{font:500 16px/1 var(--text);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border:0;border-radius:var(--r);background:var(--lim);color:var(--on-dark);cursor:pointer;text-decoration:none;transition:background .2s}
.btn:hover{background:var(--lim-deep)}
.btn.brass{background:var(--brass);color:#1A140A}
.btn.brass:hover{background:var(--brass-ink);color:#fff}
.btn.ghost{background:transparent;color:inherit;border:1px solid currentColor;min-height:44px;padding:0 18px;font-size:15px}
.btn:disabled{opacity:.45;cursor:default}
.link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Polja */
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute);min-width:0}
.field input,.field select,.field textarea{font:500 17px/1.3 var(--text);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 0;min-width:0;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--brass)}
.field textarea{border:1px solid var(--line);padding:10px;min-height:84px;font-weight:400}
select option{color:#152120}

/* Zaglavlje */
.top{position:absolute;inset:0 0 auto;z-index:20;color:var(--on-dark)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:18px}
.mark{font:400 24px/1 var(--display);letter-spacing:.32em;text-decoration:none;padding-left:.32em}
.top nav{display:flex;align-items:center;gap:26px;font-size:15px}
.top nav a{text-decoration:none;opacity:.88}
.top nav a:hover{opacity:1}
.langs{display:flex;border:1px solid rgba(238,240,235,.45);border-radius:99px;padding:3px;gap:2px;background:rgba(11,23,22,.25);backdrop-filter:blur(4px)}
.langs button{background:none;border:0;color:rgba(238,240,235,.75);font:500 13px var(--text);letter-spacing:.04em;border-radius:99px;padding:6px 11px;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:32px}
.langs button[aria-pressed=true]{background:var(--on-dark);color:var(--lim-deep)}
@media (max-width:760px){.top nav a.hide-sm{display:none}}

/* Hero */
.hero{position:relative;min-height:min(92svh,860px);display:flex;align-items:flex-end;color:var(--on-dark);background:var(--lim-deep);overflow:hidden;isolation:isolate}
.hero canvas,.hero .photo{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero .photo{object-fit:cover;object-position:60% 40%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,23,22,.78) 0%,rgba(11,23,22,.5) 42%,rgba(11,23,22,0) 72%),linear-gradient(180deg,rgba(11,23,22,.5) 0%,rgba(11,23,22,0) 30%,rgba(11,23,22,.7) 100%)}
.hero h1,.hero .lede{text-shadow:0 1px 18px rgba(0,0,0,.35)}
@media (max-width:760px){.hero::after{background:linear-gradient(180deg,rgba(11,23,22,.55) 0%,rgba(11,23,22,.45) 40%,rgba(11,23,22,.85) 100%)}}
.hero .wrap{width:100%;padding-top:calc(96px + env(safe-area-inset-top));padding-bottom:148px}
.hero h1{font-size:clamp(46px,8.2vw,118px);max-width:11ch}
.hero .lede{max-width:34em;margin-top:22px;font-size:clamp(17px,1.6vw,19px);color:rgba(238,240,235,.86)}
.hero .place{margin-top:18px;font-size:15px;color:rgba(238,240,235,.7)}

/* Traka za rezervaciju */
.booker{position:relative;z-index:5;margin-top:-92px}
.booker form{background:var(--card);color:var(--ink);border-radius:var(--r);box-shadow:0 24px 60px -30px rgba(10,25,24,.55);display:grid;grid-template-columns:1fr 1fr .7fr auto;gap:0;align-items:stretch}
.booker .field{padding:16px 22px;border-right:1px solid var(--line)}
.booker .field input,.booker .field select{border:0;padding:4px 0 0;font-size:18px}
.booker .go{display:flex;align-items:center;padding:14px}
.booker .note{grid-column:1/-1;border-top:1px solid var(--line);padding:12px 22px;font-size:14px;color:var(--mute);min-height:46px}
.booker .note.err{color:var(--bad)}
.booker .note:empty{display:none}
@media (max-width:820px){
  .booker form{grid-template-columns:1fr 1fr}
  .booker .field:nth-child(2){border-right:0}
  .booker .field:nth-child(3){grid-column:1/-1;border-right:0;border-top:1px solid var(--line)}
  .booker .go{grid-column:1/-1;padding:0 14px 14px}
  .booker .go .btn{width:100%}
}

/* Sekcije */
.sec{padding:112px 0}
.sec.tight{padding:80px 0}
.sec h2{font-size:clamp(36px,5.4vw,64px);max-width:16ch}
.intro{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:start}
.intro .body{max-width:36em;display:grid;gap:18px;color:var(--mute);font-size:18px;margin-top:28px}
.intro .body strong{color:var(--ink);font-weight:600}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts li span:last-child{color:var(--mute);text-align:right}
@media (max-width:860px){.intro{grid-template-columns:1fr;gap:40px}.sec{padding:84px 0}}

/* Sobe */
.rooms-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.rooms-head .sum{color:var(--mute);font-size:16px}
.room{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;padding:44px 0;border-top:1px solid var(--line);align-items:center}
.room:last-child{border-bottom:1px solid var(--line)}
.room .pic{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:var(--r);background:var(--stone-2) center/cover no-repeat;overflow:hidden}
.room .pic.empty{aspect-ratio:3/2;background:repeating-radial-gradient(ellipse 120% 90% at 78% 110%,transparent 0 22px,rgba(207,164,92,.16) 22px 23px),linear-gradient(160deg,var(--lim) 0%,var(--lim-deep) 100%)}
.room .pic.empty::before{content:attr(data-n);position:absolute;left:24px;bottom:10px;font:400 120px/1 var(--display);color:rgba(238,240,235,.14)}
.room h3{font-size:clamp(30px,3.4vw,42px);margin-bottom:12px}
.room .desc{color:var(--mute);max-width:32em}
.room .meta{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:22px 0 26px}
.room .price{font:400 30px/1 var(--display)}
.room .price small{font:400 15px var(--text);color:var(--mute);margin-left:6px}
.room .total{font-size:15px;color:var(--mute);margin-top:6px}
.room .total b{color:var(--ink);font-weight:600}
.room .disc{display:inline-block;margin-top:6px;font-size:13px;font-weight:600;color:#fff;background:#2E8B57;border-radius:99px;padding:3px 10px}
.room .disc.soft{background:color-mix(in srgb,#2E8B57 14%,transparent);color:#2E8B57}
.room .act{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.room .left{font-size:14px;color:var(--brass-ink)}
.room .sold{font-size:15px;color:var(--bad)}
@media (prefers-color-scheme:dark){.room .left{color:var(--brass)}}
.room:nth-child(even) .pic{order:2}
@media (max-width:860px){.room{grid-template-columns:1fr;gap:26px;padding:36px 0}.room:nth-child(even) .pic{order:0}}

/* Privjesak za ključ: kapacitet sobe */
.fob{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--mute)}
.fob b{position:relative;display:grid;place-items:center;width:38px;height:52px;border-radius:19px 19px 8px 8px;background:linear-gradient(160deg,#D5AE68,var(--brass) 55%,#8D6A2C);color:#2A1E08;font:400 22px/1 var(--display);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -8px rgba(60,40,10,.6);padding-top:10px}
.fob b::before{content:"";position:absolute;top:6px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--card);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}

/* Galerija */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.gallery div{aspect-ratio:4/5;max-width:100%;border-radius:var(--r);background:var(--stone-2) center/cover no-repeat}

/* Lokacija */
.band{background:var(--lim);color:var(--on-dark)}
.band .mute{color:rgba(238,240,235,.72)}
.where{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.where dl{margin:0;display:grid;gap:22px}
.where dt{font-size:14px;color:rgba(238,240,235,.66);margin-bottom:4px}
.where dd{margin:0;font-size:20px}
.where dd a{text-underline-offset:4px}
@media (max-width:860px){.where{grid-template-columns:1fr;gap:40px}}

footer{background:var(--lim-deep);color:rgba(238,240,235,.72);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:34px;padding-bottom:max(34px,env(safe-area-inset-bottom))}
footer .mark{color:var(--on-dark);font-size:18px}

/* Dijalog rezervacije */
dialog{border:0;padding:0;background:var(--card);color:var(--ink);border-radius:6px;width:min(480px,calc(100% - 28px));max-height:calc(100svh - 28px);box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(9,20,19,.6);backdrop-filter:blur(3px)}
.dlg{display:grid;gap:22px;padding:30px 28px 26px}
.dlg h3{font-size:32px}
.recap{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px}
.recap dt{color:var(--mute)}
.recap dd{margin:0;text-align:right}
.recap .tot{font:400 26px/1 var(--display)}
.dlg .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.dlg .row .btn{flex:1}
.dlg .msg{min-height:1.4em;font-size:15px}
.dlg .msg.err{color:var(--bad)}
.done{text-align:left;display:grid;gap:14px}
.done .ref{font:400 34px/1 var(--display);letter-spacing:.06em}

/* Doručak */
.bf-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:end}
.bf-grid figure{margin:0;overflow:hidden;border-radius:var(--r)}
.bf-grid img{width:100%;height:100%;object-fit:cover}
.bf-main{aspect-ratio:16/10}
.bf-text{display:grid;gap:20px}
.bf-text h2{font-size:clamp(34px,4.4vw,54px)}
.bf-text p{max-width:30em}
.bf-side{aspect-ratio:4/3;margin-top:12px!important}
@media (max-width:860px){.bf-grid{grid-template-columns:1fr;gap:24px}.bf-side{margin-top:4px!important}}
/* Galerija i pregled */
.gimg{border:0;padding:0;cursor:zoom-in;aspect-ratio:4/5;max-width:100%;border-radius:var(--r);background:var(--stone-2) center/cover no-repeat}
.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery .gimg{aspect-ratio:1/1}
.gallery .gimg:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media (max-width:560px){.gallery{grid-template-columns:1fr 1fr;gap:8px}.gallery .gimg:first-child{grid-row:auto;aspect-ratio:3/2}}
.room .pic:not(.empty){cursor:zoom-in}
.room .pic .more{position:absolute;right:12px;bottom:12px;background:rgba(18,44,46,.82);color:var(--on-dark);border:0;border-radius:99px;font:500 13px var(--text);padding:8px 12px;cursor:pointer}
dialog.lb{width:min(1200px,calc(100% - 20px));max-height:calc(100svh - 20px);background:#0B1716;color:#EEF0EB;padding:0;border-radius:6px;overflow:hidden}
dialog.lb img{display:block;width:100%;max-height:calc(100svh - 90px);object-fit:contain;background:#0B1716}
.lbbar{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px}
.lbbar button{background:none;border:1px solid rgba(238,240,235,.3);color:inherit;border-radius:99px;min-width:44px;min-height:40px;font:400 20px var(--text);cursor:pointer}
.lbbar .lbc{font-size:14px;padding:0 16px;margin-left:auto}
.lbbar span{font-size:14px;color:rgba(238,240,235,.7);font-variant-numeric:tabular-nums}

.booker .have{margin:14px 2px 0;font-size:15px;color:var(--mute)}
.booker .have a{color:var(--ink);font-weight:500;text-underline-offset:3px}