/* Hero axes, shared by every hero variant (imported at the top of each stylesheet/blocks/hero/<variant>.css).
   Wrapper classes come from template/blocks/hero/_axes.twig; no class = the variant as designed.
   Selectors start with [data-section="hero"][data-variant] .et-hero-x.<axis> so they beat the variant rules
   (which come later in the cascade). Tokens only.
   ponytail: imported per variant, so it has no ?v= stamp — the core could link blocks/<block>/_axes.css itself (docs/07-backlog.md #46). */

/* ---- height: s / m / l / screen ---- */
.et-hero-x--h-s { --et-hero-h: 22.5rem; }
.et-hero-x--h-m { --et-hero-h: 30rem; }
.et-hero-x--h-l { --et-hero-h: 40rem; }
.et-hero-x--h-screen { --et-hero-h: 100svh; }

[data-section="hero"][data-variant] .et-hero-x.et-hero-x--h .et-hero__slider { height: var(--et-hero-h); }
/* static variants: the section is at least that tall, content centred vertically */
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--h :is(.et-hero-ed, .et-hero-ex, .et-hero-co) {
  min-height: var(--et-hero-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--h .et-hero-co__tiles { min-height: calc(var(--et-hero-h) * 0.8); }
@media (max-width: 767.98px) {
  /* phones: never taller than the screen */
  [data-section="hero"][data-variant] .et-hero-x.et-hero-x--h .et-hero__slider { height: min(var(--et-hero-h), 85svh); }
}

/* ---- text position 3×3 (slider variants: text over the slide background / photo) ---- */
.et-hero-x--v-top { --et-hero-v: flex-start; }
.et-hero-x--v-middle { --et-hero-v: center; }
.et-hero-x--v-bottom { --et-hero-v: flex-end; }

[data-section="hero"][data-variant] .et-hero-x.et-hero-x--pos .et-hero__slide { align-items: var(--et-hero-v); }
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--x-center .et-hero__slide { justify-content: center; }
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--x-center .et-hero__slide-content { flex: 0 1 auto; text-align: center; padding-inline: 0; }
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--x-center .et-hero__slide-text { margin-inline: auto; }
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--x-end .et-hero__slide { flex-direction: row-reverse; }
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--x-end .et-hero__slide-content { text-align: end; padding-right: 0; padding-left: 2rem; }
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--x-end .et-hero__slide-text { margin-left: auto; }
/* centred text has no room for the side photo (full-bleed keeps it: there the photo is the backdrop) */
[data-section="hero"]:not([data-variant="full-bleed"]) .et-hero-x.et-hero-x--x-center .et-hero__slide-image { display: none; }

@media (max-width: 767.98px) {
  /* phones: the slide is a column — vertical position = main axis, horizontal = text alignment */
  [data-section="hero"][data-variant] .et-hero-x.et-hero-x--pos .et-hero__slide { align-items: stretch; justify-content: var(--et-hero-v); }
  [data-section="hero"][data-variant] .et-hero-x.et-hero-x--pos .et-hero__slide-content { flex: 0 1 auto; padding-left: 0; }
  [data-section="hero"][data-variant] .et-hero-x.et-hero-x--x-start .et-hero__slide-content { text-align: start; }
  [data-section="hero"][data-variant] .et-hero-x.et-hero-x--x-end .et-hero__slide-content { text-align: end; }
}

/* ---- overlay 0–80 %: veil over the photo in the hero tone (full-bleed: the photo is the backdrop) ---- */
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--overlay .et-hero__slide-image img { opacity: 1; }
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--overlay .et-hero-bleed .et-hero__slide-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--et-hero-from) var(--et-hero-overlay), transparent);
  pointer-events: none;
}

/* ---- plate under the text ---- */
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--plate .et-hero__slide-content {
  flex: 0 1 auto;
  max-width: 36rem;
  padding: var(--et-block-pad, 2rem);
  background: color-mix(in srgb, var(--et-hero-from) 72%, transparent);
  border-radius: var(--et-radius);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---- slider controls ---- */
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--no-arrows .et-hero__arrow,
[data-section="hero"][data-variant] .et-hero-x.et-hero-x--no-dots .et-hero__dots { display: none; }

/* Slide photo with a phone version (blocks/hero/_slider.twig): <picture> must not become a box between the column and the img */
[data-section="hero"] .et-hero__slide-image picture { display: contents; }