/* =========================================================
   Subject landing page (overview + grouped dropdown index)
   ========================================================= */

.mk-subject-hero{
  display:flex;
  gap:14px;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
}
.mk-subject-hero__left{
  display:flex;
  gap:12px;
  align-items:flex-end;
  min-width:240px;
}
.mk-subject-hero__icon{
  width:72px;
  height:72px;
  border-radius:16px;
  object-fit:cover;
  display:block;
}
.mk-subject-hero__text{ min-width: 200px; }
.mk-subject-hero__right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.mk-subject-landing{ margin-top: 14px; display:grid; gap:14px; }
.mk-subject-intro__title{ margin:0; font-size:1.05rem; font-weight:900; }
.mk-subject-intro__text{ margin:8px 0 0; line-height:1.75; max-width: 92ch; }

.mk-attachments { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.mk-attachments-title { margin: 0 0 10px; font-size: 1.05rem; }
.mk-attach-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mk-attach-link { display: inline-flex; gap: 8px; align-items: center; }

.mk-pages-index__head{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
}
.mk-pages-index__title{ margin:0; font-weight:900; }
.mk-pages-index__tools{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.mk-pages-search{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: min(520px, 100%);
}
.mk-pages-search__label{
  font-size:.9rem;
  font-weight:800;
  opacity:.9;
}
.mk-pages-search__input{
  width:100%;
}
.mk-pages-clear{ height: 42px; }

.mk-pages-index__hint{ margin: 12px 0 0; font-size: .92rem; }

.mk-ddlist{ margin-top: 14px; display:grid; gap:10px; }

/* details/summary dropdown */
.mk-dd{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow:hidden;
}
.mk-dd__summary{
  cursor:pointer;
  list-style:none;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  user-select:none;
}
.mk-dd__summary::-webkit-details-marker{ display:none; }
.mk-dd__title{ font-weight: 900; }
.mk-dd__count{
  font-weight:900;
  border:1px solid var(--border);
  background: rgba(0,0,0,.03);
  padding: 4px 10px;
  border-radius: 999px;
}

.mk-dd[open] .mk-dd__summary{
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.02);
}

.mk-dd__items{
  margin:0;
  padding: 10px 12px 12px;
  list-style:none;
  display:grid;
  gap:10px;
}

.mk-dd__item{
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.35);
}
.mk-dd__link{
  display:flex;
  flex-direction:column;
  gap:3px;
  text-decoration:none;
}
.mk-dd__linktitle{ font-weight: 900; }
.mk-dd__slug{ font-size:.9rem; opacity:.75; }

.mk-dd__meta{
  margin-top: 8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.mk-dd__excerpt{
  flex: 1 1 260px;
  min-width: 220px;
  font-size: .92rem;
  opacity: .9;
  line-height: 1.45;
}

/* soft pill variant (in case ui.css has only one pill style) */
.mk-pill--soft{
  background: rgba(0,0,0,.03);
  border: 1px solid var(--border);
}

/* =========================================================
   SUBJECTS GRID — 4-column layout
   ========================================================= */
.mk-grid--subjects {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1024px) {
  .mk-grid--subjects { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .mk-grid--subjects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mk-grid--subjects { grid-template-columns: 1fr; }
}
.mk-subject-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  background: var(--card, #fff);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  transition: transform .12s, box-shadow .12s, border-color .12s;
  display: flex;
  flex-direction: column;
}
.mk-subject-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.18);
}
.mk-card__bar {
  height: 6px;
  background: var(--accent, #0d6efd);
  opacity: 1;
}
.mk-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mk-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.mk-subject-card__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mk-subject-card__logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
  background: rgba(0,0,0,.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1rem;
  flex: 0 0 auto;
  color: var(--fg, #1f2933);
}
.mk-subject-card__titlewrap { min-width: 0; }
.mk-subject-card__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}
.mk-subject-card__slug {
  font-size: .8rem;
  color: var(--muted, #6b7280);
}
.mk-card__meta {
  margin-top: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mk-pill {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted, #6b7280);
  background: #fff;
}

/* spacing fix */
.subjects-page { padding: 24px 16px 48px; max-width: 1200px; margin: 0 auto; }
.mk-grid--subjects { gap: 20px; margin-top: 20px; }
.mk-subject-card { margin: 0; }
.mk-hero { margin-bottom: 8px; }
.mk-hero__inner { padding: 24px 20px 20px; }

/* page breathing room */
.subjects-page {
  padding: 0 16px 48px;
  max-width: 1200px;
  margin: 0 auto;
}
.mk-hero {
  margin-top: 20px;
}

/* prominent top nav links */
.subjects-page ~ * a[href*="/subjects/"],
.subjects-page ~ * a[href*="/platforms/"],
.subjects-page ~ * a[href*="/contributors/"],
.subjects-page ~ * a[href*="/igbo-calendar/"] {
  font-weight: 700 !important;
}

/* ── Subject inner pages: 4-col page grid ── */
.mk-grid.subjects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1024px) { .mk-grid.subjects-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px)  { .mk-grid.subjects-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px)  { .mk-grid.subjects-grid { grid-template-columns: 1fr; } }

.subjects-grid__item {
  border: 1px solid var(--border,#e5e7eb);
  border-radius: 14px;
  background: var(--card,#fff);
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  transition: transform .12s, box-shadow .12s, border-color .12s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.subjects-grid__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.16);
}
.subjects-grid__item .mk-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.subjects-grid__item .mk-h3 {
  margin: 0 0 4px;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.2;
}
.subjects-grid__item .mk-card__meta {
  margin-top: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mk-section { margin-top: 24px; }
.mk-section > .mk-card__body { padding: 0; }
.container.mk-page { max-width: 1200px; padding: 0 16px 48px; }
ENDCSScat >> /home/mkomigbo/public_html/assets/css/subjects.css << 'ENDCSS'

/* ── Subject inner pages: 4-col page grid ── */
.mk-grid.subjects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1024px) { .mk-grid.subjects-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px)  { .mk-grid.subjects-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px)  { .mk-grid.subjects-grid { grid-template-columns: 1fr; } }

.subjects-grid__item {
  border: 1px solid var(--border,#e5e7eb);
  border-radius: 14px;
  background: var(--card,#fff);
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  transition: transform .12s, box-shadow .12s, border-color .12s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.subjects-grid__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.16);
}
.subjects-grid__item .mk-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.subjects-grid__item .mk-h3 {
  margin: 0 0 4px;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.2;
}
.subjects-grid__item .mk-card__meta {
  margin-top: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mk-section { margin-top: 24px; }
.mk-section > .mk-card__body { padding: 0; }
.container.mk-page { max-width: 1200px; padding: 0 16px 48px; }

/* per-subject card color accents */
.mk-subject-card[data-slug="history"]     .mk-card__bar { background: #f0c060; }
.mk-subject-card[data-slug="slavery"]     .mk-card__bar { background: #ff7070; }
.mk-subject-card[data-slug="people"]      .mk-card__bar { background: #60d890; }
.mk-subject-card[data-slug="persons"]     .mk-card__bar { background: #a090ff; }
.mk-subject-card[data-slug="culture"]     .mk-card__bar { background: #e080e0; }
.mk-subject-card[data-slug="religion"]    .mk-card__bar { background: #ffd040; }
.mk-subject-card[data-slug="spirituality"].mk-card__bar { background: #40c0ff; }
.mk-subject-card[data-slug="tradition"]   .mk-card__bar { background: #ffaa30; }
.mk-subject-card[data-slug="language1"]   .mk-card__bar { background: #30d0e0; }
.mk-subject-card[data-slug="language2"]   .mk-card__bar { background: #40e890; }
.mk-subject-card[data-slug="struggles"]   .mk-card__bar { background: #ff8030; }
.mk-subject-card[data-slug="biafra"]      .mk-card__bar { background: #50e850; }
.mk-subject-card[data-slug="nigeria"]     .mk-card__bar { background: #30c040; }
.mk-subject-card[data-slug="resistance"]  .mk-card__bar { background: #ff4040; }
.mk-subject-card[data-slug="africa"]      .mk-card__bar { background: #ffb030; }
.mk-subject-card[data-slug="uk"]          .mk-card__bar { background: #5080ff; }
.mk-subject-card[data-slug="europe"]      .mk-card__bar { background: #8090e0; }
.mk-subject-card[data-slug="arabs"]       .mk-card__bar { background: #e0c040; }
.mk-subject-card[data-slug="about"]       .mk-card__bar { background: #c0c0c0; }

/* per-subject logo background colors */
.mk-subject-card[data-slug="history"]     .mk-subject-card__logo { background: #1a2744; color: #f0c060; border-color: #f0c060; }
.mk-subject-card[data-slug="slavery"]     .mk-subject-card__logo { background: #2d0f0f; color: #ff7070; border-color: #ff7070; }
.mk-subject-card[data-slug="people"]      .mk-subject-card__logo { background: #0f2d1a; color: #60d890; border-color: #60d890; }
.mk-subject-card[data-slug="persons"]     .mk-subject-card__logo { background: #1a1040; color: #a090ff; border-color: #a090ff; }
.mk-subject-card[data-slug="culture"]     .mk-subject-card__logo { background: #2d0f2d; color: #e080e0; border-color: #e080e0; }
.mk-subject-card[data-slug="religion"]    .mk-subject-card__logo { background: #1a1500; color: #ffd040; border-color: #ffd040; }
.mk-subject-card[data-slug="spirituality"].mk-subject-card__logo { background: #001a2d; color: #40c0ff; border-color: #40c0ff; }
.mk-subject-card[data-slug="tradition"]   .mk-subject-card__logo { background: #2d1f00; color: #ffaa30; border-color: #ffaa30; }
.mk-subject-card[data-slug="language1"]   .mk-subject-card__logo { background: #001f2d; color: #30d0e0; border-color: #30d0e0; }
.mk-subject-card[data-slug="language2"]   .mk-subject-card__logo { background: #002d14; color: #40e890; border-color: #40e890; }
.mk-subject-card[data-slug="struggles"]   .mk-subject-card__logo { background: #2d1400; color: #ff8030; border-color: #ff8030; }
.mk-subject-card[data-slug="biafra"]      .mk-subject-card__logo { background: #002d00; color: #50e850; border-color: #50e850; }
.mk-subject-card[data-slug="nigeria"]     .mk-subject-card__logo { background: #001a00; color: #30c040; border-color: #30c040; }
.mk-subject-card[data-slug="resistance"]  .mk-subject-card__logo { background: #2d0000; color: #ff4040; border-color: #ff4040; }
.mk-subject-card[data-slug="africa"]      .mk-subject-card__logo { background: #1a1000; color: #ffb030; border-color: #ffb030; }
.mk-subject-card[data-slug="uk"]          .mk-subject-card__logo { background: #00001f; color: #5080ff; border-color: #5080ff; }
.mk-subject-card[data-slug="europe"]      .mk-subject-card__logo { background: #05051f; color: #8090e0; border-color: #8090e0; }
.mk-subject-card[data-slug="arabs"]       .mk-subject-card__logo { background: #1f1a00; color: #e0c040; border-color: #e0c040; }
.mk-subject-card[data-slug="about"]       .mk-subject-card__logo { background: #101010; color: #c0c0c0; border-color: #c0c0c0; }

/* force bar visibility */
.mk-subject-card {
  overflow: hidden;
  position: relative;
}
.mk-subject-card .mk-card__bar {
  height: 8px !important;
  background: var(--accent, #0d6efd) !important;
  opacity: 1 !important;
  display: block !important;
  width: 100% !important;
  min-height: 8px !important;
}

.mk-subject-card .mk-subject-card__logo {
  background: color-mix(in srgb, var(--accent, #0d6efd) 20%, #fff) !important;
  border-color: var(--accent, #0d6efd) !important;
  color: var(--accent, #0d6efd) !important;
}

/* ── More pages grid ── */
.mk-grid--more-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.mk-more-card {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: var(--card, #fff);
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  transition: transform .12s, box-shadow .12s, border-color .12s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mk-more-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.09);
  border-color: rgba(0,0,0,.15);
}
.mk-more-card .mk-card__bar {
  height: 4px;
  background: var(--brand, #0d6efd);
  opacity: .7;
}
.mk-more-card .mk-card__body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.mk-more-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mk-more-card__badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(13,110,253,.08);
  border: 1px solid rgba(13,110,253,.15);
  color: var(--brand, #0d6efd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: .85rem;
  flex: 0 0 auto;
}
.mk-more-card__title {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
}
.mk-more-card__slug {
  font-size: .75rem;
  color: var(--muted, #6b7280);
  margin-left: 42px;
}

/* ── Subject landing page: outer breathing room ── */
.container.mk-page {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 56px;
}
.mk-subject-landing {
  padding-left: 4px;
  padding-right: 4px;
}
.mk-hero.mk-hero--compact {
  margin-top: 20px;
}
.mk-crumbs {
  margin-top: 16px;
  margin-bottom: 4px;
}

/* ── Core pages and More pages cards: internal padding ── */
.subjects-grid__item .mk-card__body {
  padding: 20px 18px !important;
  gap: 10px;
}
.mk-more-card .mk-card__body {
  padding: 18px 16px !important;
  gap: 6px;
}

/* ── Outer card padding: Core pages and More pages sections ── */
.mk-section > .mk-card__body {
  padding: 20px !important;
}
.mk-section-head {
  margin-bottom: 14px;
}