/**
 * Content Box block — styling.
 *
 * Visual spec extracted from Figma frame "Global page Wordpress_RMEX
 * ONBOARDING PHASE_Wireframe" (RULEMATCH-APPLICATIONS, node 4610:5139):
 *   - dark-blue gradient background
 *   - light-blue vertical accent bar inside the left edge
 *   - Open Sans font (SemiBold for headlines, Regular for body)
 *   - horizontal underline beneath the headline
 *   - square "Explore" CTA button in highlight blue
 *
 * Per user direction: layout uses percentages / flex; spacing uses pixels.
 *
 * The same look applies whether the box contains accordion items or not;
 * when items are present the box switches to a two-column layout (text on
 * the left, accordion stack on the right). The block JS handles the
 * expand/collapse behaviour for accordion items.
 */

/* ---- design tokens ------------------------------------------------------- */

.block-content-box {
  --cb-accent: #4277CC;                  /* Highlight Blue */
  --cb-text:   #FFFFFF;
  --cb-rule:   rgba(255, 255, 255, 0.35);
  --cb-bg:     linear-gradient(
    90deg,
    rgb(27, 57, 106)   0%,
    rgb(33, 76, 147)  26%,
    rgb(31, 53, 91)   75%,
    rgb(14, 26, 46)  100%
  );

  --cb-pad-x:    32px;
  --cb-pad-y:    24px;
  --cb-accent-w: 5px;   /* width of the left accent line */
  --cb-accent-gap: 5px; /* horizontal gap between accent line and box */
}

/* ---- container ----------------------------------------------------------- */

.c-content-box {
  position: relative;  /* positioning context for .c-content-box__accent */
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--cb-bg);
  color: var(--cb-text);
  padding: var(--cb-pad-y) var(--cb-pad-x);
  font-family: 'Open Sans', sans-serif;
}

/*
 * Left accent line — sits OUTSIDE the box on the left.
 * Implemented as a real DOM element (first child of .c-content-box) rather
 * than a ::before pseudo so it has a clear place in the DOM order. Positioned
 * with `right: calc(100% + gap)` so the accent's right edge ends one gap to
 * the left of the box's left edge.
 */
.c-content-box__accent {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + var(--cb-accent-gap));
  width: var(--cb-accent-w);
  background: var(--cb-accent);
}

/* ---- inner layout (single column vs two columns with accordion) --------- */

.c-content-box__inner {
  display: block;
  flex-grow: 1;
}
.c-content-box__inner > .c-content-box__main {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.c-content-box--has-accordion .c-content-box__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/*
 * Desktop two-column layout:
 *   - Accordion column fixed at 50% of the box width.
 *   - 90px gap between text and accordion.
 *   - Text column (1fr) absorbs the remainder, ~ 50% − 90px.
 *
 * Using `gap` rather than an empty spacer grid column keeps the DOM clean —
 * the gap is taken out of the available width before `1fr` resolves, so the
 * accordion's 50% is preserved exactly while the text shrinks to fit.
 */
@media (min-width: 768px) {
  .c-content-box--has-accordion .c-content-box__inner {
    grid-template-columns: 1fr 50%;
    gap: 90px;
  }
}

/* ---- typography ---------------------------------------------------------- */

.c-content-box__headline {
  /* Slightly increased spacing per feedback batch — the gap between the
   * headline baseline and the bottom rule, and between the rule and the
   * content below, went from 16px each to 24px each. */
  margin: 0 0 24px 0;
  padding: 0 0 24px 0;
  border-bottom: 1px solid var(--cb-rule);
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 38px;
  line-height: 1.25;
  color: var(--cb-text);
}

.c-content-box__description {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--cb-text);
  flex-grow: 1;
}

.c-content-box__description p:first-child { margin-top: 0; }
.c-content-box__description p:last-child  { margin-bottom: 0; }

/*
 * Paragraph spacing between consecutive <p> elements in BOTH the
 * description (left column) and the accordion item bodies. Uses the
 * adjacent-sibling combinator so margin only appears BETWEEN paragraphs:
 *   - First <p> has no preceding sibling, so no top margin.
 *   - Last <p> never sets a bottom margin.
 *   - Soft line breaks (Shift+Enter → <br>) get no extra spacing, which
 *     matches the editor's intent: Enter = new paragraph, Shift+Enter =
 *     same paragraph.
 *
 * `1em` ties the gap to each block's font-size so the description (20px)
 * gets a 20px gap and the accordion body (16px) gets a 16px gap — the
 * smaller text feels proportionally tighter without an extra rule.
 */
.c-content-box__description p + p,
.c-content-box__item-body p + p {
  margin-top: 1em;
}

/* ---- CTA button --------------------------------------------------------- */

.c-content-box__cta {
  margin-top: 32px;
}

.c-content-box__cta .c-btn,
.c-content-box .c-btn--primary {
  display: inline-block;
  min-width: 130px;
  padding: 6px 16px;
  background: var(--cb-accent);
  color: var(--cb-text);
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
}

.c-content-box__cta .c-btn:hover,
.c-content-box .c-btn--primary:hover {
  filter: brightness(1.1);
}

/* ---- accordion ---------------------------------------------------------- */

.c-content-box__accordion {
  display: flex;
  flex-direction: column;
}

.c-content-box__item {
  border-bottom: 1px solid var(--cb-rule);
}

.c-content-box__item:last-child {
  border-bottom: 0;
}

.c-content-box__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

/*
 * Align the top of the first accordion item with the top of the description.
 * Description has no top padding/margin (handled by p:first-child rule above),
 * so the first item header drops its top padding to match.
 */
.c-content-box__accordion .c-content-box__item:first-child .c-content-box__item-header {
  padding-top: 0;
}

.c-content-box__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--cb-accent);
}

/* Swap plus / minus based on the open state. */
.c-content-box__icon-minus { display: none; }
.c-content-box__item--open .c-content-box__icon-plus  { display: none; }
.c-content-box__item--open .c-content-box__icon-minus { display: block; }

.c-content-box__item-body {
  padding: 0 0 16px 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

/* ---- when two boxes sit side-by-side in a Gutenberg row group ----------- */

/*
 * Editors compose the Hub by wrapping two acf/content-box blocks in a
 * core/group block with layout=flex (row). Gutenberg emits
 * .wp-block-group.is-layout-flex as the wrapper. The group also gets the
 * `container` class auto-added by the render_block filter in
 * inc/loader-blocks.php so the pair is centered with a max-width.
 *
 * Each box grows equally inside the group; on small screens the pair
 * stacks into two rows.
 */
.wp-block-group.is-layout-flex > .block-content-box,
.wp-block-group.is-layout-flex > .wp-block-acf-content-box {
  flex: 1 1 0;
  min-width: 0;
}

/*
 * Visible gap between the two boxes. Gutenberg's `blockGap` style only
 * applies to specific layout contexts, so we set it explicitly here.
 */
.wp-block-group.is-layout-flex.container {
  gap: 50px;
}

/*
 * When the box is already inside the group's .container, its own inner
 * .container (from the block template) becomes a redundant double-wrap.
 * Strip its max-width / horizontal padding so the gradient touches the
 * box's flex edges cleanly.
 */
.wp-block-group.is-layout-flex.container > .block-content-box > .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* On small screens stack the pair into two rows. */
@media (max-width: 767px) {
  .wp-block-group.is-layout-flex.container {
    flex-direction: column;
  }
}

/*
 * Equal-height pair on desktop.
 *
 * The flex parent's default `align-items: stretch` already makes the two
 * .block-content-box flex items the same height — but inside each item the
 * gradient .c-content-box has display: block + height: auto, so it sits at
 * its content height inside an over-tall outer. Tell the intermediate
 * wrappers to flex-fill so the gradient extends to the full item height.
 *
 * Scoped to ≥ 768px so the stacked mobile layout (which doesn't have a row
 * "tallest sibling" to match) stays at content-height as it should.
 */
@media (min-width: 768px) {
  .wp-block-group.is-layout-flex.container:has(.block-content-box) {
    align-items: stretch;
  }
  .wp-block-group.is-layout-flex.container > .block-content-box {
    display: flex;
    flex-direction: column;
  }
  .wp-block-group.is-layout-flex.container > .block-content-box > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .wp-block-group.is-layout-flex.container > .block-content-box > .container > .c-content-box {
    flex: 1;
  }
}

.l-block:has(section.hero) ~ .l-block, .l-block:has(section.hero) ~ .wp-block-group {
  position: relative;
  z-index: 2;
}