/* ===========================================================
   Prenovistran.si — sections (morph demo, pricing, etc.)
   =========================================================== */

/* ---------- HOW IT WORKS ---------- */
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:hs; }
.how-step{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:38px 32px; position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s; }
.how-step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.how-step .hs-k{ font-family:var(--f-mono); font-size:15px; font-weight:700; color:var(--accent); letter-spacing:.08em; }
.how-step h3{ font-size:22px; margin:18px 0 10px; }
.how-step p{ color:var(--ink-2); font-size:16px; text-wrap:pretty; }
.how-step::after{ content:""; position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%; background:var(--grad); opacity:.06; transition:opacity .4s, transform .5s var(--ease); }
.how-step:hover::after{ opacity:.13; transform:scale(1.4); }
@media(max-width:880px){ .how-grid{ grid-template-columns:1fr; } }

/* ---------- MORPH DEMO ---------- */
.morph{ background:var(--bg-2); }
.morph-stage{ position:relative; }
/* the sticky frame stays pinned while the tall track scrolls past */
.morph-sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.morph-track{ height:340vh; position:relative; }

.browser{
  width:min(960px,92vw); height:min(78vh,640px); background:var(--card);
  border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  border:1px solid var(--line);
}
.bbar{ display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--line); flex:none; background:var(--card); position:relative; z-index:5; }
.bbar i{ width:11px; height:11px; border-radius:50%; background:#e2e5ee; }
.bbar i:nth-child(1){ background:#ff6058; } .bbar i:nth-child(2){ background:#ffbe2f; } .bbar i:nth-child(3){ background:#2aca44; }
.bbar .url{ margin-left:10px; flex:1; max-width:360px; font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3); background:var(--bg-2); padding:6px 13px; border-radius:8px; display:flex; align-items:center; gap:7px; }
.bbar .url svg{ width:12px; height:12px; color:var(--accent-3); }
.bbar .yr{ margin-left:auto; font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.1em; padding:5px 11px; border-radius:999px; color:var(--ink-3); border:1px solid var(--line); transition:all .4s; }

.viewport{ flex:1; position:relative; overflow:hidden; }
.site{ position:absolute; inset:0; overflow:hidden; }

/* progress label pill */
.morph-prog{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:20; display:flex; align-items:center; gap:14px;
  background:var(--card); padding:10px 12px 10px 18px; border-radius:999px; box-shadow:var(--shadow-lg); border:1px solid var(--line); }
.morph-prog .lbl{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; font-weight:700; color:var(--ink-2); }
.morph-prog .bar{ width:160px; height:7px; border-radius:999px; background:var(--bg-2); overflow:hidden; }
.morph-prog .bar span{ display:block; height:100%; width:0%; background:var(--grad); border-radius:999px; }
.morph-prog .pct{ font-family:var(--f-mono); font-size:12px; font-weight:700; color:var(--accent); min-width:38px; text-align:right; }
@media(max-width:560px){ .morph-prog .bar{ width:90px; } }

/* ===== OLD SITE styling (the "before") ===== */
.old{ background:#e8e8e8; font-family:"Times New Roman", Georgia, serif; color:#111; overflow-y:auto; }
.old .topband{ background:#16357d; color:#fff; text-align:center; padding:10px; font-size:15px; letter-spacing:.02em; }
.old .topband b{ font-size:24px; display:block; font-weight:700; text-shadow:1px 1px 0 #0a1f52; }
.old marquee, .old .marq{ background:#ffd400; color:#900; font-weight:700; padding:5px; font-size:13px; border-top:2px ridge #aaa; border-bottom:2px ridge #aaa; }
.old .navrow{ background:#c9c9c9; padding:7px 10px; display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px groove #999; }
.old .navrow a{ color:#16357d; text-decoration:underline; font-size:14px; padding:2px 8px; background:#dcdcdc; border:1px outset #bbb; }
.old .obody{ padding:16px 20px; display:grid; grid-template-columns:1fr 200px; gap:20px; }
.old h2{ color:#900; font-family:"Times New Roman",serif; font-size:22px; text-decoration:underline; margin-bottom:8px; font-weight:700; letter-spacing:0; }
.old p{ font-size:14px; line-height:1.5; margin-bottom:10px; }
.old .ohero-img{ height:134px; background-size:cover; background-position:center 55%; border:4px ridge #c8c8b8; filter:saturate(.55) contrast(.9) brightness(1.04); margin-bottom:5px; box-shadow:inset 0 0 0 1px #fff; }
.old .ocap{ font-size:11px; color:#555; font-style:italic; margin-bottom:12px; }
.old .othumb{ height:80px; background-size:cover; background-position:center; border:3px ridge #c8c8b8; filter:saturate(.55) contrast(.9); margin-bottom:8px; }
.old .obtn{ display:inline-block; background:#16357d; color:#fff; padding:6px 14px; border:2px outset #4a6; font-weight:700; font-size:14px; }
.old .side{ background:#f3f3d8; border:2px ridge #bbb; padding:10px; font-size:13px; }
.old .side h3{ font-size:15px; color:#16357d; margin-bottom:6px; font-weight:700; }
.old .side ul{ padding-left:18px; } .old .side li{ margin-bottom:4px; }
.old .ofoot{ background:#16357d; color:#cdd6ee; text-align:center; padding:8px; font-size:11px; margin-top:10px; }
.old .hit{ font-family:"Courier New",monospace; background:#000; color:#0f0; padding:1px 6px; }
.old .dishlist li{ list-style:square; }

/* ===== NEW SITE styling (the "after") — bespoke warm TAVERN identity =====
   Deliberately its OWN palette (cream + terracotta + Fraunces serif feel),
   not the Prenova brand — demonstrating custom design per client. */
.new{
  --t-cream:#f4eee2; --t-paper:#fffdf8; --t-ink:#1e241d; --t-ink2:#5e6357;
  --t-line:#e6ddcd; --t-green:#2f4a39; --t-green-d:#21392b; --t-gold:#b08a3e;
  --t-serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  background:var(--t-cream); color:var(--t-ink); font-family:var(--f-body);
  overflow:hidden; display:flex; flex-direction:column;
}
.new .ntop{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:18px; padding:15px 30px; background:transparent; border-bottom:none; flex:none; z-index:4; }
.new .nbrand{ font-family:var(--t-serif); font-weight:700; font-size:23px; letter-spacing:.01em; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.45); display:flex; align-items:center; gap:11px; white-space:nowrap; }
.new .nbrand .m{ width:34px; height:34px; border-radius:50%; background:var(--t-green); border:1.5px solid var(--t-gold); display:grid; place-items:center; color:var(--t-gold); font-family:var(--t-serif); font-weight:700; font-size:18px; flex:none; }
.new .nnav{ display:flex; align-items:center; gap:24px; margin-left:auto; font-size:13.5px; color:rgba(255,255,255,.92); font-weight:600; letter-spacing:.01em; text-shadow:0 1px 10px rgba(0,0,0,.4); }
.new .nnav a{ transition:color .2s; }
.new .nnav a:hover{ color:var(--t-gold); }
.new .nnav a.nbook{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(5px); padding:9px 18px; border-radius:6px; letter-spacing:.02em; text-shadow:none; }
.new .nnav a.nbook:hover{ color:#23201a; background:var(--t-gold); border-color:var(--t-gold); }

/* full-width hero photo with overlay */
.new .nhero{ position:relative; flex:none; height:250px; overflow:hidden; isolation:isolate; }
.new .nhero .nhero-img{ position:absolute; inset:0; background-size:cover; background-position:center 52%; z-index:0; transform:scale(1.04); }
.new .nhero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(86deg, rgba(20,28,21,.9) 0%, rgba(20,28,21,.62) 42%, rgba(20,28,21,.22) 100%), linear-gradient(180deg, rgba(20,28,21,.55), transparent 26%), linear-gradient(0deg, rgba(20,28,21,.5), transparent 40%); }
.new .nhero-inner{ position:absolute; left:32px; right:32px; bottom:22px; z-index:2; }
.new .nhero .tag{ display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.24em; color:var(--t-gold); font-weight:700; text-transform:uppercase; }
.new .nhero h2{ display:block; font-family:var(--t-serif); font-weight:600; font-size:clamp(22px,2.8vw,29px); margin:6px 0 8px; letter-spacing:0; color:#fff; text-decoration:none; max-width:62%; line-height:1.08; text-shadow:0 2px 22px rgba(0,0,0,.45); }
.new .nhero p{ display:block; color:rgba(255,255,255,.88); font-size:13.5px; max-width:58%; margin:0 0 14px; }
.new .nhero-cta{ display:flex; gap:10px; align-items:center; }
.new .nbtn{ display:inline-flex; align-items:center; gap:7px; background:var(--t-gold); color:#23201a; padding:11px 21px; border-radius:6px; font-family:var(--f-head); font-weight:600; font-size:13px; letter-spacing:.02em; box-shadow:0 10px 24px -10px rgba(0,0,0,.7); transition:transform .25s var(--ease), background .25s; }
.new .nbtn:hover{ transform:translateY(-2px); background:#c39c48; }
.new .nbtn.ghost{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(4px); }

/* reservation / info strip */
.new .nstrip{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; padding:9px 32px; background:var(--t-green); color:#ede7d6; font-size:12.5px; font-weight:500; flex:none; letter-spacing:.01em; }
.new .nstrip .si{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.new .nstrip .si svg{ width:14px; height:14px; color:var(--t-gold); flex:none; }
.new .nstrip .seal{ margin-left:auto; display:flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:11px; color:var(--t-gold); letter-spacing:.06em; }

/* menu with real food photos */
.new .nmenu{ padding:14px 32px 12px; flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; }
.new .nmenu .mh{ display:flex; align-items:baseline; gap:12px; margin-bottom:10px; }
.new .nmenu .mh b{ font-family:var(--t-serif); font-weight:700; font-size:21px; letter-spacing:.01em; color:var(--t-ink); white-space:nowrap; }
.new .nmenu .mh span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--t-gold); font-weight:700; text-transform:uppercase; }
.new .ngrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.new .dish{ background:var(--t-paper); border:1px solid var(--t-line); border-radius:10px; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s; }
.new .dish:hover{ transform:translateY(-4px); box-shadow:0 16px 34px -14px rgba(40,55,40,.45); }
.new .dish .ph{ height:78px; background-size:cover; background-position:center; background-color:#e3dccc; position:relative; }
.new .dish .ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.12)); }
.new .dish .meta{ padding:8px 12px 9px; }
.new .dish .dn{ font-family:var(--t-serif); font-weight:600; font-size:15px; color:var(--t-ink); line-height:1.1; }
.new .dish .dp{ font-family:var(--f-mono); font-size:11px; color:var(--t-gold); font-weight:700; margin-top:5px; }

.new .nfoot{ padding:10px 32px; background:var(--t-paper); border-top:1px solid var(--t-line); font-size:11.5px; color:var(--t-ink2); display:flex; align-items:center; gap:16px; flex-wrap:wrap; flex:none; }
.new .nfoot .made{ margin-left:auto; color:var(--t-green); font-weight:600; font-family:var(--f-mono); font-size:11px; }

@media(max-width:640px){
  .new .nhero h2{ max-width:100%; } .new .nhero p{ max-width:80%; }
  .new .ngrid{ grid-template-columns:repeat(2,1fr); }
  .new .nstrip{ flex-direction:column; align-items:flex-start; gap:6px; }
  .new .nstrip .seal{ margin-left:0; }
}
@media(max-width:560px){
  .old .obody{ grid-template-columns:1fr; }
  .old .side{ display:none; }
}
@media(max-width:480px){
  .new .ntop{ padding:10px 14px; gap:8px; }
  .new .nbrand{ font-size:18px; }
  .new .nbrand .m{ width:28px; height:28px; font-size:15px; }
  .new .nnav a:not(.nbook){ display:none; }
  .new .nnav{ gap:0; }
  .new .nmenu{ padding:10px 14px 8px; }
  .new .nstrip{ padding:7px 14px; font-size:11px; gap:6px 12px; }
  .new .nhero-inner{ left:18px; right:18px; }
  .new .nfoot{ padding:8px 14px; }
  .morph-prog .lbl{ display:none; }
  .morph-prog .bar{ width:100px; }
}