/*
 * /clientcustomer: Finance and Financial Disputes.
 * Design rules for this portal only. Loaded after site.css by Areas/ClientCustomer/Views/Shared/_Layout.cshtml.
 * Identity: full-bleed gavel photograph closed by a gold rule, About Us first, practice areas as a two-column
 * ledger with gold side bars, and How We Assist You on the deep brand colour.
 */

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

/* Practice areas: two columns, number beside the text, gold bar on the left edge. */
@media (min-width: 48rem) {
    .portal--clientcustomer .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.portal--clientcustomer .card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "num title"
        "num text"
        "num more";
    column-gap: 1.6rem;
    align-content: start;
    padding: 2rem 2rem 1.8rem;
}

.portal--clientcustomer .card::before {
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: var(--radius) 0 0 var(--radius);
    transform: scaleY(.3);
    transform-origin: top;
}

.portal--clientcustomer .card:hover::before { transform: scaleY(1); }

.portal--clientcustomer .card__num { grid-area: num; margin: 0; font-size: 2.3rem; }
.portal--clientcustomer .card__title { grid-area: title; }
.portal--clientcustomer .card__text { grid-area: text; }
.portal--clientcustomer .card__more { grid-area: more; }

/* About Us: the gold block sits lower and to the left, like a ledger tab. */
.portal--clientcustomer .about__frame::before { top: auto; bottom: -2rem; right: -2rem; height: 60%; }
.portal--clientcustomer .about__media { padding: 0 2rem 2rem 0; }