/**
 * Media + Overlay Text — parts/elements/media-overlay.php.
 *
 * Loads after css/style.css (functions.php declares theme-styles as a
 * dependency), so nothing here needs !important. Same convention as
 * css/blocks/pillar-timeline.css and css/blocks/semester-timeline.css.
 *
 * Sizes are rem against the 10px root — style.css:702 sets
 * html { font-size: 62.5% }, so 1rem is 10px here, matching every other
 * rem value in style.css (h1 at 6rem, etc). The --space-* custom
 * properties are already declared in px and are safe to use directly.
 *
 * Full-bleed mechanics copy .page-hero-home (style.css:7219): an absolutely
 * positioned figure behind a .container at a higher z-index, not a
 * 100vw/negative-margin trick — page_blocks rows already render as
 * top-level siblings of <main>, so the section itself is already full width.
 */

.block-media-overlay {
  position: relative;
  overflow: hidden;
  /* Fallback while the image decodes/loads, and the colour behind any
     transparent edge of the (uncropped) hero-home size. */
  background-color: var(--nu-cool-black);
}

/* This is the [data-parallax-frame] for js/scroll-fx.js — the box .mo__img
   drifts within and is measured against.

   overflow:hidden is redundant today, because .block-media-overlay above
   already clips and this figure is inset:0 to it. It is set anyway so the
   frame clips its own contents rather than relying on an ancestor to do it:
   the image is pre-overscaled by --parallax-amount (css/anim.css) precisely
   so it can drift without exposing an edge, and that guarantee should not
   quietly depend on a property two elements away that nothing connects to
   the parallax. */
.mo__figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
}

.mo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Real element, not a ::before on .block-media-overlay — lets the
   left/right/center modifiers below flip its gradient direction
   independently, same reasoning as .plt__marker
   (css/blocks/pillar-timeline.css:90-100). */
.mo__scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  /* Text sits on the left by default, so the darkest stop is on the left.
     The 100% stop is floored at 0.6 rather than 0.35 — against a
     near-white uploaded photo, 0.35 composites to only ~2.3:1 for white
     text, while 0.6 holds >=4.5:1 in that worst case. */
  background: linear-gradient(
    90deg,
    rgba(30, 32, 40, 0.88) 0%,
    rgba(30, 32, 40, 0.72) 45%,
    rgba(30, 32, 40, 0.6) 100%
  );
}

.block-media-overlay--text-right .mo__scrim {
  background: linear-gradient(
    270deg,
    rgba(30, 32, 40, 0.88) 0%,
    rgba(30, 32, 40, 0.72) 45%,
    rgba(30, 32, 40, 0.6) 100%
  );
}

.block-media-overlay--text-center .mo__scrim {
  background: rgba(30, 32, 40, 0.7);
}

.mo__inner {
  position: relative;
  z-index: 3;
  min-height: 42rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-24) 0;
  max-width: 58ch;
}

.block-media-overlay--text-right .mo__inner {
  margin-left: auto;
  text-align: right;
}

.block-media-overlay--text-center .mo__inner {
  margin: 0 auto;
  text-align: center;
}

/* Eyebrow — deliberately identical in size to .plt__eyebrow
   (css/blocks/pillar-timeline.css:34-39) rather than a large display
   headline. Uses white rather than the brand red: the scrim behind this
   text is semi-transparent over an arbitrary uploaded photo, so red
   (2.76:1 even on a fixed dark background — see .ls-hero__eyebrow in
   style.css) is not safe here. Matches .hero-editorial__eyebrow and
   .ls-hero__eyebrow, which were moved to white for the same reason. */
.mo__eyebrow {
  font-size: 2rem;
  color: var(--color-brand-white);
  margin: 0 0 var(--space-6);
}

.mo__body p {
  font-size: 1.7rem;
  line-height: var(--leading-relaxed);
  color: var(--color-brand-white);
  margin: 0 0 var(--space-4);
}

.mo__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .mo__inner {
    min-height: 38rem;
    padding: var(--space-20) 0;
  }
}

@media (max-width: 991px) {
  .mo__inner {
    min-height: 32rem;
    padding: var(--space-16) 0;
    max-width: 70ch;
  }
}

@media (max-width: 767px) {
  /* No horizontal room for a directional falloff at this width — flatten
     every variant to the same solid tint. */
  .mo__scrim,
  .block-media-overlay--text-right .mo__scrim,
  .block-media-overlay--text-center .mo__scrim {
    background: rgba(30, 32, 40, 0.78);
  }

  .mo__inner {
    min-height: 26rem;
    padding: var(--space-12) 0;
    max-width: 100%;
  }

  .block-media-overlay--text-right .mo__inner {
    margin-left: 0;
    text-align: left;
  }

  .block-media-overlay--text-center .mo__inner {
    text-align: center;
  }

  .mo__eyebrow {
    font-size: 1.8rem;
  }

  .mo__body p {
    font-size: 1.6rem;
  }
}