/* ============================================================
   pages.css — stil za podstranice (vijesti, nekretnine, oglasi)
   Nadovezuje se na style.css (isti :root tokeni)
   ============================================================ */

.page{min-height:60vh}
.page > .wrap{padding-bottom:60px}
.wrap-usko{max-width:640px}

/* mrvice */
.crumbs{font-family:var(--mono);font-size:12px;color:var(--muted);
  padding:26px 0 4px;letter-spacing:.03em}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--red)}
.crumbs span{margin:0 6px;opacity:.5}

.page-head{padding:14px 0 26px;border-bottom:2px solid var(--ink);margin-bottom:26px;
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.page-head h1{font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.04em}
.page-head p{color:var(--muted);font-family:var(--mono);font-size:13px}

.prazno{color:var(--muted);padding:40px 0;text-align:center}

.btn-link{display:inline-block;font-weight:600;color:var(--red);font-size:14px;
  padding:8px 0}
.btn-link:hover{gap:8px}

/* mreža 3 */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.art-najava{margin-top:10px;color:#4A4A52;font-size:14px;line-height:1.5}

/* stranicenje */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:44px 0 10px;padding-top:24px;border-top:1px solid var(--grey-2)}
.pager a{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;color:var(--ink);
  background:var(--white);padding:12px 20px;border:1px solid var(--grey-2);
  border-radius:var(--pill);transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.pager a:hover{border-color:var(--ink);background:var(--ink);color:#fff;
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.pager a.prethodna{padding-left:16px}
.pager a.sljedeca{padding-right:16px;margin-left:auto}
.pager-info{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em;
  white-space:nowrap}

.filter-bar{display:flex;flex-direction:column;gap:12px;margin-bottom:30px}

/* --------- članak --------- */
.article-wrap{display:grid;grid-template-columns:1fr 300px;gap:48px;
  align-items:start;padding-top:6px}
.art-kat{display:inline-block;background:var(--red);color:#fff;border-radius:var(--pill);
  padding:5px 14px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:14px}
.article-title{font-family:var(--display);font-weight:800;font-size:clamp(25px,3vw,34px);
  letter-spacing:-.03em;line-height:1.15}
.article-meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px;
  display:flex;gap:8px;flex-wrap:wrap;letter-spacing:.03em}
.article-slika{margin:26px 0}
.article-slika img{width:100%;border-radius:var(--r);display:block}
.article-lede{font-size:17.5px;line-height:1.55;color:var(--ink);font-weight:500;
  margin:24px 0;padding-left:18px;border-left:3px solid var(--red)}
.article-body{font-size:16px;line-height:1.7;color:#2A2A30}
.article-body p{margin-bottom:18px}
.article-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--grey-2)}

.article-rel{position:sticky;top:96px;background:var(--white);border:1px solid var(--grey-2);
  border-radius:var(--r);padding:20px}
.article-rel h5{font-family:var(--display);font-weight:800;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding-bottom:14px;margin-bottom:2px}
.rel-item{display:block;padding:14px 0;border-bottom:1px solid var(--grey-2);transition:.15s}
.rel-item:last-child{border-bottom:0;padding-bottom:2px}
.rel-item:first-child{padding-top:2px}
.rel-item:hover{padding-left:4px}
.rel-item:hover .rel-naslov{color:var(--red)}
.rel-naslov{display:block;font-family:var(--display);font-weight:700;font-size:15px;
  line-height:1.3;letter-spacing:-.01em;transition:.15s}
.rel-datum{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px;display:block}

/* --------- nekretnina detalj --------- */
.props-4{grid-template-columns:repeat(4,1fr)}
.kind-hot{left:auto;right:12px;background:var(--red);color:#fff}

.nek-detalj{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start;padding-top:6px}
.galerija{margin-bottom:26px}
.gal-glavna{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(135deg,var(--grey-2),var(--grey-3))}
.gal-glavna img{width:100%;height:100%;object-fit:cover}
.gal-prazna{display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-family:var(--mono);font-size:13px}
.gal-male{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.gal-t{aspect-ratio:4/3;border:2px solid transparent;border-radius:var(--r-sm);overflow:hidden;
  cursor:pointer;padding:0;background:none;transition:.14s}
.gal-t img{width:100%;height:100%;object-fit:cover}
.gal-t.is-on{border-color:var(--red)}
.gal-t:hover{border-color:var(--grey-3)}

.nek-opis{margin-top:6px}
.nek-opis h3{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:12px;letter-spacing:-.02em}
.nek-opis p{margin-bottom:14px;line-height:1.7;color:#2A2A30}

.nek-strana{position:sticky;top:96px}
.nek-card{background:var(--white);border:1px solid var(--grey-2);border-radius:var(--r);
  padding:24px;margin-bottom:16px}
.nek-card .kind{position:static;display:inline-block;background:var(--grey-1);color:var(--ink);
  border-radius:var(--pill);padding:5px 13px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.nek-naslov{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em;line-height:1.15}
.nek-loc{color:var(--muted);font-size:14px;margin-top:8px}
.nek-cijena{font-family:var(--display);font-weight:800;font-size:34px;color:var(--red);
  letter-spacing:-.04em;margin:18px 0}
.nek-cijena .suf{font-size:15px;color:var(--muted);font-family:var(--body);font-weight:600}
.nek-specs{list-style:none;border-top:1px solid var(--grey-2)}
.nek-specs li{display:flex;justify-content:space-between;padding:11px 0;
  border-bottom:1px solid var(--grey-2);font-size:14px}
.nek-specs span{color:var(--muted)}
.nek-specs b{font-weight:700}
.nek-kontakt{margin-top:18px;padding-top:18px;border-top:1px solid var(--grey-2)}
.nek-kontakt h4{font-family:var(--display);font-weight:800;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.nek-ime{font-weight:600;margin-bottom:6px}
.nek-tel{display:inline-block;background:var(--red);color:#fff;border-radius:var(--pill);
  padding:11px 20px;font-family:var(--mono);font-weight:500;font-size:15px;transition:.15s}
.nek-tel:hover{background:var(--red-dark)}

/* --------- forma oglasa --------- */
.form-oglas{background:var(--white);border:1px solid var(--grey-2);border-radius:var(--r);padding:26px}
.fld{margin-bottom:18px}
.fld label{display:block;font-weight:700;font-size:13.5px;margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--grey-2);
  border-radius:var(--r-sm);padding:12px 14px;font-size:15px;font-family:var(--body);
  background:var(--white);transition:.14s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ink)}
.fld textarea{resize:vertical;line-height:1.6}
.fld-hint{font-size:12px;color:var(--muted);margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-crveni{border:0;cursor:pointer;background:var(--red);color:#fff;border-radius:var(--r-sm);
  padding:14px 26px;font-weight:700;font-size:15px;transition:.15s}
.btn-crveni:hover{background:var(--red-dark)}

/* --------- partneri --------- */
.partneri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.partner-kartica{background:var(--white);border:1px solid var(--grey-2);border-radius:var(--r);
  padding:26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.partner-logo{width:100%;height:200px;display:flex;align-items:center;justify-content:center}
.partner-logo img{max-width:100%;max-height:100%;object-fit:contain}
.partner-kartica a,.partner-kartica span{font-size:16px;color:var(--muted)}
.partner-kartica a:hover{color:var(--red)}
.partner-cta{margin-top:40px;background:var(--white);border:1px solid var(--grey-2);
  border-radius:var(--r);padding:34px}
.partner-cta p{margin-bottom:16px;line-height:1.65}
.partner-cta p:last-child{margin-bottom:0}

.alert{border-radius:var(--r);padding:16px 18px;margin-bottom:22px;font-size:14.5px}
.alert-ok{background:#E6F4EC;border:1px solid #9BD3B2;color:#0E7A3D}
.alert-err{background:#FCE9E9;border:1px solid #E8A9A9;color:#A80707}
.alert-err div{padding:2px 0}

/* --------- popup poslije slanja kontakt forme --------- */
/* iznad plejera (z-index 90) i headera (300), ispod logo-loadera (9999) */
.pop-veo{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;
  justify-content:center;padding:22px;background:rgba(10,10,11,.6);
  backdrop-filter:blur(4px);opacity:0;transition:opacity .18s}
.pop-veo.je-tu{opacity:1}
.pop{background:var(--white);border-radius:var(--r);padding:32px 28px;width:100%;
  max-width:420px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.32);
  transform:translateY(12px) scale(.97);transition:transform .18s}
.pop-veo.je-tu .pop{transform:none}
.pop-znak{width:60px;height:60px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center}
.pop-ok .pop-znak{background:#E6F4EC;color:#0E7A3D}
.pop-err .pop-znak{background:#FCE9E9;color:#A80707}
.pop h3{font-family:var(--display);font-weight:800;font-size:20px;
  letter-spacing:-.02em;margin:0 0 10px}
.pop-tekst p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 6px}
.pop-tekst p:last-child{margin-bottom:0}
.pop-dugme{border:0;cursor:pointer;background:var(--red);color:#fff;font-family:inherit;
  border-radius:var(--r-sm);padding:12px 32px;font-weight:700;font-size:14.5px;
  margin-top:22px;transition:.15s}
.pop-dugme:hover{background:var(--red-dark)}
@media(prefers-reduced-motion:reduce){
  .pop-veo,.pop{transition:none}
}

/* --------- responsive --------- */
@media(max-width:1020px){
  .article-wrap{grid-template-columns:1fr;gap:34px}
  .article-rel{position:static}
  .nek-detalj{grid-template-columns:1fr;gap:28px}
  .nek-strana{position:static}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .props-4{grid-template-columns:repeat(2,1fr)}
  .partneri-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .page-head h1{font-size:28px}
  .article-title{font-size:20px}
  .article-lede{font-size:15px;padding-left:14px}
  .article-body{font-size:15px}   /* ispod 15px tekst na telefonu postaje mučan za čitanje */
  .art-kat{font-size:10px;padding:4px 12px}
  .grid-3,.props-4,.partneri-grid{grid-template-columns:1fr}
  .gal-male{grid-template-columns:repeat(4,1fr)}
  .pager{gap:12px}
}

/* ============================================================
   OGLASI — red koji vodi na stranicu velikog oglasa
   (obični mali oglasi i dalje koriste goli .row iz style.css)
   ============================================================ */
.row-link{text-decoration:none;color:inherit}
.row-glavno{display:flex;flex-direction:column;gap:4px;min-width:0}
.row-najava{font-size:13.5px;color:var(--muted);line-height:1.5}
.row-desno{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.row-vise{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--red);white-space:nowrap}
.row-link:hover .row-vise{text-decoration:underline}

/* Kontakti na stranici oglasa — više brojeva, svi klikabilni */
.oglas-kontakt{margin-top:34px;background:var(--grey-1);border:1px solid var(--grey-2);
  border-radius:var(--r);padding:22px 24px}
.oglas-kontakt h3{font-family:var(--display);font-weight:800;font-size:15px;
  letter-spacing:-.02em;margin-bottom:14px}
.oglas-kontakt ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.oglas-kontakt li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:10px;border-bottom:1px solid var(--grey-2)}
.oglas-kontakt li:last-child{padding-bottom:0;border-bottom:0}
.ok-oznaka{font-size:13.5px;color:var(--muted)}
.oglas-kontakt a{font-family:var(--mono);font-size:15px;font-weight:500;
  color:var(--ink);white-space:nowrap}
.oglas-kontakt a:hover{color:var(--red)}

@media (max-width:560px){
  .row-desno{align-items:flex-start}
  .oglas-kontakt li{flex-direction:column;gap:3px;align-items:flex-start}
}