/*
 * /client: Intellectual Property Rights.
 * Design rules for this portal only. Loaded after site.css by Areas/Client/Views/Shared/_Layout.cshtml.
 * Identity: deep navy, a framed hero photograph with a fine gold outline, numbered three-column practice cards
 * and the About Us photograph on the left.
 */

.portal--client .hero {
    background:
        radial-gradient(70% 90% at 0% 0%, rgba(255, 255, 255, .07), transparent 60%),
        linear-gradient(135deg, var(--deep) 0%, var(--navy) 100%);
}

@media (min-width: 64rem) {
    .portal--client .hero--framed .hero__inner { min-height: min(50rem, 100svh); }
    .portal--client .hero--framed .hero__content { max-width: 50%; }

    /* The photograph sits in a frame beside the text instead of behind it. */
    .portal--client .hero--framed .hero__media {
        inset: auto;
        top: calc(var(--header-height) + 3.25rem);
        bottom: 4.5rem;
        right: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + 1.75rem);
        width: min(38%, 31rem);
        z-index: 0;
    }

    .portal--client .hero--framed .hero__media::before {
        content: "";
        position: absolute;
        inset: -1.75rem 1.75rem 1.75rem -1.75rem;
        z-index: -1;
        border: 1px solid var(--accent);
    }

    .portal--client .hero--framed .hero__media::after {
        background: linear-gradient(180deg, rgba(5, 9, 15, 0) 55%, rgba(5, 9, 15, .35) 100%);
    }

    .portal--client .hero--framed .hero__img { object-position: 60% 50%; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
}

/* Practice cards: three columns on wide screens, with a corner bracket instead of the top bar. */
@media (min-width: 64rem) {
    .portal--client .card-grid { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
}

.portal--client .card::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 1.5rem;
    height: 1.5rem;
    border-top: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    opacity: .6;
    transition: opacity .35s ease, transform .35s ease;
}

.portal--client .card:hover::after { opacity: 1; transform: translate(3px, -3px); }

.portal--client .page-header__media::after {
    background:
        linear-gradient(180deg, rgba(5, 9, 15, .55) 0%, rgba(5, 9, 15, 0) 40%),
        linear-gradient(90deg, var(--deep-veil) 0%, var(--deep-veil) 50%, var(--deep-veil-soft) 100%);
}