/* =====================================================================
   HUB.CSS — the "Rangkuman Kuliah" landing page
   Loads on top of lecture.css so the hub shares the exact same vellum/
   parchment theme, fonts, topbar and hero as every material page. This
   file only adds the semester-board grid + subject-list components.
   ===================================================================== */

/* per-subject accent colors — must match each page's own
   body[data-subject] accent in lecture.css exactly, so the little dot
   on the hub always matches the color the reader will see once they
   open that page. */
:root {
    --acc-lughah: #5B3A6B;   /* data-subject="lughah" — Al Madeenah Language 1 (ARB 101) */
    --acc-arb: #A9822E;      /* data-subject="arb" — Al Madinah Language (ARB 102) */
    --acc-tafseer: #2D7A45;
    --acc-sirah: #52B788;
    --acc-aqeedah: #1B4F72;
    --acc-fiqh: #7B3131;
    --acc-general: #8C5B12;
}

/* ---------- hero meta row ---------- */
.hero-meta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; position: relative; }
.hero-meta span {
    font-family: 'Inter', sans-serif; font-size: .78rem; color: #CBD3E8;
    border: 1px solid rgba(216,196,138,.3); padding: 5px 12px; border-radius: 20px;
}
.hero-meta i { color: var(--dark-gold); margin-right: 5px; }

/* ---------- semester board: columns side by side, separated ---------- */
.semester-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 36px 0 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--shadow);
}
.semester-col {
    padding: 22px 18px 26px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}
.semester-col:last-child { border-right: none; }

.semester-head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.semester-badge {
    font-family: 'Amiri', serif; font-size: .8rem; letter-spacing: 1px;
    color: var(--gold-deep); display: block; margin-bottom: 4px; font-weight: 700;
}
.semester-count { font-size: .74rem; color: var(--ink-mute); font-family: 'Inter', sans-serif; }

.subject-block { margin-bottom: 18px; }
.subject-block:last-child { margin-bottom: 0; }
.subject-name {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}
.subject-name .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.doc-link {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; margin-bottom: 6px; border-radius: 8px;
    background: var(--vellum); border: 1px solid var(--border); border-left: 3px solid var(--doc-accent, var(--gold));
    text-decoration: none; color: var(--ink-soft); font-size: .78rem; transition: all .2s ease;
    font-family: 'Inter', sans-serif;
}
.doc-link:hover { color: var(--ink); background: var(--vellum-deep); transform: translateX(2px); }
.doc-link i { color: var(--doc-accent, var(--gold)); font-size: .72rem; flex-shrink: 0; }
.doc-link span { flex: 1; }

.doc-soon {
    padding: 8px 10px; border-radius: 8px; font-size: .76rem; color: var(--ink-mute);
    background: rgba(0,0,0,.02); border: 1px dashed var(--border);
    font-family: 'Inter', sans-serif;
}

@media (max-width: 900px) {
    .semester-board { grid-template-columns: repeat(2, 1fr); }
    .semester-col:nth-child(2) { border-right: none; }
    .semester-col:nth-child(1), .semester-col:nth-child(2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px) {
    .semester-board { grid-template-columns: 1fr; }
    .semester-col { border-right: none !important; border-bottom: 1px solid var(--border); }
    .semester-col:last-child { border-bottom: none; }
}