/* State and city pages: banner fallback colour, intro text in the summary card, detail cards. Banner, tiles and listing cards live in Components.css. */
.page-banner {
    background: var(--primary-dark);
}

.page-title {
    margin-bottom: 28px;
}

/* Intro text from the state/city partial; GLS custom.css removes list bullets site-wide */
.summary-card-text ul,
.detail-card ul {
    padding-left: 1.2em;
    list-style: disc;
    color: var(--ink-mid);
}

.summary-card-text ul {
    margin: 10px 0 0;
}

    .summary-card-text ul + p {
        margin-top: 10px;
    }

/* One card per "details" section; a single card spans the full row */
.detail-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 24px;
}

.detail-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: start;
    gap: 10px 18px;
    padding: 30px 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

    /* Text stays in the second column however many paragraphs or lists a section has */
    .detail-card > * {
        grid-column: 2;
        margin: 0;
    }

    .detail-card .icon-badge {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .detail-card h2 {
        padding-top: 2px;
        font-size: 1.2rem;
        line-height: 1.3;
        color: var(--primary);
    }

    .detail-card p {
        font-size: .95rem;
        color: var(--ink-mid);
    }

@media (max-width: 767px) {
    .detail-card {
        grid-template-columns: 1fr;
        padding: 24px 22px;
    }

        .detail-card > *,
        .detail-card .icon-badge {
            grid-column: auto;
            grid-row: auto;
        }
}