/**
 * @file
 * Super Hero component styles.
 *
 * Structure:
 * .super-hero                  — grid container; sets the hero's scroll height
 * .super-hero__media           — sticky-positioned background layer
 * .super-hero__video           — background video
 * .super-hero__carousel        — decorative image carousel track (no user interaction)
 * .super-hero__slides          — list of slides
 * .super-hero__slide           — individual slide
 * .super-hero__image           — slide image
 * .super-hero__blur-overlay    — semi-transparent blur layer that fades in on scroll
 * .super-hero__content         — floating text block over the media
 * .super-hero__eyebrow         — small label above the title
 * .super-hero__title           — title
 * .super-hero__body            — body text
 * .super-hero__buttons         — button group
 *
 * Modifiers:
 * .super-hero--align-left/center/right  — text alignment
 * .super-hero--compressed               — shorter height variant
 * .super-hero--images / --video         — media type context
 */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.main__container:has(.block-baylor-super-hero) ~ .buDeptFooter {
  isolation: isolate;
}

.layout:has(.super-hero) {
  --_super-hero-header-offset: 0px;
  --_super-hero-preview-strip: 35dvh;
  --_super-hero-height: calc(100dvh - var(--_super-hero-header-offset));

  --_z-background-hidden: -1;
  --_z-background: 0;
  --_z-overlay: 1;
  --_z-content: 2;
  --_z-subsequent: 3;

  /* Blur overlay scroll thresholds, as fractions of the hero content height.
   * --_blur-start: how far off screen (0–1) before blur begins.
   * --_blur-end:   how far off screen (0–1) when blur reaches full intensity.
   */
  --_blur-start: 0.25;
  --_blur-end: 1;

  /*
   * overflow-x: clip prevents horizontal bleed from the promoted media element
   * without creating a new scroll container on the block axis, which would
   * break position: sticky on .super-hero__media.
   */
  overflow-x: clip;
}
.layout:has(.block-baylor-super-hero:last-child) {
  --_super-hero-preview-strip: 20dvh;
}

.layout:has(.super-hero) ~ .layout {
  position: relative;
  z-index: var(--_z-subsequent);
}

/*
 * After JS promotes `.super-hero__media` to the top of the region, any
 * sibling `.block` elements follow it in the DOM. They need a stacking
 * context so they render above the sticky media layer, and a transparent
 * background so the media shows through.
 */
.layout:has(.super-hero) .super-hero__media ~ .block {
  position: relative;
  z-index: var(--_z-content);
  background-color: transparent;
}

/*
 * `.super-hero` is a CSS grid container sized to the viewport minus the
 * preview strip (so the next section peeks in at the bottom). All direct
 * children — media, blur overlay, and content — share the single "hero"
 * grid area and stack via z-index.
 */
.super-hero {
  --_text-margin: 2rem;

  container-type: size;
  container-name: super-hero;

  display: grid;
  grid-template-areas: "hero";

  block-size: calc(var(--_super-hero-height) - var(--_super-hero-preview-strip));
}

.super-hero--compressed {
  --_super-hero-preview-strip: 45dvh;
}

/* ── Background media ────────────────────────────────────────────────────── */

/*
 * `position: sticky` keeps the media locked in the viewport as the user
 * scrolls into the next section. The next section slides over the top of it,
 * which is what triggers the blur overlay effect.
 *
 * The negative `margin-block-end` collapses the media's block size so it
 * doesn't push subsequent content down — the hero's own block-size controls
 * the scroll distance instead.
 *
 * `100dvh` accounts for mobile browser chrome. The header height is
 * subtracted via the custom property set on the layout.
 */
.super-hero__media {
  position: sticky;
  top: 0;
  z-index: var(--_z-background);

  overflow: hidden;

  block-size: var(--_super-hero-height);
  margin-block-end: calc(-1 * var(--_super-hero-height));
}
#layout-builder .super-hero__media {
  grid-area: hero;
  position: static;
  block-size:auto;
  margin-block-end: 0;
}

.super-hero__video,
.super-hero__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Carousel ────────────────────────────────────────────────────────────── */

/*
 * Decorative auto-advancing slideshow.
 *
 * JS manages slide state only:
 *   - which slide is current
 *   - which slide is entering
 *   - which slide is parked
 *
 * CSS performs the visual transition. Only mask-position is animated.
 *
 * --slide-duration: how long the current slide remains fully visible.
 * --slide-fade:    duration of the incoming wipe.
 * --slide-count:   number of real slides, supplied by Twig.
 *
 * --_angle-offset controls the diagonal angle of the wipe edge.
 */
.super-hero__carousel {
  --_angle-offset: 12%;
  --slide-total-time: 5s;
  --slide-duration: calc(var(--slide-total-time) - var(--slide-fade));
  --slide-fade: 1.255s;
  --slide-ease: cubic-bezier(0.00, 0.00, 0.00, 0.97);

  /*
   * These z-index values belong exclusively to the carousel. They don't
   * participate in the larger hero/media stacking system.
   */
  --_carousel-z-parked: 0;
  --_carousel-z-current: 1;
  --_carousel-z-entering: 2;

  /*
  * the following defines two mask states: visible and hidden.
   */
  --_carousel-mask-visible: 100% 100%;
  --_carousel-mask-hidden: 0% 0%;

  position: relative;
  isolation: isolate;

  overflow: clip;
  inline-size: 100%;
  block-size: 100%;
}

.super-hero__slides {
  display: grid;
  grid-template-areas: "slide";

  inline-size: 100%;
  block-size: 100%;

  list-style: none;
  margin: 0;
  padding: 0;
}

.super-hero__slide {
  grid-area: slide;

  position: relative;
  block-size: 100%;
  overflow: hidden;

  /*necessary to tell safari to process the transitioning slide underneath blurred layers*/
  will-change: transform;

  /* parked: mask positioned so the opaque region is entirely off-screen */
  mask-image: linear-gradient(100deg, transparent 0%, transparent 50%, black 50%, black 100%);
  mask-size: 250% 250%;

  z-index: var(--_carousel-z-parked);
  mask-position: var(--_carousel-mask-visible);

  transition:none;
}


/*
 * Stable visible state.
 */
.super-hero__slide.is-current {
  z-index: var(--_carousel-z-current);
  mask-position: var(--_carousel-mask-visible);
  transition:none;
}

/*
 * Incoming state: promoted above the current slide, but still parked.
 * No transition is active yet.
 */
.super-hero__slide.is-entering {
  z-index: var(--_carousel-z-entering);
  mask-position: var(--_carousel-mask-hidden);
  transition:none;
}

/*
 * Animating: mask slides from off-screen to fully covering the slide.
 */
.super-hero__slide.is-entering.is-animating {
  mask-position: var(--_carousel-mask-visible);
  transition: mask-position var(--slide-fade) var(--slide-ease);
}

/*
 * Parked slides are completely hidden from the carousel's stacking layer.
 * The mask-position reset is instantaneous (transition: none), so recycling
 * never produces a visible reverse animation.
 */
.super-hero__slide.is-parked {
  z-index: var(--_carousel-z-parked);
  mask-position: var(--_carousel-mask-visible);
  transition: none;
}

.super-hero__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Blur overlay ────────────────────────────────────────────────────────── */

/*
 * Sits between the media and the content. As the user scrolls, JS updates
 * --_blur-progress (0→1) by measuring .super-hero__content's position.
 * Thresholds are controlled by --_blur-start and --_blur-end on the layout.
 * Both the darkening fill and the backdrop-filter blur are driven by that
 * single value so they stay in lockstep.
 */
.super-hero__blur-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--_z-overlay);
  pointer-events: none;

  background: oklch(0% 0 250 / calc(0.2 * calc(0.25 + var(--_blur-progress, 0))));
  backdrop-filter: blur(calc(16px * var(--_blur-progress, 0)));

  /* Smooth out any jank from discrete scroll events */
  transition: background 0.1s ease-out, backdrop-filter 0.1s ease-out;
}

/*commented out for testing -- don't remove*/
/*.layout:has(.block-baylor-super-hero + * :hover) .super-hero__blur-overlay {*/
/*  !*background: oklch(0% 0 250 / calc(0.4 * calc(0.25 + var(--_blur-progress, 0))));*!*/
/*  backdrop-filter: blur(calc(16.5px * var(--_blur-progress, 0)));*/
/*}*/

/* ── Text content ────────────────────────────────────────────────────────── */

.super-hero__content[data-text_background_color="dark"] {
  --_text-color: white;
  --_text-background: black;
}

/*
 * Two pseudo-elements create a soft, blurred glow behind the text block
 * without a hard-edged box. Both sit behind the content (z-index: -1).
 *
 * ::before — a coloured fill (defaulting to black at 30% opacity) blurred
 *   outward with `filter: blur`, producing a soft halo.
 * ::after  — a heavy `backdrop-filter` blur that smears whatever media is
 *   behind the content area, reinforcing legibility.
 */
.super-hero__content::after,
.super-hero__content::before {
  content: '';
  position: absolute;
  z-index: var(--_z-behind);
}

.super-hero__content::before {
  inset: calc(-0.12 * var(--_inset));
  backdrop-filter: blur(5px);

  /* mask feathers the blur so it doesn't have a hard edge */
  mask-image: radial-gradient(ellipse at center, black 60%, transparent 80%);
}

.super-hero__content::after {
  inset: calc(-.25 * var(--_inset));
  background: var(--_text-background, black);
  opacity: 0.4;
  filter: blur(25px);
}

.super-hero__content {
  --_inset: 1rem;
  --_color: var(--white);
  --_color-eyebrow: var(--universityGold);
  --_color-title: var(--_color);
  --_color-subtitle: var(--_color);
  --_color-link: var(--_color);
  --_color-link-underline: var(--_color-link);

  --_text-shadow: 1px 1px 10px var(--_text-background, #000a);
  --_text-shadow: 0 0 0 transparent;

  --_z-behind: -1;

  position: relative;
  grid-area: hero;
  z-index: var(--_z-content);
  align-self: center;
  justify-self: start;

  color: var(--_color, white);
  inline-size: min(50%, 550px);

  padding: calc(2 * var(--_inset));
  margin: max(10%, var(--_text-margin));

  /*text-shadow: 1px 1px 10px var(--_text-background, black);*/
}

/* Alignment modifiers */
.super-hero--align-left   .super-hero__content { justify-self: start; }
.super-hero--align-center .super-hero__content { justify-self: center; }
.super-hero--align-right  .super-hero__content { justify-self: end; }

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.super-hero__eyebrow {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  font-family: var(--font-family--sans);
  color: var(--_color-eyebrow);
  text-shadow: var(--_text-shadow);
}

/* ── Title ───────────────────────────────────────────────────────────────── */

.super-hero__title {
  margin: 0 0 0.5rem;
  color: var(--_color-title);
  font-size: 48px;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.super-hero__body {
  margin-block-start: 0.75rem;
  color: var(--_color);
}

.super-hero__content :is(h2, h3, h4, h5, h6) {
  color: inherit;
}

.super-hero__content a:not(.baylor-button, .baylor-button__explore) {
  --_link-color: var(--universityGold);
  color: var(--white) !important;
  border-bottom-color: var(--white) !important;
  background-image: linear-gradient(var(--universityGold),var(--universityGold));
}
:is(.super-hero__content) *:not([class*="uiFrameworkCalendar__controls"]) > a:not([class*="baylor-button"]) {
  color: var(--white);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.super-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
}

.super-hero__buttons .baylor-button:hover {
  text-shadow: 0 0 0 transparent;
}

.super-hero__buttons .baylor-button__explore {
  --_icon-padding: 24px;
  /*margin: var(--_icon-padding);*/
  margin-right: calc(var(--_icon-size) + var(--_icon-padding));
  padding:3px 0;
  text-shadow: var(--_text-shadow);
}

/*
 * Dark background contexts need white button text regardless of the
 * button's own default colour.
 */
[data-text_background_color="dark"] .baylor-button,
[data-text_background_color="black"] .baylor-button,
[data-text_background_color="green"] .baylor-button {
  color: #fff;
}

/* ── Pause button ────────────────────────────────────────────────────────── */

/*
 * Sits next to .super-hero__content, in the normal document flow.
 * Without JS the button scrolls away with the content — acceptable as a
 * no-JS baseline.
 *
 * Icon approach mirrors message_centers.css: both ::before (play) and ::after
 * (pause) pseudo-elements sit in the same named grid cell and overlap.
 * The pause icon is visible by default; the play icon is hidden.
 * When aria-pressed="true", they swap — matching the isPaused class pattern
 * in the message center controller.
 */
.super-hero__pause-btn {
  --_btn-size: 2.5rem;
  --_icon-size: calc(0.467 * var(--_btn-size));
  --_btn-animation-speed: .15s;
  --_btn-animation-ease: ease;
  --_btn-inset: 2rem;

  position: absolute;
  inset-block-start: calc(var(--_super-hero-height) - var(--_super-hero-preview-strip) - var(--_btn-inset));
  inset-inline-end: var(--_btn-inset);

  display: grid;
  grid-template-areas: "center";
  place-items: center;

  block-size: var(--_btn-size);
  inline-size: var(--_btn-size);
  border-radius: 50%;
  border: 2px solid white;
  background: transparent;
  color: white;
  cursor: pointer;

  transition: background calc(var(--_btn-animation-speed) * 1.5) var(--_btn-animation-ease), transform var(--_btn-animation-speed) var(--_btn-animation-ease);

  /* Visible focus state — meets WCAG 2.4.11 Focus Appearance */
  &:focus-visible {
    outline: 3px solid white;
    outline-offset: 3px;
  }

    &:hover {
    background: oklch(100% 0 0 / 0.1);
    transform: scale(1.1);
  }
}

.layout .block-baylor-super-hero:last-child .super-hero__pause-btn {
  inset-block-start: calc(var(--_super-hero-height) - var(--_super-hero-preview-strip) - (2 * var(--_btn-inset)));
}


/*
 * Both pseudo-elements share the same grid cell (grid-area: center) so they
 * stack. Sizing is proportional to the button token, matching the message
 * center pattern. pointer-events: none lets clicks reach the button itself.
 * Small translate nudges optically centre each SVG shape within the circle.
 */
.super-hero__pause-btn::before,
.super-hero__pause-btn::after {
  content: '';

  width: var(--_icon-size);
  height: var(--_icon-size);

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  pointer-events: none;
  grid-area: center;

  filter: invert(1);
}

/* Pause icon (default visible state) */
.super-hero__pause-btn::after {
  background-image: var(--icon-pause);
  translate: -1% 0;
}

/* Play icon (hidden by default; shown when paused) */
.super-hero__pause-btn::before {
  background-image: var(--icon-play);
  translate: 7% 0;
  opacity: 0;
}

/* Swap icons when aria-pressed="true" (paused state) */
.super-hero__pause-btn[aria-pressed="true"]::after {
  opacity: 0;
}

.super-hero__pause-btn[aria-pressed="true"]::before {
  opacity: 1;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

/*
 * For users who prefer reduced motion:
 * - The carousel wipe transition is removed; slides cut instantly instead.
 * - The blur overlay transition is removed; it updates discretely on scroll.
 *
 * The carousel still advances (it's decorative and aria-hidden), but the
 * animated mask-position wipe is eliminated. JS also reads this preference
 * and skips adding is-animating entirely, so this block is a belt-and-braces
 * safeguard rather than the primary mechanism.
 */
@media (prefers-reduced-motion: reduce) {
  .super-hero__slide.is-entering.is-animating {
    transition: none;
  }

  .super-hero__blur-overlay {
    transition: none;
  }
}