/* ========================================
   Typographic scale (visual size classes)
   - Decoupled from semantic <h1>-<h6>
   ======================================== */
.hsize--h2 {
  font-size: clamp(2rem, 1.6vw + 1.2rem, 2.4rem);
  line-height: 1.2;
  font-weight: 700;
}
.hsize--h3 {
  font-size: clamp(1.6rem, 1.1vw + 1rem, 2rem);
  line-height: 1.25;
  font-weight: 700;
}
.hsize--h4 {
  font-size: clamp(1.25rem, 0.8vw + 0.9rem, 1.5rem);
  line-height: 1.3;
  font-weight: 700;
}

/* ========================================
   Heading colour tokens
   ======================================== */
.textcolor--turquoise {
  color: var(--turquoise);
}
.textcolor--almost-black {
  color: var(--almost-black);
}

/* ========================================
   Vertical spacing rhythm (utilities)
   ======================================== */
.space--none {
  margin-bottom: 0;
}
.space--s {
  margin-bottom: 0.75rem;
}
.space--m {
  margin-bottom: 1.5rem;
}
.space--l {
  margin-bottom: 2.5rem;
}

@media (min-width: 64rem) {
  .space--s {
    margin-bottom: 1rem;
  }
  .space--m {
    margin-bottom: 2rem;
  }
  .space--l {
    margin-bottom: 3rem;
  }
}

/* ========================================
   Global measures + panel padding
   ======================================== */
:root {
  --text-measure: 44rem; /* comfortable reading width */
  --panel-pad: 1.75rem; /* default panel inner padding */
}

/* ========================================
   Two-column scaffold (Flow + Info)
   - Mobile: stacked
   - Desktop: 23% / 77%
   ======================================== */
.flow-content-wrapper,
.info-content-wrapper {
  display: block;
}

.flow-sidebar-wrapper,
.info-sidebar-wrapper,
.flow-main-content,
.info-main-content {
  width: 100%;
}

@media (min-width: 64rem) {
  .flow-content-wrapper,
  .info-content-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2rem; /* column gutter */
  }

  .flow-sidebar-wrapper,
  .info-sidebar-wrapper {
    flex: 0 0 23%;
    max-width: 23%;
  }

  .flow-main-content,
  .info-main-content {
    width: 77%;
    max-width: 77%;
    box-sizing: border-box;
  }
}

/* ========================================
   Info Page: text blocks
   ======================================== */
.info-main-content .info-text-section.info-block {
  /* max-inline-size: var(--text-measure); */
  max-inline-size: 44rem;
  margin-inline: auto; /* center in content column */
  width: 100%;
}

/* Headings/body tidy */
.info-text-section .info-heading {
  margin: 0 0 0.75rem 0;
}

.info-text-section .richtext > *:first-child {
  margin-top: 0;
}

.info-text-section .richtext > *:last-child {
  margin-bottom: 0;
}

/* ========================================
   Info Page: image block boundary
   - All image modules share .info-image-block
   - Mobile: align with text measure
   - Desktop: exactly +3rem wider than text
   ======================================== */
/* .info-main-content .info-image-block {
  max-inline-size: var(--text-measure);
  margin-inline: auto;
} */
.info-main-content .info-image-block {
  /* max-inline-size: calc(75ch + 3rem);  */
  max-inline-size: 100%;
  margin: 0 0 3rem; /* still centered overall */
}

/* .info-image-block {
  border: 2px red dashed;
} */

.info-main-content .info-text-section.info-block ul {
  margin-left: 0rem;
  padding-left: 1rem;
}
.info-main-content .info-text-section.info-block ul li {
  margin-bottom: 0.5rem;
}

/* Custom text section */
.info-text-section-custom {
  padding: 0;
}

.info-text-section-custom h3 {
  margin: 0 0 0.75rem 0;
  border-bottom: 2px dotted;
  padding: 0 0 0.75rem 0;
  font-size: 1.4rem;
}

.info-text-section-custom a.marg-bt {
  margin-bottom: 0.5rem;
  display: inline-block;
}

.info-text-section-custom p.first {
  margin-bottom: 0.5rem;
  display: inline-block;
}

@media (min-width: 64rem) {
  .info-main-content .info-image-block {
    max-inline-size: 44rem;
    /* margin: 0 auto; */
    margin: 0 auto 3rem auto;
  }
  .info-main-content .info-text-section.info-block {
    width: 100%;
  }
}