/* CMX Hero 2.0 */

.cmx-hero { position: relative; width: 100%; overflow: hidden; background: #000; isolation: isolate; }

/* Height comes from an id-scoped rule printed by the module. */
.cmx-hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.7778;
  container-type: inline-size;   /* lets layer type scale in cqw */
}

.cmx-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 500ms ease; z-index: 1; }
.cmx-hero__slide.is-on { opacity: 1; visibility: visible; z-index: 2; }

.cmx-hero__media { position: absolute; inset: 0; }
.cmx-hero__m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms ease; }
.cmx-hero__m.is-on { opacity: 1; }

/* A plain <img> carries the LCP, then fades once playback starts. */
.cmx-hero__lcp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity 400ms ease; }
.cmx-hero.is-playing .cmx-hero__lcp { opacity: 0; pointer-events: none; }

/* Locked to LTR: coordinates are physical and never mirror in Arabic. */
.cmx-hero__layers { position: absolute; inset: 0; direction: ltr; pointer-events: none; z-index: 3; }

.cmx-hero__layer {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}

.cmx-hero__layer.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.cmx-hero__layer:not(.is-on) { transform: translate(-50%, calc(-50% + 24px)); }
.cmx-hero__layer img { display: block; width: 100%; height: auto; }

/* Icon badge: one font-size drives glyph, label and padding together.
   --cmx-ic sizes the glyph independently of the label. */
.cmx-hero__layer--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
}

.cmx-hero__layer--icon a {
  display: flex;
  flex-direction: inherit;
  align-items: center;
  justify-content: center;
  gap: inherit;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.cmx-hero__layer--col { flex-direction: column; gap: .35em; }

.cmx-hero__ic {
  width: var(--cmx-ic, 1.15em);
  height: var(--cmx-ic, 1.15em);
  flex: 0 0 auto;
  display: block;
}

.cmx-hero__layer--icon span {
  font-size: var(--cmx-lb, .78em);
  line-height: 1.15;
  white-space: nowrap;
}

.cmx-hero__layer--icon:hover { opacity: .9; }

@media (max-width: 767px) { .cmx-hide-mobile { display: none !important; } }

.cmx-hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; padding: 0 0 3px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; opacity: .7; transition: opacity .2s, background .2s;
}
.cmx-hero__nav:hover { opacity: 1; background: rgba(0,0,0,.55); }
.cmx-hero__nav--p { left: 12px; right: auto; }
.cmx-hero__nav--n { right: 12px; left: auto; }

.cmx-hero__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.cmx-hero__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: background .2s, transform .2s; }
.cmx-hero__dot.is-on { background: #fff; transform: scale(1.25); }

.cmx-hero__nav:focus-visible, .cmx-hero__dot:focus-visible, .cmx-hero__layer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cmx-hero__slide, .cmx-hero__layer, .cmx-hero__m { transition-duration: 1ms !important; }
  .cmx-hero__layer:not(.is-on) { transform: translate(-50%, -50%); }
}
@media (max-width: 767px) {
  .cmx-hero { margin-top: 12px; }
}