/* AI + VFX: MiQ grammar. Small label, short headline with a period, short body,
   then bullets or a pull quote. Four chapters (layout.css, "Section rhythm"):
   each opens with its rule, number and label, then its statement at display
   size; what sits under the statement is laid out here. */

.ai-head__title { max-width: calc(20 * var(--ch-display)); } /* 13ch before r8, the same box in px (x 1.53); --ch-display in base.css */

/* 01: the body on the left, the four points on the right. */
.ai-a__body { max-width: 46ch; }
.ai-points {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) solid var(--color-line);
}
.ai-points li {
  padding: var(--space-5) 0;
  border-bottom: var(--border-hairline) solid var(--color-line);
  text-wrap: pretty; /* the line under each title, like body text elsewhere */
}
/* Point titles are balanced, so a narrow column never leaves one word alone. */
.ai-points b { display: block; margin-bottom: var(--space-2); font-size: var(--type-heading-4-size); line-height: var(--type-heading-4-leading); font-weight: 600; text-wrap: balance; }
@container col (min-width: 680px) {
  .ai-points { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}
/* Wide: the four points sit in one row. */
@container col (min-width: 1700px) {
  .ai-points { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-grid-gap); }
  .ai-points li { padding-right: var(--space-4); }
}

/* 02: the body on the left, the pull quote on the right on its orange rule.
   Cream since r7's fix (it was the page's one Paper band in r6 and the first
   r7 build; 01 and 03 are the bands now, so the page alternates). */
.ai-band__quote { display: grid; gap: var(--space-6); align-content: start; }
.ai-quote {
  position: relative;
  margin: 0;
  padding-left: clamp(var(--space-5), 3vw, var(--space-7));
  border-left: var(--border-strong) solid var(--color-accent);
}
/* The statement role (r8): Barlow 600 in sentence case at heading-2, and
   heading-1 in the wide column below. */
.ai-quote p {
  font-family: var(--type-statement-family);
  font-size: var(--type-statement-size);
  font-weight: var(--type-statement-weight);
  text-transform: var(--type-statement-case);
  letter-spacing: var(--type-statement-tracking);
  line-height: var(--type-statement-leading);
  max-width: calc(24 * var(--ch-statement));
  text-wrap: balance;
}
.ai-band__quote > .t-body { padding-left: clamp(var(--space-5), 3vw, var(--space-7)); }
/* Wide: the pull quote steps up a size and takes its column. */
@container col (min-width: 1150px) {
  .ai-quote p { font-size: var(--type-heading-1-size); line-height: 1.1; max-width: calc(26 * var(--ch-statement)); }
}

/* 03: the six uses, cards in a navy hairline on the Paper band. */
.ai-uses {
  display: grid;
  gap: var(--space-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@container col (min-width: 680px) { .ai-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container col (min-width: 980px) { .ai-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Wide: bigger words in the cards, and on the widest columns all six in a row. */
@container col (min-width: 1500px) { .ai-use p { font-size: var(--type-body-size); line-height: var(--type-body-leading); } }
@container col (min-width: 2100px) { .ai-uses { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ai-use {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 2vw, var(--space-7)) clamp(var(--space-5), 2vw, var(--space-7)) clamp(var(--space-6), 2.5vw, var(--space-8));
  border: var(--border-hairline) solid var(--line-panel);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  text-wrap: pretty;
  transition: border-color var(--hover) var(--ease-out), background-color var(--hover) var(--ease-out);
}
/* The navy hairline darkens on hover. On 03's Paper band the cards are
   cream, so they still read as cards (Paper on Paper would only be a line). */
.ai-use:hover { border-color: var(--line-hover); }
.band .ai-use { background: var(--color-bg); }

/* 04: the rules on the left, the closing note beside them at the bottom. */
.ai-rules-split { display: grid; gap: var(--space-7) clamp(var(--space-7), 4vw, 10rem); }
.ai-rules {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) solid var(--color-line);
}
.ai-rules li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: var(--border-hairline) solid var(--color-line);
  /* Reading text at heading-4 size: Barlow 400 (500 isn't loaded since r8,
     and already drew as 400). */
  font-size: var(--type-heading-4-size);
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
  text-wrap: pretty;
}
.ai-rules svg { width: 18px; height: 18px; color: var(--color-text-muted); translate: 0 3px; }
.ai-close { display: grid; gap: var(--space-5); justify-items: start; max-width: 40ch; }
@container col (min-width: 880px) {
  .ai-rules-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
@container col (min-width: 1500px) {
  .ai-rules-split { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}