/*
Theme Name: Poliklinika Rio
Theme URI: https://poliklinikario.hr
Author: Poliklinika Rio
Description: Prilagođena tema za Polikliniku Rio — opća i vaskularna kirurgija, centar za rane (Rijeka).
Version: 1.28.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: poliklinika-rio
*/
:root{
  --pine:#0f3a36; --pine-deep:#0a2a27; --teal:#1f5b54; --teal-600:#2a6f65;
  --sage:#5e9b94; --sage-300:#9cc4bd; --mint:#cfe2dd; --mint-50:#e9f2ef;
  --cream:#f3ede1; --cream-2:#ece2d2; --paper:#fcfaf4;
  --ink:#14302c; --ink-soft:#33514c; --muted:#566e69;
  --line:#e3dac8; --line-d:rgba(255,255,255,.13);
  --maxw:1240px; --r:18px;
  --sh-sm:0 4px 16px -9px rgba(10,42,39,.34);
  --sh-md:0 24px 50px -28px rgba(10,42,39,.42);
  --sh-lg:0 46px 92px -46px rgba(10,42,39,.52);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--teal);color:#fff}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4,h5{font-family:"Fraunces",Georgia,serif;font-weight:400;line-height:1.07;letter-spacing:-.015em;color:var(--pine)}
em{font-style:italic}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
.eyebrow{font-family:"Hanken Grotesk",sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:30px;height:1.5px;background:var(--sage)}
.eyebrow.on-dark{color:var(--sage-300)}.eyebrow.on-dark::before{background:var(--sage-300)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:100px;font-family:inherit;font-weight:600;font-size:.96rem;cursor:pointer;border:none;transition:.3s cubic-bezier(.2,.7,.2,1);white-space:nowrap}
.btn svg{transition:transform .3s}.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 12px 26px -10px rgba(31,91,84,.6)}
.btn-primary:hover{background:var(--pine);transform:translateY(-2px)}

/* Premium "Naruči se" nav button — gradient + subtle inner highlight,
   crisp arrow icon, refined hover. Compact size so it sits in the nav
   without dwarfing the text links. Scoped to the header so other
   .btn-primary usages elsewhere keep their original sizing. */
.nav-links .btn-primary{
  position:relative;
  overflow:hidden;
  padding:9px 18px 9px 20px;
  gap:7px;
  font-weight:700;
  font-size:.83rem;
  letter-spacing:.015em;
  border-radius:100px;
  background:linear-gradient(135deg, var(--teal) 0%, var(--pine) 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 8px 20px -10px rgba(31,91,84,.4),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.nav-links .btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--pine) 0%, var(--pine-deep) 100%);
  opacity:0;
  transition:opacity .3s ease;
  border-radius:inherit;
  z-index:0;
}
.nav-links .btn-primary > *{
  position:relative;
  z-index:1;
}
.nav-links .btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:
    0 10px 22px -10px rgba(10,42,39,.42),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.nav-links .btn-primary:hover::before{opacity:1}
.nav-links .btn-primary svg{
  width:12px;height:12px;
  transition:transform .25s ease;
}
.nav-links .btn-primary:hover svg{transform:translateX(3px)}
.nav-links .btn-primary::after{display:none}
.btn-ghost{background:transparent;color:var(--teal);border:1.5px solid rgba(31,91,84,.4)}
.btn-ghost:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-light{background:#fff;color:var(--pine)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}

/* NAV */
#hdr{position:fixed;top:0;left:0;right:0;z-index:1000;transition:.4s}
#hdr.scrolled{background:var(--cream);box-shadow:0 1px 0 var(--line)}
#hdr nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:46px;height:46px}
.brand .bt{font-family:"Fraunces",serif;font-size:1.32rem;font-weight:600;color:var(--pine);line-height:1;letter-spacing:-.01em}
.brand .bs{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.16em;color:var(--sage);text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{font-size:.94rem;font-weight:500;color:var(--ink);position:relative;transition:.2s}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:var(--teal);transition:.28s}
.nav-links a:not(.btn):hover{color:var(--teal)}
.nav-links a:not(.btn):hover::after{width:100%}

/* --- Usluge dropdown --- */
.has-dropdown{position:relative}
.has-dropdown > a{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dropdown-arrow{
  width:11px;height:11px;
  transition:transform .25s ease;
  opacity:.55;
}
.has-dropdown:hover .dropdown-arrow,
.has-dropdown:focus-within .dropdown-arrow{
  transform:rotate(180deg);
  opacity:1;
}

/* Invisible bridge between the trigger and the dropdown so the menu
   doesn't close when the cursor moves between them. */
.has-dropdown::after{
  content:"";
  position:absolute;
  top:100%;left:-20px;right:-20px;
  height:22px;
  pointer-events:none;
}
.has-dropdown:hover::after,
.has-dropdown:focus-within::after{
  pointer-events:auto;
}

.nav-dropdown{
  position:absolute;
  top:calc(100% + 22px);
  left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:380px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px;
  box-shadow:
    0 24px 50px -22px rgba(10,42,39,.32),
    0 4px 12px -6px rgba(10,42,39,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  z-index:100;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

.nav-dropdown-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 14px;
  border-radius:12px;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.nav-dropdown-item::after{display:none}
.nav-dropdown-item:hover{
  background:var(--mint-50);
  transform:translateX(2px);
}

.nav-dropdown-num{
  font-family:"Fraunces",serif;
  font-size:1.1rem;
  font-weight:500;
  color:var(--sage);
  flex:none;
  min-width:30px;
  text-align:center;
  transition:color .2s ease;
}
.nav-dropdown-item:hover .nav-dropdown-num{color:var(--teal)}

.nav-dropdown-text{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nav-dropdown-text b{
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:600;
  font-size:.95rem;
  color:var(--pine);
  letter-spacing:-.005em;
  line-height:1.3;
}
.nav-dropdown-text small{
  font-size:.78rem;
  color:var(--muted);
  line-height:1.4;
  font-weight:400;
}

.nav-dropdown-all{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 14px;
  margin-top:6px;
  border-top:1px solid var(--line);
  border-radius:0 0 14px 14px;
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.025em;
  color:var(--teal);
  text-transform:uppercase;
  transition:color .2s ease;
}
.nav-dropdown-all::after{display:none}
.nav-dropdown-all:hover{color:var(--pine)}
.nav-dropdown-all svg{
  width:14px;height:14px;
  transition:transform .25s ease;
}
.nav-dropdown-all:hover svg{transform:translateX(3px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:1001}
.burger span{width:25px;height:2px;background:var(--ink);transition:.3s;border-radius:2px}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* HERO */
.hero{position:relative;padding:158px 0 110px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(85px)}
.b1{width:560px;height:560px;background:radial-gradient(circle,#cfe2dd,transparent 70%);top:-170px;right:-120px;animation:f1 17s ease-in-out infinite}
.b2{width:480px;height:480px;background:radial-gradient(circle,#dceee9,transparent 70%);bottom:-200px;left:-150px;opacity:.8;animation:f2 21s ease-in-out infinite}
@keyframes f1{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,28px)}}
@keyframes f2{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,-26px)}}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(1.9rem,3.5vw,2.75rem);font-weight:300;margin:14px 0 0;letter-spacing:-.02em;line-height:1.16}
.hero h1 em{font-weight:400;color:var(--teal)}
.hero .lead{font-size:1.16rem;color:var(--ink-soft);max-width:32em;margin:24px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.loc-chip{display:inline-flex;align-items:center;gap:9px;margin-top:32px;font-size:.92rem;color:var(--muted);font-weight:500}
.loc-chip svg{color:var(--teal)}
.hero-visual{position:relative}
.hero-frame{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/4.4}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,42,39,.28))}
.hero-inset{position:absolute;bottom:-26px;left:-30px;width:46%;border-radius:16px;overflow:hidden;box-shadow:var(--sh-md);border:5px solid var(--paper);animation:bob 5s ease-in-out infinite}
.hero-inset img{aspect-ratio:16/11;object-fit:cover;width:100%}
.hero-chip{position:absolute;top:-20px;right:18px;background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:11px 18px;font-size:.84rem;font-weight:600;box-shadow:var(--sh-md);display:flex;align-items:center;gap:9px;animation:bob 4.4s ease-in-out infinite .6s}
.hero-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 4px rgba(94,155,148,.28);animation:ping 1.9s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(94,155,148,.5)}70%{box-shadow:0 0 0 9px rgba(94,155,148,0)}100%{box-shadow:0 0 0 0 rgba(94,155,148,0)}}

/* OPEN/CLOSED STATUS CARD — paper-pill pill with a pulsing green dot
   when the clinic is open, amber + static when closed. Visual only —
   positioning is set per-page where it's used (kontakt: bottom-left
   of hero image; home/zasto-rio/prostor: top-right of hero image). */
.status-card{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(252,250,244,.96);
  backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid var(--line);
  border-radius:100px;
  padding:10px 18px 10px 14px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.85rem;font-weight:600;color:var(--pine);
  box-shadow:var(--sh-sm);
}
.status-card .dot{
  width:8px;height:8px;border-radius:50%;
  background:#3ca977;
  box-shadow:0 0 0 4px rgba(60,169,119,.22);
  animation:ping 2.2s infinite;
}
.status-card.closed{color:#7a4c0e}
.status-card.closed .dot{
  background:#c8761e;
  box-shadow:0 0 0 4px rgba(200,118,30,.18);
  animation:none;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* MARQUEE */
.marquee{background:var(--pine);color:#cfe2dd;padding:17px 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;animation:scroll 34s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:"Fraunces",serif;font-style:italic;font-size:1.14rem;padding:0 28px;display:inline-flex;align-items:center;gap:28px}
.marquee-track span::after{content:"✦";font-style:normal;color:var(--sage-300);font-size:.66rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* SECTIONS */
main > section{position:relative;padding:104px 0}
.sec-head{max-width:660px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(2.1rem,4vw,3.2rem);font-weight:300;margin:18px 0 16px}
.sec-head h2 em{color:var(--teal);font-weight:400}
.sec-head p{color:var(--muted);font-size:1.08rem;max-width:52ch}
.sec-head.center p{margin:0 auto}

/* STATEMENT */
.statement{background:var(--paper);text-align:center}
.statement .wrap{max-width:980px}
.statement p{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(1.65rem,3.4vw,2.7rem);line-height:1.3;color:var(--pine);letter-spacing:-.02em}
.statement p em{color:var(--teal);font-weight:400}

/* SERVICES */
.services{background:var(--cream)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:38px 34px;transition:.35s cubic-bezier(.2,.7,.2,1);position:relative;overflow:hidden}
.card .num{position:absolute;top:30px;right:34px;font-family:"Fraunces",serif;font-size:1rem;color:var(--sage);opacity:.6}
.card .ic{width:58px;height:58px;border-radius:15px;background:var(--mint-50);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:.35s}
.card h3{font-size:1.5rem;font-weight:500;margin-bottom:13px}
.card p{color:var(--muted);font-size:1rem}
.card .tag{display:inline-block;margin-top:18px;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sage)}
.card:hover{transform:translateY(-7px);box-shadow:var(--sh-md);border-color:var(--mint)}
.card:hover .ic{background:var(--teal);color:#fff;transform:scale(1.05) rotate(-4deg)}
.card.feature{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;background:linear-gradient(135deg,var(--teal),var(--pine));border-color:var(--pine);color:#d6e8e3}
.card.feature .ic{background:rgba(255,255,255,.16);color:#fff;width:70px;height:70px;margin:0}
.card.feature h3{color:#fff;font-size:1.7rem}
.card.feature p{color:#bcd7d1;max-width:60ch}
.card.feature .tag{color:var(--sage-300);margin-top:12px}
.card.feature:hover .ic{background:#fff;color:var(--teal)}

/* FEATURE BAND (vascular) */
.band{background:var(--pine-deep);color:#cfe2dd;overflow:hidden;position:relative}
.band::before{content:"";position:absolute;inset:0;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M0 350 Q175 290 350 350 T700 350'/%3E%3Cpath d='M0 410 Q175 350 350 410 T700 410'/%3E%3C/g%3E%3C/svg%3E");background-size:cover}
.band-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.band h2{color:#fff;font-size:clamp(2rem,3.6vw,3rem);font-weight:300;margin:18px 0 18px}
.band h2 em{color:var(--sage-300);font-weight:400}
.band p{color:#aecfc9;font-size:1.08rem;margin-bottom:16px}
.band-img{border-radius:20px;overflow:hidden;box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.1)}
.band-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.band-points{list-style:none;display:grid;gap:13px;margin-top:24px}
.band-points li{display:flex;gap:12px;align-items:flex-start;color:#d6e8e3;font-weight:500}
.band-points li svg{color:var(--sage-300);flex:none;margin-top:3px}

/* WHY (zašto) */
.why{background:var(--paper)}
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:66px;align-items:center}
.why-text h2{font-size:clamp(2rem,3.7vw,2.95rem);font-weight:300;margin:18px 0 20px}
.why-text h2 em{color:var(--teal);font-weight:400}
.why-text>p{color:var(--muted);font-size:1.06rem;margin-bottom:30px;max-width:46ch}
.why-list{list-style:none;display:grid;gap:22px}
.why-item{display:flex;gap:16px;align-items:flex-start}
.why-item .wic{width:46px;height:46px;border-radius:12px;background:var(--mint-50);color:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
.why-item h4{font-family:"Hanken Grotesk",sans-serif;font-size:1.08rem;font-weight:700;color:var(--pine);margin-bottom:3px}
.why-item p{color:var(--muted);font-size:.97rem}
.why-visual{position:relative}
.why-visual .img-main{border-radius:22px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/4.6}
.why-visual .img-main img{width:100%;height:100%;object-fit:cover}
.why-badge{position:absolute;bottom:-22px;right:-18px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 22px;box-shadow:var(--sh-md);display:flex;align-items:center;gap:13px;max-width:240px}
.why-badge .bic{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.why-badge b{display:block;font-family:"Fraunces",serif;font-size:1rem;color:var(--pine)}
.why-badge span{font-size:.8rem;color:var(--muted)}

/* GALLERY */
.gallery{background:var(--cream)}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.gal-item{position:relative;overflow:hidden;border-radius:14px;box-shadow:var(--sh-sm)}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.gal-item:hover img{transform:scale(1.07)}
.gal-item .cap{position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;color:#fff;font-weight:600;font-size:.92rem;background:linear-gradient(transparent,rgba(10,42,39,.78));opacity:0;transform:translateY(8px);transition:.35s}
.gal-item:hover .cap{opacity:1;transform:none}
.gal-item.tall{grid-row:span 2}
.gal-item.wide{grid-column:span 2}

/* wave */
.wave{display:block;width:100%;height:84px;line-height:0}.wave svg{display:block;width:100%;height:100%}

/* TOURISM */
.tourism{background:var(--pine);color:#cfe2dd;position:relative;overflow:hidden;padding:96px 0}
.tourism::before{content:"";position:absolute;inset:0;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M0 350 Q175 290 350 350 T700 350'/%3E%3Cpath d='M0 420 Q175 360 350 420 T700 420'/%3E%3C/g%3E%3C/svg%3E");background-size:cover}
.tourism .wrap{position:relative}
.tourism-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.tourism h2{color:#fff;font-size:clamp(2rem,3.7vw,3rem);font-weight:300;margin:18px 0 18px}
.tourism h2 em{color:var(--sage-300);font-weight:400}
.tourism p{color:#aecfc9;font-size:1.07rem;margin-bottom:16px}
.region-list{list-style:none;display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.region-list li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:10px 19px;border-radius:100px;font-size:.9rem;font-weight:500;transition:.25s}
.region-list li:hover{background:var(--sage);border-color:var(--sage);color:#fff}
.lang-note{margin-top:28px;font-size:.92rem;color:var(--sage-300);display:flex;align-items:center;gap:10px}
.tourism-img{border-radius:20px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/4.6;border:1px solid rgba(255,255,255,.1)}
.tourism-img img{width:100%;height:100%;object-fit:cover}

/* TEAM */
.team{background:var(--paper)}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:840px;margin:0 auto}
.person{display:flex;gap:22px;align-items:center;background:var(--cream);border-radius:var(--r);padding:28px;border:1px solid var(--line);transition:.3s}
.person:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.avatar{width:78px;height:78px;border-radius:50%;flex:none;background:linear-gradient(150deg,var(--sage),var(--teal));display:flex;align-items:center;justify-content:center;color:#fff;font-family:"Fraunces",serif;font-size:1.6rem;box-shadow:0 8px 20px -10px rgba(31,91,84,.6)}
.person h3{font-size:1.28rem;font-weight:500}
.person span{color:var(--muted);font-size:.92rem;display:block;margin-top:3px}

/* CTA */
.cta-sec{background:var(--cream);padding:56px 0 104px}
/* CTA panel — premium pine gradient + sage corner glows + concentric
   ring decoration. Used as the unified closing-CTA across every page
   (home / prostor / zasto-rio / usluge landing / usluge detail).
   Modifier classes (.cta-panel--home, --prostor, --zasto, --service)
   exist as hooks for per-page tweaks but don't need their own styles
   anymore — this global block carries the look. */
.cta-panel{
  position:relative;
  padding:62px 56px 66px;
  text-align:left;
  background:linear-gradient(168deg, var(--pine) 0%, var(--pine-deep) 78%);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 36px 80px -36px rgba(10,42,39,.5);
  color:#fff;
}
/* Sage glow in the top-right (replaces the old wave-pattern overlay). */
.cta-panel::before{
  content:"";position:absolute;
  inset:auto;top:-200px;right:-150px;
  width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(94,155,148,.3), transparent 65%);
  background-image:radial-gradient(circle, rgba(94,155,148,.3), transparent 65%);
  background-size:auto;
  opacity:1;
  pointer-events:none;
}
/* Second glow in the bottom-left. */
.cta-panel::after{
  content:"";position:absolute;
  bottom:-240px;left:-180px;
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(42,111,101,.32), transparent 70%);
  pointer-events:none;
}
/* Repurpose the .glow div as the concentric ring on the right. */
.cta-panel .glow{
  position:absolute;
  top:50%;right:-130px;
  transform:translateY(-50%);
  width:580px;height:580px;
  border-radius:50%;
  border:1px solid rgba(156,196,189,.12);
  background:transparent;
  pointer-events:none;
}
.cta-panel .glow::before{
  content:"";position:absolute;
  inset:75px;border-radius:50%;
  border:1px dashed rgba(156,196,189,.1);
}

/* 2-col content grid (text + aside). */
.cta-content{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1.18fr 1fr;
  gap:54px;
  align-items:center;
}

/* Left: text + buttons. */
.cta-text h2{
  font-family:"Fraunces",serif;
  color:#fff;
  font-size:clamp(1.95rem, 3.2vw, 2.55rem);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.02em;
  margin:14px 0 18px;
}
.cta-text h2 em{color:var(--sage-300);font-weight:400;font-style:normal}
.cta-text > p{
  color:#bcd7d1;
  font-size:1.04rem;
  line-height:1.65;
  margin:0 0 28px;
  max-width:40em;
}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Right: stacked quick-info rows with a thin divider on the left. */
.cta-aside{
  display:grid;gap:4px;
  padding-left:42px;
  border-left:1px solid rgba(255,255,255,.13);
}
.cta-line{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;
  color:#cfe2dd;
  text-decoration:none;
  transition:transform .25s ease, color .25s ease;
}
a.cta-line{cursor:pointer}
a.cta-line:hover{color:#fff;transform:translateX(4px)}

.cta-line .cta-ic{
  width:48px;height:48px;
  border-radius:13px;
  background:rgba(255,255,255,.08);
  color:var(--sage-300);
  position:relative;
  flex:none;
  border:1px solid rgba(255,255,255,.12);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
a.cta-line:hover .cta-ic{
  background:rgba(255,255,255,.16);
  color:#fff;
  border-color:rgba(156,196,189,.4);
  transform:scale(1.05);
}
/* Absolute-center the SVG so inline width/height attrs can't off-center it. */
.cta-line .cta-ic svg{
  position:absolute;
  top:50%;left:50%;
  width:24px !important;height:24px !important;
  transform:translate(-50%, -50%);
  stroke-width:2;
}
.cta-line b{
  display:block;
  color:#fff;font-family:"Hanken Grotesk",sans-serif;
  font-weight:700;font-size:.96rem;
  margin-bottom:3px;letter-spacing:-.005em;
}
.cta-line span{
  display:block;
  color:#aecfc9;font-size:.9rem;line-height:1.4;
}

/* Dark-band ghost button variant. */
.btn-ghost--dark{
  background:transparent;
  color:#cfe2dd;
  border:1.5px solid rgba(255,255,255,.28);
}
.btn-ghost--dark:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.5);
  color:#fff;
}

/* Responsive — stack to 1 col, hide right-side ring (overflows). */
@media(max-width:980px){
  .cta-panel{padding:48px 40px 52px;border-radius:22px}
  .cta-content{grid-template-columns:1fr;gap:32px}
  .cta-aside{
    padding-left:0;padding-top:28px;
    border-left:none;
    border-top:1px solid rgba(255,255,255,.13);
  }
  .cta-text > p{max-width:none}
  .cta-panel .glow{display:none}
}
@media(max-width:680px){
  .cta-panel{padding:40px 26px 44px}
  .cta-text h2{font-size:1.7rem}
  .cta-actions .btn{width:100%;justify-content:center}
  .cta-line{padding:12px 0;gap:14px}
  .cta-line .cta-ic{width:44px;height:44px}
}

/* CONTACT */
.contact{background:var(--paper)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:start}
.contact-info{display:grid;gap:18px}
.ci-item{display:flex;gap:17px;align-items:flex-start}
.ci-item .ic{width:50px;height:50px;border-radius:13px;background:var(--mint-50);color:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
.ci-item h4{font-family:"Hanken Grotesk",sans-serif;font-size:1.05rem;font-weight:700;margin-bottom:2px;color:var(--pine)}
.ci-item p{color:var(--muted);font-size:.98rem}
.ci-item a{color:var(--muted);transition:.2s}.ci-item a:hover{color:var(--teal)}
.hours{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;margin-top:6px}
.hours h4{font-family:"Hanken Grotesk",sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:14px}
.hours ul{list-style:none;display:grid;gap:9px}
.hours li{display:flex;justify-content:space-between;font-size:.96rem;border-bottom:1px dashed var(--line);padding-bottom:8px}
.hours li:last-child{border:none;padding:0}
.hours li b{color:var(--pine);font-weight:600}
.hours li span{color:var(--muted)}
.contact-right{display:grid;gap:20px}
.facade{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm)}
.facade img{width:100%;aspect-ratio:16/9;object-fit:cover}
.map-card{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);min-height:300px;box-shadow:var(--sh-sm)}
.map-card iframe{width:100%;height:100%;min-height:300px;border:0;display:block;filter:grayscale(.12)}

/* FOOTER */
footer{background:var(--pine-deep);color:#8fb4ae;padding:70px 0 32px;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:2fr 0.9fr 1fr 1.1fr;gap:16px;margin-bottom:46px}
.foot-brand{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.foot-brand .badge{width:54px;height:54px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.foot-brand .badge img{width:46px;height:46px}
.foot-brand .ft{font-family:"Fraunces",serif;color:#fff;font-size:1.3rem;line-height:1}
.foot-brand .fs{display:block;font-size:.6rem;font-weight:700;letter-spacing:.14em;color:var(--sage-300);text-transform:uppercase;margin-top:4px}
.foot-grid p{color:#8fb4ae;max-width:32em}
footer h5{font-family:"Hanken Grotesk",sans-serif;color:#fff;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:11px}
footer ul a{transition:.2s}footer ul a:hover{color:var(--sage-300)}
.foot-tag{text-align:center;border-top:1px solid rgba(255,255,255,.1);padding-top:30px;margin-bottom:24px}
.foot-tag .big{font-family:"Fraunces",serif;font-size:1.45rem;color:#fff;letter-spacing:.02em}
.foot-tag .sm{color:#8fb4ae;font-size:.95rem;margin-top:6px}
.legal{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;color:#6e948e;font-size:.82rem}

/* reveal — the hidden state only applies once main.js has tagged <html>
   with .js (it does so AFTER instantly marking everything already in
   view as .in). So when an optimizer delays or blocks JS (e.g.
   LiteSpeed "Load JS Delayed"), the page stays fully visible instead
   of rendering blank; only below-fold sections animate in. */
.reveal{transition:.8s cubic-bezier(.2,.75,.2,1)}
html.js .reveal:not(.in){opacity:0;transform:translateY(32px)}

@media(max-width:980px){
  .hero-grid,.band-grid,.why-grid,.tourism-grid,.contact-grid{grid-template-columns:1fr;gap:48px}
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .gal-item.wide{grid-column:span 2}
  .why-visual,.tourism-img{max-width:520px;margin:0 auto}
  .band-img{order:-1}
}
@media(max-width:680px){
  /* ============================================================
     MOBILE NAV — premium clinic-style slide-down panel
     ============================================================ */
  .nav-links{
    position:fixed;
    inset:80px 0 auto 0;
    background:var(--paper);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 24px;
    max-height:0;
    overflow:hidden auto;
    transition:max-height .4s ease, padding .4s ease;
    box-shadow:0 22px 34px -22px rgba(0,0,0,.25);
  }
  .nav-links.open{
    max-height:calc(100vh - 80px);
    padding:10px 24px 26px;
  }

  /* Each row */
  .nav-links li{
    width:100%;
    border-bottom:1px solid var(--line);
  }
  .nav-links li:last-child{
    border:none;
    margin-top:18px;
  }

  /* Top-level link rows — full-bleed tap target with chevron */
  .nav-links li > a:not(.btn){
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 4px;
    font-family:"Hanken Grotesk",sans-serif;
    font-weight:500;
    font-size:1.05rem;
    color:var(--ink);
    letter-spacing:-.005em;
    transition:color .2s ease;
  }
  /* Hide the desktop underline ::after — no chevron decoration on
     mobile, the rows are clean text-only. */
  .nav-links li > a:not(.btn)::after{display:none}
  .nav-links li > a:not(.btn):hover{color:var(--teal)}
  /* Active page — teal text */
  .nav-links li > a[aria-current="page"]:not(.btn){
    color:var(--teal);
    font-weight:600;
  }

  /* Naruči se row — full-width gradient pill, comfortable tap height */
  .nav-links li:last-child .btn{
    width:100%;
    justify-content:center;
    padding:14px 24px;
    font-size:.92rem;
  }
  .burger{display:flex}

  /* ============================================================
     ON-DARK STATE OVERRIDES (when menu opens at scroll=0)
     The on-dark hero CSS paints link text light-gray for visibility
     over the dark hero. When the menu opens, the panel is cream so
     light text becomes invisible — force dark text + restore the
     gradient pill on the Naruči se button.
     ============================================================ */
  #hdr:not(.scrolled) .nav-links.open li > a:not(.btn){color:var(--ink)}
  #hdr:not(.scrolled) .nav-links.open li > a[aria-current="page"]:not(.btn){color:var(--teal)}
  #hdr:not(.scrolled) .nav-links.open .btn-primary{
    background:linear-gradient(135deg, var(--teal) 0%, var(--pine) 100%);
    color:#fff;
  }
  #hdr:not(.scrolled) .nav-links.open .btn-primary::before{display:block}

  /* ============================================================
     USLUGE DROPDOWN — inline under the parent, mint accent rail
     ============================================================ */
  .has-dropdown::after{display:none}
  .dropdown-arrow{display:none}
  /* On mobile the Usluge trigger doesn't show its chevron (it's not
     navigating, it just labels the children below). */
  .has-dropdown > a:not(.btn)::after{display:none}

  .nav-dropdown{
    position:static;
    transform:none;
    min-width:0;
    margin:4px 0 14px 8px;
    padding:4px 0 6px 16px;
    background:transparent;
    border:none;
    border-left:2px solid var(--mint);
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-dropdown-item{padding:11px 0;border-radius:0}
  .nav-dropdown-item::after{display:none}
  .nav-dropdown-item:hover{background:transparent;transform:none}
  .nav-dropdown-num{
    font-size:.98rem;
    min-width:30px;
    text-align:left;
    color:var(--sage);
  }
  .nav-dropdown-text b{font-size:.95rem;color:var(--pine);font-weight:600}
  /* Hide subtitles on mobile — too much vertical space. */
  .nav-dropdown-text small{display:none}
  .nav-dropdown-all{
    padding:12px 0 4px;
    justify-content:flex-start;
    border-top:none;
    margin-top:6px;
    font-size:.76rem;
    color:var(--teal);
  }
  .nav-dropdown-all::after{display:none}
  .svc-grid{grid-template-columns:1fr}
  .card.feature{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  main > section{padding:74px 0}
  .hero-chip{display:none}
  .cta-panel{padding:52px 26px}
  .why-badge{position:static;margin-top:18px;max-width:none}
  .gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:140px}

  /* Footer — stack the 3-col grid into a single column. Without this
     the 1.5fr / 1fr / 1.1fr columns overflow the viewport horizontally,
     which body's overflow-x:hidden then clips, making post cards on
     blog pages appear cut off on the left edge. */
  .foot-grid{grid-template-columns:1fr;gap:32px;margin-bottom:32px}
  .foot-tag .big{font-size:1.2rem}
  .legal{flex-direction:column;align-items:flex-start;gap:6px;font-size:.78rem}
  footer{padding:50px 0 24px}
}

/* =========================================================
   SUBPAGES — shared subpage primitives (page-hero, crumbs,
   pillar teasers, stats, process, faq, quote, gallery-wide,
   info cards). All use existing tokens, no new design system.
   ========================================================= */

/* active nav state */
.nav-links a[aria-current="page"]{color:var(--teal)}
.nav-links a[aria-current="page"]:not(.btn)::after{width:100%}

/* page-hero — shorter, no inset chip */
.page-hero{position:relative;padding:148px 0 84px;overflow:hidden;background:var(--cream)}
.page-hero .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.page-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.page-hero h1{font-size:clamp(1.9rem,3.5vw,2.75rem);font-weight:300;margin:14px 0 18px;letter-spacing:-.02em;line-height:1.16}
.page-hero h1 em{color:var(--teal);font-weight:400}
.page-hero .lead{font-size:1.1rem;color:var(--ink-soft);max-width:34em;margin-bottom:24px}
.page-hero-frame{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3.4}
.page-hero-frame img{width:100%;height:100%;object-fit:cover}
.page-hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,42,39,.22))}

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.83rem;color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--muted);transition:.2s}
.crumbs a:hover{color:var(--teal)}
.crumbs .sep{color:var(--sage);opacity:.7}
.crumbs .here{color:var(--pine);font-weight:600}

/* Shared hero primitives — used by /kontakt/, /prostor/ and any other
   subpage hero that needs a visual wrapper, quick-info chip strip, or a
   leading icon on a primary CTA. Page-specific overrides live in each
   page's own hero.css. */
.hero-visual{position:relative}
.hero-quick-info{list-style:none;display:flex;flex-wrap:wrap;gap:13px 22px;margin:26px 0 0;padding:20px 0 0;border-top:1px dashed var(--line)}
.qi-item{display:inline-flex;align-items:center;gap:11px;font-family:"Hanken Grotesk",sans-serif;font-size:.86rem;font-weight:600;color:var(--ink-soft);line-height:1.4}
.qi-item svg{width:16px;height:16px;padding:7px;box-sizing:content-box;background:var(--mint-50);border-radius:9px;color:var(--teal);flex:none}
.page-hero .btn .btn-lead-ic{margin-right:-2px}

@media(max-width:680px){
  .hero-quick-info{gap:10px 16px;margin-top:22px;padding-top:18px}
  .qi-item{font-size:.82rem;gap:10px}
  .qi-item svg{padding:6px}
}

/* PILLAR TEASERS (home hub) */
.pillars{background:var(--paper)}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--cream);border:1px solid var(--line);transition:.35s cubic-bezier(.2,.7,.2,1);text-decoration:none;color:inherit}
.pillar-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--mint)}
.pillar-img{aspect-ratio:4/3;overflow:hidden;position:relative}
.pillar-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pillar-card:hover .pillar-img img{transform:scale(1.06)}
.pillar-num{position:absolute;top:14px;right:14px;z-index:1;min-width:42px;height:42px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(252,250,244,.94);color:var(--pine);border:1px solid rgba(255,255,255,.6);border-radius:100px;font-family:"Fraunces",serif;font-weight:500;font-size:.95rem;letter-spacing:.02em;backdrop-filter:blur(6px);box-shadow:0 6px 14px -8px rgba(10,42,39,.35);transition:transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease}
.pillar-card:hover .pillar-num{transform:translateY(-2px);background:var(--teal);color:#fff;border-color:var(--teal)}
.pillar-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.pillar-body .eyebrow{font-size:.66rem;letter-spacing:.2em}
.pillar-body h3{font-family:"Fraunces",serif;font-size:1.42rem;font-weight:500;color:var(--pine);line-height:1.15}
.pillar-body p{color:var(--muted);font-size:.96rem;margin-bottom:6px}
.pillar-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-weight:600;font-size:.92rem}
.pillar-link svg{transition:transform .3s}
.pillar-card:hover .pillar-link svg{transform:translateX(4px)}

/* STATS strip (Why page, dark) */
/* .stat-row + .stat-grid + .stat rules moved to assets/css/zasto-rio/stats.css.
   Loaded only on /zasto-rio/ via pr_zasto_enqueue_section_styles. */

/* PROCESS steps */
.process{background:var(--paper)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.process-step{position:relative;padding:34px 26px 30px;background:var(--cream);border:1px solid var(--line);border-radius:var(--r);transition:.3s}
.process-step:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--mint)}
.process-step::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;top:18px;right:22px;font-family:"Fraunces",serif;font-size:1.6rem;color:var(--sage);opacity:.5}
.process-step .pic{width:54px;height:54px;border-radius:14px;background:var(--mint-50);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.process-step h4{font-family:"Hanken Grotesk",sans-serif;font-size:1.08rem;font-weight:700;color:var(--pine);margin-bottom:6px}
.process-step p{color:var(--muted);font-size:.94rem}

/* FAQ disclosure */
.faq{background:var(--cream)}
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.25s}
.faq-item[open]{box-shadow:var(--sh-sm);border-color:var(--mint)}
.faq-item summary{padding:22px 26px;cursor:pointer;font-weight:600;color:var(--pine);display:flex;justify-content:space-between;align-items:center;gap:18px;list-style:none;font-size:1.02rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:"Fraunces",serif;font-size:1.5rem;color:var(--teal);transition:transform .3s;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .a{padding:0 26px 22px;color:var(--muted);font-size:.98rem;line-height:1.7}

/* QUOTE block */
/* .quote-wrap + .quote-block rules moved to assets/css/zasto-rio/quote.css. */

/* GALLERY-WIDE (Prostor full set) */
/* .gallery-wide + .gw-* rules moved to assets/css/prostor/gallery.css.
   Loaded only on /prostor/ via pr_prostor_enqueue_section_styles. */

/* INFO grid + CONTACT FORM rules moved to assets/css/kontakt/practical-info.css
   and assets/css/kontakt/form.css. Loaded only on /kontakt/ via functions.php. */

/* SERVICE ROWS (alternating image/copy on /usluge/) */
.svc-rows{background:var(--paper)}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:96px}
.svc-row:last-child{margin-bottom:0}
.svc-row.flip{direction:rtl}
.svc-row.flip>*{direction:ltr}
.svc-row-img{border-radius:20px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3.2}
.svc-row-img img{width:100%;height:100%;object-fit:cover}
.svc-row h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:300;margin:14px 0 14px;color:var(--pine)}
.svc-row h2 em{color:var(--teal);font-weight:400}
.svc-row p{color:var(--muted);font-size:1.04rem;margin-bottom:14px}
.svc-row ul{list-style:none;display:grid;gap:10px;margin-top:18px}
.svc-row ul li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-weight:500}
.svc-row ul li svg{color:var(--teal);flex:none;margin-top:3px}

/* WHY CARDS (full card grid on /zasto-rio/) */
/* .why-cards + .why-cards-grid rules moved to assets/css/zasto-rio/why-cards.css. */

/* TEAM expanded (on /zasto-rio/) */
/* .team-expanded modifier rules moved to assets/css/zasto-rio/team.css.
   The generic .team / .team-grid / .person / .avatar primitives stay
   global because the home page also uses them. */

/* @media — subpage responsive */
@media(max-width:980px){
  .page-hero-grid{grid-template-columns:1fr;gap:48px}
  .pillar-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .svc-row{grid-template-columns:1fr;gap:36px;margin-bottom:74px}
  .svc-row.flip{direction:ltr}
}
@media(max-width:680px){
  .page-hero{padding:120px 0 60px}
  .pillar-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
}

/* =========================================================
   AUDIT GALLERY — internal image-review page (/galerija/)
   ========================================================= */
.audit-bar{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:18px 24px;margin-bottom:36px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;font-size:.92rem;color:var(--ink-soft)}
.audit-bar b{color:var(--pine)}
.audit-bar .legend{display:inline-flex;align-items:center;gap:8px}
.audit-bar .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.audit-bar .chip.real{background:var(--mint-50);color:var(--teal)}
.audit-bar .chip.stock{background:#f1e6cf;color:#8c6e2c}
.audit-bar .chip.missing{background:#f5d6d6;color:#9a3838}

.audit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.audit-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.25s;position:relative}
.audit-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--mint)}
.audit-img{position:relative;aspect-ratio:4/3;background:var(--cream);overflow:hidden}
.audit-img img{width:100%;height:100%;object-fit:cover;display:block}
.audit-img .num{position:absolute;top:10px;left:10px;background:rgba(10,42,39,.82);color:#fff;font-family:"Fraunces",serif;font-size:.96rem;padding:5px 11px;border-radius:8px;letter-spacing:.04em}
.audit-img .type{position:absolute;top:10px;right:10px;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.audit-img .type.real{background:var(--mint-50);color:var(--teal)}
.audit-img .type.stock{background:#f1e6cf;color:#8c6e2c}
.audit-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
.audit-body h4{font-family:"Fraunces",serif;font-weight:500;font-size:1.08rem;color:var(--pine);line-height:1.3}
.audit-meta{display:grid;gap:6px;font-size:.84rem}
.audit-meta .row{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:start}
.audit-meta .k{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);padding-top:2px}
.audit-meta .v{color:var(--ink-soft);line-height:1.5}
.audit-meta .v.orient{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);font-weight:500}
.audit-meta .v.used{color:var(--muted);font-size:.82rem}
.audit-card.is-missing{border-color:#e9c8c8;background:#fcf6f6}
.audit-card.is-missing .audit-img{display:flex;align-items:center;justify-content:center;color:#9a3838;font-size:.84rem;text-align:center;padding:20px}

@media(max-width:980px){.audit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.audit-grid{grid-template-columns:1fr}}

/* CONTACT PAGE rules moved to assets/css/kontakt/*.css per section.
   Loaded only on /kontakt/ via pr_kontakt_enqueue_section_styles. */