/* AFDES Civic Academy — Congressional Districts */
.aca-districts-module {
    --district-blue: #0d789f;
    --district-a: #84c9dc;
    --district-b: #a9b8d7;
    --district-c: #d8b86a;
    --district-d: #86b69b;
}

.aca-districts-module .aca-district-us-svg,
.aca-districts-module .aca-district-tab-svg,
.aca-districts-module .aca-district-key-svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
}

.aca-districts-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 72px;
    background:
        radial-gradient(circle at 84% 16%, rgba(13,120,159,.09), transparent 23%),
        radial-gradient(circle at 72% 64%, rgba(216,184,106,.11), transparent 18%),
        linear-gradient(180deg,#fff 0%,#fbfdfe 100%);
}
.aca-districts-hero::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -160px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid rgba(13,120,159,.06);
    box-shadow:
        0 0 0 54px rgba(13,120,159,.016),
        0 0 0 110px rgba(13,120,159,.009);
    pointer-events: none;
}
.aca-districts-hero::after {
    content: "";
    position: absolute;
    right: 10%;
    bottom: 10%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(132,201,220,.18) 0%, rgba(132,201,220,.06) 38%, rgba(132,201,220,0) 70%);
    filter: blur(4px);
    pointer-events: none;
}
.aca-districts-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(390px,.96fr); gap: clamp(42px,7vw,92px); align-items: center; }
.aca-districts-hero h1 { margin: 12px 0 18px; color: var(--academy-navy); font-family: Georgia,"Times New Roman",serif; font-size: clamp(2.7rem,6vw,5rem); letter-spacing: -.05em; line-height: .98; }
.aca-districts-hero p { max-width: 790px; margin: 0; color: #536879; font-size: 1.1rem; line-height: 1.72; }
.aca-districts-hero .academy-btn { margin-top: 28px; }

.aca-districts-hero-art {
    position: relative;
    display: grid;
    min-height: 360px;
    align-content: center;
    padding: 34px 22px 30px;
    border-top: 1px solid rgba(11,36,55,.08);
    border-bottom: 1px solid rgba(11,36,55,.08);
}
.aca-district-hero-kicker {
    position: absolute;
    top: 18px;
    left: 22px;
    color: #8a9aa7;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.aca-district-hero-route {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr);
    gap: 10px;
    align-items: center;
}
.aca-district-hero-route article {
    display: grid;
    min-width: 0;
    justify-items: center;
    text-align: center;
}
.aca-district-hero-route article > span {
    display: grid;
    width: clamp(62px,7vw,88px);
    height: clamp(62px,7vw,88px);
    place-items: center;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(13,120,159,.06);
    color: var(--district-blue);
}
.aca-district-hero-route article.is-center > span {
    background: rgba(11,36,55,.055);
    color: var(--academy-navy);
    box-shadow: 0 0 0 9px rgba(13,120,159,.025);
}
.aca-district-hero-svg { display:block; width:64%; height:64%; fill:currentColor; stroke:currentColor; }
.aca-district-hero-route article small {
    color: #9aa8b4;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.aca-district-hero-route article strong {
    margin-top: 4px;
    color: var(--academy-navy);
    font-family: Georgia,"Times New Roman",serif;
    font-size: 1rem;
}
.aca-district-hero-route article em {
    margin-top: 5px;
    color: #758795;
    font-size: .67rem;
    font-style: normal;
    line-height: 1.35;
}
.aca-district-hero-route > i {
    color: #a9bac5;
    font-style: normal;
    text-align: center;
}
.aca-district-equality {
    display: grid;
    max-width: 440px;
    gap: 9px;
    justify-self: center;
    margin-top: 34px;
    text-align: center;
}
.aca-district-equality > span {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
}
.aca-district-equality b {
    height: 8px;
    border-radius: 999px;
    background: rgba(13,120,159,.18);
}
.aca-district-equality b:nth-child(2) { background: rgba(13,120,159,.28); }
.aca-district-equality b:nth-child(3) { background: rgba(13,120,159,.38); }
.aca-district-equality b:nth-child(4) { background: rgba(13,120,159,.48); }
.aca-district-equality small { color:#758795; font-size:.67rem; line-height:1.45; }

.aca-district-experience { padding-top: 42px; padding-bottom: 70px; }
.aca-district-heading { display: flex; gap: 36px; align-items: end; justify-content: space-between; }
.aca-district-heading h2 { margin: 7px 0 10px; color: var(--academy-navy); font-family: Georgia,"Times New Roman",serif; font-size: clamp(2rem,3.5vw,3rem); letter-spacing: -.04em; }
.aca-district-heading p { max-width: 800px; margin: 0; color: #607283; line-height: 1.7; }
.aca-district-stage-readout { display: grid; justify-items: end; min-width: 110px; }
.aca-district-stage-readout small { color: #7e8e9c; font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.aca-district-stage-readout strong { color: var(--academy-navy); font-family: Georgia,"Times New Roman",serif; font-size: 1.9rem; }

.aca-district-tabs { display: grid; grid-template-columns: repeat(5,1fr); margin-top: 30px; border-top: 1px solid var(--academy-border); border-bottom: 1px solid var(--academy-border); }
.aca-district-tab { position: relative; display: grid; min-height: 112px; grid-template-columns: 40px 1fr; gap: 5px 10px; align-content: center; align-items: center; border: 0; border-right: 1px solid var(--academy-border); background: transparent; color: #7f909e; cursor: pointer; font: inherit; text-align: left; transition: .2s ease; padding: 14px; }
.aca-district-tab:last-child { border-right: 0; }
.aca-district-tab:hover, .aca-district-tab.is-active { background: linear-gradient(180deg, rgba(13,120,159,.055), rgba(13,120,159,.025)); color: var(--district-blue); }
.aca-district-tab > span { grid-row: 1 / 3; width: 38px; height: 38px; }
.aca-district-tab small { color: #9aa8b4; font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.aca-district-tab b { color: var(--academy-navy); font-family: Georgia,"Times New Roman",serif; font-size: .8rem; }

.aca-district-workspace { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(330px,.92fr); gap: clamp(36px,6vw,76px); margin-top: 38px; }
.aca-district-board { min-width: 0; padding: 24px; border: 1px solid rgba(11,36,55,.08); border-radius: 24px; background: linear-gradient(180deg,#fff,#fcfdfe); box-shadow: 0 18px 46px rgba(15,23,42,.045); }
.aca-district-board-title { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 13px; border-bottom: 1px solid var(--academy-border); align-items: baseline; }
.aca-district-board-title strong { color: var(--academy-navy); font-family: Georgia,"Times New Roman",serif; }
.aca-district-board-title span { max-width: 520px; color: #748696; font-size: .75rem; text-align: right; }
.aca-district-cell-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; margin-top: 12px; }
.aca-district-cell { position: relative; display: grid; min-height: 72px; place-items: center; border: 1px solid #dae3e9; background: #fbfcfd; transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.aca-district-cell > b { position: absolute; right: 5px; bottom: 3px; color: #a1aeb8; font-size: .52rem; }
.aca-pop-dots { display: flex; max-width: 38px; flex-wrap: wrap; gap: 3px; justify-content: center; }
.aca-pop-dots i { width: 5px; height: 5px; border-radius: 50%; background: #8da2b1; }

.aca-district-board[data-stage="1"] .aca-district-cell { background: #f2f7fa; }
.aca-district-board[data-stage="1"] .aca-district-cell:nth-child(1)::after,
.aca-district-board[data-stage="1"] .aca-district-cell:nth-child(7)::after,
.aca-district-board[data-stage="1"] .aca-district-cell:nth-child(13)::after,
.aca-district-board[data-stage="1"] .aca-district-cell:nth-child(19)::after { position: absolute; left: 6px; top: 5px; color: var(--district-blue); font-size: .47rem; font-weight: 900; letter-spacing: .07em; }
.aca-district-board[data-stage="1"] .aca-district-cell:nth-child(1)::after { content: "SEAT 1"; }
.aca-district-board[data-stage="1"] .aca-district-cell:nth-child(7)::after { content: "SEAT 2"; }
.aca-district-board[data-stage="1"] .aca-district-cell:nth-child(13)::after { content: "SEAT 3"; }
.aca-district-board[data-stage="1"] .aca-district-cell:nth-child(19)::after { content: "SEAT 4"; }

.aca-district-board[data-stage="2"] .aca-district-cell.district-1,
.aca-district-board[data-stage="3"] .aca-district-cell.district-1,
.aca-district-board[data-stage="4"] .aca-district-cell.district-1 { background: rgba(132,201,220,.22); border-color: var(--district-a); }
.aca-district-board[data-stage="2"] .aca-district-cell.district-2,
.aca-district-board[data-stage="3"] .aca-district-cell.district-2,
.aca-district-board[data-stage="4"] .aca-district-cell.district-2 { background: rgba(169,184,215,.22); border-color: var(--district-b); }
.aca-district-board[data-stage="2"] .aca-district-cell.district-3,
.aca-district-board[data-stage="3"] .aca-district-cell.district-3,
.aca-district-board[data-stage="4"] .aca-district-cell.district-3 { background: rgba(216,184,106,.22); border-color: var(--district-c); }
.aca-district-board[data-stage="2"] .aca-district-cell.district-4,
.aca-district-board[data-stage="3"] .aca-district-cell.district-4,
.aca-district-board[data-stage="4"] .aca-district-cell.district-4 { background: rgba(134,182,155,.22); border-color: var(--district-d); }
.aca-district-board[data-stage="3"] .aca-district-cell { box-shadow: inset 0 0 0 1px rgba(11,36,55,.06); }
.aca-district-board[data-stage="4"] .aca-district-cell { transform: scale(.985); }
.aca-district-board[data-stage="4"] .aca-pop-dots { opacity: .45; }
.aca-district-board[data-stage="4"] .aca-district-cell::before { content: "VOTE"; color: var(--academy-navy); font-size: .56rem; font-weight: 900; letter-spacing: .08em; }

.aca-district-board-key { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 13px; color: #748696; font-size: .7rem; font-weight: 800; }
.aca-district-board-key span { display: flex; gap: 6px; align-items: center; }
.aca-district-board-key i { width: 10px; height: 10px; border: 1px solid #cbd6de; background: #fff; }
.aca-district-board-key .k-pop { border-radius: 50%; background: #8da2b1; }
.aca-district-board-key .k-seat { background: rgba(13,120,159,.12); border-color: var(--district-blue); }
.aca-district-board-key .k-boundary { background: rgba(216,184,106,.22); border-color: var(--district-c); }

.aca-district-copy article { animation: acaDistrictIn .25s ease both; }
@keyframes acaDistrictIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.aca-district-copy h2 { margin: 7px 0 12px; color: var(--academy-navy); font-family: Georgia,"Times New Roman",serif; font-size: clamp(2rem,3.2vw,2.8rem); }
.aca-district-copy > article > p { margin: 0; color: #5b6f80; line-height: 1.72; font-size: 1rem; }
.aca-district-key { display: grid; grid-template-columns: 40px 1fr; gap: 14px; margin-top: 24px; border-left: 3px solid var(--district-blue); padding: 14px 0 14px 16px; }
.aca-district-key > span { width: 34px; height: 34px; color: var(--district-blue); }
.aca-district-key strong { color: var(--academy-navy); }
.aca-district-key p { margin: 4px 0 0; color: #657888; font-size: .85rem; line-height: 1.58; }
.aca-district-controls { display: flex; gap: 10px; justify-content: space-between; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--academy-border); }

.aca-district-terms { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; border-top: 1px solid var(--academy-border); padding-top: 58px; padding-bottom: 62px; }
.aca-districts-module #site-footer { margin-top: 0; }
.aca-district-terms > div { border-left: 2px solid var(--district-blue); padding-left: 18px; }
.aca-district-terms strong { color: var(--academy-navy); font-family: Georgia,"Times New Roman",serif; }
.aca-district-terms p { margin: 7px 0 0; color: #607283; font-size: .84rem; line-height: 1.62; }

@media (max-width: 1050px) {
    .aca-districts-hero-grid, .aca-district-workspace { grid-template-columns: 1fr; }
    .aca-districts-hero-art { max-width: 760px; min-height: 320px; }
}
@media (max-width: 760px) {
    .aca-districts-hero { padding: 42px 0 54px; }
    .aca-districts-hero-art { min-height: 0; padding: 54px 0 28px; }
    .aca-district-hero-kicker { left: 0; top: 18px; }
    .aca-district-hero-route { grid-template-columns: 1fr; gap: 8px; }
    .aca-district-hero-route > i { transform: rotate(90deg); }
    .aca-district-hero-route article { grid-template-columns: 64px 1fr; column-gap: 14px; justify-items: start; align-items: center; text-align: left; }
    .aca-district-hero-route article > span { grid-row: 1 / 4; width: 58px; height: 58px; margin-bottom: 0; }
    .aca-district-equality { justify-self: stretch; max-width: none; margin-top: 26px; text-align: left; }
    .aca-district-board { padding: 18px; }
    .aca-district-heading { display: block; }
    .aca-district-stage-readout { justify-items: start; margin-top: 16px; }
    .aca-district-tabs { grid-template-columns: 1fr; border-bottom: 0; }
    .aca-district-tab { min-height: 76px; border-right: 0; border-bottom: 1px solid var(--academy-border); }
    .aca-district-cell-grid { grid-template-columns: repeat(4,1fr); }
    .aca-district-board-title { display: block; }
    .aca-district-board-title span { display: block; margin-top: 5px; text-align: left; }
    .aca-district-terms { grid-template-columns: 1fr; }
}