/* =========================================================
   Home Updates: News, Events, Notices, Downloads
   Bootstrap 4 compatible. Cohesive education-theme palette.
   ========================================================= */

:root {
    --hu-primary: #0d6efd;

    /* Cohesive brand-aligned palette (blue-led, education tone) */
    --hu-news: #1e3a8a;       /* deep navy */
    --hu-events: #0d6efd;     /* primary blue */
    --hu-notices: #0e7490;    /* teal/steel blue */
    --hu-downloads: #334e7b;  /* muted slate-blue */

    --hu-dark: #111827;
    --hu-text: #1f2937;
    --hu-muted: #6b7280;
    --hu-border: #e5e9f2;
    --hu-border-strong: #d6dde9;
    --hu-bg: #ffffff;
    --hu-bg-soft: #f7f9fc;
    --hu-shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --hu-shadow-md: 0 6px 18px rgba(16,24,40,.08);
    --hu-radius: 14px;
    --hu-radius-sm: 10px;
    --hu-radius-pill: 999px;
    --hu-transition: 180ms cubic-bezier(.2,.7,.3,1);

    /* Typography */
    --hu-font-sans: "Inter", "Segoe UI Variable", "Segoe UI", -apple-system,
                    BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
    --hu-font-display: "Inter", "Segoe UI Variable", "Segoe UI", -apple-system,
                       BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
    --hu-tracking-tight: -0.015em;
    --hu-tracking-tighter: -0.02em;
    --hu-tracking-wide: 0.02em;
    --hu-tracking-uppercase: 0.08em;
}

.hu-section {
    margin: 1rem 0 1.25rem;
    font-family: var(--hu-font-sans);
    color: var(--hu-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01", "kern";
}

.hu-section__header {
    text-align: center;
    margin-bottom: 1.1rem;
}

.hu-section__title {
    font-family: var(--hu-font-display);
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    font-weight: 700;
    color: var(--hu-dark);
    margin: 0 0 .35rem;
    letter-spacing: var(--hu-tracking-tighter);
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
}

.hu-section__title-icon {
    width: 32px; height: 32px; border-radius: 10px;
    /* Subtle brand gradient instead of multi-hue */
    background: linear-gradient(135deg, #1e3a8a, #0d6efd);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: .6rem;
    font-size: .9rem;
    box-shadow: var(--hu-shadow-sm);
}

.hu-section__subtitle {
    color: var(--hu-muted);
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* ---------- Card ---------- */
.hu-card {
    background: var(--hu-bg);
    border: 1px solid var(--hu-border);
    border-radius: var(--hu-radius);
    box-shadow: var(--hu-shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow var(--hu-transition), transform var(--hu-transition);
}

.hu-card:hover { box-shadow: var(--hu-shadow-md); }

.hu-card__header {
    display: flex;
    align-items: center;
    padding: .8rem .95rem;
    color: #fff;
    background: var(--hu-card-color, var(--hu-primary));
    background: linear-gradient(135deg, var(--hu-card-color, var(--hu-primary)), var(--hu-card-color-2, var(--hu-primary)));
}

/* Cohesive blue-family palette — all cards belong to the same brand */
.hu-card--news      { --hu-card-color: #1e3a8a; --hu-card-color-2: #2b4fb0; --hu-accent: #1e3a8a; }
.hu-card--events    { --hu-card-color: #0d6efd; --hu-card-color-2: #3b82f6; --hu-accent: #0d6efd; }
.hu-card--notices   { --hu-card-color: #0e7490; --hu-card-color-2: #1597b8; --hu-accent: #0e7490; }
.hu-card--downloads { --hu-card-color: #334e7b; --hu-card-color-2: #4a6aa0; --hu-accent: #334e7b; }

.hu-card__icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,.18);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    margin-right: .65rem;
    flex: 0 0 34px;
    font-size: .95rem;
}

.hu-card__header-content {
    display: flex; align-items: center; justify-content: space-between;
    flex: 1; min-width: 0;
}

.hu-card__title {
    font-family: var(--hu-font-display);
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
    line-height: 1.2;
    letter-spacing: var(--hu-tracking-tight);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hu-card__count {
    background: rgba(255,255,255,.22);
    color: #fff;
    border-radius: var(--hu-radius-pill);
    padding: .12rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    margin-left: .5rem;
    line-height: 1.45;
    letter-spacing: var(--hu-tracking-wide);
    font-variant-numeric: tabular-nums;
}

.hu-card__body {
    padding: .55rem .55rem .25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hu-card__footer {
    border-top: 1px solid var(--hu-border);
    padding: .6rem .9rem;
    background: var(--hu-bg-soft);
    text-align: center;
}

.hu-card__link {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: var(--hu-tracking-wide);
    color: var(--hu-accent, var(--hu-primary));
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: color var(--hu-transition), transform var(--hu-transition);
}

.hu-card__link i { margin-left: .35rem; transition: transform var(--hu-transition); font-size: .75rem; }
.hu-card__link:hover { color: var(--hu-card-color, var(--hu-primary)); }
.hu-card__link:hover i { transform: translateX(2px); }

.hu-card__link--disabled {
    color: var(--hu-muted) !important;
    pointer-events: none;
    opacity: .6;
}

.hu-card__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem .75rem;
    color: var(--hu-muted);
    text-align: center;
    flex: 1;
}

.hu-card__empty i {
    font-size: 1.7rem;
    margin-bottom: .45rem;
    color: var(--hu-border-strong);
}

.hu-card__empty span {
    font-size: .85rem;
    font-weight: 500;
}

/* ---------- Item ---------- */
.hu-item {
    display: block;
    padding: .6rem .7rem;
    margin: .25rem 0;
    border-radius: var(--hu-radius-sm);
    border: 1px solid transparent;
    color: var(--hu-text);
    text-decoration: none !important;
    transition: background var(--hu-transition), border-color var(--hu-transition), transform var(--hu-transition);
}

.hu-item:hover,
.hu-item:focus {
    background: var(--hu-bg-soft);
    border-color: var(--hu-border);
    color: var(--hu-text);
    outline: none;
}

.hu-item:focus-visible { box-shadow: 0 0 0 3px rgba(13,110,253,.25); }

.hu-item--no-hover { cursor: default; }
.hu-item--no-hover:hover { background: transparent; border-color: transparent; }

.hu-item--featured {
    /* Soft brand tint instead of multi-color gradient */
    background: linear-gradient(135deg, rgba(30,58,138,.05), rgba(13,110,253,.04));
    border-color: var(--hu-border);
    padding: .75rem .85rem;
    position: relative;
}

.hu-item--featured::before {
    content: "";
    position: absolute;
    left: 0; top: .55rem; bottom: .55rem;
    width: 3px;
    border-radius: 3px;
    background: var(--hu-accent, var(--hu-primary));
}

.hu-item__title {
    font-family: var(--hu-font-display);
    font-size: .92rem;
    font-weight: 600;
    color: var(--hu-dark);
    margin: 0 0 .3rem;
    line-height: 1.35;
    letter-spacing: var(--hu-tracking-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hu-item__title--lg {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--hu-tracking-tighter);
    -webkit-line-clamp: 2;
}

.hu-item__excerpt {
    color: #4b5563;
    font-size: .83rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 .4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hu-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -.15rem;
}

.hu-item__meta--secondary { margin-top: .3rem; }

.hu-item__meta-text,
.hu-item__meta-badge {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    color: var(--hu-muted);
    margin: .15rem;
    line-height: 1.25;
    letter-spacing: var(--hu-tracking-wide);
    max-width: 100%;
    font-variant-numeric: tabular-nums;
}

.hu-item__meta-text i,
.hu-item__meta-badge i { margin-right: .3rem; opacity: .85; }

.hu-item__meta-text {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hu-item__meta-badge {
    background: #eaf1fb;
    color: #1e3a8a;
    border-radius: var(--hu-radius-pill);
    padding: .18rem .55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--hu-tracking-uppercase);
    font-size: .68rem;
}

.hu-item__meta-badge--success { background: #e9f7ef; color: #146c43; }
.hu-item__meta-badge--muted   { background: #eef2f7; color: #374151; }

.hu-item__meta--with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.hu-item__meta-group {
    display: flex; flex-wrap: wrap; align-items: center;
    margin: 0 -.15rem;
}

/* Download buttons */
.hu-item__download-btn {
    display: inline-flex;
    align-items: center;
    margin-top: .55rem;
    padding: .4rem .8rem;
    background: var(--hu-accent, var(--hu-primary));
    color: #fff !important;
    border-radius: var(--hu-radius-pill);
    font-family: var(--hu-font-sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: var(--hu-tracking-wide);
    text-decoration: none !important;
    transition: filter var(--hu-transition), transform var(--hu-transition);
}
.hu-item__download-btn i { margin-right: .4rem; }
.hu-item__download-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

.hu-item__download-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hu-bg-soft);
    color: var(--hu-accent, var(--hu-primary)) !important;
    border: 1px solid var(--hu-border);
    text-decoration: none !important;
    flex: 0 0 32px;
    transition: background var(--hu-transition), color var(--hu-transition);
}

.hu-item__download-icon:hover {
    background: var(--hu-accent, var(--hu-primary));
    color: #fff !important;
}

.hu-item__download-icon--sm { width: 30px; height: 30px; }

/* ---------- Mobile variants ---------- */
.hu-card--mobile { border-radius: var(--hu-radius); }
.hu-card__header--mobile {
    padding: .7rem .8rem;
    align-items: center;
}
.hu-card__icon--sm { width: 28px; height: 28px; flex-basis: 28px; font-size: .8rem; }

.hu-card__body--mobile { padding: .4rem .5rem .25rem; }

.hu-item--mobile {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .55rem;
    padding: .6rem .65rem;
    border-bottom: 1px dashed var(--hu-border);
    border-radius: 0;
    margin: 0;
}
.hu-item--mobile:last-child { border-bottom: none; }
.hu-item--mobile:hover { background: var(--hu-bg-soft); }

.hu-item--mobile .hu-item__title {
    font-size: .9rem;
    font-weight: 600;
}

.hu-item__mobile-wrapper { min-width: 0; flex: 1; }
.hu-item__mobile-content { min-width: 0; flex: 1; }
.hu-item__mobile-action { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }

.hu-item__meta--mobile-secondary { margin-top: .25rem; }

.hu-card__footer--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: var(--hu-accent, var(--hu-primary));
    font-family: var(--hu-font-sans);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: var(--hu-tracking-wide);
    padding: .6rem .9rem;
}
.hu-card__footer--mobile i { margin-left: .4rem; transition: transform var(--hu-transition); font-size: .7rem; }
.hu-card__footer--mobile:hover i { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
    .hu-card, .hu-item, .hu-card__link, .hu-card__footer--mobile,
    .hu-item__download-btn, .hu-item__download-icon { transition: none; }
}