:root {
    --primary: #061221;
    --accent: #00d4ff;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-dim: #94a3b8;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--primary); color: #fff; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; margin: 0; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { -webkit-tap-highlight-color: transparent; }

/* reveal animation (falls back to visible if JS/GSAP fails) */
.gsap-reveal { opacity: 0; transform: translateY(30px); }
.no-js .gsap-reveal, .reveal-fallback .gsap-reveal { opacity: 1 !important; transform: none !important; }

/* ---------- HERO ---------- */
.academics-hero {
    padding: clamp(90px, 14vw, 120px) 6% clamp(24px, 5vw, 60px);
    background: linear-gradient(to bottom, rgba(0, 212, 255, 0.05), transparent);
    text-align: center;
}
.academics-hero .eyebrow { letter-spacing: 3px; font-weight: 800; color: var(--accent); font-size: clamp(.7rem, 2.6vw, .9rem); }
.academics-hero h1 { font-size: clamp(2rem, 7vw, 3.5rem); margin: 10px 0; line-height: 1.15; overflow-wrap: anywhere; }
.academics-hero p.lead { color: var(--text-dim); max-width: 640px; margin: 10px auto 0; line-height: 1.6; font-size: clamp(.9rem, 2.6vw, 1.05rem); }

/* ---------- GRID: 3 → 2 → 1 ---------- */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    padding: 40px 6%;
    max-width: 1400px;
    margin: 0 auto;
}

.resource-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 28px;
    transition: border-color .4s, background .4s, transform .4s;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}
@media (hover: hover) {
    .resource-card:hover { border-color: var(--accent); background: rgba(255,255,255,.06); transform: translateY(-8px); }
}
.resource-card:focus-within { border-color: var(--accent); }

.file-icon-box { font-size: 2.5rem; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
.file-badge { font-size: .65rem; letter-spacing: 1px; font-weight: 800; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--glass-border); color: var(--text-dim); text-transform: uppercase; }
.icon-pdf { color: #ff4d4d; }
.icon-pptx { color: #3b82f6; }

.res-date { font-size: .75rem; color: var(--accent); letter-spacing: 1px; margin-bottom: 8px; display: block; }
.res-title { font-size: 1.2rem; line-height: 1.35; margin: 0 0 12px; min-height: 3.2rem; }
.res-title a { color: inherit; text-decoration: none; }
.res-title a:hover, .res-title a:focus-visible { color: var(--accent); }

.res-desc { font-size: .92rem; color: var(--text-dim); line-height: 1.6; flex-grow: 1; margin: 0; }
.res-desc.collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.read-more-btn {
    background: transparent; border: none; color: var(--accent); cursor: pointer;
    padding: 10px 0 14px; min-height: 44px; font-weight: 700; font-size: .8rem;
    text-align: left; text-transform: uppercase; align-self: flex-start;
}
.read-more-btn[hidden] { display: none; }
.res-desc:not(.is-clamped-check) + .read-more-btn { margin-top: 4px; }

.res-footer {
    border-top: 1px solid var(--glass-border); padding-top: 18px; margin-top: auto;
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .85rem;
}
.res-footer .by { min-width: 0; flex: 1 1 120px; }
.res-actions { display: flex; gap: 8px; }

.download-btn, .view-btn {
    background: rgba(0, 212, 255, .1); color: var(--accent); text-decoration: none;
    min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .3s;
}
.download-btn:hover, .view-btn:hover, .download-btn:focus-visible, .view-btn:focus-visible { background: var(--accent); color: var(--primary); }

.empty-note { text-align: center; grid-column: 1 / -1; color: var(--text-dim); padding: 40px 0; }

/* ---------- DETAIL PAGE ---------- */
.detail-wrap { max-width: 860px; margin: 0 auto; padding: clamp(90px, 14vw, 120px) 6% 40px; }
.breadcrumb { font-size: .8rem; color: var(--text-dim); margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.detail-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; padding: clamp(20px, 5vw, 44px); overflow-wrap: anywhere; }
.detail-card h1 { font-size: clamp(1.6rem, 5.5vw, 2.5rem); line-height: 1.2; margin: 8px 0 18px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--text-dim); font-size: .85rem; margin-bottom: 24px; }
.detail-meta strong { color: #fff; }
.detail-desc { color: #cbd5e1; line-height: 1.8; font-size: clamp(.95rem, 2.6vw, 1.05rem); white-space: pre-line; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.detail-actions .download-btn { padding: 0 26px; background: var(--accent); color: var(--primary); }
.detail-actions .download-btn:hover { background: #fff; }
.related { max-width: 1400px; margin: 0 auto; padding: 10px 0 0; }
.related h2 { font-size: 1.2rem; margin: 40px 6% 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px 5%; }
}
@media (max-width: 640px) {
    .resource-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 5% 40px; }
    .resource-card { padding: 22px 20px; border-radius: 16px; }
    .res-title { min-height: 0; font-size: 1.12rem; }
    .res-footer { flex-direction: row; }
    .detail-actions a { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .gsap-reveal { opacity: 1; transform: none; }
    .resource-card, .download-btn { transition: none; }
}