/* Staff directory (template djelatnici.php). Matches the redesigned archive views:
   hero header, brand blue #094e96, rounded cards, pill filters. Self-contained (kdj- prefix);
   client-side type + name filtering (see js/djelatnici.js). */

.kdj{--kd-blue:#094e96;--kd-blue-soft:#4490bf;--kd-ink:#102d47;--kd-muted:#63788a;--kd-line:#e2eaf1;--kd-panel:#f5f9fc;color:var(--kd-ink);padding:14px 0 56px}
.kdj *{box-sizing:border-box}
.kdj-wrap{max-width:1440px;margin:0 auto;padding:0 32px}

/* breadcrumb + hero (as the news archive) */
.kdj-breadcrumb{display:flex;align-items:center;gap:12px;margin:12px 0 25px;font-size:13px;line-height:1.5;color:#758a9a}
.kdj-breadcrumb a{color:#47677f;text-decoration:none}.kdj-breadcrumb a:hover{color:var(--kd-blue)}
.kdj-breadcrumb>span[aria-hidden]{color:#b2c0cc}
.kdj-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:48px;padding:44px 50px;margin-bottom:34px;background:linear-gradient(110deg,#e7f0f8 0%,#eff5fa 62%,#dcebf6 100%);border:1px solid #dbe7f0;border-radius:22px}
.kdj-hero:after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-150px;top:-160px;border:1px solid #094e960c;border-radius:50%;box-shadow:0 0 0 46px #094e9605,0 0 0 92px #094e9604;pointer-events:none}
.kdj-hero-copy{max-width:720px}
.kdj-eyebrow{display:block;color:var(--kd-blue);font-size:11px;font-weight:600;letter-spacing:.18em;line-height:1.5;margin-bottom:14px;text-transform:uppercase}
.kdj-hero h1{margin:0;font-size:clamp(34px,5vw,64px);line-height:1.06;font-weight:600;letter-spacing:-.04em;color:var(--kd-ink)}
.kdj-hero p{max-width:560px;margin:18px 0 0;font-size:18px;line-height:1.55;color:#526f85}
.kdj-count{min-width:150px;padding-left:36px;border-left:1px solid #bdd2e3;display:flex;flex-direction:column;color:#57758b;font-size:13px;line-height:1.5}
.kdj-count .kdj-count-label{font-size:11px;text-transform:uppercase;letter-spacing:.13em}
.kdj-count strong{display:block;margin:6px 0 3px;font-size:56px;line-height:1.1;letter-spacing:-.05em;font-weight:500;color:var(--kd-blue);font-variant-numeric:tabular-nums}

/* filter bar: search + pills */
.kdj-filters{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-bottom:30px}
.kdj-search{position:relative;flex:0 0 auto;width:280px;max-width:100%}
.kdj-search input{width:100%;padding:12px 16px 12px 44px;border:1px solid var(--kd-line);border-radius:12px;background:#fff;color:var(--kd-ink);font-size:15px;font-family:inherit}
.kdj-search input:focus{outline:none;border-color:var(--kd-blue-soft);box-shadow:0 0 0 3px #4490bf33}
.kdj-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#7c93a8;pointer-events:none}
.kdj-pills{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.kdj-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--kd-line);border-radius:999px;background:#fff;color:#3d5568;font-size:14px;font-family:inherit;font-weight:500;line-height:1;cursor:pointer;text-decoration:none;transition:background .18s,border-color .18s,color .18s}
.kdj-pill:hover{border-color:#b5ccdf;background:var(--kd-panel)}
.kdj-pill .kdj-pill-n{font-size:12px;color:#8296a8;font-variant-numeric:tabular-nums;transition:color .18s}
.kdj-pill[aria-pressed="true"]{background:var(--kd-blue);border-color:var(--kd-blue);color:#fff}
.kdj-pill[aria-pressed="true"] .kdj-pill-n{color:#cfe0f2}
.kdj-pill:focus-visible{outline:3px solid var(--kd-blue-soft);outline-offset:2px}

/* cards */
.kdj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:26px 22px}
.kdj-card{min-width:0}
.kdj-card a{display:block;text-decoration:none;color:inherit}
.kdj-photo{position:relative;display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#e8f0f8,#d7e6f3);border:1px solid var(--kd-line)}
.kdj-monogram{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#3b6ea5;font-size:38px;font-weight:600;letter-spacing:.02em;background:repeating-radial-gradient(ellipse at 100% 0,transparent 0 34px,#094e9608 35px 36px)}
.kdj-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:1;transition:transform .4s ease}
.kdj-card a:hover .kdj-photo img{transform:scale(1.04)}
.kdj-card a:hover .kdj-photo{border-color:#b5ccdf;box-shadow:0 14px 30px -20px #153b6066}
.kdj-card-body{padding:13px 2px 0}
.kdj-card-titula{display:block;font-size:12.5px;line-height:1.4;color:var(--kd-muted);margin-bottom:3px;min-height:18px}
.kdj-card-name{margin:0;font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--kd-ink)}
.kdj-card a:hover .kdj-card-name{color:var(--kd-blue)}
.kdj-card-odjel{display:block;margin-top:5px;font-size:11.5px;line-height:1.4;color:#8296a8}

/* compact list (external associates) */
.kdj-list-label{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--kd-muted)}
.kdj-list{list-style:none;margin:0;padding:0;columns:3;column-gap:36px}
.kdj-list li{break-inside:avoid;margin:0 0 2px}
.kdj-list a{display:block;padding:9px 4px;border-bottom:1px solid #eef3f8;color:var(--kd-ink);text-decoration:none;font-size:15px;line-height:1.4}
.kdj-list a:hover{color:var(--kd-blue)}
.kdj-list .kdj-list-titula{color:var(--kd-muted);font-size:13px}

/* section spacing */
.kdj-cards-section{margin-bottom:20px}
.kdj-list-section{margin-top:8px}
.kdj-empty{display:none;padding:44px;border:1px solid var(--kd-line);border-radius:16px;background:#fff;color:var(--kd-muted);text-align:center}

/* ---- type filtering (works before JS; instant, no reload) ---- */
.kdj[data-active="nastavnik"] .kdj-list-section,
.kdj[data-active="knjiznica"] .kdj-list-section{display:none}
.kdj[data-active="vanjski"] .kdj-cards-section{display:none}
.kdj[data-active="nastavnik"] .kdj-card:not([data-type="nastavnik"]),
.kdj[data-active="knjiznica"] .kdj-card:not([data-type="knjiznica"]){display:none}
/* the external-associates label only makes sense when cards are shown alongside the list */
.kdj:not([data-active="all"]) .kdj-list-label{display:none}
/* name search */
.kdj-item.is-hidden{display:none!important}

@media(min-width:601px) and (max-width:1100px){
 .kdj-hero{padding:34px;gap:28px}.kdj-count{min-width:130px;padding-left:24px}.kdj-count strong{font-size:46px}
 .kdj-list{columns:2}
}
@media(max-width:600px){
 .kdj{padding-top:2px}.kdj-wrap{padding:0 20px}
 .kdj-breadcrumb{margin:5px 0 16px;font-size:12px}
 .kdj-hero{display:block;padding:26px 22px;margin-bottom:26px;border-radius:16px}
 .kdj-hero p{font-size:15px;margin-top:14px}
 .kdj-count{flex-direction:row;align-items:baseline;gap:9px;min-width:0;padding:16px 0 0;margin-top:18px;border-left:0;border-top:1px solid #cbdde9}
 .kdj-count .kdj-count-label{display:none}.kdj-count strong{font-size:24px;margin:0;font-weight:600}
 .kdj-filters{gap:14px}.kdj-search{width:100%}.kdj-pills{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
 .kdj-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:20px 14px}
 .kdj-monogram{font-size:30px}.kdj-card-name{font-size:15px}
 .kdj-list{columns:1}
}
@media(prefers-reduced-motion:reduce){.kdj *{transition:none!important}}