/* MRO Hero Section: styles for the acf/mro-hero block. */

.mro-hero {
  padding-top: var(--wp--preset--spacing--100);
  /* the inset photo hangs into the next section, so the bottom gets extra room */
  padding-bottom: calc(var(--wp--custom--layout--section-pad) + var(--wp--preset--spacing--100));
  overflow: hidden;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}
.mro-hero .mro-hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--wp--custom--layout--grid-gap);
  width: 100%;
  max-width: calc(var(--wp--style--global--content-size) + var(--wp--custom--layout--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter);
}
.mro-hero .mro-hero__content { grid-column: 1 / span 6; }
.mro-hero .mro-hero__media { grid-column: 7 / span 6; position: relative; }

.mro-hero .mro-hero__title {
  margin: 0 0 var(--wp--preset--spacing--60);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--huge);
  font-weight: 400;
  line-height: var(--wp--custom--leading--display);
  letter-spacing: var(--wp--custom--tracking--display);
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast);
}
.mro-hero .mro-hero__accent { display: block; color: var(--wp--preset--color--accent); }

.mro-hero .mro-hero__lead {
  max-width: var(--wp--custom--layout--measure);
  margin: 0 0 var(--wp--preset--spacing--70);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--muted);
}
.mro-hero .mro-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--50);
}
.mro-hero .mro-hero__note {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  color: var(--wp--preset--color--subtle);
}
.mro-hero .mro-hero__note .mro-icon {
  flex-shrink: 0;
  width: var(--wp--custom--icon--sm);
  height: var(--wp--custom--icon--sm);
  color: var(--wp--preset--color--accent-deep);
}

.mro-hero .mro-hero__img {
  display: block;
  width: calc(100% - var(--wp--preset--spacing--90));
  height: auto;
  margin-left: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--preset--shadow--lg);
}
.mro-hero .mro-hero__inset {
  position: absolute;
  left: 0;
  bottom: calc(var(--wp--preset--spacing--80) * -1);
  display: block;
  width: 38%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: var(--wp--preset--spacing--20) solid var(--wp--preset--color--base);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--preset--shadow--lg);
}
.mro-hero .mro-hero__badge {
  position: absolute;
  top: var(--wp--preset--spacing--80);
  right: calc(var(--wp--preset--spacing--60) * -1);
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  max-width: 16rem;
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--base);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--preset--shadow--lg);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--tight);
  color: var(--wp--preset--color--muted);
}
.mro-hero .mro-hero__badge p { margin: 0; }
.mro-hero .mro-hero__badge strong {
  display: block;
  margin-bottom: var(--wp--preset--spacing--10);
  color: var(--wp--preset--color--contrast);
}
.mro-hero .mro-hero__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--wp--custom--icon--box);
  height: var(--wp--custom--icon--box);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--mint-soft);
  color: var(--wp--preset--color--accent-deep);
}
.mro-hero .mro-hero__badge-icon .mro-icon {
  width: var(--wp--custom--icon--md);
  height: var(--wp--custom--icon--md);
}

@media (max-width: 1023.98px) {
  .mro-hero { padding-top: var(--wp--preset--spacing--80); }
  .mro-hero .mro-hero__content,
  .mro-hero .mro-hero__media { grid-column: 1 / -1; }
  .mro-hero .mro-hero__img { width: 100%; aspect-ratio: 4 / 3; }
  .mro-hero .mro-hero__inset { width: 30%; left: var(--wp--preset--spacing--40); }
  .mro-hero .mro-hero__badge { right: var(--wp--preset--spacing--40); top: var(--wp--preset--spacing--40); }
}

@media (max-width: 767.98px) {
  .mro-hero .mro-hero__actions .mro-btn { width: 100%; }
  .mro-hero .mro-hero__badge { max-width: 13rem; padding: var(--wp--preset--spacing--30); }
  .mro-hero .mro-hero__badge-icon { display: none; }
}