/* DE Hero. Figma 1943:85388 (1532x541).
   The root is the size container; .de26-hero__inner holds the layout so container queries can target it.
   Text is top-anchored 50px from the hero top (Figma title y=50) in a 1204px column starting at x=164. The student
   image is 650x820 and starts 40px right of the text column, 57px above the hero top; the hero clips it at the bottom
   edge (the page's wave covers the join), and its right side is transparent, so narrow heroes may clip it a little. */
[data-de26].de26-hero {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  min-height: 541px;
  margin: 0;
  background: var(--de26-hero-bg);
  /* The Figma banner is 2243px wide behind a 1532px hero, so the visible part of the gradient is its middle (about 16% to 84%). */
  background-size: 146.4% 100%;
  background-position: center;
  font-family: var(--de26-font-body);
  color: var(--de26-space);
  container-type: inline-size;
}
/* The Twirl (decorative, so a background, not an image) spans the box's full width at its own ratio and is anchored to the
   top, so a tall stacked hero never magnifies it; the box crops it. Inside an Elementor container, sections.css paints it on
   the container instead (covering the container padding) and turns this one off. The widget's Twirl controls set:
   --de26-hero-twirl (url, the custom image), --de26-hero-twirl-size (width, % of the box, 100% and up),
   --de26-hero-twirl-x (offset from centered) and --de26-hero-twirl-y (offset from the top). Keep in step with sections.css. */
[data-de26].de26-hero--twirl::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--de26-hero-twirl, url("../twirl/hero-twirl-white.svg")); background-repeat: no-repeat; background-size: var(--de26-hero-twirl-size, 100%) auto; background-position: calc(50% + var(--de26-hero-twirl-x, 0px)) var(--de26-hero-twirl-y, 0px); }
/* Bundled variations (Twirl variation control). A custom image still wins: --de26-hero-twirl is only set for "Custom image". */
[data-de26].de26-hero--twirl-experience-feathered::before { background-image: var(--de26-hero-twirl, url("../twirl/experience-feathered.png")); }
[data-de26].de26-hero--twirl-wide-feathered::before { background-image: var(--de26-hero-twirl, url("../twirl/wide-feathered.webp")); }
[data-de26].de26-hero--twirl-wide-hard-edge::before { background-image: var(--de26-hero-twirl, url("../twirl/wide-hard-edge.svg")); }
[data-de26] .de26-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 593px); gap: 40px; align-items: start; max-width: 1252px; min-height: 541px; margin: 0 auto; padding: 50px 24px 0; box-sizing: border-box; }
/* Wave clearance: a bottom wave Shape Divider (up to 80px tall) is drawn over the hero's bottom edge, so the text column keeps 80px + 24px below the button.
   The inner box has no bottom padding of its own, so the image (bottom-anchored to it) keeps standing on the hero floor. The widget's Space below control overrides this. */
[data-de26] .de26-hero__text { display: flex; flex-direction: column; gap: 20px; padding-bottom: calc(var(--de26-gap-10x) + var(--de26-gap-3x)); }
[data-de26] .de26-hero__title { margin: 0; font-family: inherit; font-size: 54px; font-weight: 700; line-height: 1.2; color: var(--de26-space); }
[data-de26] .de26-hero__subhead { margin: -5px 0 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
/* The image is bottom-anchored, 40px right of the text column, and never rises more than 57px above the hero top (Figma overhang).
   --de26-hero-o is how far the image hangs below the hero floor (the hero clips it): 0 up to a 1224px hero, then it grows 222px
   over 308px (222 = Figma 763 - 541; 308 = 1532 - 1224) to the full Figma size at the 1532px design width.
   1224 = 650 + 574: the width at which the space right of the text column no longer limits a 650px image, where
   574 = 593 text column + 40 gap + 24 padding - 83 (the image's transparent right margin may be clipped).
   --de26-hero-h is the image height: its height cap (hero height + 57px + overhang, so a short hero never crops the head) or the
   space limit (width min(650px, 100cqw - 574px) at the 650:820 ratio), whichever is smaller. Width follows the ratio. */
/* Image fit, anchor, scale and offset: the box is portrait (650:820); object-fit crops a picture of another shape instead of stretching it. The Customize controls set object-fit,
   object-position + transform-origin (the anchor) and --de26-hero-img-scale / -x / -y. All defaults here reproduce the unscaled, bottom-anchored image. */
[data-de26] .de26-hero__image { --de26-hero-o: clamp(0px, calc((100cqw - 1224px) * 222 / 308), 222px); --de26-hero-h: min(calc(100% + 57px + var(--de26-hero-o)), calc(min(650px, 100cqw - 574px) * 820 / 650)); position: absolute; bottom: calc(-1 * var(--de26-hero-o)); left: calc(24px + 593px + 40px); display: block; width: auto; max-width: none; height: var(--de26-hero-h); aspect-ratio: 650 / 820; margin: 0; border: 0; pointer-events: none; object-fit: cover; object-position: center bottom; transform-origin: center bottom; scale: calc(var(--de26-hero-img-scale, 100) / 100); translate: var(--de26-hero-img-x, 0px) var(--de26-hero-img-y, 0px); }
@container (max-width: 959px) {
  [data-de26] .de26-hero__inner { grid-template-columns: minmax(0, 1fr); padding: 40px 24px 0; }
  /* With an image, the stacked image sits between the button and the wave. Without one the button is the last thing, so it keeps the clearance. */
  [data-de26].de26-hero--has-image .de26-hero__text { padding-bottom: 0; }
  [data-de26] .de26-hero__title { font-size: 36px; }
  [data-de26] .de26-hero__image { position: static; bottom: auto; justify-self: center; align-self: end; width: min(360px, 100%); height: auto; pointer-events: auto; }
}