/* ==========================================================================
   Info Section
   Block: .info / .info-section
   --------------------------------------------------------------------------
   A statement with an optional supporting column. One shape covers the home
   page definition, the process overview, a case study snapshot, a handover
   panel, and the about page's story and boundary sections.

   The block styles only what is its own. The heading, the eyebrow, the prose
   measure, the image frame and the definition table all come from the theme's
   shared classes, so this section follows the site rather than diverging from
   it.
   ========================================================================== */

.info-section__layout {
  display: grid;
  gap: var(--space-2x-large);
  align-items: start;
}

/* Two columns only once there is room for the reading measure and the
   supporting column to sit side by side without either getting cramped. */
@media (width >= 62rem) {
  .info-section--split .info-section__layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-3x-large);
  }

  /* The column moves, the source order does not: the statement is still read
     first by a screen reader and on a phone. */
  .info-section--aside-start .info-section__main {
    order: 2;
  }

  .info-section--aside-start .info-section__aside {
    order: 1;
  }

  .info-section--aside-sticky .info-section__aside {
    position: sticky;
    inset-block-start: var(--space-2x-large);
  }
}

.info-section__main {
  min-width: 0;
}

.info-section__header + .info-section__body {
  margin-block-start: var(--space-medium);
}

/* Without a supporting column the copy keeps a reading measure, unless the
   editor has asked for something wider. */
.info-section__body {
  max-width: var(--max-text-width);
}

.info-section--wide .info-section__body {
  max-width: 52rem;
}

.info-section--full .info-section__body {
  max-width: none;
}

/* The oversized opening statement. Sized from the same scale as a heading, so
   it reads as a statement rather than as large body copy. */
.info-section--lead .info-section__body {
  max-width: 54rem;
  font-family: var(--font-family-display);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-strong);
}

.info-section--lead .info-section__body strong {
  font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------------ Items */

/* The rule belongs to the list, so it can only ever appear when there is a
   list to separate from the copy above it. */
.info-section__items {
  margin-block-start: var(--space-x-large);
  padding-block-start: var(--space-large);
  border-block-start: 1px solid var(--color-border);
  list-style: none;
}

.info-section__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-x-small);
  color: var(--color-text-muted);
}

.info-section__item-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 0.2em;
  color: var(--color-accent-text);
}

.info-section__items--cross .info-section__item-icon {
  color: var(--color-error);
}

.info-section__item-text > :first-child {
  margin-block-start: 0;
}

.info-section__item-text > :last-child {
  margin-block-end: 0;
}

.info-section__item-text strong {
  color: var(--color-text-strong);
  font-weight: var(--font-weight-semibold);
}

/* A single row of short confirmations, wrapping rather than truncating. */
.info-section__items--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-x-small) var(--space-large);
}

.info-section__items--inline .info-section__item {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

/* Stacked lists, where each item is a sentence rather than a label. */
.info-section__items--check,
.info-section__items--cross {
  display: grid;
  gap: var(--space-x-small);
}

/* Inside a panel the list is the panel's content, so it carries no rule. */
.info-section__panel .info-section__items {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.info-section__link {
  margin-block-start: var(--space-large);
}

/* ------------------------------------------------------------ Side column */

.info-section__aside {
  min-width: 0;
  display: grid;
  gap: var(--space-medium);
}

.info-section__figure {
  margin: 0;
  display: grid;
  gap: var(--space-2x-small);
}

.info-section__note {
  font-size: var(--font-size-small);
  color: var(--color-text-subtle);
}

.info-section__panel {
  display: grid;
  gap: var(--space-medium);
  padding: var(--space-large);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background-color: var(--color-background-sunken);
}

.info-section__panel-title {
  font-size: var(--font-size-heading-4);
  color: var(--color-text-strong);
}

.info-section__panel-action {
  margin-block-start: var(--space-2x-small);
}

/* The table inside a narrow panel needs a tighter gutter, or three columns
   stop fitting before the panel is anywhere near narrow. */
.info-section__panel .definition-table th,
.info-section__panel .definition-table td {
  padding-inline: var(--space-medium);
}

/* --------------------------------------------------------- Dark variant */

/*
 * The dark section already re-points every semantic colour role through
 * .theme-inverse, so the panel only has to stop using the light surface it
 * would otherwise inherit.
 */
.info-section--dark .info-section__panel {
  background-color: var(--color-background-raised);
}