/*
 * /clientportal: Business and Commercial Law.
 * Design rules for this portal only. Loaded after site.css by Areas/ClientPortal/Views/Shared/_Layout.cshtml.
 * Identity: boardroom hero with the visiting card's double gold stripes, practice areas as a corporate list,
 * and About Us on charcoal.
 */

/* A darker, charcoal-led version of the burgundy theme colour for dark surfaces. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .portal--clientportal {
        --deep: color-mix(in srgb, var(--brand) 42%, #0b0d12);
        /* Derived colours are computed where they are declared, so they are restated with the new --deep. */
        --deep-veil: color-mix(in srgb, var(--deep) 90%, transparent);
        --deep-veil-soft: color-mix(in srgb, var(--deep) 42%, transparent);
        --hero-veil: color-mix(in srgb, var(--deep) 80%, transparent);
    }
}

/* The two diagonal gold stripes from the visiting card. */
@media (min-width: 64rem) {
    .portal--clientportal .hero--stripes::after {
        content: "";
        position: absolute;
        top: var(--header-height);
        bottom: -12%;
        right: 12%;
        width: 6.5rem;
        background: linear-gradient(90deg, var(--accent) 0 13%, transparent 13% 40%, var(--accent) 40% 53%, transparent 53%);
        opacity: .85;
        transform: skewX(17deg);
        pointer-events: none;
    }

    .portal--clientportal .hero--stripes .hero__content { max-width: 40rem; }
}

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

.portal--clientportal .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--clientportal .practice--list .card::before { display: none; }
.portal--clientportal .practice--list .card:hover { transform: translateX(6px); box-shadow: none; }
.portal--clientportal .practice--list .card__link::after { border-radius: 0; }

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

@media (min-width: 48rem) {
    .portal--clientportal .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--clientportal .practice--list .card__text { margin-bottom: 0; max-width: 46rem; }
    .portal--clientportal .practice--list .card__more { align-self: center; }
}

/* Corporate squared buttons for this portal. */
.portal--clientportal .btn { border-radius: 0; }

.portal--clientportal .about--dark .about__frame::before { top: -1.75rem; right: -1.75rem; }