/* accordion.css — Accordion section.
   Values from the spec ## Computed Styles (representative /accessibility,
   Variant A row-wrapped-heading @ 1440 / 768 / 375).
   Run breakpoint boundary set {479,767,991,1919}: 1440 = base rules;
   768 -> @media(max-width:991px); 375 -> @media(max-width:479px).
   Typography via var(--font-*) (framework-11 E1 lock; source family
   'Plus Jakarta Sans' resolves through the frozen tokens).
   All selectors are scoped under the component root (.c-accordion__heading-wrap-4)
   so the shared canonical wrappers (container-large / row / padding-global, owned
   by about_info) never leak (rule 9). The registry bbox is full-width (x=0), so
   the section renders edge-to-edge with the padding INSIDE it. */

/* ============================ Section root ================================= */
.c-accordion__heading-wrap-4 {
  display: block;
  width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body); /* source rgb(51,51,51) */
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes body margin on composed pages) */
  margin: -8px;
}
.region-content .c-accordion__heading-wrap-4 {
  margin: 0;
  width: 100%;
}

/* ---- Outer padding wrapper (padding-global + padding-section-medium) ------ */
.c-accordion__heading-wrap-4 .c-accordion__heading-wrap-2 {
  display: block;
  width: 100%;
  padding: 96px var(--space-40); /* source 96px 40px @1440; no --space-96 token */
  box-sizing: border-box;
}

/* ---- Content container (container-large) ---------------------------------- */
.c-accordion__heading-wrap-4 .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container maxWidth 1280 @1440 */
  margin-inline: auto; /* centres in the padded content box (source margin 0 40px) */
  box-sizing: border-box;
}

/* ---- Heading wrapper — Variant A only (.row) ----------------------------- */
.c-accordion__heading-wrap-4 .c-accordion__heading-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-40); /* source .row gap 40px @1440 */
  width: 100%;
}

/* ---- Section header (section-header + mb-4) ------------------------------ */
.c-accordion__heading-wrap-4 .c-accordion__heading-wrap-3 {
  display: block;
  width: 640px;
  max-width: 100%; /* source width/maxWidth 640; collapses to 343 inside the 375 column */
  margin: 0 0 var(--space-64); /* source margin 0 0 64px @1440 */
}

/* ---- Heading h2 — Variant A (heading-style-h3-2, larger desktop size) ----- */
.c-accordion__heading-wrap-4 .c-accordion__heading-2 {
  display: block;
  width: 100%;
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 40px; /* source 40px @1440 */
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.5px;
  color: var(--color-text-primary); /* source rgb(51,51,51) */
}

/* ---- Heading h2 — Variant B (heading-style-h3, smaller desktop size) ------ */
.c-accordion__heading-wrap-4 .c-accordion__heading {
  display: block;
  width: 100%;
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 32px; /* source 32px @1440 */
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.5px;
  color: var(--color-text-primary);
}

/* ---- Accordion row (.row.justify---center) ------------------------------- */
.c-accordion__heading-wrap-4 .c-accordion__accordion-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-40); /* source gap 40px @1440 */
  width: 100%;
}

/* ---- Accordion list (.accordion) — own width is the centering signal ------ */
.c-accordion__heading-wrap-4 .c-accordion__accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-16); /* source gap 16px @1440 */
  width: 856px; /* source width/maxWidth 856 @1440 */
  max-width: 100%; /* collapses to the row width at 768/375 (688/343) */
  text-align: left;
}

/* ---- Accordion item ------------------------------------------------------ */
.c-accordion__heading-wrap-4 .c-accordion__accordion-item {
  display: block;
  width: 100%;
  min-width: 0;
}
.c-accordion__heading-wrap-4 .c-accordion__item-header {
  display: flex;
  align-items: center;
  gap: 32px; /* source icon->title gap: title left edge sits ~72px in (icon 40 + gap 32); no --space-32 token */
  min-height: 48px; /* source collapsed item height 48px @1440/768 */
  cursor: pointer;
}
/* right-aligned expand/collapse chevron — drawn in CSS (toggle indicator is
   visible in the frozen /accessibility crop but sits below the capture's depth
   cutoff, like faq_section's CSS-drawn glyph). Down when collapsed, up when
   .acc-active. */
.c-accordion__heading-wrap-4 .c-accordion__item-header::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-text-primary);
  border-bottom: 2px solid var(--color-text-primary);
  transform: rotate(45deg); /* chevron pointing down (collapsed) */
  transition: transform 0.2s ease;
}
.c-accordion__heading-wrap-4 .c-accordion__acc-active .c-accordion__item-header::after {
  transform: rotate(-135deg); /* chevron pointing up (expanded) */
}
.c-accordion__heading-wrap-4 .c-accordion__icon {
  flex: 0 0 auto;
  width: 40px; /* spec ## Assets: small 30-40px icon glyph (exact px below capture cutoff) */
  height: 40px;
  object-fit: contain;
}
.c-accordion__heading-wrap-4 .c-accordion__title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3); /* item title is an H3 in headings[] */
  font-weight: 500;
  line-height: var(--line-height-h3);
  color: var(--color-text-primary);
}

/* ---- Item body — collapsed at rest, expanded when .acc-active ------------- */
.c-accordion__heading-wrap-4 .c-accordion__body-wrap {
  overflow: hidden;
  max-height: 0;
  padding-left: 72px; /* indent body under the title (icon 40 + gap 32); source title/body share the left edge at ~72px in */
}
.c-accordion__heading-wrap-4 .c-accordion__acc-active .c-accordion__body-wrap {
  max-height: none; /* expanded item shows full body (spec: item 1 open on load) */
}
.c-accordion__heading-wrap-4 .c-accordion__body {
  margin: 0;
  padding-top: var(--space-12);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}

/* ---- Divider hairline ---------------------------------------------------- */
.c-accordion__heading-wrap-4 .c-accordion__divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-bg-alt2); /* source rgb(229,229,229) */
}

/* ============================ 768 (@media max-width:991px) ================= */
@media (max-width: 991px) {
  .c-accordion__heading-wrap-4 .c-accordion__heading-wrap-2 {
    padding: var(--space-64) var(--space-40); /* source 64px 40px @768 */
  }
  .c-accordion__heading-wrap-4 .c-accordion__heading-wrap-3 {
    margin: 0 0 32px; /* source margin 0 0 32px @768; no --space-32 token */
  }
  .c-accordion__heading-wrap-4 .c-accordion__heading-row {
    gap: var(--space-10); /* source .row gap 10px @768 */
  }
  .c-accordion__heading-wrap-4 .c-accordion__heading-2 {
    font-size: 32px; /* source 32px @768 */
    line-height: 48px;
    letter-spacing: -1.5px;
  }
  .c-accordion__heading-wrap-4 .c-accordion__heading {
    font-size: 32px; /* source 32px @768 */
    line-height: 40px;
    letter-spacing: -1.5px;
  }
  .c-accordion__heading-wrap-4 .c-accordion__accordion-row {
    gap: var(--space-10); /* source gap 10px @768 */
  }
  .c-accordion__heading-wrap-4 .c-accordion__accordion {
    gap: var(--space-12); /* source gap 12px @768 */
  }
}

/* ============================ 375 (@media max-width:479px) ================= */
@media (max-width: 479px) {
  .c-accordion__heading-wrap-4 .c-accordion__heading-wrap-2 {
    padding: 48px var(--space-16); /* source 48px 16px @375; no --space-48 token */
  }
  .c-accordion__heading-wrap-4 .c-accordion__heading-wrap-3 {
    margin: 0 0 32px; /* source margin 0 0 32px @375 */
  }
  .c-accordion__heading-wrap-4 .c-accordion__heading-row {
    flex-direction: column; /* source .row flexDirection column @375 */
    gap: var(--space-20); /* source gap 20px @375 */
  }
  .c-accordion__heading-wrap-4 .c-accordion__heading-2 {
    font-size: 32px; /* source 32px @375 */
    line-height: 36px;
    letter-spacing: -1px;
  }
  .c-accordion__heading-wrap-4 .c-accordion__heading {
    font-size: 26px; /* source 26px @375 (smaller than Variant A) */
    line-height: 32px;
    letter-spacing: -1px;
  }
  .c-accordion__heading-wrap-4 .c-accordion__accordion-row {
    flex-direction: column; /* source flexDirection column @375 */
    align-items: center; /* source alignItems center @375 */
    gap: var(--space-20); /* source gap 20px @375 */
  }
  .c-accordion__heading-wrap-4 .c-accordion__accordion {
    gap: var(--space-4); /* source gap 4px @375 */
  }
  .c-accordion__heading-wrap-4 .c-accordion__item-header {
    gap: var(--space-10); /* narrower mobile icon->title gap; title lands ~50px in */
  }
  .c-accordion__heading-wrap-4 .c-accordion__body-wrap {
    padding-left: 50px; /* match the narrower mobile indent (source body left ~49px in) */
  }
  .c-accordion__heading-wrap-4 .c-accordion__divider {
    margin: var(--space-10) 0; /* source margin 10px 0 @375 */
    max-width: 100%;
  }
}