/* Hero option behavior that is independent of named slide presets.
   Colors come from Bootstrap variables so theme swaps remain authoritative. */

.hero-callout-cover {
  --uaa-hero-treatment-rgb: var(--bs-dark-rgb);
  --uaa-hero-treatment-alpha: 0.92;
  pointer-events: none;
}

.hero-callout-cover.background-black {
  --uaa-hero-treatment-rgb: var(--bs-black-rgb);
}

.hero-callout-cover.background-dark {
  --uaa-hero-treatment-rgb: var(--bs-dark-rgb);
}

.hero-callout-cover.background-primary {
  --uaa-hero-treatment-rgb: var(--bs-primary-rgb);
}

.hero-callout-cover.background-secondary {
  --uaa-hero-treatment-rgb: var(--bs-secondary-rgb);
}

.hero-callout-cover.background-light {
  --uaa-hero-treatment-rgb: var(--bs-light-rgb);
}

.hero-callout-cover.background-none {
  --uaa-hero-treatment-alpha: 0;
}

.hero-callout-cover.background-style-none {
  background: rgba(var(--uaa-hero-treatment-rgb), var(--uaa-hero-treatment-alpha));
}

/* The default dark treatment is UAA's warm transparent scrim, not flat black. */
.hero-callout-cover.background-dark.background-style-none,
.hero-callout-cover.background-black.background-style-none {
  --uaa-hero-treatment-rgb: 36, 35, 33;
  --uaa-hero-treatment-alpha: 0.55;
}

.hero-callout-cover.background-style-bottom {
  background: linear-gradient(
    to top,
    rgba(var(--uaa-hero-treatment-rgb), var(--uaa-hero-treatment-alpha)) 0%,
    rgba(var(--uaa-hero-treatment-rgb), calc(var(--uaa-hero-treatment-alpha) * 0.82)) 38%,
    rgba(var(--uaa-hero-treatment-rgb), 0) 100%
  );
}

.hero-callout-cover.background-style-top {
  background: linear-gradient(
    to bottom,
    rgba(var(--uaa-hero-treatment-rgb), var(--uaa-hero-treatment-alpha)) 0%,
    rgba(var(--uaa-hero-treatment-rgb), calc(var(--uaa-hero-treatment-alpha) * 0.82)) 38%,
    rgba(var(--uaa-hero-treatment-rgb), 0) 100%
  );
}

.hero-callout-cover.background-style-left {
  background: linear-gradient(
    to right,
    rgba(var(--uaa-hero-treatment-rgb), var(--uaa-hero-treatment-alpha)) 0%,
    rgba(var(--uaa-hero-treatment-rgb), calc(var(--uaa-hero-treatment-alpha) * 0.82)) 38%,
    rgba(var(--uaa-hero-treatment-rgb), 0) 100%
  );
}

.hero-callout-cover.background-style-right {
  background: linear-gradient(
    to left,
    rgba(var(--uaa-hero-treatment-rgb), var(--uaa-hero-treatment-alpha)) 0%,
    rgba(var(--uaa-hero-treatment-rgb), calc(var(--uaa-hero-treatment-alpha) * 0.82)) 38%,
    rgba(var(--uaa-hero-treatment-rgb), 0) 100%
  );
}

.hero-callout-cover.background-style-top-left {
  background: linear-gradient(
    to bottom right,
    rgba(var(--uaa-hero-treatment-rgb), var(--uaa-hero-treatment-alpha)) 0%,
    rgba(var(--uaa-hero-treatment-rgb), calc(var(--uaa-hero-treatment-alpha) * 0.82)) 38%,
    rgba(var(--uaa-hero-treatment-rgb), 0) 100%
  );
}

.hero-callout-cover.background-style-top-right {
  background: linear-gradient(
    to bottom left,
    rgba(var(--uaa-hero-treatment-rgb), var(--uaa-hero-treatment-alpha)) 0%,
    rgba(var(--uaa-hero-treatment-rgb), calc(var(--uaa-hero-treatment-alpha) * 0.82)) 38%,
    rgba(var(--uaa-hero-treatment-rgb), 0) 100%
  );
}

.hero-callout-cover.background-style-bottom-left {
  background: linear-gradient(
    to top right,
    rgba(var(--uaa-hero-treatment-rgb), var(--uaa-hero-treatment-alpha)) 0%,
    rgba(var(--uaa-hero-treatment-rgb), calc(var(--uaa-hero-treatment-alpha) * 0.82)) 38%,
    rgba(var(--uaa-hero-treatment-rgb), 0) 100%
  );
}

.hero-callout-cover.background-style-bottom-right {
  background: linear-gradient(
    to top left,
    rgba(var(--uaa-hero-treatment-rgb), var(--uaa-hero-treatment-alpha)) 0%,
    rgba(var(--uaa-hero-treatment-rgb), calc(var(--uaa-hero-treatment-alpha) * 0.82)) 38%,
    rgba(var(--uaa-hero-treatment-rgb), 0) 100%
  );
}

.hero-callout-cover.background-style-blur {
  background: rgba(var(--uaa-hero-treatment-rgb), calc(var(--uaa-hero-treatment-alpha) * 0.72));
  -webkit-backdrop-filter: blur(0.75rem);
  backdrop-filter: blur(0.75rem);
}

/* The cover owns the background when overlay is enabled. The caption remains
   the positioning and padding canvas instead of painting a second background. */
.hero-slide .hero-caption.has-cover-overlay {
  background: transparent;
}

/* Padding is independent of the background/overlay choice. Header clearance is
   always preserved; none, normal and large only change the content breathing room. */
.hero-caption.padding-none,
.hero-caption.padding-normal,
.hero-caption.padding-large {
  --uaa-hero-fixed-header-height: calc(
    var(--topbar-height, 3.125rem) + var(--mainbar-height, 5.3125rem)
  );
  box-sizing: border-box;
  padding-block-start: calc(var(--uaa-hero-fixed-header-height) + var(--uaa-hero-padding-y));
  padding-inline: var(--uaa-hero-padding-x);
  padding-block-end: var(--uaa-hero-padding-y);
}

.hero-caption.padding-none {
  --uaa-hero-padding-x: 0rem;
  --uaa-hero-padding-y: 0rem;
}

.hero-caption.padding-normal {
  --uaa-hero-padding-x: clamp(1.5rem, 5vw, 5rem);
  --uaa-hero-padding-y: clamp(1.5rem, 3.5vw, 3.5rem);
}

.hero-caption.padding-large {
  --uaa-hero-padding-x: clamp(2.5rem, 9vw, 9rem);
  --uaa-hero-padding-y: clamp(2.5rem, 6vw, 6rem);
}

/* Intermediate hero callout positions.
   Center-left means the callout's right edge meets the slide centerline.
   Center-right means the callout's left edge meets the slide centerline.
   The caption remains the GSAP parallax layer; the individual CSS translate
   property moves only the direct hero box without replacing transform. */
.hero-slide .hero-caption:is(
  .pos-top-center-left,
  .pos-top-center-right,
  .pos-middle-center-left,
  .pos-middle-center-right,
  .pos-bottom-center-left,
  .pos-bottom-center-right
) {
  display: flex;
  justify-content: center;
}

.hero-slide .hero-caption:is(
  .pos-top-center-left,
  .pos-top-center-right
) {
  align-items: flex-start;
}

.hero-slide .hero-caption:is(
  .pos-middle-center-left,
  .pos-middle-center-right
) {
  align-items: center;
}

.hero-slide .hero-caption:is(
  .pos-bottom-center-left,
  .pos-bottom-center-right
) {
  align-items: flex-end;
}

.hero-slide .hero-caption:is(
  .pos-top-center-left,
  .pos-middle-center-left,
  .pos-bottom-center-left
) > .hero-box {
  translate: -50% 0;
}

.hero-slide .hero-caption:is(
  .pos-top-center-right,
  .pos-middle-center-right,
  .pos-bottom-center-right
) > .hero-box {
  translate: 50% 0;
}

/* Intermediate anchors are not useful once the callout becomes full-width.
   On phones, collapse them to the corresponding edge to prevent overflow. */
@media (max-width: 767.98px) {
  .hero-slide .hero-caption:is(
    .pos-top-center-left,
    .pos-middle-center-left,
    .pos-bottom-center-left
  ) {
    justify-content: flex-start;
  }

  .hero-slide .hero-caption:is(
    .pos-top-center-right,
    .pos-middle-center-right,
    .pos-bottom-center-right
  ) {
    justify-content: flex-end;
  }

  .hero-slide .hero-caption:is(
    .pos-top-center-left,
    .pos-top-center-right,
    .pos-middle-center-left,
    .pos-middle-center-right,
    .pos-bottom-center-left,
    .pos-bottom-center-right
  ) > .hero-box {
    translate: none;
  }
}