/*
 * /clientcenter: Court Cases and Legal Disputes.
 * Design rules for this portal only. Loaded after site.css by templates/portals/clientcenter/layout.php.
 * Identity: full-bleed courtroom photograph closed by a gold rule, and the practice areas as a numbered list
 * (the same list design as /clientportal, because this portal has the most services).
 */

.portal--clientcenter .hero,
.portal--clientcenter .page-header { border-bottom: 3px solid var(--accent); }

/* Practice areas as a list: number, title and summary, arrow. */
.portal--clientcenter .practice--list .card-grid {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}

.portal--clientcenter .practice--list .card {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas:
        "num title"
        "num text"
        "num more";
    column-gap: 1.25rem;
    padding: 1.9rem .5rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.portal--clientcenter .practice--list .card::before { display: none; }
.portal--clientcenter .practice--list .card:hover { transform: translateX(6px); box-shadow: none; }
.portal--clientcenter .practice--list .card__link::after { border-radius: 0; }

.portal--clientcenter .practice--list .card__num { grid-area: num; margin: .15rem 0 0; font-size: 1.9rem; }
.portal--clientcenter .practice--list .card__title { grid-area: title; margin-bottom: .35rem; }
.portal--clientcenter .practice--list .card__text { grid-area: text; margin-bottom: .8rem; }
.portal--clientcenter .practice--list .card__more { grid-area: more; }

@media (min-width: 48rem) {
    .portal--clientcenter .practice--list .card {
        grid-template-columns: 5rem minmax(0, 1fr) auto;
        grid-template-areas:
            "num title more"
            "num text more";
        column-gap: 2rem;
        padding: 2.2rem 1rem;
    }

    .portal--clientcenter .practice--list .card__text { margin-bottom: 0; max-width: 46rem; }
    .portal--clientcenter .practice--list .card__more { align-self: center; }
}