/* =========================
   INNER PAGE HERO
   Used by shop, blog, gallery pages
========================= */

.mc-inner-hero {
  position: relative;
  overflow: visible;
  background: var(--mc-charcoal);
  color: var(--mc-white);
  padding: clamp(6rem, 9vw, 9rem) 0 clamp(4rem, 6vw, 5.5rem);
}

/* Radial Lottie  -  overflows upward into the header area (header z-index keeps nav above) */
.mc-inner-hero__radial {
  position: absolute;
  top: -6rem;
  bottom: 0;
  left: 42%;
  right: 0;
  width: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* Two-column grid: heading block left | radial abs-positioned right */
.mc-inner-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 4vw, 5rem);
  row-gap: 0.6rem;
  align-items: end;
}

/* Heading block in the left column */
.mc-inner-hero__eyebrow,
.mc-inner-hero__title,
.mc-inner-hero__sub {
  grid-column: 1;
}

.mc-inner-hero__eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Scoped to parent to beat any broad WC colour inherits (specificity 0,2,0) */
.mc-inner-hero .mc-inner-hero__eyebrow {
  color: var(--mc-green);
}

.mc-inner-hero__sub {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.mc-inner-hero__sub p {
  margin: 0;
}

.mc-inner-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* Services modifier: accent span in H1 + wide container */
.mc-inner-hero--services .mc-inner-hero__title span {
  display: block;
  color: var(--mc-green);
}

/* Responsive  -  collapse to single column below 900px */
@media (max-width: 900px) {
  .mc-inner-hero__inner {
    grid-template-columns: 1fr;
  }

  .mc-inner-hero__eyebrow,
  .mc-inner-hero__title {
    grid-column: 1;
  }

  .mc-inner-hero__radial {
    left: 0;
    right: 0;
    width: 100%;
  }
}