/************************************************************************
*  BIO-MD: /stat/css/style.css — theme + components                     *
*  v.:  0.223		2025-08-22		dz@idz.si		*
*  Notes: lighter carbon palette; hero media; IG grid; modern slots.    *
*   - Responsive media collage with aspect-ratio (no image blow-ups).	*
*   - Better gaps, two-column lists, clearer cards.			*
************************************************************************/
/* --- lighter carbon palette --- */
:root{
  --bg:#232a33;      /* was #1c2127 */
  --card:#2b343c;    /* was #242b2f */
  --text:#f3f7fb;
  --muted:#d3dbe6;
  --border:#4a576a;  /* was #3b4656 */
  --accent:#78bba0;
  --accent2:#a6bdf7;
  --radius:18px;
}

/*
:root{
  --bg:#20262c;        /* lighter than #1c2127 */
/*  --card:#2a3238;      /* lighter than #242b2f */
/*  --text:#f5f8fb;
  --muted:#d6dee8;
  --border:#4b5565;    /* a touch lighter */
/*  --accent:#74b295;
  --accent2:#9db6f2;
  --radius:18px;
/* } */

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,Arial,sans-serif
}

/* ------- layout spacing & rhythm ------- */
.container{max-width:1180px;margin:0 auto;padding:20px}
.grid{display:grid;gap:18px}
@media(min-width:900px){
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
}

.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;box-shadow:0 6px 18px rgba(0,0,0,.14)
}
.card + .card{margin-top:18px}

/* hero */
.hero{display:grid;gap:22px;padding:36px 0}
.hero .grid.cols-3>.card{min-height:140px}
.kzd-dates li{background:#1d2530;border:1px solid var(--border);padding:10px 12px;border-radius:12px}
.kzd-dates li+li{margin-top:8px}
.kzd-dates strong{letter-spacing:.2px}

/* header / nav */
header{
  position:sticky;top:0;background:rgba(28,33,39,.86);
  backdrop-filter:saturate(1.15) blur(8px);border-bottom:1px solid var(--border);z-index:5
}
nav{display:flex;gap:18px;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.4px}

/* buttons & links */
a{color:#d6e0ff;text-decoration:none}a:hover{opacity:.92}
.cta{padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:#141b22}
.cta.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b1116;font-weight:800;border:none}
.cta.active{box-shadow:0 0 0 2px rgba(155,177,230,.45) inset;background:#2b3541}

/* headings */
h1,h2,h3{line-height:1.2;margin:0 0 10px}
h1{font-size:clamp(28px,4vw,40px)}
h2{font-size:clamp(22px,3vw,28px)}
.muted{color:var(--muted)}
.lead{font-size:1.05rem;color:var(--muted)}
.mb-0{margin-bottom:0!important}
.mt-24{margin-top:24px}

/* keep hero CTAs aligned + remove any stray spacing */
.inline-form{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.inline-form > *{margin:0}

/* forms */
/*.inline-form{display:flex;gap:10px;flex-wrap:wrap}  */
input,textarea,select{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:#141b22;color:var(--text)
}
label{display:block;margin:8px 0 6px}
label>input[type="checkbox"]{vertical-align:middle;transform:translateY(1px)}
.notice{padding:12px;border-radius:12px;background:#151e26;border:1px solid var(--border)}

/* lists */
.list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.list.two-col{columns:2;column-gap:26px}
@media(max-width:900px){.list.two-col{columns:1}}
.list.bulleted li{position:relative;padding-left:14px}
.list.bulleted li::before{content:"•";position:absolute;left:0;top:0;color:var(--muted)}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}

/* tables */
table{width:100%;border-collapse:separate;border-spacing:0 10px}
th,td{padding:12px;background:#19212a;border:1px solid var(--border)}th{background:#1d2733}

/* language dropdown */
.langdd{position:relative}.langdd details{position:relative}
.langdd summary{
  list-style:none;cursor:pointer;padding:6px 12px;border-radius:999px;background:#2b3543;
  color:#f2f5f8;border:1px solid var(--border);font-weight:800
}
.langdd summary::-webkit-details-marker{display:none}
.langdd .menu{
  position:absolute;right:0;top:42px;min-width:120px;background:#0e151c;border:1px solid var(--border);
  border-radius:12px;padding:6px;display:grid;gap:6px
}
.langdd .menu a{padding:8px 10px;border-radius:8px;display:block;background:#141c24;color:#f2f5f8;border:1px solid var(--border)}
.langdd .menu a:hover{background:#1b2430}

/* admin slot grid */
.slots{display:flex;flex-wrap:wrap;gap:10px}
.slot{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#141b22;cursor:pointer}
.slot.free{background:#1a242e}
.slot.busy{background:#38282a;border-color:#6a3c3c;opacity:.65;cursor:not-allowed}
.slot.pref{outline:2px dashed var(--accent2)}

/* ---------- media rows: one image + one text ---------- */
.media-row{display:grid;gap:18px;align-items:center}
@media(min-width:900px){.media-row{grid-template-columns:1.15fr .85fr}}
@media(min-width:900px){.media-row.reverse{grid-template-columns:.85fr 1.15fr}}
.media-img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block;
  border:1px solid var(--border);box-shadow:0 6px 20px rgba(0,0,0,.18)
}
.media-body h2,.media-body h3{margin-top:0}

/* ---------- media collage (if used elsewhere) ---------- */
.media-fixed{display:grid;gap:12px}
.media-fixed .w16x9{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block}
.media-fixed .grid{gap:12px}
.media-fixed .grid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;display:block}

/* equal-height card grids */
.grid.equal { align-items: stretch; }
.grid.equal > .card { height: 100%; display: flex; flex-direction: column; }
.cards-rows { grid-auto-rows: 1fr; }

/* image helpers */
.img-round { border-radius:50%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--border); box-shadow:0 6px 20px rgba(0,0,0,.18); }
.img-frame { border-radius:14px; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--border); box-shadow:0 6px 20px rgba(0,0,0,.18); }
.media-caption { margin-top:8px; color:var(--muted); font-size:.92rem; }

/* centered resource links, no underline, hover color change */
.link-grid { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
a.badge { text-decoration:none; text-align:center; padding:6px 14px; border-radius:999px; border:1px solid var(--border); color:#e8eeff; background:#141b22; }
a.badge:hover { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0b1116; border-color:transparent; }