/* ub/hero-image, ub/hero-video, ub/video-split
   ==========================================================================

   Loaded only on pages carrying one of these blocks (see ub-elements.php).

   The heroes: a full-bleed photograph (or a muted background video over its
   poster) under a purple gradient that is dense where the text sits and opens
   up toward the far edge, so the picture still reads. The copy is anchored to
   the lower left, the breadcrumb sits on its own frosted strip at the top so it
   stays legible over any photograph, and the H1 is the brand's display size.

   The split: text beside a 16:9 video with the brand's blue corner accent.
   ========================================================================== */

/* -------------------------------------------------------------- shared */
.ub-mhero .screen-reader-text,
.ub-vsplit .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------- hero */
.ub-mhero {
  position: relative;
  display: flex;
  isolation: isolate;
  min-height: clamp(540px, 74vh, 780px);
  background: var(--ub-purple-deep, #2A1240);
  color: #fff;
  overflow: hidden;
}
.ub-mhero--standard { min-height: clamp(440px, 58vh, 600px); }

.ub-mhero-media,
.ub-mhero-scrim {
  position: absolute;
  inset: 0;
}
.ub-mhero-media { z-index: -2; }
.ub-mhero-media img,
.ub-mhero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ub-mhero--focus-top    :is(img, video) { object-position: center 20%; }
.ub-mhero--focus-bottom :is(img, video) { object-position: center 80%; }
.ub-mhero--focus-left   :is(img, video) { object-position: 25% center; }
.ub-mhero--focus-right  :is(img, video) { object-position: 75% center; }
/* The editor's focal point, passed as a custom property: per-image data. */
.ub-mhero--focus-custom :is(img, video) { object-position: var(--ub-mhero-focus, center); }

/* Two layers: a left-to-right purple wash that carries the copy, and a floor
   that deepens toward the bottom edge where the buttons sit. */
.ub-mhero-scrim {
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(42, 18, 64, 0.88) 0%, rgba(42, 18, 64, 0.35) 38%, rgba(42, 18, 64, 0) 62%),
    linear-gradient(90deg, rgba(42, 18, 64, 0.95) 0%, rgba(89, 45, 130, 0.86) 34%, rgba(89, 45, 130, 0.45) 62%, rgba(89, 45, 130, 0.08) 100%);
}
.ub-mhero--plain .ub-mhero-scrim {
  background: linear-gradient(120deg, var(--ub-purple-deep, #2A1240) 0%, var(--ub-purple, #592d82) 100%);
}

/* `.ub-mhero` in front: the theme's `.container { padding: 0 … }` prints
   after this sheet and would otherwise zero the vertical padding. */
.ub-mhero .ub-mhero-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* The breadcrumb on a frosted strip: legible over a bright sky or a dark
   interior without depending on the gradient behind it. */
/* Always on the left, whatever the content position: it is page furniture,
   read in the same place on every page (owner, 2026-10-20). */
.ub-mhero-crumbs { align-self: flex-start; }
.ub-mhero-crumbs ol {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 9px 16px;
  list-style: none;
  background: rgba(18, 8, 38, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}
.ub-mhero-crumbs li {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.86);
}
.ub-mhero-crumbs li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 12px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}
.ub-mhero-crumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-dur, 300ms), border-color var(--transition-dur, 300ms);
}
.ub-mhero-crumbs a:hover,
.ub-mhero-crumbs a:focus-visible {
  color: #fff;
  border-bottom-color: var(--ub-blue, #00a7e0);
}
.ub-mhero-crumbs [aria-current] {
  color: #fff;
  font-weight: 700;
}

.ub-mhero-copy { max-width: 46rem; }
.ub-mhero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking, 0.2em);
  text-transform: uppercase;
}
.ub-mhero-eyebrow::before {
  content: "";
  flex: 0 0 44px;
  height: 3px;
  background: var(--ub-blue, #00a7e0);
}
.ub-mhero .ub-mhero-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: clamp(2.6rem, 5.4vw, 4.9rem);
  font-weight: var(--heading-weight, 800);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(18, 8, 38, 0.35);
}
.ub-mhero-desc {
  margin: 22px 0 0;
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.6;
}
.ub-mhero-desc a { color: #fff; text-decoration-color: var(--ub-blue, #00a7e0); }
.ub-mhero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* ---------------------------------------------- position, gradient, frosted box */
/* Content on the right or centred: the gradient follows the copy. */
.ub-mhero--align-right .ub-mhero-scrim {
  background:
    linear-gradient(0deg, rgba(42, 18, 64, 0.88) 0%, rgba(42, 18, 64, 0.35) 38%, rgba(42, 18, 64, 0) 62%),
    linear-gradient(270deg, rgba(42, 18, 64, 0.95) 0%, rgba(89, 45, 130, 0.86) 34%, rgba(89, 45, 130, 0.45) 62%, rgba(89, 45, 130, 0.08) 100%);
}
.ub-mhero--align-center .ub-mhero-scrim {
  background:
    radial-gradient(ellipse 70% 60% at 50% 62%, rgba(42, 18, 64, 0.78) 0%, rgba(89, 45, 130, 0.55) 55%, rgba(89, 45, 130, 0.25) 100%),
    linear-gradient(0deg, rgba(42, 18, 64, 0.7) 0%, rgba(42, 18, 64, 0) 55%);
}
/* No gradient: the photograph as it is. */
.ub-mhero--bare .ub-mhero-scrim { display: none; }

.ub-mhero--align-right .ub-mhero-copy { margin-left: auto; }
.ub-mhero--align-center .ub-mhero-copy { margin-inline: auto; text-align: center; }
.ub-mhero--align-center .ub-mhero-desc { margin-inline: auto; }
.ub-mhero--align-center .ub-mhero-eyebrow { justify-content: center; }
.ub-mhero--align-center .ub-mhero-eyebrow::after {
  content: "";
  flex: 0 0 44px;
  height: 3px;
  background: var(--ub-blue, #00a7e0);
}
.ub-mhero--align-center .ub-mhero-actions { justify-content: center; }

/* The frosted box: a tinted, blurred panel behind the copy. Dense enough to
   carry white text over a bright photograph with no gradient (owner, 2026-10-20). */
.ub-mhero--panel .ub-mhero-copy {
  position: relative;
  max-width: 44rem;
  padding: clamp(28px, 3.4vw, 48px);
  background: rgba(42, 18, 64, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 4px solid var(--ub-blue, #00a7e0);
  box-shadow: 0 24px 60px rgba(18, 8, 38, 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}
.ub-mhero--panel .ub-mhero-title { font-size: clamp(2.3rem, 4.4vw, 4rem); text-shadow: none; }
.ub-mhero--panel .ub-mhero-desc { max-width: none; }
.ub-mhero--panel .ub-mhero-actions { margin-top: 28px; }
/* Without backdrop-filter the tint alone has to carry the text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ub-mhero--panel .ub-mhero-copy { background: rgba(42, 18, 64, 0.84); }
}

/* Pause / play for the background video (WCAG 2.2.2: moving content that runs
   longer than five seconds needs a way to stop it). */
.ub-mhero-toggle {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #fff;
  background: rgba(18, 8, 38, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--transition-dur, 300ms), border-color var(--transition-dur, 300ms);
}
.ub-mhero-toggle:hover,
.ub-mhero-toggle:focus-visible {
  background: var(--ub-purple, #592d82);
  border-color: #fff;
}
.ub-mhero-toggle:focus-visible { outline: 3px solid var(--ub-blue, #00a7e0); outline-offset: 3px; }

/* The video fades in over its poster once it is actually playing, so a slow
   CDN never shows a black frame. */
.ub-mhero-video { opacity: 0; transition: opacity 600ms ease; }
.ub-mhero-video.is-playing { opacity: 1; }

@media (max-width: 768px) {
  .ub-mhero,
  .ub-mhero--standard { min-height: clamp(480px, 82svh, 640px); }
  .ub-mhero-scrim {
    background: linear-gradient(180deg, rgba(42, 18, 64, 0.62) 0%, rgba(89, 45, 130, 0.72) 45%, rgba(42, 18, 64, 0.94) 100%);
  }
  .ub-mhero .ub-mhero-inner { gap: 32px; }
  .ub-mhero--align-right .ub-mhero-scrim,
  .ub-mhero--align-center .ub-mhero-scrim {
    background: linear-gradient(180deg, rgba(42, 18, 64, 0.62) 0%, rgba(89, 45, 130, 0.72) 45%, rgba(42, 18, 64, 0.94) 100%);
  }
  .ub-mhero--panel .ub-mhero-copy { padding: 24px 22px; }
  .ub-mhero-crumbs ol { padding: 7px 12px; font-size: 0.8rem; }
  .ub-mhero-crumbs li + li::before { margin: 0 9px; }
  .ub-mhero-actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  /* Full-width buttons reach the bottom-right corner on a phone: the toggle
     moves to the free top-right corner, opposite the breadcrumb. */
  .ub-mhero-toggle { top: 16px; bottom: auto; right: 16px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .ub-mhero-video { display: none; }
  .ub-mhero-toggle { display: none; }
}

/* -------------------------------------------------------------- video split */
.ub-vsplit { padding: clamp(4rem, 6vw, 6rem) 0; }
.ub-vsplit--light { background: var(--bg-light, #f4f7f6); }
.ub-vsplit-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ub-vsplit--video-left .ub-vsplit-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.ub-vsplit--video-left .ub-vsplit-media { order: -1; }

/* Doubled up: `.ub-vsplit-copy p` below would otherwise restyle it as body text. */
.ub-vsplit-copy .ub-vsplit-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  color: var(--ub-blue-text, #0A6E8F);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking, 0.2em);
  text-transform: uppercase;
}
.ub-vsplit-copy .ub-vsplit-eyebrow::before {
  content: "";
  flex: 0 0 44px;
  height: 3px;
  background: var(--ub-blue, #00a7e0);
}
.ub-vsplit .ub-vsplit-heading {
  margin: 0 0 20px;
  color: var(--ub-purple, #592d82);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: var(--heading-weight, 800);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.ub-vsplit-copy p {
  margin: 0 0 16px;
  color: var(--text-main, #2c3e50);
  font-size: 1.075rem;
  line-height: 1.7;
}
.ub-vsplit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.ub-vsplit-media { position: relative; isolation: isolate; margin: 0; }
.ub-vsplit-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ub-purple-deep, #2A1240);
  box-shadow: var(--shadow-lg, 0 20px 40px rgba(0, 0, 0, 0.12));
}
/* The brand's blue corner, on the outer bottom edge of the frame. */
.ub-vsplit-frame::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  z-index: -1;
  width: 38%;
  height: 46%;
  background: var(--ub-blue, #00a7e0);
}
.ub-vsplit--video-left .ub-vsplit-frame::after { right: auto; left: -14px; }
.ub-vsplit-frame > :is(video, iframe, .ub-vsplit-play, .ub-vsplit-empty) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.ub-vsplit-frame video { object-fit: cover; background: #000; }

.ub-vsplit-play {
  padding: 0;
  margin: 0;
  background: var(--ub-purple-deep, #2A1240);
  cursor: pointer;
  overflow: hidden;
}
.ub-vsplit-play img,
.ub-vsplit-empty img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--transition-ease, ease);
}
.ub-vsplit-play::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(42, 18, 64, 0) 40%, rgba(42, 18, 64, 0.55) 100%);
}
.ub-vsplit-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  color: #fff;
  font-size: 1.6rem;
  background: var(--ub-purple, #592d82);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(18, 8, 38, 0.35);
  transition: transform var(--transition-dur, 300ms), background var(--transition-dur, 300ms);
}
.ub-vsplit-play-icon::before {
  content: "";
  margin-left: 6px;
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
}
.ub-vsplit-play:hover img { transform: scale(1.03); }
.ub-vsplit-play:hover .ub-vsplit-play-icon,
.ub-vsplit-play:focus-visible .ub-vsplit-play-icon {
  transform: scale(1.08);
  background: var(--ub-blue, #00a7e0);
}
.ub-vsplit-play:focus-visible { outline: 3px solid var(--ub-blue, #00a7e0); outline-offset: 4px; }
.ub-vsplit-caption {
  margin-top: 26px;
  color: var(--text-light, #5b6a75);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .ub-vsplit-grid,
  .ub-vsplit--video-left .ub-vsplit-grid { grid-template-columns: minmax(0, 1fr); }
  .ub-vsplit-media,
  .ub-vsplit--video-left .ub-vsplit-media { order: -1; }
  .ub-vsplit-frame::after { right: -10px; bottom: -10px; }
  .ub-vsplit--video-left .ub-vsplit-frame::after { left: -10px; }
  .ub-vsplit-play-icon { width: 68px; height: 68px; margin: -34px 0 0 -34px; font-size: 1.3rem; }
}