/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --cd-blue:    #01329C;
    --cd-blue-lt: #e8eef9;
    --cd-gold:    #D3AC35;
    --cd-gold-lt: #fdf6e0;
    --cd-teal:    #0e7490;
    --cd-teal-lt: #e0f5f8;
    --cd-violet:  #6d28d9;
    --cd-violet-lt:#ede9fe;
    --cd-amber:   #b45309;
    --cd-amber-lt:#fef3c7;
    --cd-rose:    #be123c;
    --cd-rose-lt: #ffe4ec;
    --cd-green:   #166534;
    --cd-green-lt:#dcfce7;
    --cd-slate:   #475569;
    --cd-slate-lt:#f1f5f9;
    --cd-ink:     #0a1628;
}

/* ── Base ─────────────────────────────────────────────────── */
.fedomu-cd {
    background: oklch(97% 0.01 240);
    padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
}
.fedomu-cd__inner { max-width: 1280px; margin: 0 auto; }

/* ── Intro banner ──────────────────────────────────────────── */
.fedomu-cd__intro {
    background: var(--cd-ink);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    margin-bottom: 4rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
.fedomu-cd__intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(1,50,156,0.45) 0%, transparent 70%);
    pointer-events: none;
}
.fedomu-cd__intro-badge {
    background: var(--cd-gold);
    color: var(--cd-ink);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}
.fedomu-cd__intro-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
    margin: 0;
    position: relative;
}
.fedomu-cd__intro-text strong { color: #fff; }

/* ── Section wrapper ───────────────────────────────────────── */
.fedomu-cd__section { margin-bottom: 3.5rem; }
.fedomu-cd__section-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, var(--cd-section-color, var(--cd-blue)) 0%, transparent 100%) 1;
}
.fedomu-cd__section-icon {
    width: 38px; height: 38px;
    border-radius: 9px;
    background: var(--cd-section-color, var(--cd-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--cd-section-color, var(--cd-blue)) 40%, transparent);
}
.fedomu-cd__section-title {
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cd-section-color, var(--cd-blue));
    margin: 0;
}
.fedomu-cd__section-count {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(10,10,10,0.3);
    background: rgba(10,10,10,0.05);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

/* ── Grids ─────────────────────────────────────────────────── */
.fedomu-cd__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.fedomu-cd__grid--wide  { grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); }
.fedomu-cd__grid--hero  { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }

/* ── Base card ─────────────────────────────────────────────── */
.fedomu-cd__card {
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.375rem;
    border: 1.5px solid rgba(10,10,10,0.05);
    transition: box-shadow 0.25s, transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.fedomu-cd__card:hover {
    border-color: color-mix(in srgb, var(--cd-section-color, var(--cd-blue)) 25%, transparent);
    box-shadow: 0 8px 28px -8px color-mix(in srgb, var(--cd-section-color, var(--cd-blue)) 22%, transparent);
    transform: translateY(-2px);
}

/* Card Avatar (initial circle) */
.fedomu-cd__avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cd-section-color, var(--cd-blue)) 12%, transparent);
    color: var(--cd-section-color, var(--cd-blue));
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    letter-spacing: 0;
    border: 2px solid color-mix(in srgb, var(--cd-section-color, var(--cd-blue)) 20%, transparent);
    margin-bottom: 0.25rem;
}

.fedomu-cd__card-role {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cd-section-color, var(--cd-blue));
    margin: 0;
    line-height: 1.3;
}
.fedomu-cd__card-name {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cd-ink);
    margin: 0;
    line-height: 1.25;
}

/* Municipality badge */
.fedomu-cd__muni {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 11px;
    font-weight: 600;
    color: rgba(10,22,40,0.55);
    background: color-mix(in srgb, var(--cd-section-color, var(--cd-blue)) 7%, transparent);
    padding: 0.2rem 0.625rem 0.2rem 0.4rem;
    border-radius: 999px;
    width: fit-content;
    margin-top: auto;
}
.fedomu-cd__muni svg { flex-shrink: 0; color: var(--cd-section-color, var(--cd-blue)); opacity: 0.7; }

/* ── Featured (dark) card ──────────────────────────────────── */
.fedomu-cd__card--featured {
    background: var(--cd-ink);
    border-color: transparent;
}
.fedomu-cd__card--featured:hover {
    border-color: var(--cd-gold);
    box-shadow: 0 12px 36px -6px rgba(0,0,0,0.4);
}
.fedomu-cd__card--featured .fedomu-cd__avatar {
    background: rgba(211,172,53,0.15);
    border-color: rgba(211,172,53,0.25);
    color: var(--cd-gold);
    width: 52px; height: 52px;
    font-size: 1.25rem;
}
.fedomu-cd__card--featured .fedomu-cd__card-role { color: var(--cd-gold); }
.fedomu-cd__card--featured .fedomu-cd__card-name { color: #fff; font-size: 1.25rem; }
.fedomu-cd__card--featured .fedomu-cd__muni {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}
.fedomu-cd__card--featured .fedomu-cd__muni svg { color: var(--cd-gold); }

/* ── Past presidents (muted) ───────────────────────────────── */
.fedomu-cd__card--past { background: oklch(96% 0.005 240); }
.fedomu-cd__card--past .fedomu-cd__card-role { color: var(--cd-slate); }
.fedomu-cd__card--past .fedomu-cd__avatar {
    background: rgba(71,85,105,0.1);
    border-color: rgba(71,85,105,0.15);
    color: var(--cd-slate);
}

/* Responsive */
@media (max-width: 768px) {
    .fedomu-cd__intro { padding: 1.5rem; }
    .fedomu-cd__grid,
    .fedomu-cd__grid--wide,
    .fedomu-cd__grid--hero { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .fedomu-cd__grid,
    .fedomu-cd__grid--wide,
    .fedomu-cd__grid--hero { grid-template-columns: 1fr; }
}