/**
 * important-information — end-of-article disclosure block.
 *
 * Full-bleed white band: the block background spans the viewport while the
 * inner content stays within the --content-max-width content bounds. Top half is a 30 / 70
 * split (title + lead notes left, stacked disclosures right); the bottom is a
 * single full-width fine-print row separated by a hairline rule.
 */

.important-information {
  background: var(--amp-bg);
}

.important-information-inner {
  width: min(var(--content-max-width), 100% - var(--spacing-40));
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

@media (width >= 768px) {
  .important-information-inner {
  width: min(var(--content-max-width), 100% - var(--spacing-72));

  }
}

/* Top half: 30 / 70 split. Stacks on mobile. */
.important-information-split {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.important-information-split :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 var(--space-xs);
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600);
  color: var(--amp-ink-blue);
}

.important-information-split h2 {
  font-size: var(--font-size-30);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-s);
}

.important-information-split :is(h3, h4) {
  font-size: var(--heading-font-size-s);
  line-height: var(--body-line-height-m);
}

/* Secondary column subheadings switch to Open Sans on mobile. */
.important-information-secondary :is(h2, h3, h4, h5, h6) {
  margin-bottom: var(--space-2xs);
  font-family: var(--body-font-family);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-600);
  line-height: var(--line-height-24);
  letter-spacing: 0;
}

.important-information-split p {
  margin: 0;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-fineprint);
  line-height: var(--line-height-16);
  color: var(--amp-slate);
}

.important-information-primary p {
  margin: 0 0 var(--space-2xs);
  font-size: var(--body-font-size-fineprint);
  line-height: var(--line-height-16);
  color: var(--amp-slate);
}

/* Space between stacked disclosures in the right (70%) column. */
.important-information-secondary > :is(h2, h3, h4, h5, h6):not(:first-child) {
  margin-top: var(--spacing-24);
}

/* Bottom: full-width fine print, separated by a hairline rule. */
.important-information-fineprint {
  padding-top: var(--space-s);
  border-top: 1px solid var(--amp-border);
}

.important-information-fineprint :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 var(--space-2xs);
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  letter-spacing: 0;
  color: var(--amp-ink-blue);
}

.important-information-fineprint p {
  margin: 0 0 var(--space-2xs);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-fineprint-xs);
  line-height: var(--line-height-12-1);
  color: var(--amp-slate);
}

.important-information-split p:last-child,
.important-information-fineprint p:last-child {
  margin-bottom: 0;
}

/* Desktop typography from Figma frame 996-32382.
   Article-template layout only splits into two columns at 1024px, so keep
   the mobile stacked treatment all the way up to the desktop breakpoint. */
@media (width >= 1024px) {
  .important-information-inner {
    gap: var(--space-xl);
  }

  .important-information-split {
    flex-direction: row;
    gap: var(--spacing-96);
    width: 100%;
    margin: 0 auto;
  }

  .important-information-primary {
    flex: 0 0 33.413%;
  }

  .important-information-secondary {
    flex: 1 1 59.135%;
    min-width: 0;
  }

  /* Primary column: big Hurme title + small slate footnotes. */
  .important-information-primary h2 {
    font-size: var(--font-size-30);
    line-height: 1.1;
    letter-spacing: -0.5px;
    padding-bottom: var(--space-m);
    margin-bottom: 0;

    /* The block decorator normalises any authored <br> to a real space so
       mobile can flow on one line. Reinstate the two-line Figma stack here by
       forcing a break at every whitespace via an oversized word-spacing. */
    word-spacing: 100vw;
  }

  /* Secondary column: Body/bodyMedBold subheads + Body/BodyMedReg paragraphs.
     Use literal-scale tokens because --body-font-size-m becomes 18px at
     >=768px, but Figma frame 996-32382 specifies 16px here. */
  .important-information-secondary :is(h2, h3, h4, h5, h6) {
    margin-bottom: var(--space-xs);
    font-family: var(--body-font-family);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-24);
    letter-spacing: 0;
    color: var(--amp-ink-blue);
  }

  .important-information-secondary p {
    margin: 0 0 var(--space-m);
    font-family: var(--body-font-family);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-24);
    letter-spacing: 0;
    color: var(--amp-slate);
  }

  .important-information-secondary > :is(h2, h3, h4, h5, h6):not(:first-child) {
    margin-top: var(--space-l);
  }

  .important-information-fineprint {
    padding-top: var(--space-l);
    width: 100%;
    margin: 0 auto;
  }

  .important-information-fineprint :is(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 var(--space-m);
    font-family: var(--body-font-family);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-24);
    letter-spacing: 0;
    color: var(--amp-ink-blue);
  }

  .important-information-fineprint p {
    font-family: var(--body-font-family);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-16);
    letter-spacing: 0;
    color: var(--amp-slate);
  }
}

/* Empty child rows are kept selectable in the Universal Editor only (they're
   dropped on delivery), so give them a visible, clickable target. */
.important-information-empty {
  min-height: var(--spacing-44);
  border: 1px dashed var(--amp-border);
  border-radius: 4px;
}

/* Parts inherited from the shared Content Fragment (i.e. not overridden on
   this page). Delivery renders them exactly like authored text; inside the
   Universal Editor preview they get a quiet rule so authors can see at a
   glance which parts they would be replacing. */
.ue-authoring-preview .important-information-inherited {
  border-left: 2px solid var(--amp-border);
  padding-left: var(--spacing-12);
}