/* ==========================================================================
   LEECOI — Career support (/placements/)
   ========================================================================== */

/* ==========================================================================
   WHAT WE DO NOT PROMISE
   --------------------------------------------------------------------------
   Given real weight rather than made small. The brief asks for this as a trust
   signal, and a trust signal set in 12px grey under a fold is a disclaimer
   wearing a trust signal's clothes.

   The accent edge is the same 2px inline rule the ledger on the homepage uses,
   so the two read as the same kind of statement.
   ========================================================================== */

.promise {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 60rem) {
  .promise {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-3xl);
    align-items: start;
  }
}

.promise__title {
  font-size: var(--step-d2);
  line-height: var(--step-d2-lh);
  letter-spacing: var(--step-d2-ls);
  font-weight: var(--weight-bold);
}

.promise__lead {
  margin-block-start: var(--space-md);
  color: var(--muted);
  line-height: 1.7;
  max-width: var(--width-prose);
}

.promise__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.promise__item {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  border-inline-start: 2px solid var(--accent);
  background-color: var(--panel);
}

.promise__item-title {
  font-size: var(--step-d3);
  line-height: var(--step-d3-lh);
  letter-spacing: var(--step-d3-ls);
  font-weight: var(--weight-semi);
}

.promise__item-text {
  margin-block-start: var(--space-xs);
  color: var(--muted);
  font-size: var(--step-small);
  line-height: 1.65;
}

/* ==========================================================================
   THE FOUR AREAS
   --------------------------------------------------------------------------
   A numbered list where the number is a real index into four named things, not
   a decorative counter. Laid out as rows rather than cards: each area has a
   lead, a list and sometimes a note, which is more than a card should carry.
   ========================================================================== */

.areas {
  display: flex;
  flex-direction: column;
}

.area {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-md);

  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--line);
}

.area:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

@media (min-width: 56rem) {
  .area {
    /* Title column beside the detail, so the four areas can be scanned by
       running down one edge without reading the body of each. */
    grid-template-columns: 2.5rem minmax(0, 16rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .area__body {
    display: contents;
  }

  /* With `display: contents` on the body, its children become grid items, so
     the title takes the middle column and everything after it stacks in the
     last one. */
  .area__title {
    grid-column: 2;
  }

  .area__lead,
  .area__list,
  .area__note {
    grid-column: 3;
  }

  .area__lead {
    grid-row: 1;
  }
}

.area__index {
  font-size: var(--step-micro);
  line-height: 1.9;
  letter-spacing: var(--step-micro-ls);
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.area__title {
  font-size: var(--step-d3);
  line-height: var(--step-d3-lh);
  letter-spacing: var(--step-d3-ls);
  font-weight: var(--weight-semi);
  text-wrap: balance;
}

.area__lead {
  margin-block-start: var(--space-xs);
  color: var(--ink);
  line-height: 1.7;
}

@media (min-width: 56rem) {
  .area__lead {
    margin-block-start: 0;
  }
}

.area__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);

  margin-block-start: var(--space-md);
  padding-inline-start: var(--space-lg);
  list-style: disc outside;

  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--muted);
}

.area__list > li::marker {
  color: var(--accent-strong);
}

/* A short aside under an area. Set apart by an inline rule rather than by a
   box, so it reads as a margin note rather than as a second card. */
.area__note {
  margin-block-start: var(--space-md);
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--line-strong);

  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--muted);
  font-style: italic;
}