/* === MHF BLOCKS — Global Styles === */
/*
 * This CSS contains ONLY rules that cannot be expressed as Divi 5.0.3
 * block attributes. All typography, colors, spacing, borders, and
 * responsive breakpoints are set in the section HTML files via native
 * block attributes so they're editable in the Visual Builder.
 *
 * Specificity: "body #page-container" prefix beats Divi's generated rules.
 * !important: only where Divi's own rules use it (marked with comments).
 */

/* Design Tokens — shared across sections */
:root {
  --mhf-radius: 12px;
  --mhf-side-margin: 24px;
}

/* Global max-width — caps builder content at 1440px */
body .et_builder_inner_content {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Hide Divi button arrow icon globally.
 * Cannot be disabled via block attrs. Divi's ::after uses !important. */
body #page-container .et_pb_button::after {
  display: none !important;
}

/* ── Hero Section (.mhf-hero) ── */

body #page-container .mhf-hero {
  overflow: hidden;
  position: relative;
}

/* Content sits above the ::before gradient overlay (set via Advanced > CSS) */
body #page-container .mhf-hero .et_pb_row {
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {
  /* Override inline min-height:280px on play button code module.
   * !important: overrides inline style attribute on the element. */
  body #page-container .mhf-hero .et_pb_code_inner > div {
    min-height: 140px !important;
    height: auto !important;
  }

  /* Center text on mobile. Cannot set text-align per-breakpoint
   * on text modules without individual phone attrs on each module. */
  body #page-container .mhf-hero .et_pb_column:first-child,
  body #page-container .mhf-hero .et_pb_column:first-child p,
  body #page-container .mhf-hero .et_pb_column:first-child h1 {
    text-align: center;
  }

  /* Remove inline max-width on description paragraph.
   * !important: overrides inline style attribute. */
  body #page-container .mhf-hero .et_pb_column:first-child p {
    max-width: none !important;
  }

  /* Centre button group on mobile */
  body #page-container .mhf-hero .et_pb_group:has(.et_pb_button) {
    justify-content: center;
  }
}

/* ── Panel with Left Image (.mhf-panel-with-left-image) ── */

/* Image fills column height with cover crop.
 * No block attr for object-fit or parent height inheritance. */
body #page-container .mhf-panel-with-left-image .et_pb_column:first-child .et_pb_image,
body #page-container .mhf-panel-with-left-image .et_pb_column:first-child .et_pb_group,
body #page-container .mhf-panel-with-left-image .et_pb_column:first-child .et_pb_image .et_pb_image_wrap {
  height: 100%;
}

body #page-container .mhf-panel-with-left-image .et_pb_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text column: space-between for label/button alignment.
 * No block attr for column justify-content. */
body #page-container .mhf-panel-with-left-image .et_pb_column:last-child {
  justify-content: space-between;
}

@media (max-width: 980px) {
  /* Fixed image height on mobile so it doesn't collapse to 0 */
  body #page-container .mhf-panel-with-left-image .et_pb_image img {
    height: 300px;
  }

  /* Center text on mobile */
  body #page-container .mhf-panel-with-left-image .et_pb_column:last-child,
  body #page-container .mhf-panel-with-left-image .et_pb_column:last-child p,
  body #page-container .mhf-panel-with-left-image .et_pb_column:last-child h1 {
    text-align: center;
  }
}