/*
 * Split hero: Ilana's photo beside the headline (imagery review D5). See inc/split-hero.php.
 * Works on both hero families: .deal-hero (Book, About) and .mmc-pillar-hero (landing pages,
 * Recommended Reading). Only applies with the .mmc-split-hero class, which the template adds
 * when the page's portrait slot holds a photo.
 */

/* section.… outranks .deal-hero / .mmc-pillar-hero, whichever stylesheet the page prints later.
   header.php inlines .deal-hero { justify-content: center !important }, so that one needs !important. */
section.mmc-split-hero { background: #0a3a2c; }
.mmc-split-hero .deal-hero__bg,
.mmc-split-hero .deal-hero__overlay,
.mmc-split-hero .mmc-pillar-hero__bg,
.mmc-split-hero .mmc-pillar-hero__overlay { display: none; }

/* Phones and tablets: no photo column */
.mmc-split-hero__photo { display: none; }
.mmc-split-hero__round {
    display: block;
    width: 84px; height: 84px; margin: 0 auto 1rem;
    border-radius: 50%; overflow: hidden;
    border: 2px solid #c9a84c;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}
.mmc-split-hero__round img { width: 100%; height: 100%; object-fit: cover; object-position: var(--mmc-split-focus, 50% 20%); display: block; }

/* About on phones: a band framed on the face above the text */
@media (max-width: 959px) {
    section.mmc-split-hero--band { flex-direction: column; }
    .mmc-split-hero--band .mmc-split-hero__photo { display: block; position: relative; width: 100%; height: 300px; margin: 0 0 1.75rem; border-radius: 12px; overflow: hidden; }
    .mmc-split-hero--band .mmc-split-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--mmc-split-focus, 50% 20%); display: block; }
}

/* Laptops and wider: text left on deep green, the photo in the right column at full height */
@media (min-width: 960px) {
    section.mmc-split-hero { justify-content: flex-start !important; }
    .mmc-split-hero__round { display: none; }
    .mmc-split-hero__photo {
        display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 44%; z-index: 1;
    }
    .mmc-split-hero--narrow .mmc-split-hero__photo { width: 32%; }
    .mmc-split-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--mmc-split-focus, 50% 20%); display: block; }
    .mmc-split-hero__photo::before {
        content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 14%; z-index: 2;
        background: linear-gradient(90deg, #0a3a2c 0%, rgba(10, 58, 44, 0) 100%);
    }
    .mmc-split-hero .deal-hero__content,
    .mmc-split-hero .mmc-pillar-hero__inner {
        position: relative; z-index: 3;
        width: 52%; max-width: 660px; margin: 0 0 0 max(1.5rem, calc((100vw - 1200px) / 2));
        text-align: left !important;
    }
    .mmc-split-hero--narrow .deal-hero__content,
    .mmc-split-hero--narrow .mmc-pillar-hero__inner { width: 62%; max-width: 760px; }
    .mmc-split-hero .deal-hero__sub,
    .mmc-split-hero .mmc-pillar-hero__lede,
    .mmc-split-hero .deal-hero__credentials { margin-left: 0; margin-right: 0; }
    .mmc-split-hero .mmc-pillar-hero__ctas,
    .mmc-split-hero .deal-hero__cta { justify-content: flex-start; text-align: left; }
}