/* ==========================================================================
   Reusable "partner intro" subheading module
   Rendered by any Divi SECTION given the CSS Class `gwa-partner-intro`
   (Divi module settings → Advanced → CSS Class).

   Styles the heading + intro paragraph inside that section to match the Figma
   design, and aligns the section's card grid (any row after the first) to the
   heading/paragraph. Loads site-wide (see functions.php) and is scoped to
   `.gwa-partner-intro`, so it only affects sections that opt in with the class
   — copy-paste the section to any page and the styling comes with it.

   Palette: navy #011c25 | yellow #f9ce3f. Font: theme webfont forma-djr-deck.
   Desktop: yellow rules flank the title. Mobile: full-width yellow border under
   the title. `!important` is used on typographic props so the class reliably
   overrides Divi's per-module dynamic CSS regardless of page/source order.
   EXCEPTION: `font-size` is intentionally left WITHOUT `!important` so the
   heading's own Divi Design → size control can override the design default from
   the CMS (Divi's `#page-container`-scoped CSS out-specifies this class selector).
   The values below stay as the on-brand default when no size is set in the CMS.

   Layout convention within the section:
     .et_pb_row:first-of-type      = the subheading (heading + paragraph)
     .et_pb_row:not(:first-of-type) = the card grid row(s)
   ========================================================================== */

/* Section + block spacing */
.gwa-partner-intro { padding-top: 100px !important; }
.gwa-partner-intro .et_pb_row:first-of-type { margin-bottom: 60px !important; } /* subheading -> cards */
.gwa-partner-intro .et_pb_heading { margin-bottom: 30px !important; }           /* title -> paragraph */

/* Title with flanking yellow rules (short bar left, line fills the right) */
.gwa-partner-intro .et_pb_heading .et_pb_heading_container {
  display: flex !important;
  align-items: center;
  gap: 40px;
}
.gwa-partner-intro .et_pb_heading .et_pb_heading_container::before {
  content: "";
  flex: 0 0 54px;
  height: 4px;
  background: #f9ce3f;
}
.gwa-partner-intro .et_pb_module_heading {
  flex: 0 0 auto;
  max-width: 520px;            /* wraps to exactly 2 lines with the real webfont */
  margin: 0;
  font-family: 'forma-djr-deck' !important;
  font-weight: 700 !important;
  font-size: 55px;              /* default only — CMS size control can override (no !important) */
  line-height: 1 !important;
  letter-spacing: 0.1px !important;
  color: #011c25 !important;
}
.gwa-partner-intro .et_pb_heading .et_pb_heading_container::after {
  content: "";
  flex: 1 1 auto;
  height: 4px;
  background: #f9ce3f;
}

/* Intro paragraph — indented to sit under the title (past the left rule + gap) */
.gwa-partner-intro .et_pb_text .et_pb_text_inner {
  font-family: 'forma-djr-deck' !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: 1.2px !important;
  color: #011c25 !important;
  max-width: 1114px;
  padding-left: 94px;
}

/* Card grid: align the first card's left edge with the heading + paragraph.
   Divi centres the card images (margin:auto), so also left-align them — without
   this the 75%-wide image is inset ~12.5% and the first card sits right of the
   heading. Scoped to >=tablet so mobile keeps Divi's default image layout. */
.gwa-partner-intro .et_pb_row:not(:first-of-type) { padding-left: 94px !important; }
@media (min-width: 768px) {
  .gwa-partner-intro .et_pb_row:not(:first-of-type) .et_pb_image {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Tablet: scale the title down and reduce the indent so nothing overflows */
@media (max-width: 980px) {
  .gwa-partner-intro { padding-top: 60px !important; }
  .gwa-partner-intro .et_pb_module_heading { font-size: 40px; max-width: 380px; }
  .gwa-partner-intro .et_pb_text .et_pb_text_inner { padding-left: 60px; }
  .gwa-partner-intro .et_pb_row:not(:first-of-type) { padding-left: 60px !important; }
}

/* Mobile: full-width bottom rule under the title, stacked cards flush together */
@media (max-width: 767px) {
  .gwa-partner-intro { padding-top: 80px !important; padding-bottom: 20px !important; }

  /* full-width yellow rule lives on the container; the title keeps its own
     max-width so it still wraps to two tidy lines */
  .gwa-partner-intro .et_pb_heading .et_pb_heading_container {
    display: block !important;
    padding-bottom: 30px;
    border-bottom: 4px solid #f9ce3f;
  }
  .gwa-partner-intro .et_pb_heading .et_pb_heading_container::before,
  .gwa-partner-intro .et_pb_heading .et_pb_heading_container::after { display: none; }
  .gwa-partner-intro .et_pb_module_heading {
    max-width: 276px;
    font-size: 30px;             /* default only — CMS size control can override (no !important) */
    border-bottom: none;
    padding-bottom: 0;
  }

  .gwa-partner-intro .et_pb_text .et_pb_text_inner {
    font-size: 16px !important;
    padding-left: 0;
    max-width: none;
  }

  /* space between the content and the cards */
  .gwa-partner-intro .et_pb_row:first-of-type { margin-bottom: 30px !important; }

  /* cards: full-width, no left indent on mobile. Inter-card spacing/dividers set
     in the CMS are RESPECTED by default, so a reused section (e.g. "Popular
     pages") keeps its stacked-column gaps on mobile and matches the live site.
     Add the modifier class `gwa-partner-intro--flush` to a section that should
     instead stack its cards flush with no gap (the original partner-logo grid). */
  .gwa-partner-intro .et_pb_row:not(:first-of-type) { padding-left: 0 !important; }
  .gwa-partner-intro--flush .et_pb_row:not(:first-of-type) .et_pb_column { margin-bottom: 0 !important; }
  .gwa-partner-intro--flush .et_pb_row:not(:first-of-type) .et_pb_space { display: none !important; }
}