/* 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; }

/* slide grade (template/blocks/hero/_slider.twig, slide.grade A…G, port 69): the class scale behind a cut-out product photo — seven
   glass bars growing longer (--n 0…6, colours --et-grade-*), on the active slide they pour in one by one, the class arrow (--on) slides
   to its bar, a glow of the class colour breathes behind the product, the product rises. The photo is contained on the right part.
   Transform and opacity only; reduced motion — final states. */
.et-hero__slide-image--grade { isolation: isolate; }
/* the product stands in front of the start of the bars: the bars come out from behind it */
.et-hero__slide-image--grade picture { position: absolute !important; z-index: 2; left: 40%; width: 34% !important; top: 6%; bottom: 0; height: auto !important; }
.et-hero__slide-image--grade img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 100%; }
.et-hero-grade { position: absolute; z-index: 1; left: 52%; right: 2%; top: 7%; bottom: 7%; display: grid; grid-template-rows: repeat(7, 1fr); gap: 0.4375rem; pointer-events: none; }
.et-hero-grade i {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: flex-end; width: calc(40% + var(--n) * 9%); padding-right: 1.5rem;
  overflow: hidden; clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%);
  background: color-mix(in srgb, var(--g) 14%, color-mix(in srgb, var(--et-surface) 35%, transparent)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55);
  color: color-mix(in srgb, var(--et-text) 55%, transparent); font: 800 1.3rem/1 var(--et-font-price, var(--et-font-display)); font-style: normal;
}
.et-hero-grade i::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--g) 70%, transparent), color-mix(in srgb, var(--g) 30%, transparent));
  transform-origin: left; transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--n) * 70ms + 120ms);
}
.et-hero-grade i.is-on { width: calc(50% + var(--n) * 9%); color: var(--et-grade-ink); }
.et-hero-grade i.is-on::before { background: var(--g); }
.et-hero-grade__mark {
  position: absolute; z-index: 1; left: calc(50% + var(--on) * 9% + 0.5rem); top: calc(var(--on) * (100% + 0.4375rem) / 7); height: calc((100% - 2.625rem) / 7);
  display: grid; place-items: center; min-width: 4rem; padding: 0 0.5rem 0 1rem; background: var(--et-text); color: var(--et-surface);
  clip-path: polygon(0.875rem 0, 100% 0, 100% 100%, 0.875rem 100%, 0 50%); font: 850 1.5rem/1 var(--et-font-price, var(--et-font-display)); font-style: normal;
  opacity: 0; transform: translateX(2.5rem); transition: opacity 0.4s ease 0.9s, transform 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) 0.9s; font-variation-settings: var(--et-figure-axes, normal); }
.et-hero-grade__glow {
  position: absolute; z-index: -1; left: -30%; top: 15%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 55%, transparent), transparent); opacity: 0;
}
.et-hero__slide--active .et-hero-grade i::before { transform: none; }
.et-hero__slide--active .et-hero-grade__mark { opacity: 1; transform: none; }
.et-hero__slide--active .et-hero-grade__glow { animation: et-hero-grade-breathe 4s ease-in-out 1s infinite both; }
.et-hero__slide--active .et-hero__slide-image--grade img { animation: et-hero-grade-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes et-hero-grade-breathe { 0%, 100% { opacity: 0.35; transform: scale(0.94); } 50% { opacity: 0.75; transform: scale(1.06); } }
@keyframes et-hero-grade-rise { from { opacity: 0; transform: translateY(1.5rem); } }
@media (max-width: 767.98px) {
  .et-hero__slide-image--grade picture { left: 46%; width: 30% !important; }
  .et-hero-grade { left: 56%; gap: 0.25rem; }
  .et-hero-grade i { font-size: 0.875rem; padding-right: 1rem; }
  .et-hero-grade__mark { min-width: 2.75rem; font-size: 1rem; height: calc((100% - 1.5rem) / 7); top: calc(var(--on) * (100% + 0.25rem) / 7); }
}
@media (prefers-reduced-motion: reduce) {
  .et-hero-grade i::before, .et-hero-grade__mark { transition: none !important; }
  .et-hero__slide--active .et-hero-grade__glow, .et-hero__slide--active .et-hero__slide-image--grade img { animation: none !important; }
  .et-hero__slide--active .et-hero-grade__glow { opacity: 0.5; }
}
html[data-motion="none"] .et-hero-grade i::before, html[data-motion="none"] .et-hero-grade__mark { transition: none; }