/* ============================================================================
 *  ŠKOLA NAKON ZVONA I ŠKOLSKI KURIKULUM — javni web
 *  /assets/css/snz.css
 * ----------------------------------------------------------------------------
 *  Isti izgled kao Kurikulum na intranetu, prepisan pod .snz, .skk i
 *  .snz-modal da se ne miješa s ostatkom stranice. Prije su ovi stilovi bili
 *  <style> blokovi u /inc/snz_stil.php i /inc/skk_stil.php, usred <body>, što
 *  HTML ne dopušta — zato su premješteni ovdje i učitavaju se u <head>.
 * ============================================================================ */

/* ---------- 1. Škola nakon zvona (prije /inc/snz_stil.php) ---------- */
.snz{--ink:#2c3038;--mute:#6b7480;--linija:#e2e6ea;--meko:#f5f6f8;--zelena:#82b17b;--plava:#5aa0bb;
	font-family:'Barlow',sans-serif;margin:.6rem 0 1rem;text-align:left}
.snz .ui-list{display:flex;flex-direction:column;gap:1.6rem}
/* Aktivnosti su široke kao gornji dio stranice s uvodnim tekstom
   (medium-10 / large-8 stupaca), a novosti ispod njih idu preko svih 12. */
.snz .ui-group-head,.snz .ui-item,.snz > .ui-empty{width:100%;margin-left:auto;margin-right:auto}
@media print, screen and (min-width:40em){
	.snz .ui-group-head,.snz .ui-item,.snz > .ui-empty{width:calc((100% + 1.875rem) * 10 / 12 - 1.875rem)}
}
@media print, screen and (min-width:64em){
	.snz .ui-group-head,.snz .ui-item,.snz > .ui-empty{width:calc((100% + 1.875rem) * 8 / 12 - 1.875rem)}
}
.snz .ui-group-head{margin-bottom:.7rem}
.snz .ui-group .ui-group-head .ui-tag{display:inline-block;background:var(--c);color:#fff!important;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;
	text-transform:uppercase;letter-spacing:.04em;font-size:1.2rem;line-height:1.2;padding:.45rem 1.1rem;border-radius:0}
.snz .ui-group-body{display:flex;flex-direction:column;gap:.7rem}
.snz .ui-item{display:flex;align-items:flex-start;gap:1.1rem;background:#fff;border:1px solid var(--cbg2);
	border-left:5px solid var(--c);border-radius:0;padding:1rem;transition:.1s}
.snz .ui-item:hover{border-color:var(--c)}
.snz .ui-avatar{flex:0 0 auto;width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--cbg);
	display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c)}
.snz .ui-avatar img{width:100%;height:100%;object-fit:cover}
.snz .ui-avatar-empty{opacity:.5;display:flex}
.snz .ui-avatar-empty svg{width:30px;height:30px}
.snz .ui-item-body{flex:1 1 auto;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:.3rem}
.snz .ui-item-title{font-family:'Barlow Semi Condensed',sans-serif;font-weight:500;font-size:1.22rem;color:var(--ink);line-height:1.25;white-space:pre-line}
.snz .ui-item-sub{color:#56606b;font-size:.9rem}
.snz .ui-pills{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.15rem}
.snz .ui-pill{background:var(--cbg);border:1px solid var(--cbg2);border-radius:0;min-width:1.9rem;text-align:center;
	padding:.12rem .5rem;font-size:.85rem;font-weight:500;color:#4a525c}
.snz .ui-item-right{flex:0 0 auto;align-self:stretch;display:flex;flex-direction:row;align-items:stretch;gap:.9rem}
.snz .kur-oznake{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:.4rem}
/* na ovoj su stranici sve aktivnosti ESF+, pa se oznaka u popisu ne ponavlja;
   upozorenja za urednike (nepotpuno) javnosti ne trebaju */
.snz .kur-oznake .kur-esf,.snz .ui-nepotpuno,.snz .kur-gumbi{display:none!important}
.snz .ui-done{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:2px solid #d3d8dd;background:#fff;color:#c2c9d0;
	display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:default}
.snz .ui-done svg{width:17px;height:17px}
.snz .ui-done.is-on{background:var(--zelena);border-color:var(--zelena);color:#fff}
.snz .ui-empty{text-align:center;color:var(--mute);padding:2rem;background:#fff}

/* novosti ispod aktivnosti — kartice kao u popisu novosti */
.snz .snz-novosti{margin:0 0 .8rem}
.snz .snz-novosti-naslov{font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;letter-spacing:.05em;
	font-size:.85rem;color:var(--mute);margin:.2rem 0 .1rem}
.snz .snz-novosti .grid-x{margin-left:-.625rem;margin-right:-.625rem}
/* popis stoji na sivoj podlozi stranice, kao i kartice novosti drugdje */
.snz .snz-novosti .news_container{transition:box-shadow .15s}
.snz .snz-novosti .news_container:hover{box-shadow:0 4px 14px rgba(30,40,50,.08)}
.snz .snz-novosti .news_container a{color:inherit;text-decoration:none}
.snz .snz-novosti-opce{margin:2.2rem 0 0;padding:0;border:0}
.snz .snz-opce-naslov{margin:0 0 .4rem;text-align:center}

/* ---------- modal ---------- */
.snz-modal{position:fixed;inset:0;background:rgba(30,34,40,.5);z-index:1000;display:flex;align-items:flex-start;justify-content:center;
	padding:3vh 1rem;overflow:auto;font-family:'Barlow',sans-serif;text-align:left}
body.snz-modal-otvoren{overflow:hidden}
.snz-modal .ui-modal-box{background:#fff;border:1px solid var(--cbg2,#e2e6ea);border-top:5px solid var(--c,#5aa0bb);border-radius:0;
	max-width:820px;width:100%;padding:1.6rem 1.9rem;position:relative;color:#2c3038}
.snz-modal .ui-modal-x{position:absolute;top:.9rem;right:1rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
	border-radius:50%;background:#eceff2;color:#6b7480;text-decoration:none;transition:.12s}
.snz-modal .ui-modal-x svg{width:15px;height:15px;display:block}
.snz-modal .ui-modal-x:hover{background:#dfe3e8;color:#333}
.snz-modal .ui-modal-title{font-family:'Barlow Semi Condensed',sans-serif;margin:.1rem 2.4rem .5rem 0;font-weight:500;font-size:1.5rem;line-height:1.2;color:#2c3038}
.snz-modal .ui-tag{display:inline-block;background:var(--c,#5aa0bb);color:#fff!important;font-family:'Barlow Semi Condensed',sans-serif;
	font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;padding:.18rem .6rem;border-radius:0;margin-bottom:.9rem}
.snz-modal .ui-meta{margin:1rem 0}
.snz-modal .ui-meta-label{font-family:'Barlow Semi Condensed',sans-serif;font-weight:500;font-size:1.05rem;text-transform:uppercase;
	color:#0a0a0a;letter-spacing:.04em;display:block;margin-bottom:.25rem}
.snz-modal .ui-meta-value{color:#33383f;line-height:1.5}
.snz-modal .ui-meta-value p{margin:0 0 .4rem}
.snz-modal .ui-meta-value ul,.snz-modal .ui-bullets{margin:.2rem 0 0;padding-left:1.2rem}
.snz-modal .ui-bullets li{margin:.15rem 0;padding-left:.15rem}
.snz-modal .ui-bullets li::marker{color:var(--c,#9aa3ad)}
.snz-modal .kur-esf{display:block;height:30px;width:auto}
.snz-modal .kur-esf-modal{margin:.2rem 0 .7rem}
.snz-modal .ui-nedostaje,.snz-modal .ui-modal-done{display:none}
.snz-modal .ui-gallery{float:right;width:240px;max-width:42%;margin:.1rem 0 1rem 1.4rem;display:flex;flex-wrap:wrap;gap:.45rem}
.snz-modal .ui-gallery a,.snz-modal .ui-gallery-dno a{display:block;line-height:0;cursor:pointer}
.snz-modal .ui-gallery .ui-photo-main{flex:0 0 100%}
.snz-modal .ui-gallery .ui-photo-main img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:50%}
.snz-modal .ui-gallery-dno{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 .2rem}
.snz-modal .ui-gallery-dno img{display:block;width:140px;height:140px;object-fit:cover}

/* oznake vrste: bijeli tekst, kao u glavnom izborniku */

/* naslov stranice s oznakom ESF+ desno */
.snz-naslov{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.snz-naslov h2{margin:0}
.snz-naslov .snz-esf{flex:0 0 auto;height:46px;width:auto}

@media (max-width:640px){
	.snz .ui-item{flex-wrap:wrap;gap:.8rem}
	.snz .ui-avatar{width:64px;height:64px}
	.snz .ui-item-body{flex:1 1 60%}
	.snz .ui-item-right{width:100%;justify-content:flex-end}
	.snz-modal .ui-modal-box{padding:1.2rem 1.1rem}
	.snz-modal .ui-gallery{float:none;width:auto;max-width:none;margin:.4rem 0 1rem}
	.snz-naslov .snz-esf{height:34px}
}

/* ---------- 2. Školski kurikulum: filteri, čipovi, sažetak, ESF+ (prije /inc/skk_stil.php) ---------- */
/* filteri i sažetak iste širine kao aktivnosti (10 / 8 stupaca) */
.skk .skk-filteri,.skk .skk-cipovi,.skk .skk-sazetak{width:100%;margin-left:auto;margin-right:auto}
@media print, screen and (min-width:40em){
	.skk .skk-filteri,.skk .skk-cipovi,.skk .skk-sazetak{width:calc((100% + 1.875rem) * 10 / 12 - 1.875rem)}
}
@media print, screen and (min-width:64em){
	.skk .skk-filteri,.skk .skk-cipovi,.skk .skk-sazetak{width:calc((100% + 1.875rem) * 8 / 12 - 1.875rem)}
}

.skk .skk-filteri{background:#fff;border:1px solid var(--linija);padding:1rem 1.1rem;margin-bottom:1rem}
.skk .skk-filteri-red{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}
.skk .skk-polje{flex:1 1 180px;min-width:150px}
.skk .skk-polje-siroko{flex:2 1 240px}
.skk .skk-polje label{display:block;font-family:'Barlow Semi Condensed',sans-serif;font-size:.85rem;color:var(--mute);
	margin-bottom:.3rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.skk .skk-polje select,.skk .skk-polje input{margin:0;width:100%;height:2.6rem;border-radius:0}
.skk .skk-filteri-red2{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--linija)}
.skk .skk-seg-naslov{font-family:'Barlow Semi Condensed',sans-serif;font-size:.85rem;color:var(--mute);font-weight:500;
	text-transform:uppercase;letter-spacing:.04em;margin-right:.3rem}
.skk .skk-seg{width:38px;height:38px;border:1px solid #d3d8dd;background:#fff;color:var(--ink);cursor:pointer;font-weight:500;
	font-size:.95rem;border-radius:0;padding:0;transition:.12s}
.skk .skk-seg-siroko{width:auto;padding:0 .75rem}
.skk .skk-seg:hover{border-color:#b9c0c8}
.skk .skk-seg.aktivan{background:#2f3540;color:#fff;border-color:#2f3540}

.skk .skk-cipovi{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.skk .skk-cip{display:inline-flex;align-items:center;gap:.45rem;background:#e6e9ed;padding:.28rem .45rem .28rem .7rem;font-size:.88rem;color:#3a3f47}
.skk .skk-cip b{font-weight:500}
.skk .skk-cip-x{cursor:pointer;width:18px;height:18px;background:#d4dae0;color:#566;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;line-height:1}
.skk .skk-cip-x:hover{background:#c2c9d0}

.skk .skk-sazetak{font-family:'Barlow Semi Condensed',sans-serif;font-size:1.35rem;font-weight:500;line-height:1.3;color:var(--ink);margin-bottom:1.2rem}
.skk .skk-sazetak:empty{display:none}

/* na žutoj vrsti crna slova, kao u Kurikulumu na intranetu */
.snz .ui-group[style*="f9d948" i] .ui-group-head .ui-tag,
.snz-modal .ui-modal-box[style*="f9d948" i] .ui-tag{color:#0a0a0a!important}

/* u cijelom kurikulumu oznaka ESF+ nosi informaciju, pa se vidi (na Školi nakon zvona ne) */
.snz.skk .kur-oznake .kur-esf{display:block!important;height:26px;width:auto}

@media (max-width:640px){
	.skk .skk-filteri{padding:.8rem}
	.skk .skk-polje{flex:1 1 100%}
	.skk .skk-sazetak{font-size:1.1rem}
}