/* /tools/ only. Shared components come from site.css. Prefix: tl-
   The header's title spans two of the three card columns and the lede sits over the third. */

.tl-head { --tl-cols: repeat(3, minmax(0, 1fr)); }

/* ---------- Header: serif title left, grey lede and credit right ---------- */
.tl-head { padding: var(--space-xl) 0 var(--space-xl); }
.tl-head__inner { display: grid; gap: var(--space-m) var(--space-l); }
.tl-head__title { max-width: 11ch; text-wrap: balance; }
.tl-head__lede { color: var(--ink-2); font-size: var(--text-m); line-height: 1.42; letter-spacing: -0.01em; max-width: 34ch; }
.tl-head__credit { margin-top: var(--space-s); color: var(--ink); font-size: var(--text-body); max-width: 36ch; }

@media (min-width: 900px) {
  .tl-head__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .tl-head__side { padding-bottom: 0.45em; }
}
@media (min-width: 1100px) {
  .tl-head__inner { grid-template-columns: var(--tl-cols); }
  .tl-head__title { grid-column: 1 / 3; }
}

/* ---------- The six examples ---------- */
.tl-list { padding-block: var(--space-xl) var(--space-4xl); }

/* ---------- Offers band: a flat orange field holding two link rows ---------- */
.tl-offers__field { background: var(--stage); padding: var(--space-2xl) var(--space-2xl) var(--space-xl); }
.tl-offers__title { font-size: var(--text-xl); letter-spacing: var(--track-heading); line-height: 1.15; margin-bottom: var(--space-l); }
.tl-offers__list { border-top: var(--rule-w) solid var(--ink); }
.tl-offers__list li { border-bottom: var(--rule-w) solid var(--ink); }
.tl-offers__link {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto; gap: var(--space-l); align-items: baseline;
  padding: var(--space-m) 0; text-decoration: none; color: var(--ink);
}
.tl-offers__name { font-size: var(--text-m); font-weight: var(--weight-medium); letter-spacing: -0.01em; line-height: 1.3; }
.tl-offers__line { font-size: var(--text-body); line-height: 1.45; }
.tl-offers__link:hover .tl-offers__name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.tl-offers__link:hover .tool-row__arrow { transform: translateX(4px); }
.tl-offers__link:focus-visible { outline-offset: 0; }

@media (max-width: 900px) {
  .tl-offers__field { padding: var(--space-xl) var(--space-l) var(--space-l); }
  .tl-offers__link { grid-template-columns: 1fr auto; gap: var(--space-2xs) var(--space-m); }
  .tl-offers__line { grid-column: 1; grid-row: 2; }
  .tl-offers__link .tool-row__arrow { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
  .tl-head { padding: var(--space-m) 0 var(--space-l); }
  .tl-head__lede { font-size: var(--text-m); }
  .tl-offers__field { margin-inline: calc(-1 * var(--gutter)); padding: var(--space-xl) var(--space-s) var(--space-m); }
  .tl-list { padding-block: var(--space-m) var(--space-3xl); }
}