/**
 * Hero SDC — structural CSS only (section spacing, max-width container,
 * optional side-by-side image placement). The pasted html_text markup
 * carries its own visual styling via inline styles.
 */
.mk3-sdc--hero .mk3-hero__inner {
  max-width: 80rem; /* 1280px, matches .mk3-header__wrap / .mk3-footer__top */
  margin: 0 auto;
  padding: clamp(3.25rem, 6vw, 4.5rem) 3rem;
}

.mk3-sdc--hero .mk3-hero__inner--split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.5rem;
  align-items: center;
}

.mk3-sdc--hero .mk3-hero__image img {
  width: 100%;
  display: block;
  border-radius: 1.25rem;
}

@media (max-width: 768px) {
  .mk3-sdc--hero .mk3-hero__inner {
    padding: 2.5rem 1.25rem;
  }
  .mk3-sdc--hero .mk3-hero__inner--split {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .mk3-sdc--hero .mk3-hero__image {
    order: -1;
  }
}

/* "hero--side-gradient" field_css_tag variant (Portfolio's hero, and any
 * other page pairing a full-bleed background photo with light text) —
 * html/Portfolio.html pairs its background photo with a fixed dark-to-
 * transparent scrim (`linear-gradient(90deg, rgba(15,15,18,.9),
 * rgba(15,15,18,.6))`) so white text stays legible over any part of the
 * image. paragraph--general.html.twig only ever applies a flat
 * `background-image` from field_background_image (no gradient) — this
 * field_css_tag value was being set on affected nodes but had no matching
 * CSS anywhere in the theme, so text sat directly on the raw photo with no
 * scrim at all. */
.mk3-sdc--hero.hero--side-gradient {
  position: relative;
}
.mk3-sdc--hero.hero--side-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 15, 18, .9), rgba(15, 15, 18, .6));
  pointer-events: none;
}
.mk3-sdc--hero.hero--side-gradient .mk3-hero__inner {
  position: relative;
  z-index: 1;
}

/* "hero--top-gradient" field_css_tag variant (Contact) — same scrim
 * mechanism as hero--side-gradient above, but html/Contact.html pairs its
 * background photo with a top-to-bottom gradient
 * (`linear-gradient(180deg, rgba(15,15,18,.7), rgba(15,15,18,.85))`) rather
 * than side-gradient's left-to-right one — the two source mockups use
 * different gradient directions for the same technique, so this is a
 * distinct variant rather than reusing hero--side-gradient with the wrong
 * angle. */
.mk3-sdc--hero.hero--top-gradient {
  position: relative;
}
.mk3-sdc--hero.hero--top-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 18, .7), rgba(15, 15, 18, .85));
  pointer-events: none;
}
.mk3-sdc--hero.hero--top-gradient .mk3-hero__inner {
  position: relative;
  z-index: 1;
}

/* "hero--with-form" field_css_tag variant (Free Audit) — pairs the hero with
 * its sibling embedded webform as a 1.05fr/.95fr row (matches html/Free
 * Audit.html's `grid-template-columns:1.05fr .95fr`). Same float + :has()
 * pairing technique as content-with-form.css (see that file's comment for
 * why :has() + adjacent-sibling is needed: the two paragraphs are cousins in
 * separate `.field__item` wrappers, not siblings themselves) — including
 * giving BOTH halves the same #0F0F12 background (the webform paragraph's
 * own field_background_color, set to match) so they read as one continuous
 * dark hero instead of the webform column sitting on plain white; the actual
 * <form> then gets its own nested white rounded card exactly like content-
 * with-form's webform side does. */
.field__item:has(> .paragraph--field-type--hero .hero--with-form),
.field__item:has(> .paragraph--field-type--hero .hero--with-form)
+ .field__item:has(> .paragraph--type--embedded-element) {
  float: left;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768.02px) {
  .field__item:has(> .paragraph--field-type--hero .hero--with-form) {
    width: 52.5%; /* 1.05fr of the source's 2fr (1.05 + .95) total */
  }

  .field__item:has(> .paragraph--field-type--hero .hero--with-form)
  + .field__item:has(> .paragraph--type--embedded-element) {
    width: 47.5%; /* .95fr */
    display: flex;
    align-items: center;
    padding: clamp(3.25rem, 6vw, 4.5rem) 3rem clamp(3.25rem, 6vw, 4.5rem) 0;
  }
}

.field__item:has(> .paragraph--field-type--hero .hero--with-form)
+ .field__item:has(> .paragraph--type--embedded-element) > .paragraph {
  width: 100%;
  box-sizing: border-box;
}

.field__item:has(> .paragraph--field-type--hero .hero--with-form)
+ .field__item:has(> .paragraph--type--embedded-element) > .paragraph > * {
  background: #fff;
  color: #0F0F12;
  border-radius: 1.25rem;
  padding: 2.125rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .field__item:has(> .paragraph--field-type--hero .hero--with-form)
  + .field__item:has(> .paragraph--type--embedded-element) {
    padding: 0 1.25rem 2.5rem;
  }
}