/* =========================================================
   public/lib/css/subjects-public.css
   Subjects module — page-level chrome ONLY
   - hero + crumbs + section titles + search row
   - no grid/card definitions here
   ========================================================= */

/* Module-scoped tokens (avoid colliding with ui.css tokens) */
:root{
  --sb-ink:#111;
  --sb-muted:#6c757d;
  --sb-line:rgba(0,0,0,.10);
  --sb-line-strong:rgba(0,0,0,.22);
  --sb-shadow:0 12px 28px rgba(0,0,0,.05);
  --sb-shadow-hover:0 18px 36px rgba(0,0,0,.08);
  --sb-radius-xl:20px;
  --sb-radius-lg:18px;
}

/* Light page polish. If you do NOT want this globally, move it to a wrapper later */
body{
  background: rgba(0,0,0,.015);
  color: var(--sb-ink);
}

/* Muted text helpers */
.mk-muted{ color: var(--sb-muted); }
/* NOTE: .muted is global from ui.css — do not override it here */

/* ---------------------------------------------------------
   Breadcrumbs: support legacy + mk
--------------------------------------------------------- */
.crumbs,
.mk-crumbs{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin: 0 0 12px;
  font-size: .95rem;
  color: var(--sb-muted);
}
.crumbs a,
.mk-crumbs a{
  text-decoration:none;
  color: inherit;
}
.crumbs a:hover,
.mk-crumbs a:hover{ text-decoration: underline; }
.crumbs .sep,
.mk-crumbs__sep{ opacity:.75; }

/* ---------------------------------------------------------
   Hero: support legacy + mk
--------------------------------------------------------- */
.hero,
.mk-hero{
  border:1px solid var(--sb-line);
  border-radius: var(--sb-radius-xl);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), #fff);
  box-shadow: 0 20px 55px rgba(0,0,0,.10);
  overflow:hidden;
  position:relative;
}
.hero-bar,
.mk-hero__bar{
  height:8px;
  background:#111;
  opacity:.88;
}
.hero-inner,
.mk-hero__inner{
  padding:22px 18px 18px;
}
.hero h1,
.mk-hero__title{
  margin:0 0 10px;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height:1.06;
  letter-spacing:-0.02em;
}
.hero p,
.mk-hero__subtitle{
  margin:0;
  max-width:88ch;
  line-height:1.75;
}
.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* ---------------------------------------------------------
   Section title row
--------------------------------------------------------- */
.section-title{
  margin:24px 0 10px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.section-title h2{
  margin:0;
  font-size:1.2rem;
}

/* ---------------------------------------------------------
   Search row
--------------------------------------------------------- */
.search-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.search-row input[type="search"]{
  flex: 1 1 260px;
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--sb-line);
  background:#fff;
  box-shadow: var(--sb-shadow);
}
.search-row input[type="search"]:focus{
  outline: none;
  border-color: var(--sb-line-strong);
}

/* Screen reader only (safe global helper) */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* === Enhanced styling added === */
.mk-subject-card__initial{display:flex!important;align-items:center!important;justify-content:center!important;width:64px!important;height:64px!important;border-radius:14px!important;font-size:1.6rem!important;font-weight:900!important;color:#fff!important;background:var(--accent,#2b6cb0)!important}
.mk-subject-card__logo{width:64px;height:64px;border-radius:14px;overflow:hidden;flex-shrink:0;background:var(--accent,#2b6cb0);display:flex;align-items:center;justify-content:center}
.mk-subject-card__logo>span{font-size:1.6rem;font-weight:900;color:#fff}
.mk-subject-card{border-radius:16px!important;transition:transform .14s,box-shadow .14s!important;border:1px solid rgba(0,0,0,.08)!important;overflow:hidden!important}
.mk-subject-card:hover{transform:translateY(-3px)!important;box-shadow:0 14px 36px rgba(0,0,0,.11)!important}
.mk-subject-card .mk-card__bar{background:var(--accent,#2b6cb0)!important;height:5px!important}
.mk-subject-card__top{display:flex;align-items:center;gap:14px}
.mk-subject-card__title{font-size:1rem!important;font-weight:800!important;color:#111!important;margin:0 0 4px!important;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.mk-subject-card__title .mk-pill{font-size:.72rem!important;opacity:.6!important;font-weight:600!important;background:rgba(0,0,0,.05)!important;color:#555!important;border-color:rgba(0,0,0,.08)!important}
.mk-subject-card__slug{font-size:.78rem!important;color:#888!important}
.mk-subject-card .mk-muted{font-size:.85rem!important;line-height:1.5!important;color:#555!important;margin-top:8px!important}
.mk-subject-card .mk-card__meta .mk-pill{background:rgba(0,0,0,.05)!important;color:var(--accent,#2b6cb0)!important;border:1px solid rgba(0,0,0,.08)!important;font-weight:700!important;font-size:.78rem!important;border-radius:999px!important;padding:3px 12px!important;transition:background .12s}
.mk-subject-card:hover .mk-card__meta .mk-pill{background:var(--accent,#2b6cb0)!important;color:#fff!important}
.mk-grid--subjects{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:14px!important}
.mk-hero__bar{background:linear-gradient(90deg,#1a2744,#2b6cb0,#1f7a8c)!important;height:5px!important;opacity:1!important}
@media(max-width:480px){.mk-grid--subjects{grid-template-columns:1fr 1fr!important;gap:10px!important}.mk-subject-card__logo{width:48px!important;height:48px!important}}