/* AFDES Election Observation — archive hierarchy composition */

/* Default hierarchy header: balanced two-column heading/guide. */
.election-page .observation-hierarchy-browser .observation-hierarchy-heading {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: center;
}

.election-page .observation-hierarchy-browser .observation-hierarchy-heading > div {
    min-width: 0;
    width: 100%;
    justify-self: stretch;
}

/*
   The original helper sentence is intentionally suppressed visually here.
   The guide copy below is more descriptive and gives the companion panel
   enough substance to balance the archive column without becoming a heavy card.
*/
.election-page .observation-hierarchy-browser .observation-hierarchy-heading > p {
    width: min(100%, 470px);
    max-width: 470px;
    margin: 0 auto;
    place-self: center;
    color: #526475;
    font-size: 0;
    line-height: 0;
    text-align: left;
}

.election-page .observation-hierarchy-browser .observation-hierarchy-heading > p::before {
    content: "Archive guide";
    display: block;
    width: 100%;
    margin: 0 0 11px;
    color: #049bce;
    font-size: .64rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .12em;
    text-align: left;
    text-transform: uppercase;
}

.election-page .observation-hierarchy-browser .observation-hierarchy-heading > p::after {
    content: "The archive preserves each observation as a distinct research case, connecting country context, election records, evidence, findings, documents, and analysis. Browse from country to election to mission to follow each record independently and compare elections over time.\A\A Country  →  Election  →  Mission";
    display: block;
    width: 100%;
    margin: 0;
    color: #526475;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.58;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: pre-line;
}

/*
   When the archive currently contains one country, use a true two-column
   composition instead of leaving an empty lower-right quadrant. The title
   and country/election card share the exact same left column while the guide
   fills the matching right column and centers its content vertically.
*/
@media (min-width: 861px) {
    .election-page .observation-hierarchy-browser:has(.observation-country-groups > .observation-country-group:only-child) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto 1fr;
        column-gap: 22px;
        row-gap: 0;
        align-items: stretch;
    }

    .election-page .observation-hierarchy-browser:has(.observation-country-groups > .observation-country-group:only-child) .observation-hierarchy-heading {
        display: contents;
    }

    .election-page .observation-hierarchy-browser:has(.observation-country-groups > .observation-country-group:only-child) .observation-hierarchy-heading > div {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        width: 100%;
        padding: 0 0 18px;
    }

    .election-page .observation-hierarchy-browser:has(.observation-country-groups > .observation-country-group:only-child) .observation-hierarchy-heading > p {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin: 0;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        padding: 30px 36px;
        border: 1px solid #d9e5eb;
        border-left: 1px solid #d9e5eb;
        border-radius: 15px;
        background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,253,.96));
        text-align: left;
    }

    .election-page .observation-hierarchy-browser:has(.observation-country-groups > .observation-country-group:only-child) .observation-country-groups {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        align-content: start;
    }
}

@media (max-width: 860px) {
    .election-page .observation-hierarchy-browser .observation-hierarchy-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    .election-page .observation-hierarchy-browser .observation-hierarchy-heading > p {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
}

@media (max-width: 640px) {
    .election-page .observation-hierarchy-browser .observation-hierarchy-heading > p {
        padding: 14px 15px;
    }

    .election-page .observation-hierarchy-browser .observation-hierarchy-heading > p::after {
        font-size: .78rem;
        line-height: 1.55;
    }
}