/* ZRM Hero — bundled with zrm-hero.php in this folder (CSS Grid) */

.zrm-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--zrm-hero-height);
  /* min-height: var(--zrm-hero-height, 50vh); */
}

/* Full width: break out of section constraints to span full viewport */
.zrm-hero--full-width:not(.zrm-hero--half) {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: none;
}

.zrm-hero--full-width:not(.zrm-hero--half) .zrm-hero__content {
  max-width: var(--container-desktop);
  margin: 0 auto;
}

.zrm-hero--full-width.zrm-hero--half {
  overflow: visible;
}

.zrm-hero--full-width.zrm-hero--half .zrm-hero__image {
  width: 50vw;
  margin: 0 0 0 calc(-1 * (50vw - var(--container-desktop) / 2));
}

.zrm-hero__image img,
.zrm-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Half variant — 2-column grid */
.zrm-hero--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.zrm-hero--half .zrm-hero__image {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  min-width: 0;
}

.zrm-hero--half .zrm-hero__content {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 2rem;
  @media (max-width: 768px) {
    padding: 24px;
  }
}

/* Image on the right: swap columns */
.zrm-hero--image-right.zrm-hero--half .zrm-hero__image {
  grid-column: 2;
}

.zrm-hero--image-right.zrm-hero--half .zrm-hero__content {
  grid-column: 1;
}

/* Content column: 3×3 grid for 9-cell positioning */
.zrm-hero--half .zrm-hero__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "a b c"
    "d e f";
}

.zrm-hero--half .zrm-hero__content > * {
  min-width: 0;
}

.zrm-hero--half .zrm-hero__content.pos-top-left      > * { grid-area: a; justify-self: start; align-self: start; }
.zrm-hero--half .zrm-hero__content.pos-top-center    > * { grid-area: b; justify-self: center; align-self: start; }
.zrm-hero--half .zrm-hero__content.pos-top-right     > * { grid-area: c; justify-self: end; align-self: start; }
.zrm-hero--half .zrm-hero__content.pos-middle-left   > * { grid-area: d; justify-self: start; align-self: center; }
.zrm-hero--half .zrm-hero__content.pos-middle-center > * { grid-area: e; justify-self: center; align-self: center; }
.zrm-hero--half .zrm-hero__content.pos-middle-right  > * { grid-area: f; justify-self: end; align-self: center; }
.zrm-hero--half .zrm-hero__content.pos-bottom-left   > * { grid-area: g; justify-self: start; align-self: end; }
.zrm-hero--half .zrm-hero__content.pos-bottom-center > * { grid-area: h; justify-self: center; align-self: end; }
.zrm-hero--half .zrm-hero__content.pos-bottom-right  > * { grid-area: i; justify-self: end; align-self: end; }

/* Half: stretch children when content spans multiple columns */
.zrm-hero--half .zrm-hero__content.span-2 > *,
.zrm-hero--half .zrm-hero__content.span-3 > * {
  justify-self: stretch;
}

/* Full variant — 3×3 grid over full area */
.zrm-hero--full {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.zrm-hero--full .zrm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.zrm-hero--full .zrm-hero__content {
  position: relative;
  z-index: 1;
  padding: 3rem;
  min-width: 0;
}

/* Full: place content in one of 9 cells via grid-area */
.zrm-hero--full.pos-top-left      { grid-template-areas: "a . ." ". . ." ". . ."; }
.zrm-hero--full.pos-top-center    { grid-template-areas: ". a ." ". . ." ". . ."; }
.zrm-hero--full.pos-top-right     { grid-template-areas: ". . a" ". . ." ". . ."; }
.zrm-hero--full.pos-middle-left   { grid-template-areas: ". . ." "a . ." ". . ."; }
.zrm-hero--full.pos-middle-center { grid-template-areas: ". . ." ". a ." ". . ."; }
.zrm-hero--full.pos-middle-right  { grid-template-areas: ". . ." ". . a" ". . ."; }
.zrm-hero--full.pos-bottom-left   { grid-template-areas: ". . ." ". . ." "a . ."; }
.zrm-hero--full.pos-bottom-center { grid-template-areas: ". . ." ". . ." ". a ."; }
.zrm-hero--full.pos-bottom-right  { grid-template-areas: ". . ." ". . ." ". . a"; }

.zrm-hero--full .zrm-hero__content {
  grid-area: a;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/*
 * Center hero when max-width is set.
 *
 * margin-left = 50% (center of viewport-centered parent) - half hero width.
 * This can be negative when the hero is wider than its container —
 * the negative margin pulls it left so it stays centered in the viewport.
 * Do not clamp with max(0px, …); the negative value is intentional.
 */
.zrm-hero[style*="--zrm-hero-max-width"] {
  align-self: center;
  margin: 0 calc(50% - 50vw);
}