/* Shared editorial image system for inner pages. Images support the message;
   they are not decorative substitutes for scope, evidence, or boundaries. */
.page-visual-hero {
    color: #fff;
    overflow: hidden;
    position: relative;
}

.page-visual-hero .container {
    position: relative;
    z-index: 1;
}

.page-visual-hero__grid {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 5.5rem);
    grid-template-columns: minmax(0, 1.02fr) minmax(290px, .98fr);
}

.page-visual-hero__copy {
    max-width: 680px;
}

.page-visual-hero__copy h1 {
    color: #fff;
    max-width: 720px;
}

.page-visual-hero__copy p {
    color: rgba(255, 255, 255, .8);
    max-width: 720px;
}

.page-visual-hero__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.6rem;
}

.page-visual-hero__actions .btn-flat-outline-light {
    background: rgba(6, 26, 58, .25);
    border-color: rgba(255, 255, 255, .52);
    color: #fff;
}

.page-visual-hero__actions .btn-flat-outline-light:hover,
.page-visual-hero__actions .btn-flat-outline-light:focus {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
}

.page-visual-hero__media {
    aspect-ratio: 1.18;
    background: #102d55;
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    margin: 0;
    min-height: 270px;
    overflow: hidden;
    position: relative;
}

.page-visual-hero__media::after {
    background: linear-gradient(180deg, transparent 40%, rgba(6, 26, 58, .84) 100%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.page-visual-hero__media img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .45s ease;
    width: 100%;
}

.page-visual-hero__media--portrait img {
    object-position: center top;
}

.page-visual-hero__media:hover img {
    transform: scale(1.025);
}

.page-visual-hero__caption {
    bottom: 1rem;
    color: rgba(255, 255, 255, .92);
    font-size: .76rem;
    left: 1.2rem;
    letter-spacing: .08em;
    position: absolute;
    text-transform: uppercase;
    z-index: 1;
}

.page-visual-hero__caption small {
    color: rgba(255, 255, 255, .65);
    display: block;
    font-size: .7rem;
    letter-spacing: .02em;
    margin-top: .25rem;
    text-transform: none;
}

/* Full-bleed editorial heroes keep the homepage's visual language on inner
   pages: one strong image, a navy reading layer, and copy that sits directly
   on the image instead of beside a disconnected card. */
.page-visual-hero--full {
    background: #061a3a !important;
    min-height: clamp(520px, 48vw, 710px);
    padding: 0 !important;
}

.page-visual-hero--full::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 86px 86px;
    content: '';
    inset: 0;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .7), transparent 82%);
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.page-visual-hero--full .page-visual-hero__grid {
    display: block;
    min-height: clamp(520px, 48vw, 710px);
    position: relative;
}

.page-visual-hero--full .page-visual-hero__copy {
    max-width: 780px;
    padding: clamp(6.5rem, 11vw, 9.5rem) 0 clamp(5rem, 8vw, 7rem);
    position: relative;
    z-index: 2;
}

.page-visual-hero--full .page-visual-hero__copy h1 {
    font-size: clamp(2.7rem, 5.2vw, 5rem);
    letter-spacing: -.045em;
    line-height: 1.03;
}

.page-visual-hero--full .page-visual-hero__copy p {
    max-width: 680px;
}

.page-visual-hero--full .page-visual-hero__media {
    aspect-ratio: auto;
    border: 0;
    box-shadow: none;
    inset: 0;
    margin: 0;
    max-width: none;
    position: absolute;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.page-visual-hero--full .page-visual-hero__media::before {
    background: linear-gradient(
        90deg,
        #061a3a 0%,
        #061a3a 20%,
        rgba(6, 26, 58, .99) 32%,
        rgba(6, 26, 58, .93) 44%,
        rgba(6, 26, 58, .74) 57%,
        rgba(6, 26, 58, .48) 70%,
        rgba(6, 26, 58, .20) 86%,
        transparent 100%
    );
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.page-visual-hero--full .page-visual-hero__media::after {
    background: linear-gradient(0deg, rgba(6, 26, 58, .54) 0%, rgba(6, 26, 58, .16) 38%, transparent 68%);
    z-index: 2;
}

.page-visual-hero--full .page-visual-hero__media img {
    object-position: center;
    position: relative;
    z-index: 0;
}

.page-visual-hero--full .page-visual-hero__caption {
    z-index: 3;
}

.page-visual-hero--eric .page-visual-hero__media img {
    object-position: center 12%;
}

.page-visual-hero--eric .page-visual-hero__copy {
    max-width: 700px;
}

/* Desktop image preservation: the source frames are intentionally composed
   with a dark reading zone on the left and the subject on the right. A wide
   full-bleed container cannot show a 3:2 source completely with `cover`; it
   would crop the top or bottom as the viewport gets wider. Contain the
   original frame at its full height and anchor it to the right so the copy
   uses the dark zone without cutting the subject or the source composition.
   Mobile keeps its own art direction below. */
@media (min-width: 992px) {
    .page-visual-hero--full .page-visual-hero__media {
        background: #061a3a;
        /* The complete source frame stays intact with contain. A single
           opaque media surface plus the overlay above removes the extra
           alpha mask that was creating a false vertical seam. */
        -webkit-mask-image: none;
        mask-image: none;
    }

    .page-visual-hero--full .page-visual-hero__media img,
    .page-visual-hero--eric .page-visual-hero__media img {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, rgba(0, 0, 0, .04) 38%, rgba(0, 0, 0, .20) 50%, rgba(0, 0, 0, .52) 63%, rgba(0, 0, 0, .82) 77%, #000 90%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, rgba(0, 0, 0, .04) 38%, rgba(0, 0, 0, .20) 50%, rgba(0, 0, 0, .52) 63%, rgba(0, 0, 0, .82) 77%, #000 90%, #000 100%);
        object-fit: contain;
        object-position: right center;
    }

    .page-visual-hero--full .page-visual-hero__media:hover img {
        transform: none;
    }
}

.visual-story {
    align-items: stretch;
    display: grid;
    gap: clamp(1.5rem, 4vw, 4rem);
    grid-template-columns: minmax(260px, .86fr) minmax(0, 1.14fr);
}

.visual-story--reverse {
    grid-template-columns: minmax(0, 1.14fr) minmax(260px, .86fr);
}

.visual-story__media {
    min-height: 300px;
    overflow: hidden;
    position: relative;
}

.visual-story__media::after {
    border: 1px solid rgba(255, 255, 255, .2);
    content: '';
    inset: 1rem;
    pointer-events: none;
    position: absolute;
}

.visual-story__media img {
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    width: 100%;
}

.visual-story__content {
    align-self: center;
}

.visual-story__content p:last-child {
    margin-bottom: 0;
}

.visual-strip {
    align-items: center;
    background: var(--navy);
    color: #fff;
    display: flex;
    gap: 1.2rem;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding: 1rem 1.25rem;
}

.visual-strip__label {
    color: var(--primary-light);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.visual-strip__text {
    color: rgba(255, 255, 255, .76);
    font-size: .84rem;
    margin: 0;
    text-align: right;
}

.visual-card {
    background: #fff;
    border: 1px solid var(--medium-gray);
    box-shadow: var(--shadow-sm);
    height: 100%;
    overflow: hidden;
}

.visual-card__image {
    aspect-ratio: 1.8;
    display: block;
    overflow: hidden;
}

.visual-card__image img {
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
    width: 100%;
}

.visual-card:hover .visual-card__image img {
    transform: scale(1.04);
}

.visual-card__body {
    padding: 1.35rem 1.5rem 1.5rem;
}

@media (max-width: 991.98px) {
    .page-visual-hero__grid,
    .visual-story,
    .visual-story--reverse {
        grid-template-columns: 1fr;
    }

    .page-visual-hero__copy {
        max-width: 760px;
    }

    .page-visual-hero__media {
        margin-left: auto;
        max-width: 620px;
        width: 100%;
    }

    /* On a narrow screen the copy and the artwork need separate vertical
       zones. Keeping the full-bleed media absolute here makes headlines sit
       on top of faces, book covers, and other source artwork. */
    .page-visual-hero--full {
        min-height: auto;
    }

    .page-visual-hero--full .page-visual-hero__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: auto;
    }

    .page-visual-hero--full .page-visual-hero__copy {
        max-width: none;
        order: 1;
        padding: 5.3rem 0 3.6rem;
    }

    .page-visual-hero--full .page-visual-hero__media {
        height: clamp(300px, 60vw, 500px);
        inset: auto;
        min-height: clamp(300px, 60vw, 500px);
        order: 2;
        position: relative;
        transform: none;
        width: 100%;
    }

    .page-visual-hero--full .page-visual-hero__media img {
        object-fit: cover;
        object-position: center;
    }

    .page-visual-hero--full .page-visual-hero__media::after {
        background: linear-gradient(180deg, rgba(6, 26, 58, .04) 20%, rgba(6, 26, 58, .82) 100%);
    }

    .page-visual-hero--full .page-visual-hero__media::before {
        background: linear-gradient(180deg, rgba(6, 26, 58, .02) 18%, rgba(6, 26, 58, .16) 50%, rgba(6, 26, 58, .68) 100%);
    }

    .visual-story__media {
        min-height: 250px;
    }
}

@media (max-width: 576px) {
    .page-visual-hero__grid {
        gap: 1.6rem;
    }

    .page-visual-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .page-visual-hero__actions .btn {
        width: 100%;
    }

    .page-visual-hero__media {
        aspect-ratio: 1.25;
        min-height: 220px;
    }

    .visual-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .visual-strip__text {
        text-align: left;
    }

    .page-visual-hero--full,
    .page-visual-hero--full .page-visual-hero__grid {
        min-height: auto;
    }

    .page-visual-hero--full .page-visual-hero__copy {
        padding: 5.4rem 0 4.6rem;
    }

    .page-visual-hero--full .page-visual-hero__media::after {
        background:
            linear-gradient(180deg, rgba(6, 26, 58, .06) 0%, rgba(6, 26, 58, .76) 74%, rgba(6, 26, 58, .94) 100%);
    }

    /* The Eric-led source images place the subject on the right. Keep the
       face in the mobile crop while leaving the Arabic composition unchanged. */
    html[dir="ltr"] .page-visual-hero--eric .page-visual-hero__media img {
        object-position: 72% 20%;
    }
}

/* RTL hero composition uses the same full-bleed image treatment as LTR. The
   source frames keep the subject on the right, while the copy remains on the
   left with RTL text alignment. Keeping one continuous media layer removes a
   visible panel edge between the copy-safe area and the artwork. */
@media (min-width: 992px) {
    [dir="rtl"] .page-visual-hero--full .page-visual-hero__grid {
        direction: ltr;
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__copy {
        background: transparent;
        max-width: 700px;
        padding: clamp(6.5rem, 11vw, 9.5rem) 0 clamp(5rem, 8vw, 7rem);
        direction: rtl;
        position: relative;
        text-align: right;
        z-index: 2;
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__copy p {
        margin-left: 0;
        margin-right: auto;
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__media {
        aspect-ratio: auto;
        border: 0;
        box-shadow: none;
        inset: 0;
        right: auto;
        margin: 0;
        max-width: none;
        min-height: 0;
        position: absolute;
        transform: translateX(-50%);
        width: 100vw;
        left: 50%;
        z-index: 0;
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__media::before {
        background: linear-gradient(
            90deg,
            #061a3a 0%,
            #061a3a 20%,
            rgba(6, 26, 58, .99) 32%,
            rgba(6, 26, 58, .93) 44%,
            rgba(6, 26, 58, .74) 57%,
            rgba(6, 26, 58, .48) 70%,
            rgba(6, 26, 58, .20) 86%,
            transparent 100%
        );
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__media img {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, rgba(0, 0, 0, .04) 38%, rgba(0, 0, 0, .20) 50%, rgba(0, 0, 0, .52) 63%, rgba(0, 0, 0, .82) 77%, #000 90%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, rgba(0, 0, 0, .04) 38%, rgba(0, 0, 0, .20) 50%, rgba(0, 0, 0, .52) 63%, rgba(0, 0, 0, .82) 77%, #000 90%, #000 100%);
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__caption {
        left: auto;
        right: 1.2rem;
        text-align: right;
    }
}

@media (max-width: 991.98px) {
    [dir="rtl"] .page-visual-hero--full {
        min-height: auto;
    }

    [dir="rtl"] .page-visual-hero--full .container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: auto;
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__copy {
        background: transparent;
        max-width: none;
        order: 1;
        padding: 5.4rem 1.2rem 3.6rem;
        text-align: right;
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__media {
        height: clamp(280px, 42vw, 390px);
        inset: auto;
        left: auto;
        min-height: clamp(280px, 42vw, 390px);
        order: 2;
        position: relative;
        transform: none;
        width: 100%;
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__media::after {
        background: linear-gradient(180deg, rgba(6, 26, 58, .04) 20%, rgba(6, 26, 58, .82) 100%);
    }

    [dir="rtl"] .page-visual-hero--full .page-visual-hero__caption {
        left: auto;
        right: 1rem;
        text-align: right;
    }
}