/* Home hero: the Erbil citadel as a faint photographic backdrop.
   Sits under the hero content (the .wrap is z-index 1) and above the pale
   gradient. It fades out toward the bottom and the sides so the headline,
   search bar and side illustrations stay the focus. */
.home-page .hero { isolation: isolate; }
.home-page .hero::before {
    content: "";
    position: absolute;
    inset: 0 0 34% 0;
    z-index: 0;
    pointer-events: none;
    background: url("../images/erbil-citadel.jpg") center 42% / cover no-repeat;
    opacity: .26;
    filter: saturate(.8) contrast(.95);
    -webkit-mask-image:
        linear-gradient(180deg, #000 0%, #000 40%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(180deg, #000 0%, #000 40%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-composite: intersect;
}
/* A soft wash over the photo keeps dark headline text crisp wherever it lands */
.home-page .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 48% 46% at 26% 50%, rgba(242, 247, 253, .78), rgba(242, 247, 253, 0) 74%);
}
body.theme-dark.home-page .hero::before,
body.theme-dark .home-page .hero::before { opacity: .12; filter: saturate(.7) brightness(.8); }
body.theme-dark.home-page .hero::after,
body.theme-dark .home-page .hero::after { background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(13, 19, 48, .6), rgba(13, 19, 48, 0) 72%); }

@media (max-width: 760px) {
    .home-page .hero::before { opacity: .16; background-position: 38% 30%; }
}