/* A picture for every banner design (pictures.php; Oren, 2026-10-08).
 *
 * With a picture, the design's painted field and its circles step aside: the picture fills the banner,
 * sitting by the editor's points (--hero-pos, and --hero-pos-phone on a phone when it was moved) and
 * enlarged around them (--hero-zoom, --hero-zoom-phone), a dark
 * shade over it, and the words turn white. Badges, buttons, chips, the search and the spotlight's card
 * keep their own colours. Loaded after each design's own sheet, which is what lets these rules win.
 */

/* The design's field, whatever paints it -- a colour, a gradient, a direction-dependent gradient --
   gives way to the picture. Important because the designs paint it at several specificities (up to
   four classes), and every one of them must lose here. */
.cilHero.has-picture { background: var(--cil-black-dark-5) !important; }
.cilHero__picture {
    position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: var(--hero-pos, 50% 50%); pointer-events: none;
    scale: var(--hero-zoom, 1); transform-origin: var(--hero-pos, 50% 50%);
}
.cilHero__shade {
    position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%;
    background: color-mix(in srgb, var(--cil-black-dark-5) 55%, transparent); pointer-events: none;
}
/* Everything else in the banner over the picture: in-flow parts lifted to the same layer, later in
   order; a part its own design positions keeps that position (no specificity here). */
:where(.cilHero.has-picture) > :where(:not(.cilHero__picture, .cilHero__shade)) { position: relative; }

/* The design's assets: its circles, the split's coloured half, the carousel's painted slides. */
.cilHero.has-picture .cilHero__decor { display: none; }
.cilHero.has-picture .cilHero__panel,
.cilHero.has-picture .cilHero__slide.cilHero__slide { background: transparent; }

/* The words, white over the shade. */
.cilHero.has-picture :is(.cilHero__title, .cilHero__text, .cilHero__meta, .cilHero__meta li,
    .cilHero__statValue, .cilHero__statLabel, .cilHero__panelValue, .cilHero__panelNote, .cilHero__panelFigure,
    .cilHero__scrollCue, .cilHero__scrollCueLabel, .cilHero__countdownSays, .cilHero__countdownOver,
    .cilHero__ctaSecondary) { color: var(--cil-white); }
.cilHero.has-picture .cilHero__scrollChevron { color: var(--cil-white); stroke: currentColor; }
/* The carousel's own controls read on the shade too. */
.cilHero.has-picture .cilHero__carouselDot { background: var(--cil-white); }
.cilHero.has-picture :is(.cilHero__carouselArrow, .cilHero__carouselPause) { color: var(--cil-white); border-color: var(--cil-white); }

@media (max-width: 767px) {
    .cilHero__picture { object-position: var(--hero-pos-phone, var(--hero-pos, 50% 50%));
        scale: var(--hero-zoom-phone, var(--hero-zoom, 1)); transform-origin: var(--hero-pos-phone, var(--hero-pos, 50% 50%)); }
}

/* Classic: the picture is a layer inside .bgImage, under its gradient and words; classic's gradient
   is its shade, so its own is not drawn. */
.homepageHero .bgImage.has-picture { position: relative; overflow: hidden; }
.homepageHero .bgImage.has-picture > .gradient { position: relative; z-index: 1; }
.homepageHero .bgImage.has-picture > .cilHero__shade { display: none; }