/* =========================================================
   FontAna – »Na kozarec … in potem?« (ponudniki): kartice + nov pop-up
   ========================================================= */
:root{--fl-cream:#faf7f0;--fl-sand:#efe5d3;--fl-ink:#3f322a;--fl-brown:#765335;--fl-gold:#a28c63;--fl-muted:#8a7865;--fl-line:#e3d8c5;
  --fl-serif:'DM Serif Display',Georgia,serif;--fl-sans:'DM Sans',Arial,sans-serif;--fl-ease:cubic-bezier(.16,1,.3,1)}

/* ---------- KARTICE ---------- */
body .after-fontana .outing-grid.fl-grid{display:flex !important;gap:18px !important;overflow-x:auto !important;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:10px 4px 30px !important;margin:0 -4px !important;grid-template-columns:none !important}
body .after-fontana .outing-grid.fl-grid::-webkit-scrollbar{display:none}
body .after-fontana .fl-card{flex:0 0 clamp(260px,28vw,330px) !important;width:auto !important;max-width:none !important;scroll-snap-align:start;position:relative !important;
  aspect-ratio:4/5.2;border-radius:28px !important;overflow:hidden !important;background:#2a2019 !important;padding:0 !important;margin:0 !important;border:0 !important;
  box-shadow:0 24px 50px -28px rgba(40,25,15,.6) !important;isolation:isolate;transition:transform .6s var(--fl-ease) !important;display:block !important}
body .after-fontana .fl-card:hover{transform:translateY(-6px)}
body .after-fontana .fl-card .outing-photo-button{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:0 !important;background:none !important;z-index:0;cursor:pointer;overflow:hidden !important;clip-path:none !important;-webkit-mask:none !important;mask:none !important}
body .after-fontana .fl-card .outing-photo-button img{width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important;border-radius:0 !important;transition:transform 1.4s var(--fl-ease) !important;clip-path:none !important;-webkit-mask:none !important;mask:none !important;margin:0 !important}
body .after-fontana .fl-card:hover .outing-photo-button img{transform:scale(1.07)}
body .after-fontana .fl-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,14,10,0) 35%,rgba(20,14,10,.55) 62%,rgba(20,14,10,.88) 100%)}
body .after-fontana .fl-card .fl-tag{position:absolute;top:16px;left:16px;z-index:2;font:600 10.5px var(--fl-sans);letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:7px 12px;border-radius:99px;pointer-events:none}
body .after-fontana .fl-card .fl-num{position:absolute;top:14px;right:16px;z-index:2;font:400 15px var(--fl-serif);color:rgba(255,255,255,.85);pointer-events:none}
body .after-fontana .fl-card h3{position:absolute !important;left:22px;right:22px;bottom:92px;z-index:2;margin:0 !important;font:400 clamp(24px,2.2vw,30px)/1.08 var(--fl-serif) !important;color:#fff !important;pointer-events:none;text-shadow:0 2px 14px rgba(0,0,0,.3)}
body .after-fontana .fl-card p{position:absolute !important;left:22px;right:22px;bottom:50px;z-index:2;margin:0 !important;font-size:13px !important;line-height:1.45 !important;color:rgba(255,255,255,.88) !important;pointer-events:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none !important}
body .after-fontana .fl-card .local-more{position:absolute !important;left:22px;bottom:12px;z-index:3;color:#fff !important;margin:0 !important}
body .after-fontana .fl-card .local-more.fg-line .fg-i{border-color:#fff}
body .after-fontana .fl-card .local-more:not(.fg-line){background:none !important;border:0 !important;padding:10px 0 !important;font:600 12px var(--fl-sans) !important;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px}
@media(max-width:800px){
  body .after-fontana .outing-grid.fl-grid{padding:10px 24px 26px !important;margin:0 -24px !important;gap:12px !important}
  body .after-fontana .fl-card{flex-basis:78vw !important}
}

/* ---------- POP-UP ---------- */
.fl-pop{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:20px;visibility:hidden;font-family:var(--fl-sans);color:var(--fl-ink)}
.fl-pop *{box-sizing:border-box}
.fl-pop.open{visibility:visible}
.fl-pop button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.fl-pop button:focus-visible,.fl-pop a:focus-visible{outline:2px solid var(--fl-brown);outline-offset:3px}
.fl-bg{position:absolute;inset:0;background:rgba(30,22,16,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .5s}
.fl-pop.open .fl-bg{opacity:1}
.fl-box{position:relative;width:min(1140px,100%);height:min(760px,calc(100dvh - 40px));background:var(--fl-cream);border-radius:30px;overflow:hidden;display:grid;grid-template-columns:47% 53%;
  transform:translateY(40px) scale(.97);opacity:0;transition:transform .8s var(--fl-ease),opacity .4s;box-shadow:0 40px 120px rgba(20,12,6,.45)}
.fl-pop.open .fl-box{transform:none;opacity:1}
.fl-gal{position:relative;overflow:hidden;background:#2a2019;touch-action:pan-y}
.fl-gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s ease,transform 1.4s var(--fl-ease);margin:0}
.fl-gal img.on{opacity:1;transform:scale(1)}
.fl-gal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 25%,transparent 60%,rgba(0,0,0,.55));pointer-events:none}
.fl-gnav{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;align-items:center;gap:12px;color:#fff}
.fl-dots{display:flex;gap:6px;flex:1}
.fl-dots i{height:3px;flex:1;max-width:46px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.fl-dots i.on::after{content:"";position:absolute;inset:0;background:#fff;animation:fl-bar 5s linear forwards}
.fl-dots i.done{background:#fff}
@keyframes fl-bar{from{transform:translateX(-100%)}to{transform:none}}
.fl-gnav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.6);color:#fff;font-size:18px;transition:background .3s}
.fl-gnav button:hover{background:rgba(255,255,255,.2)}
.fl-tagp{position:absolute;top:22px;left:22px;z-index:2;color:#fff;font-size:11px;letter-spacing:.22em;text-transform:uppercase;background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:7px 12px;border-radius:99px}
.fl-body{overflow-y:auto;padding:54px 54px 0;display:flex;flex-direction:column;overscroll-behavior:contain}
.fl-body>*{flex-shrink:0;opacity:0;transform:translateY(16px)}
.fl-pop.open .fl-body>*{opacity:1;transform:none;transition:opacity .6s ease var(--d),transform .8s var(--fl-ease) var(--d)}
.fl-eb{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--fl-gold)}
.fl-name{font:400 clamp(38px,4.4vw,56px)/1.03 var(--fl-serif);margin:12px 0 0;color:var(--fl-ink)}
.fl-intro{font:italic 400 21px/1.45 var(--fl-serif);color:var(--fl-brown);margin:20px 0 0;padding-left:18px;border-left:2px solid var(--fl-gold)}
.fl-story{margin-top:24px;font-size:15.5px;line-height:1.75;color:#5d4f43}
.fl-story p{margin:0}.fl-story p+p,.fl-story h3+p{margin-top:10px}
.fl-story h3{font:400 20px/1.2 var(--fl-serif);color:var(--fl-ink);margin:20px 0 0}
.fl-story a{color:var(--fl-brown);font-weight:600}
.fl-rest{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--fl-ease)}
.fl-rest>div{overflow:hidden}
.fl-story.expanded .fl-rest{grid-template-rows:1fr}
.fl-more{background:none !important;padding:0 0 2px !important;border:0 !important;box-shadow:none !important;margin-top:12px;font-size:13px;font-weight:600;color:var(--fl-brown) !important;border-bottom:1px solid currentColor !important;padding-bottom:2px;align-self:flex-start}
.fl-h{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--fl-gold);margin:30px 0 12px}
.fl-note{font-size:13.5px;line-height:1.55;color:#5d4f43;background:var(--fl-sand);border-radius:14px;padding:12px 14px;margin:0 0 12px}
.fl-contact{display:flex;flex-wrap:wrap;gap:8px}
.fl-contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 15px;border-radius:99px;border:1px solid var(--fl-line);font-size:13.5px;text-decoration:none;background:#fff;color:var(--fl-ink);transition:border-color .3s,transform .4s var(--fl-ease)}
.fl-contact a:hover{border-color:var(--fl-brown);transform:translateY(-2px)}
.fl-contact a.pri{background:var(--fl-brown);border-color:var(--fl-brown);color:#fff}
.fl-contact a.pri svg{stroke:#fff}
.fl-contact svg{width:16px;height:16px;stroke:var(--fl-brown);fill:none;stroke-width:1.7;flex:none}
.fl-foot{margin:36px -54px 0;padding:20px 54px 26px;border-top:1px solid var(--fl-line);display:flex;justify-content:space-between;gap:12px}
.fl-foot button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fl-muted);min-height:44px;text-align:left}
.fl-foot button b{font:400 19px var(--fl-serif);letter-spacing:0;text-transform:none;color:var(--fl-ink)}
.fl-foot .nx{align-items:flex-end;text-align:right}
.fl-x{position:absolute;top:18px;right:18px;z-index:5;width:46px;height:46px;border-radius:50%;background:rgba(250,247,240,.92) !important;border:1px solid var(--fl-line) !important;transition:transform .5s var(--fl-ease),background .3s}
.fl-x::before,.fl-x::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.6px;margin:-.8px 0 0 -9px;background:var(--fl-ink);transform:rotate(45deg)}
.fl-x::after{transform:rotate(-45deg)}
.fl-x:hover{transform:rotate(90deg);background:var(--fl-ink) !important}
.fl-x:hover::before,.fl-x:hover::after{background:#fff}
.fl-handle{display:none}
@media(max-width:820px){
  .fl-pop{padding:0;place-items:end center}
  .fl-box{grid-template-columns:1fr;grid-template-rows:38% 62%;height:94dvh;border-radius:26px 26px 0 0;transform:translateY(100%)}
  .fl-pop.open .fl-box{transform:translateY(var(--drag,0px))}
  .fl-body{padding:26px 22px 0}
  .fl-foot{margin:28px -22px 0;padding:16px 22px 22px}
  .fl-intro{font-size:18px}
  .fl-handle{display:block;position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(255,255,255,.75);z-index:6}
}
@media(prefers-reduced-motion:reduce){.fl-pop *,.fl-card,.fl-card *{animation:none !important;transition-duration:.01s !important}}