/* ===================================================================
   Apartma Antonia – slog
   =================================================================== */
:root {
  --cream: #f7f3ec;
  --cream-2: #efe8db;
  --paper: #fffdf9;
  --ink: #24211d;
  --ink-soft: #5a554d;
  --green: #1f3d2b;
  --green-soft: #2f5a41;
  --terra: #c2643a;
  --terra-soft: #e9c9b8;
  --line: #e2dbcd;
  --free: #dfeedd;
  --free-ink: #1f5a2c;
  --booked: #f3d3c8;
  --booked-ink: #8b3a1e;
  --sel: #1f3d2b;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(36, 33, 29, .08);
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--green); }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; margin-bottom: .3em; }
p { margin: 0 0 1em; }
.wrap { width: min(1140px, 100% - 2rem); margin-inline: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 600; color: var(--terra); margin-bottom: .6em; }
.lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.fine { font-size: .82rem; color: var(--ink-soft); }
.skip { position: absolute; left: -999px; top: 0; background: var(--green); color: #fff; padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.hp { position: absolute; left: -9999px; }

/* Buttons ---------------------------------------------------------- */
.btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: 999px;
  font-weight: 600; text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; font-family: var(--font-sans); font-size: .95rem; transition: .2s;
}
.btn-primary { background: var(--terra); color: #fff; }
.btn-primary:hover { background: #a9522c; }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.7); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,.28); }
.btn-small { padding: .5rem 1.1rem; background: var(--green); color: #fff; font-size: .85rem; }
.btn-small:hover { background: var(--green-soft); }
.btn-outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; }
.btn-wide { width: 100%; margin-top: .5rem; }
.btn[disabled] { opacity: .6; cursor: wait; }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " →"; }

/* Intro (uvodna stran) --------------------------------------------- */
.intro { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: var(--green); color: #fff; isolation: isolate; text-align: center; }
.intro-slides { position: absolute; inset: 0; z-index: -1; }
/* fotografija vhoda in vrta pokrije ves uvod; izrez za orientacijo zaslona in širino izbere <picture> v index.html
   (pripravi jih tools/uvod-ozadje.mjs), vrata so v vseh izrezih blizu sredine, zato pri nobenem razmerju zaslona ne izpadejo */
.intro-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* fotografija je svetla (nebo, rumena fasada): zeleno temnjenje za berljivost belega besedila, spodaj močnejše,
   in topel odsev v kotu kot v .hero::before; ::after je nad sliko */
.intro-slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,22,.5) 0%, rgba(20,30,22,.4) 45%, rgba(20,30,22,.74) 100%), radial-gradient(60% 80% at 100% 0%, rgba(194,100,58,.18), transparent 60%); }
.intro-content { position: relative; padding: 5rem 1.5rem 6rem; max-width: 900px; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }

/* --- Animiran logotip (uvod) --- */
.aa-mark { display: block; width: clamp(130px, 17vw, 190px); height: auto; overflow: visible; margin-bottom: .6rem; }
.aa-draw { stroke-dasharray: 100; animation: aa-draw 1.1s cubic-bezier(.5,0,.2,1) .1s both; }
.aa-draw-door { stroke-dasharray: 100; animation: aa-draw .65s cubic-bezier(.5,0,.2,1) .95s both; }
.aa-draw-base { stroke-dasharray: 100; animation: aa-draw .8s cubic-bezier(.5,0,.2,1) both; }
.aa-sun { animation: aa-sunrise 1.4s cubic-bezier(.2,.7,.2,1) .55s both; }
.aa-sun-float { animation: aa-sunfloat 5s ease-in-out 2s infinite; transform-origin: 84px 26px; }
.aa-halo { animation: aa-halo 5s ease-in-out 2s infinite; transform-origin: 84px 26px; }
.aa-kicker { font-size: clamp(.7rem, 1.1vw, .78rem); font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,.78); text-indent: .34em; margin: 0 0 .55rem; animation: aa-fadeup .6s cubic-bezier(.2,.7,.2,1) 1.3s both; }
.aa-name { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(3.2rem, 9.5vw, 5.4rem); line-height: 1; color: #fff; margin: 0; display: flex; justify-content: center; text-shadow: 0 6px 40px rgba(0,0,0,.35); }
.aa-name span { display: inline-block; animation: aa-letter .6s cubic-bezier(.2,.7,.2,1) both; }
.aa-name span:nth-child(1) { animation-delay: 1.4s; }
.aa-name span:nth-child(2) { animation-delay: 1.46s; }
.aa-name span:nth-child(3) { animation-delay: 1.52s; }
.aa-name span:nth-child(4) { animation-delay: 1.58s; }
.aa-name span:nth-child(5) { animation-delay: 1.64s; color: #f0c9b3; }
.aa-name span:nth-child(6) { animation-delay: 1.7s; color: #f0c9b3; }
.aa-name span:nth-child(7) { animation-delay: 1.76s; color: #f0c9b3; }
.aa-line { height: 2.5px; width: 84px; border-radius: 2px; background: #f0c9b3; margin: 1.1rem 0 1.6rem; transform-origin: center; animation: aa-fadeup .6s cubic-bezier(.2,.7,.2,1) 1.85s both, aa-line 5s ease-in-out 2.45s infinite; }
@keyframes aa-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes aa-sunrise { from { transform: translateY(26px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes aa-sunfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } }
@keyframes aa-halo { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.35); opacity: .12; } }
@keyframes aa-letter { from { opacity: 0; transform: translateY(.45em) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes aa-fadeup { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aa-line { 0%, 100% { transform: scaleX(.7); } 50% { transform: scaleX(1); } }

.intro-tail { display: flex; flex-direction: column; align-items: center; --base: 1.95s; --step: .12s; }
.intro-tail .reveal { animation-duration: .7s; }
.intro-tagline { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-style: italic; color: rgba(255,255,255,.9); margin: 0 auto 1rem; max-width: 30ch; }
.intro-kicker-place { text-transform: uppercase; letter-spacing: .26em; font-size: .72rem; font-weight: 600; color: #f0c9b3; margin: 0 0 1.8rem; text-indent: .26em; }
.intro .intro-lang { display: inline-flex; align-self: center; margin-bottom: 1.6rem; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.intro .intro-lang button { padding: .7rem 1.4rem; font-size: .92rem; color: rgba(255,255,255,.88); }
.intro .intro-lang button:hover { color: #fff; }
.intro .intro-lang button.active { background: #fff; color: var(--green); }
.intro .intro-lang button:focus-visible { outline-color: #fff; }
/* telefon: štirje jeziki v dveh vrstah (2 × 2), sicer bi vrstica presegla širino zaslona */
@media (max-width: 640px) {
  .intro .intro-lang { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; width: min(100%, 300px); }
  .intro .intro-lang button { padding: .75rem .5rem; }
}
.intro-enter { display: block; width: max-content; margin: 0 auto; padding: 1rem 2.6rem; font-size: 1.05rem; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.intro-scroll { position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 2rem; animation: aa-fadeup .8s cubic-bezier(.2,.7,.2,1) 2.6s both; width: 28px; height: 46px; border: 2px solid rgba(255,255,255,.6); border-radius: 16px; transition: opacity .4s; }
.intro-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(18px); } 100% { opacity: 0; } }
.intro.scrolled .intro-scroll { opacity: 0; }
.reveal { opacity: 0; transform: translateY(24px); animation: reveal .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--base, .25s) + var(--i, 0) * var(--step, .16s)); }
@keyframes reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .intro-scroll, .intro-scroll span { animation: none; }
  .aa-draw, .aa-draw-door, .aa-draw-base { stroke-dasharray: none; animation: none; }
  .aa-sun, .aa-sun-float, .aa-halo, .aa-kicker, .aa-name span, .aa-line { animation: none; opacity: 1; transform: none; }
}

/* Scroll reveal (isti slog kot uvod) -------------------------------- */
:root { --ease-out: cubic-bezier(.2,.7,.2,1); --reveal-dur: .9s; }
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal].no-anim, [data-reveal].no-anim img { transition: none !important; }
[data-reveal="scale"] { transform: translateY(20px) scale(.97); }
[data-reveal="scale"].in { transform: none; }
/* fotografije: počasen "drift" ob prikazu, kot v uvodu */
.gallery figure[data-reveal] img, .hero-mosaic img[data-reveal] { transform: scale(1.08); transition: transform 1.8s var(--ease-out); transition-delay: var(--d, 0s); }
.gallery figure[data-reveal].in img, .hero-mosaic img[data-reveal].in { transform: none; }
.gallery figure[data-reveal].in:hover img { transform: scale(1.03); transition-duration: .5s; transition-delay: 0s; }
[data-parallax] { will-change: transform; }
/* interakcije */
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.cal-day.sel { animation: pop .35s var(--ease-out); }
.cal-day.range { animation: fadein .4s var(--ease-out) both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); color: #fff; } 100% { transform: scale(1); } }
.estimate .total dd.bump { display: inline-block; animation: bump .5s var(--ease-out); transform-origin: right center; }
.est-body-in { animation: reveal .6s var(--ease-out) both; }
.form-msg.ok, .form-msg.err { animation: reveal .5s var(--ease-out) both; }
.est-warn:not([hidden]) { animation: reveal .5s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="scale"] { opacity: 1; transform: none; transition: none; }
  .gallery figure[data-reveal] img, .hero-mosaic img[data-reveal] { transform: none; transition: none; }
  .cal-day.sel, .cal-day.range, .estimate .total dd.bump, .est-body-in, .form-msg.ok, .form-msg.err, .est-warn:not([hidden]) { animation: none; }
}

/* Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,243,236,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: transform .32s var(--ease-out);
}
/* telefon: glava se ob pomikanju navzdol umakne z zaslona in se vrne ob prvem pomiku navzgor (js/main.js) */
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .8rem; padding: .4rem 0; text-decoration: none; color: var(--green); }
.brand-mark { width: 54px; height: 45px; flex: none; overflow: visible; }
.brand-mark .bm-house, .brand-mark .bm-base { stroke: var(--green); }
.brand-mark .bm-door { stroke: var(--terra); }
.brand-mark .bm-sun { fill: var(--terra); transition: transform .5s var(--ease-out); transform-origin: 84px 26px; }
.brand:hover .bm-sun { transform: translateY(-3px) scale(1.08); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--green); text-indent: .32em; }
.brand-name { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 2.05rem; color: var(--green); margin-top: .12rem; letter-spacing: .01em; }
.brand-name em { font-style: italic; color: var(--terra); }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav > a { text-decoration: none; font-weight: 500; font-size: .93rem; color: var(--ink); }
.nav > a:not(.btn):hover { color: var(--terra); }
.nav > a.btn-small { color: #fff; background: var(--terra); padding: .6rem 1.35rem; font-size: .9rem; box-shadow: 0 6px 16px rgba(194,100,58,.28); }
.nav > a.btn-small:hover { background: #a9522c; box-shadow: 0 8px 20px rgba(194,100,58,.38); }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang button { border: 0; background: transparent; padding: .35rem .62rem; font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--ink-soft); font-family: inherit; white-space: nowrap; }
.lang button:hover { color: var(--green); }
.lang button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.lang button.active { background: var(--green); color: #fff; }
.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--green); margin: 5px 0; transition: .2s; }

/* Hero ------------------------------------------------------------- */
.hero { background: var(--green); color: #fff; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(194,100,58,.22), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(255,255,255,.06), transparent 60%); pointer-events: none; }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 6rem; align-items: center; min-height: calc(100vh - 72px); padding: 6rem 0 5rem; }
.hero .eyebrow { color: #f0c9b3; }
.hero .hero-title { color: #fff; max-width: 15ch; font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin-bottom: .5em; }
.hero .lead { color: rgba(255,255,255,.86); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 3.5rem; }
.hero-badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; border-top: 1px solid rgba(255,255,255,.25); padding-top: 1.4rem; }
.hero-badges li { display: flex; flex-direction: column; }
.hero-badges strong { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; font-weight: 600; }
.hero-badges span { font-size: .8rem; opacity: .85; }
.hero-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1.6rem; align-items: start; max-width: 520px; margin-left: auto; }
.hero-mosaic img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.hero-mosaic .m1 { grid-row: 1 / span 2; aspect-ratio: 3/4; align-self: center; }
.hero-mosaic .m2 { aspect-ratio: 4/3; }
.hero-mosaic .m3 { aspect-ratio: 4/3; }

/* Sections --------------------------------------------------------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-alt { background: var(--cream-2); }
.section-head { max-width: 760px; margin-bottom: 2.5rem; }
.sub-title { margin-top: 3rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding-left: 1.7rem; position: relative; margin-bottom: .6rem; }
/* kljukica: lastna linijska ikona (glej brand/ikone), barva prek background, da jo .card-accent lahko prebarva */
.check-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 17px; height: 17px; background: var(--terra); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.amenities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
.amenities li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.ico { width: 34px; height: 34px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
/* Lastne ikone: ena zaobljena poteza v zeleni, en poudarek v terakoti (mreža 24, poteza 1.75) */
.ico svg, .amen-ico svg { display: block; fill: none; stroke: var(--green); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico svg { width: 18px; height: 18px; }
.ic-accent { stroke: var(--terra); }
.ic-fill { fill: var(--terra); stroke: none; }

/* Gallery ---------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.gallery img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 3/4; transition: transform .5s; }
.gallery .wide { grid-column: span 2; }
.gallery .wide img { aspect-ratio: 3/2; }
.gallery figure:not([data-reveal]):hover img { transform: scale(1.03); }
.gallery figcaption { font-size: .8rem; padding: .5rem .8rem; color: var(--ink-soft); }
/* skrite dodatne fotografije – gumb "Prikaži vse fotografije" jih odpre */
.gallery:not(.is-open) .g-extra { display: none; }
.gallery-actions { display: flex; justify-content: center; margin: 1.4rem 0 0; }
.gallery-more { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.4rem; font-size: .9rem; }
.gallery-more-ico { width: 18px; height: 18px; flex: none; transition: transform .45s var(--ease-out); }
.gallery-more[aria-expanded="true"] .gallery-more-ico { transform: rotate(180deg); }
.gallery-more:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Amenity groups --------------------------------------------------- */
.amen-details { margin-top: 3rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.amen-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem .25rem; }
.amen-summary::-webkit-details-marker { display: none; }
.amen-summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 8px; }
.amen-summary-label { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.amen-summary-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--green); line-height: 1.15; }
.amen-summary-hint { font-size: .85rem; color: var(--ink-soft); }
.amen-chevron { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; color: var(--green); transition: transform .45s var(--ease-out), background .25s, border-color .25s; }
.amen-chevron svg { width: 20px; height: 20px; }
.amen-summary:hover .amen-chevron { background: var(--cream-2); border-color: var(--terra); color: var(--terra); }
.amen-details[open] .amen-chevron { transform: rotate(180deg); }
.amen-panel { overflow: hidden; }
.amen-details .amen-groups, .amen-details .todo-grid { padding-bottom: 1.6rem; }
.todo-details { border-bottom: 0; }

.amen-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.amen-group { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.amen-group h4 { font-size: 1.15rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .55rem; }
.amen-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--cream); display: grid; place-items: center; flex: none; }
.amen-ico svg { width: 17px; height: 17px; }
.amen-group ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; color: var(--ink-soft); }
.amen-group li { padding: .25rem 0 .25rem 1.1rem; position: relative; }
.amen-group li::before { content: "·"; position: absolute; left: .2rem; color: var(--terra); font-weight: 700; }
.house-rules { margin-top: 2.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 2rem; }
.house-rules h3 { margin-bottom: .8rem; }

/* Pozivi k rezervaciji (CTA) --------------------------------------- */
.cta-band { background: var(--green); color: #f3efe6; position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 100% 0%, rgba(194,100,58,.28), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgba(255,255,255,.06), transparent 60%); pointer-events: none; }
.cta-inner { position: relative; display: grid; grid-template-columns: 1.4fr auto; gap: 2rem 3rem; align-items: center; }
.cta-band .eyebrow { color: #f0c9b3; }
.cta-band h2 { color: #fff; margin-bottom: .4em; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.cta-band p:not(.eyebrow) { color: rgba(243,239,230,.85); max-width: 56ch; margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }
.cta-actions .btn { padding: .95rem 1.8rem; font-size: 1rem; }
.cta-band-light { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-band-light::before { background: radial-gradient(50% 80% at 100% 0%, rgba(233,201,184,.35), transparent 60%); }
.cta-band-light .eyebrow { color: var(--terra); }
.cta-band-light h2 { color: var(--green); }
.cta-band-light p:not(.eyebrow) { color: var(--ink-soft); }
.section-cta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-top: 2.5rem; padding: 1.4rem 1.8rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.section-cta p { margin: 0; font-family: var(--font-serif); font-size: 1.3rem; color: var(--green); max-width: 40ch; line-height: 1.3; }
.section-cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.section-alt .section-cta { background: var(--paper); }
.price-cta { display: inline-block; margin-top: 1rem; background: #fff; color: var(--green); }
.price-cta:hover { background: var(--terra); color: #fff; }
.footer-cta { margin-top: 1rem; }
.site-footer a.footer-cta { color: #fff; }
.site-footer a.footer-cta:hover { text-decoration: none; }
.book-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; gap: .6rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(247,243,236,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease-out), visibility 0s .35s; }
.book-bar.show { transform: none; visibility: visible; transition-delay: 0s; }
.book-bar .btn { flex: 1; text-align: center; padding: .8rem 1rem; }
.two-col-list { columns: 2; column-gap: 2.5rem; }
.two-col-list li { break-inside: avoid; }

/* Rules ------------------------------------------------------------ */
.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; }
.rules div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; flex-direction: column; }
.rules strong { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--terra); }
.rules span { font-family: var(--font-serif); font-size: 1.25rem; color: var(--green); }

/* Reviews (mnenja gostov) ------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-badge-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.hero-badge-link:hover span { text-decoration: underline; }
#mnenja { overflow: hidden; }
/* skupna ocena: pas z oceno levo in kategorijami desno */
.rev-summary { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 3rem; align-items: center; background: var(--green); color: #f3efe6; border-radius: var(--radius); padding: 1.8rem 2.2rem; box-shadow: var(--shadow); margin-bottom: 2rem; }
.rev-side { display: flex; flex-direction: column; min-width: 220px; }
.rev-score { display: flex; flex-direction: column; margin-bottom: .8rem; }
.rev-score-big { font-family: var(--font-serif); font-size: 4.4rem; line-height: 1; font-weight: 600; color: #fff; }
.rev-score-word { font-family: var(--font-serif); font-style: italic; font-size: 1.45rem; color: #f0c9b3; margin-top: .2rem; }
.rev-score-n { font-size: .85rem; opacity: .8; margin-top: .2rem; }
.rev-excellent { font-size: .86rem; color: rgba(255,255,255,.85); margin: 0 0 .8rem; max-width: 26ch; }
.rev-cats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem 1.6rem; }
.rev-cats li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label score" "bar bar"; gap: .25rem .6rem; font-size: .84rem; align-items: baseline; }
.rev-cat-label { grid-area: label; }
.rev-cat-score { grid-area: score; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.rev-bar { grid-area: bar; display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.rev-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 3px; background: #f0c9b3; transform-origin: left center; transform: scaleX(0); transition: transform 1.1s var(--ease-out) .25s; }
.rev-summary.in .rev-bar i, .rev-summary:not([data-reveal]) .rev-bar i { transform: none; }
.rev-source { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .8rem; }
.rev-source-score { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 600; color: #fff; line-height: 1; }
.rev-source-score small { font-size: .9rem; opacity: .7; }
.rev-source-meta { font-size: .85rem; opacity: .85; }
.rev-source-meta a { color: #fff; }
.rev-all { display: inline-block; color: #fff; font-weight: 600; text-decoration: none; font-size: .92rem; }
.rev-all:hover { color: #f0c9b3; }
/* trak: mnenja se samodejno pomikajo v levo (js/reviews.js premika scrollLeft), ob premiku miške ali fokusu se
   ustavijo. Trak je pravi pomični element, zato ga je mogoče pomikati tudi s kolescem/sledilno ploščico ali ga
   povleči z miško; drsnik je skrit, ker je zanka neskončna. Tri kopije niza omogočajo neskončno pomikanje v obe smeri. */
.rev-marquee { margin: 0 calc(50% - 50vw); padding: .4rem 0 1.2rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.rev-marquee::-webkit-scrollbar { display: none; }
.rev-marquee.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.rev-marquee.is-dragging * { cursor: grabbing; }
.rev-track { display: flex; width: max-content; }
.rev-set { display: flex; align-items: stretch; gap: 1rem; padding-right: 1rem; }
.rev-marquee .rev-card { width: 340px; flex: none; }
.rev-marquee .rev-long .rev-text p:first-child { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
/* Telefon, tablica in zasloni na dotik: trak se ne vrti sam (na dotik ga ni mogoče ustaviti, besedilo bi bežalo),
   temveč se pomika s prstom in se ustavi na kartici. Kartice so visoke toliko, kot je besedila – brez raztegnjenih
   praznih kartic. Prva kartica je poravnana z robom vsebine (.wrap), naslednja kuka izza roba kot namig za poteg.
   Isti pogoj uporablja js/reviews.js, ki v tem načinu ne izriše kopije traku. */
@media (max-width: 960px), (hover: none) and (pointer: coarse) {
  .rev-marquee { --gutter: max(1rem, calc(50vw - 570px)); cursor: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }
  .rev-track { width: auto; }
  .rev-set { align-items: flex-start; padding: 0 var(--gutter); }
  .rev-set[aria-hidden] { display: none; }
  .rev-marquee .rev-card { scroll-snap-align: start; }
}
/* mreža vseh mnenj */
.rev-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rev-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .8rem; overflow: hidden; }
.rev-card::after { content: "\201D"; position: absolute; right: .7rem; bottom: -1.5rem; font-family: var(--font-serif); font-size: 6rem; line-height: 1; color: var(--terra-soft); opacity: .4; pointer-events: none; }
.rev-head { display: flex; align-items: center; gap: .8rem; }
.rev-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--cream-2); color: var(--green); font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; display: grid; place-items: center; flex: none; }
.rev-who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.rev-who strong { color: var(--green); }
.rev-meta { font-size: .78rem; color: var(--ink-soft); }
.rev-pill { flex: none; background: var(--green); color: #fff; border-radius: 8px; padding: .35rem .55rem; font-weight: 600; font-size: .95rem; line-height: 1; font-variant-numeric: tabular-nums; }
.rev-pill small { font-size: .65rem; opacity: .75; font-weight: 500; }
.rev-title { font-size: 1.2rem; margin: 0; }
.rev-text { margin: 0; font-size: .95rem; color: var(--ink); position: relative; display: flex; flex-direction: column; gap: .6rem; }
.rev-text p { margin: 0; }
.rev-minus { display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-soft); font-size: .9rem; }
.rev-minus-mark { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--terra); color: var(--terra); font-size: .8rem; line-height: 1; display: grid; place-items: center; margin-top: .15rem; }
.rev-only-score { font-style: italic; color: var(--ink-soft); font-size: .88rem; }
.rev-list .rev-long:not(.open) .rev-text p:first-child { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rev-list .rev-long:not(.open) .rev-minus { display: none; }
.rev-expand, .rev-translate { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; font-weight: 600; color: var(--terra); cursor: pointer; align-self: flex-start; }
.rev-expand:hover, .rev-translate:hover { text-decoration: underline; }
.rev-expand:focus-visible, .rev-translate:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.rev-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .75rem; color: var(--ink-soft); padding-top: .7rem; border-top: 1px dashed var(--line); position: relative; }
.rev-source-tag { margin-left: auto; }
.rev-actions { text-align: center; margin: 1.5rem 0 0; }
.rev-actions .rev-more { padding: .7rem 1.4rem; font-size: .9rem; }
/* brez gibanja: stolpci se ne animirajo, trak se ne pomika sam (js/reviews.js izriše en sam niz), pomika se ročno */
@media (prefers-reduced-motion: reduce) {
  .rev-bar i { transform: none; transition: none; }
  .rev-track { width: auto; }
  .rev-marquee { -webkit-mask-image: none; mask-image: none; }
  .rev-set[aria-hidden] { display: none; }
}

/* Location --------------------------------------------------------- */
.loc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
.card { background: var(--paper); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.card p:last-child { margin-bottom: 0; }
.card-accent { background: var(--green); color: #f3efe6; }
.card-accent h3 { color: #fff; }
.card-accent .check-list li::before { background: #f0c9b3; }
.card-accent strong { color: #fff; }
/* Paralaksa (js/main.js): kartici rezerviramo prostor za premik, da ob pomiku ne zdrsne čez sosednje bloke */
@media (min-width: 961px) {
  .card-accent { --parallax-max: 16px; margin-block: var(--parallax-max); }
}
/* Foto pas v razdelku Lokacija */
.loc-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.loc-strip figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.loc-strip img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; transition: transform .6s var(--ease-out); }
.loc-strip figure:hover img { transform: scale(1.04); }
.loc-strip figcaption { font-size: .78rem; padding: .5rem .8rem; color: var(--ink-soft); }

/* Celozaslonski foto pas */
.photo-band { position: relative; height: clamp(180px, 26vw, 400px); overflow: hidden; }
/* Ilustracija je narisana za širino ~1800 px; na ozkih zaslonih je ne stiskamo na širino zaslona (hiške bi postale
   nečitljive packe), temveč jo rišemo v najmanj 1000 px širine in pokažemo osrednji izrez (vas s cerkvijo).
   Nad 1000 px je slika široka kot zaslon. Pas je nižji od ilustracije; obrežemo predvsem spodnji rob (travnik),
   da nebo z oblaki ostane celo. */
.photo-band img { position: absolute; top: 0; left: min(0px, 50% - 500px); width: max(100%, 1000px); max-width: none; height: 100%; object-fit: cover; object-position: 50% 32%; }

/* Diaprojekcija idej za izlet (nad spustnim seznamom) --------------- */
.todo-slides { --ts-dur: 5500ms; position: relative; margin-top: 3rem; border-radius: var(--radius); overflow: hidden; background: var(--green); color: #f3efe6; box-shadow: var(--shadow); aspect-ratio: 21 / 9; isolation: isolate; }
.todo-slides + .todo-details { margin-top: 1.2rem; }
.ts-track { position: absolute; inset: 0; }
.ts-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; text-decoration: none; color: inherit; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease-out), visibility 0s linear .9s; }
.ts-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.ts-slide.no-anim { transition: none; }
.ts-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); }
.ts-slide.is-active .ts-img { animation: ts-drift calc(var(--ts-dur) + 1000ms) linear both; }
.ts-slide.no-anim .ts-img, .is-paused .ts-slide .ts-img { animation-play-state: paused; }
@keyframes ts-drift { from { transform: scale(1); } to { transform: scale(1.07); } }
.ts-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,22,0) 30%, rgba(20,30,22,.55) 65%, rgba(20,30,22,.85) 100%); }
.ts-noimg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 10%, rgba(194,100,58,.45), transparent 60%), linear-gradient(150deg, var(--green-soft), var(--green)); }
.ts-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .35rem; padding: 2rem 2.4rem; max-width: 62ch; }
.ts-dist { align-self: flex-start; font-size: .72rem; font-weight: 600; background: rgba(255,253,249,.92); color: var(--green); border-radius: 999px; padding: .2rem .65rem; margin-bottom: .3rem; }
.ts-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; color: #fff; transition: color .25s; }
.ts-text { font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.86); }
.ts-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.75); transition: color .25s, gap .25s; }
.ts-more svg { width: 13px; height: 13px; }
.ts-slide:hover .ts-title, .ts-slide:focus-visible .ts-title { color: var(--terra-soft); }
.ts-slide:hover .ts-more, .ts-slide:focus-visible .ts-more { color: #fff; gap: .55rem; }
.ts-slide:focus-visible { outline: 3px solid var(--terra); outline-offset: -3px; }
.ts-btn { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(31,61,43,.45); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; backdrop-filter: blur(6px); transition: background .2s, border-color .2s, transform .2s var(--ease-out), opacity .3s; }
.ts-btn svg { width: 22px; height: 22px; }
.ts-prev { left: 1rem; } .ts-next { right: 1rem; }
.ts-btn:hover { background: var(--terra); border-color: var(--terra); transform: translateY(-50%) scale(1.06); }
.ts-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ts-bar { position: absolute; z-index: 3; right: 1.2rem; bottom: 1.2rem; display: flex; align-items: center; gap: .8rem; }
.ts-dots { display: flex; align-items: center; gap: .45rem; }
.ts-dot { position: relative; width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,255,255,.45); cursor: pointer; overflow: hidden; transition: width .35s var(--ease-out), background .25s; }
.ts-dot:hover { background: rgba(255,255,255,.8); }
.ts-dot.is-active { width: 34px; background: rgba(255,255,255,.35); }
.ts-dot.is-active::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); animation: ts-progress var(--ts-dur) linear forwards; }
.is-paused .ts-dot.is-active::after { animation-play-state: paused; }
@keyframes ts-progress { to { transform: scaleX(1); } }
.ts-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ts-play { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(31,61,43,.45); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; backdrop-filter: blur(6px); transition: background .2s, border-color .2s; }
.ts-play svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.ts-play .ts-ico-play, .todo-slides.is-paused .ts-play .ts-ico-pause { display: none; }
.todo-slides.is-paused .ts-play .ts-ico-play { display: block; }
.ts-play:hover { background: var(--terra); border-color: var(--terra); }
.ts-play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ts-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .ts-slide { transition: none; }
  .ts-slide.is-active .ts-img { animation: none; }
  .ts-dot.is-active::after { animation: none; transform: none; }
  .ts-dot { transition: none; }
}

.todo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.todo { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s; }
.todo-photo { display: block; margin: -1.3rem -1.3rem 1rem; overflow: hidden; }
.todo-photo img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
a.todo:hover .todo-photo img, a.todo:focus-visible .todo-photo img { transform: scale(1.06); }
.todo:has(.todo-photo) .dist { top: 1rem; right: 1rem; background: rgba(255,253,249,.92); backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.todo-accent { background: linear-gradient(150deg, var(--cream-2), #e6dcc9); border-color: #d9cfba; }
.todo-accent::before { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgba(194,100,58,.13); }
.todo-accent h4, .todo-accent p, .todo-accent .todo-link { position: relative; }
a.todo:hover, a.todo:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--terra); }
a.todo:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
a.todo:hover h4 { color: var(--terra); }
.todo h4 { transition: color .25s; }
.todo p { flex: 1; }
.todo-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font-size: .78rem; font-weight: 600; color: var(--ink-soft); transition: color .25s, gap .25s; }
.todo-link svg { width: 13px; height: 13px; }
a.todo:hover .todo-link { color: var(--terra); gap: .55rem; }
.todo-domain { letter-spacing: .01em; }
.todo .dist { position: absolute; top: 1rem; right: 1rem; font-size: .72rem; font-weight: 600; background: var(--cream-2); color: var(--green); border-radius: 999px; padding: .2rem .6rem; }
.todo h4 { padding-right: 4rem; }
.todo p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.map-block { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.5rem; margin-top: 3rem; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.map-info { padding: 2rem; }
.map-info address { font-style: normal; margin-bottom: 1.2rem; }
.dist-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.dist-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.dist-list b { color: var(--green); }
.map-frame { min-height: 380px; position: relative; display: flex; flex-direction: column; }
.map-frame iframe { width: 100%; flex: 1; min-height: 380px; border: 0; display: block; }
.map-placeholder { flex: 1; min-height: 380px; display: grid; place-content: center; text-align: center; gap: .6rem; padding: 2rem; background: repeating-linear-gradient(45deg, var(--cream-2) 0 12px, #e8e1d3 12px 24px); }
.map-placeholder .fine { max-width: 38ch; margin: 0 auto; }
.map-attr { font-size: .72rem; color: var(--ink-soft); margin: 0; padding: .3rem .8rem; text-align: right; background: var(--paper); }

/* Prices ----------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.price-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; text-align: center; }
.price-main { background: var(--green); color: #f3efe6; border-color: var(--green); }
.price-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin-bottom: .3rem; }
.price-big { font-family: var(--font-serif); font-size: 3rem; font-weight: 600; line-height: 1; margin: .2rem 0; }
.price-main .price-big { color: #fff; }
.price-card:not(.price-main) .price-big { color: var(--green); }
.price-note { font-size: .85rem; opacity: .8; margin: 0; }
.price-table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.price-table th, .price-table td { text-align: left; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table th { width: 32%; font-weight: 600; color: var(--green); }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: 0; }
.price-table small { color: var(--ink-soft); }
.price-table + .fine { margin-top: 1rem; }

/* Calendar --------------------------------------------------------- */
.calendar { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cal-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); font-size: 1.4rem; cursor: pointer; color: var(--green); line-height: 1; }
.cal-nav:hover { background: var(--cream-2); }
.cal-nav:disabled { opacity: .35; cursor: default; background: var(--cream); }
.cal-legend { display: flex; gap: 1.2rem; font-size: .82rem; color: var(--ink-soft); flex-wrap: wrap; justify-content: center; }
.cal-legend > span { display: flex; align-items: center; gap: .4rem; }
.sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw-free { background: var(--free); border: 1px solid #b9d5b5; }
.sw-booked { background: var(--booked); border: 1px solid #e3b7a6; }
.sw-sel { background: var(--sel); }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.cal-month h4 { text-align: center; font-size: 1.3rem; margin-bottom: .6rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); padding-bottom: .3rem; }
.cal-day { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-size: .9rem; border: 1px solid transparent; background: transparent; font-family: inherit; color: var(--ink); cursor: default; padding: 0; }
.cal-day.free { background: var(--free); color: var(--free-ink); border-color: #cfe3cb; cursor: pointer; }
.cal-day.free:hover { background: #cde5c8; }
.cal-day.booked { background: var(--booked); color: var(--booked-ink); border-color: #ecc9bb; text-decoration: line-through; }
.cal-day.past, .cal-day.beyond { color: #b9b3a8; }
.cal-day.today { font-weight: 700; box-shadow: inset 0 0 0 2px var(--terra); }
.cal-day.sel { background: var(--sel) !important; color: #fff !important; border-color: var(--sel); }
.cal-day.range { background: #c8dcc8; color: var(--green); }
.cal-day.empty { visibility: hidden; }
.cal-status { text-align: center; font-size: .82rem; color: var(--ink-soft); margin: 1rem 0 0; }
.cal-status.err { color: var(--booked-ink); }

/* Form ------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; }
.form { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; }
.form label { display: block; margin-bottom: 1rem; }
.form label > span:not(.date-field), .form .field > .lbl { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; color: var(--ink-soft); }
.form input:not([type=checkbox]), .form select, .form textarea {
  width: 100%; min-width: 0; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; background: #fff; color: var(--ink);
}
/* Datumski polji (prihod, odhod). Safari na iPhonu sistemsko datumsko polje brez vrednosti prikaže kot prazen
   okvir, mu ne upošteva širine 100 % (štrli iz kartice) in vpisani datum sredinsko poravna; z lastnim videzom
   polja to odpravimo. Namig »Izberite datum« in ikono koledarja pokažemo samo na iOS/iPadOS (edini sistem, ki
   podpira -webkit-touch-callout) – drugi brskalniki imajo lasten namig in ikono. */
.date-field { position: relative; display: block; }
.date-field input[type=date] { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; min-height: calc(1.6em + 1.4rem + 2px); }
.date-field input[type=date]::-webkit-date-and-time-value { text-align: left; min-height: 1.6em; }
.date-ph, .date-ico { display: none; position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; }
.date-ph { left: .9rem; color: #8b8478; white-space: nowrap; }
.date-ico { right: .85rem; width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@supports (-webkit-touch-callout: none) {
  .date-field .date-ico { display: block; }
  .date-field.is-empty .date-ph { display: block; }
  .date-field input[type=date] { padding-right: 2.6rem; }
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.form input:user-invalid { border-color: var(--booked-ink); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form .row:has(.check) { grid-template-columns: 1fr 1fr auto; align-items: end; }
.check { display: flex !important; align-items: center; gap: .5rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--green); }
.check span { margin: 0 !important; font-weight: 500 !important; color: var(--ink) !important; }
.consent { align-items: flex-start; font-size: .85rem; }
.consent span { font-size: .85rem !important; color: var(--ink-soft) !important; font-weight: 400 !important; }
.form-msg { min-height: 1.4em; font-size: .9rem; font-weight: 500; }
.form-msg.ok { color: var(--free-ink); }
.form-msg.err { color: var(--booked-ink); }
/* Polje »Telefon«: izbirnik države s klicno kodo (levo) in številka brez kode (desno). Sistemski <select> z vsemi
   državami (js/countries.js) je neviden in leži čez lasten prikaz z zastavico in kodo (🇸🇮 +386), tako da klik ali
   dotik odpre sistemski seznam držav (na telefonu kolešček), prikaz pa ostane kratek. Zastavica je emoji iz kode države. */
.form .field { display: block; margin-bottom: 1rem; }
.form .field > .lbl { margin-bottom: .3rem; }
.tel-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
.tel-code { position: relative; display: inline-flex; align-items: center; padding: .7rem .65rem .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; white-space: nowrap; cursor: pointer; }
.tel-code:focus-within { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.tel-code.is-invalid { border-color: var(--booked-ink); }
.tel-view { display: inline-flex; align-items: center; gap: .4rem; pointer-events: none; }
.tel-flag { font-size: 1.25rem; line-height: 1; }
.tel-dial { font-weight: 500; }
.tel-code.is-empty .tel-dial { color: #8b8478; font-weight: 400; }
.tel-caret { width: 14px; height: 14px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form .tel-code select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 10px; opacity: 0; cursor: pointer; font-size: 16px; }
.form .tel-code select:focus { outline: none; }
/* napaka pod poljem (e-pošta, ponovitev, telefon) in predlog popravka e-naslova (»Ste mislili …?«) */
.field-err, .field-hint { display: block; margin-top: .35rem; font-size: .8rem; line-height: 1.4; }
.field-err { color: var(--booked-ink); font-weight: 500; }
.field-hint { color: var(--ink-soft); }
.email-suggest { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--green); text-decoration: underline; cursor: pointer; }
.form input.is-invalid { border-color: var(--booked-ink); }
.form input.is-invalid:focus { outline-color: var(--booked-ink); border-color: var(--booked-ink); }

.estimate { background: var(--green); color: #f3efe6; border-radius: var(--radius); padding: 2rem; position: sticky; top: 100px; }
.estimate h3 { color: #fff; }
.estimate dl { margin: 0 0 1rem; }
.estimate dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.15); font-size: .93rem; }
.estimate dt { margin: 0; }
.estimate dd { margin: 0; font-weight: 600; white-space: nowrap; }
.estimate .total { border-bottom: 0; font-family: var(--font-serif); font-size: 1.5rem; padding-top: .8rem; }
.estimate .total dd { color: #f0c9b3; }
.est-warn { background: rgba(194,100,58,.35); border: 1px solid rgba(240,201,179,.6); border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; }
.estimate .fine { color: rgba(255,255,255,.7); }
.est-contact { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.2); }
.est-contact p { margin-bottom: .4rem; font-size: .9rem; }
.est-contact a { display: block; color: #fff; text-decoration: none; font-weight: 600; margin-bottom: .3rem; }
.est-contact a:hover { color: #f0c9b3; }
.phones { margin-bottom: .4rem; }
.phone { margin-bottom: .9rem; }
.phone-name { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #f0c9b3; margin-bottom: .15rem; }
.phone a { margin-bottom: 0; font-size: 1.05rem; }
.emails { margin-bottom: .4rem; }
.emails a { word-break: break-all; }
.phone-langs { display: block; font-size: .8rem; color: rgba(255,255,255,.75); }
.phone-langs .flags { letter-spacing: .1em; }
.footer-phones p, .footer-emails p { margin: 0 0 .2rem; }
.footer-phones b { font-weight: 600; color: #e8e2d6; }
.footer-phones small { color: #9b9486; }

/* Kontakt ---------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem; align-items: start; }
.contact-cards { display: grid; gap: 1rem; }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem 1.4rem 4.6rem; position: relative; }
.contact-card h3 { font-size: 1.35rem; margin-bottom: .2em; }
.contact-ico { position: absolute; left: 1.4rem; top: 1.45rem; width: 44px; height: 44px; border-radius: 12px; background: var(--cream); display: grid; place-items: center; }
.contact-ico svg { width: 22px; height: 22px; display: block; fill: none; stroke: var(--green); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.contact-note { font-size: .9rem; color: var(--ink-soft); margin-bottom: .8rem; }
.contact-card-soft .contact-note { margin-bottom: .4rem; }
.contact-phones { display: grid; gap: .7rem; }
.contact-person { display: grid; gap: .15rem; }
.contact-person .phone-name { color: var(--terra); }
.contact-person .phone-langs { color: var(--ink-soft); }
.contact-tel, .contact-mail { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1.05rem; color: var(--green); text-decoration: none; padding: .15rem 0; }
.contact-tel:hover, .contact-mail:hover { color: var(--terra); }
.contact-tel + .contact-tel { margin-left: 1rem; }
.contact-emails { display: grid; gap: .25rem; }
.contact-mail { word-break: break-all; }
.contact-form h3 { margin-bottom: .3em; }
.contact-form-lead { font-size: .92rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.footer-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.footer-actions .footer-cta { margin-top: 0; }

/* Footer ----------------------------------------------------------- */
.site-footer { background: var(--ink); color: #cfc8bb; padding: 3rem 0; font-size: .9rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.site-footer p { margin: 0 0 .3rem; }
.site-footer a { color: #f0c9b3; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-head { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: #9b9486; margin-bottom: .5rem !important; }
.footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.footer-brand .brand-mark { width: 44px; height: 37px; }
.footer-brand .bm-house, .footer-brand .bm-base { stroke: #fff; }
.footer-brand .bm-door { stroke: #f0c9b3; }
.footer-brand .bm-sun { fill: #c2643a; }
.footer-brand .brand-kicker { color: #9b9486; }
.footer-brand .brand-name { color: #fff; font-size: 1.6rem; }
.footer-brand .brand-name em { color: #f0c9b3; }
.footer-credit { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: #9b9486; }
.footer-credit p { margin: 0; }

/* Lightbox (diaprojekcija fotografij) ------------------------------ */
.lb-item { cursor: zoom-in; }
.lb-item:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; }
html.lb-open { overflow: hidden; }
.lb { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; background: transparent; color: #fff; overflow: hidden; }
.lb::backdrop { background: rgba(20, 24, 20, .92); }
.lb[open] { animation: lb-in .25s var(--ease-out) both; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 1rem; box-sizing: border-box; }
.lb-fig { margin: 0; max-width: min(1400px, 100%); display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.lb-stage { display: grid; place-items: center; transition: opacity .16s ease, transform .16s ease; }
.lb-stage.is-out { opacity: 0; transform: scale(.985); }
.lb-img { display: block; max-width: calc(100vw - 2rem); max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,.5); background: #000; }
.lb-cap { display: flex; align-items: baseline; gap: 1rem; font-size: .92rem; color: rgba(255,255,255,.85); max-width: 70ch; text-align: center; }
.lb-count { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.55); white-space: nowrap; }
.lb-btn { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(247,243,236,.12); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; backdrop-filter: blur(6px); transition: background .2s, transform .2s var(--ease-out); }
.lb-btn svg { width: 24px; height: 24px; }
.lb-btn:hover { background: var(--terra); border-color: var(--terra); transform: scale(1.06); }
.lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lb-btn[hidden] { display: none; }
@media (max-width: 760px) {
  .lb-inner { padding: .6rem; }
  .lb-img { max-width: calc(100vw - 1.2rem); max-height: calc(100vh - 6.5rem); max-height: calc(100dvh - 6.5rem); border-radius: 10px; }
  .lb-btn { width: 42px; height: 42px; }
  .lb-close { top: .6rem; right: .6rem; }
  .lb-prev { left: .4rem; }
  .lb-next { right: .4rem; }
  .lb-cap { flex-direction: column; align-items: center; gap: .2rem; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lb[open] { animation: none; }
  .lb-stage, .lb-btn { transition: none; }
}

/* Responsive ------------------------------------------------------- */
@media (max-width: 960px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .hero-inner { grid-template-columns: 1fr; gap: 4rem; min-height: 0; padding: 4rem 0 3.5rem; }
  .hero-mosaic { max-width: none; margin: 0; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; gap: 1.2rem; }
  .hero-mosaic .m1 { grid-row: auto; aspect-ratio: 3/4; align-self: start; }
  .hero-mosaic .m2, .hero-mosaic .m3 { aspect-ratio: 3/4; }
  .rules, .todo-grid { grid-template-columns: 1fr 1fr; }
  .loc-strip { grid-template-columns: 1fr 1fr; }
  .loc-strip figure:last-child { grid-column: span 2; }
  .todo-slides { aspect-ratio: 16 / 9; }
  .ts-body { padding: 1.6rem 1.8rem; padding-bottom: 3.6rem; }
  .amen-groups { grid-template-columns: 1fr 1fr; }
  .amen-summary-title { font-size: 1.3rem; }
  .two-col-list { columns: 1; }
  .loc-grid, .map-block, .form-grid, .two-col, .rev-summary, .contact-grid { grid-template-columns: 1fr; }
  .rev-cats { grid-template-columns: 1fr 1fr; }
  .rev-list { grid-template-columns: 1fr 1fr; }
  .estimate { position: static; }
  .cta-inner { grid-template-columns: 1fr; }
  .cta-actions { justify-content: flex-start; }
}
@media (min-width: 961px) and (max-width: 1130px) {
  /* Ožje namizje: šest povezav, gumb in štirje jeziki (SL EN DE IT) – malo manj zraka, da se vrstica izide tudi v
     nemščini in italijanščini, kjer so besede daljše (»Verfügbarkeit«, »Appartamento«). */
  .nav { gap: .95rem; }
  .nav > a { font-size: .88rem; }
  .nav > a.btn-small { padding: .55rem 1rem; font-size: .85rem; }
  .lang button { padding: .35rem .5rem; font-size: .74rem; }
  .brand-name { font-size: 1.85rem; }
}
@media (max-width: 960px) {
  /* Meni pod gumbom ☰ že na tablici: vodoravna navigacija (šest povezav, gumb, SL/EN/DE/IT) se pod ~940 px ne izide
     ob logotipu in bi stran razširila čez rob zaslona (vodoravno pomikanje na iPadu). */
  .nav-toggle { display: block; padding: .7rem; margin-right: -.7rem; border-radius: 10px; }
  .nav-toggle:focus-visible { outline: 2px solid var(--green); }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    background: var(--cream); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1.5rem; gap: 0;
    box-shadow: 0 16px 30px rgba(36,33,29,.12); max-height: calc(100dvh - 72px); overflow-y: auto;
    display: none;
  }
  .nav.open { display: flex; }
  .nav > a { padding: .95rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav > a.btn-small { align-self: stretch; text-align: center; margin-top: 1.1rem; padding: .95rem 1.2rem; font-size: 1rem; border-bottom: 0; }
  .nav .lang { align-self: center; margin-top: 1.1rem; }
  .nav .lang button { padding: .6rem 1.2rem; font-size: .9rem; }
}
@media (max-width: 760px) {
  /* Telefon: širši robovi, več zraka, večje tipke, sredinska poravnava pozivov */
  .wrap { width: min(1140px, 100% - 2.5rem); }
  html { scroll-padding-top: 72px; }
  h2 { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  h3 { font-size: 1.35rem; }
  .lead { font-size: 1.02rem; }
  .section { padding: 3.25rem 0; }
  .section-head { margin-bottom: 2rem; }
  .sub-title { margin-top: 2.5rem; }
  .two-col { gap: 2.25rem; margin-top: 2.5rem; }

  /* gumbi: polna širina, udobna (a ne pretirana) višina ~52 px, sredinsko */
  .btn { padding: .85rem 1.3rem; font-size: 1rem; line-height: 1.35; }
  .btn-small { padding: .6rem 1.1rem; font-size: .9rem; }
  .hero-actions, .cta-actions, .section-cta-actions { flex-direction: column; align-items: stretch; gap: .7rem; width: 100%; max-width: 420px; margin-inline: auto; }
  .hero-actions .btn, .cta-actions .btn, .section-cta-actions .btn, .footer-cta, .btn-wide, .price-cta { display: block; width: 100%; text-align: center; padding: .9rem 1.4rem; }

  /* uvod */
  /* ozadje: <picture> na telefonu izbere ožji izrez 9:16 okoli vrat (uvod-vhod-telefon-*), ki pokrije ves zaslon */
  .intro-content { padding: 4rem 1.25rem 5.5rem; }
  .intro-enter { min-width: 220px; }

  /* glava */
  .header-inner { min-height: 64px; }
  .nav { max-height: calc(100dvh - 64px); }
  .brand { gap: .6rem; }
  .brand-mark { width: 46px; height: 38px; }
  .brand-kicker { font-size: .64rem; }
  .brand-name { font-size: 1.75rem; }

  /* hero: vse sredinsko, mozaik v dveh vrstah */
  .hero-inner { gap: 2.5rem; padding: 3rem 0 2.75rem; text-align: center; }
  .hero .hero-title { max-width: none; font-size: clamp(2.1rem, 8.5vw, 2.8rem); }
  .hero .lead { margin-inline: auto; }
  .hero-actions { margin: 1.6rem auto 2.2rem; }
  .hero-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem .8rem; padding-top: 1.5rem; }
  .hero-badges li, .hero-badge-link { align-items: center; text-align: center; }
  .hero-mosaic { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .hero-mosaic .m1 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .hero-mosaic .m2, .hero-mosaic .m3 { aspect-ratio: 4 / 3; }

  /* mnenja */
  .rev-summary { padding: 1.6rem 1.25rem; gap: 1.25rem; }
  .rev-side { min-width: 0; }
  .rev-score-big { font-size: 3.6rem; }
  .rev-score-word { font-size: 1.3rem; }
  .rev-card { padding: 1.25rem 1.15rem; }
  .rev-marquee { --gutter: 1.25rem; }   /* isti rob kot .wrap */
  .rev-marquee .rev-card { width: min(300px, 82vw); }
  .price-grid, .rev-list { grid-template-columns: 1fr; }

  /* apartma */
  .gallery { gap: .75rem; }
  .gallery figure:last-child:nth-child(even) { grid-column: span 2; }
  .gallery figure:last-child:nth-child(even) img { aspect-ratio: 3 / 2; }
  .gallery figcaption { font-size: .76rem; padding: .45rem .7rem; }
  .amenities { grid-template-columns: 1fr; gap: .8rem; }
  .amen-details { margin-top: 2.5rem; }
  .amen-summary { padding: 1.2rem 0; }
  .amen-group { padding: 1.1rem 1.1rem; }
  .rules { margin-top: 2.5rem; gap: .75rem; }
  .house-rules { margin-top: 2rem; padding: 1.4rem 1.25rem; }
  .card { padding: 1.5rem 1.25rem; }

  /* pozivi k rezervaciji */
  .cta-band { padding: 3rem 0; }
  .cta-inner { text-align: center; gap: 1.75rem; }
  .cta-band p:not(.eyebrow) { margin-inline: auto; }
  .cta-actions { justify-content: center; }
  .section-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 1.5rem 1.25rem; gap: 1.2rem; margin-top: 2rem; }
  .section-cta p { margin-inline: auto; font-size: 1.2rem; }
  .book-bar { display: flex; padding: .5rem .9rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .book-bar .btn { padding: .8rem .8rem; }
  body.book-bar-on { padding-bottom: 68px; }
  /* panoramska ilustracija: pokažemo nebo, vas s cerkvijo in prvo vrsto hiš na polju; spodnji rob pade na
     prazen travnik (pri 240 px), ne skozi drevesa kot pri nižjem pasu s sredinskim izrezom */
  .photo-band { height: 240px; }
  .photo-band img { object-position: 50% 0; }

  /* lokacija */
  .loc-strip { margin-bottom: 1.5rem; }
  .todo-slides { margin-top: 2.5rem; }
  .map-block { margin-top: 2.5rem; }
  .map-info { padding: 1.5rem 1.25rem; }
  .map-frame, .map-frame iframe, .map-placeholder { min-height: 300px; }
  .map-placeholder { padding: 1.5rem 1.25rem; }

  /* cene */
  .price-card { padding: 1.4rem 1.1rem; }
  .price-big { font-size: 2.6rem; }
  .price-table th, .price-table td { padding: .8rem 1rem; }
  .price-table th { width: 40%; }

  /* koledar: puščici ob imenu meseca, legenda pod koledarjem */
  .calendar { position: relative; display: flex; flex-direction: column; padding: 1.25rem .9rem 1.1rem; }
  .cal-toolbar { display: contents; }
  .cal-nav { position: absolute; top: 1rem; width: 42px; height: 42px; }
  #calPrev { left: .9rem; }
  #calNext { right: .9rem; }
  .cal-months { order: 1; grid-template-columns: 1fr; gap: 2rem; }
  .cal-month h4 { padding: .35rem 3rem 0; margin-bottom: .9rem; }
  .cal-legend { order: 2; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line); gap: .6rem 1.2rem; }
  .cal-status { order: 3; margin-top: .9rem; }
  .cal-grid { gap: 3px; }
  .cal-day { font-size: .92rem; }

  /* povpraševanje (font-size 1rem: Safari na iPhonu manjša polja ob dotiku poveča – zoom) */
  .form { padding: 1.5rem 1.15rem; }
  .form label, .form .field { margin-bottom: 1.1rem; }
  .form input:not([type=checkbox]), .form select, .form textarea { padding: .8rem .9rem; font-size: 1rem; }
  .date-field input[type=date] { min-height: calc(1.6em + 1.6rem + 2px); }
  .form .row, .form .row:has(.check) { grid-template-columns: 1fr; gap: 0; }
  .form .row:has(.check) .check { margin: .2rem 0 1.3rem; }
  .estimate { padding: 1.6rem 1.25rem; }

  /* kontakt */
  .contact-card { padding: 1.3rem 1.15rem 1.3rem 4.2rem; }
  .contact-ico { left: 1.1rem; top: 1.3rem; width: 40px; height: 40px; }
  .contact-tel { display: flex; padding: .35rem 0; font-size: 1.1rem; }
  .contact-tel + .contact-tel { margin-left: 0; }
  .footer-actions { flex-direction: column; max-width: 420px; }

  /* noga */
  .site-footer { padding: 3rem 0 2.5rem; }
  .footer-inner { flex-direction: column; gap: 2.25rem; }
  .footer-cta { max-width: 420px; margin-top: 1.4rem; }
  .footer-credit { margin-top: 2rem; }
}
@media (max-width: 480px) {
  .todo-grid, .amen-groups, .rev-cats { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr 1fr; }
  .rules div { padding: .9rem 1rem; }
  .rules span { font-size: 1.15rem; }
  .rules div:nth-child(n+3) { grid-column: span 2; }
  .loc-strip { grid-template-columns: 1fr; }
  .loc-strip figure:last-child { grid-column: auto; }
  .todo-slides { aspect-ratio: 4 / 5; border-radius: 10px; }
  .ts-body { padding: 1.2rem 1.2rem 3.4rem; gap: .3rem; }
  .ts-text { font-size: .88rem; }
  .ts-btn { width: 40px; height: 40px; }
  .ts-prev { left: .6rem; } .ts-next { right: .6rem; }
  .ts-bar { left: 1.2rem; right: auto; bottom: 1rem; }
  .gallery { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero-mosaic { gap: .75rem; }
  .hero-badges strong { font-size: 1.7rem; }
  /* cenik: oznaka nad vrednostjo, da je dovolj prostora */
  .price-table th, .price-table td { display: block; width: auto; padding: 0 1rem; }
  .price-table th { padding-top: .85rem; padding-bottom: .15rem; border-bottom: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--terra); }
  .price-table td { padding-bottom: .85rem; }
  .price-table tr:last-child td { border-bottom: 0; }
}

/* Legal pages ------------------------------------------------------ */
.legal-wrap { max-width: 780px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.legal h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.legal h3 { font-size: 1.15rem; margin-top: 1.4rem; }
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 1.3rem; }
.legal li { margin-bottom: .35rem; }
.legal .meta { color: var(--ink-soft); font-size: .9rem; }
.legal table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin: 1rem 0 1.5rem; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { width: 38%; color: var(--green); font-weight: 600; }
.legal tr:last-child th, .legal tr:last-child td { border-bottom: 0; }
.legal .fill { color: #b3261e; font-weight: 600; background: #fdecea; padding: 0 .3rem; border-radius: 4px; }
.legal .back { display: inline-block; margin-bottom: 1.5rem; }
.legal .back::after { content: none; }
@media (max-width: 480px) {
  /* pravne tabele na telefonu: oznaka nad vrednostjo */
  .legal th, .legal td { display: block; width: auto; padding: 0 .9rem; }
  .legal th { padding-top: .75rem; padding-bottom: .1rem; border-bottom: 0; }
  .legal td { padding-bottom: .75rem; }
}

/* Silhueta Dobove – dekorativna črta s cerkvama in gradom med mnenji in apartmajem */
.skyline { background: var(--cream-2); padding: 0 1rem; line-height: 0; }
/* Višina sledi širini (viewBox 1000×150 → 15vw), a ne pade pod 82 px: pod ~550 px zaslona se silhueta ne krči
   naprej, temveč se z "slice" obreže ob robovih (najprej gre zunanje drevje), stavbe pa ostanejo berljive. */
.skyline-svg { display: block; width: min(1000px, 100%); margin: -1.5rem auto 0; height: clamp(82px, 15vw, 150px); overflow: hidden; }
/* črte ostanejo enako debele ne glede na merilo – tanke, a ostre tudi na telefonu */
.sk-hill, .sk-ground, .sk-tree line, .sk-tree circle, .sk-tree ellipse, .sk-bld > * { vector-effect: non-scaling-stroke; }
.sk-hill { fill: none; stroke: var(--terra-soft); stroke-width: 2; stroke-linecap: round; }
.sk-ground { stroke: var(--green); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.sk-tree line { stroke: var(--green-soft); stroke-width: 2; stroke-linecap: round; }
.sk-tree circle, .sk-tree ellipse { fill: var(--free); stroke: var(--green-soft); stroke-width: 2; }
.sk-bld { stroke: var(--green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sk-wall { fill: var(--paper); }
.sk-roof { fill: var(--terra-soft); }
.sk-win { fill: var(--cream-2); stroke-width: 1.5; }
.sk-arch { fill: none; stroke-width: 1.5; }
.sk-cross { fill: var(--terra); stroke: var(--terra); stroke-width: 2; }
@media (max-width: 640px) {
  /* na ozkih zaslonih gre silhueta od roba do roba (obrez pade na rob zaslona, ne 1rem pred njim);
     prizor zamaknemo za 35 enot v levo, da je vidno okno centrirano na stavbe (kapela … grad, 233–838) */
  .skyline { padding: 0; }
  .skyline-svg { margin-top: -.5rem; }
  .sk-scene { transform: translateX(-35px); }
}