/*
 * Home: the four pillars under "Real Talks, Real Impact" (src/pages/index.astro), as columns of the
 * page grid rather than boxed cards. One framed row (.block-inner.pillars, no padding) holding a
 * divided grid (.is-divided, atn-system.css), so the column separators are the grid's own single
 * lines. Each column: an [index] row, the photo, then the name as a large heading over a small
 * description, with faint dashed rules between them (drawing marks inside the column, not
 * structural lines).
 *   Desktop 4 columns · tablet 2 · phone 1.
 */

.block-inner.pillars {
  display: block;
  padding: 0;
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pillar {
  --pillar-pad: 2.8em;
  --pillar-rule: var(--line-width) dashed var(--line-color);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pillar__head {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 1em;
  padding: 2em var(--pillar-pad);
  border-bottom: var(--pillar-rule);
}
.pillar__index {
  color: var(--neutral);
  font-family: cofo-sans-pixel, sans-serif;
  font-size: 1.6em;
  line-height: 1;
}

.pillar__media {
  padding: 4em var(--pillar-pad);
  border-bottom: var(--pillar-rule);
}
.pillar__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Name and description: a large heading at the top, the small text at the foot. */
.pillar__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 4em;
  min-height: 24em; /* the reference's open space between the heading and the text */
  padding: 3.6em var(--pillar-pad) 3.2em;
}
.pillar__title {
  margin: 0;
  color: var(--white);
  font-size: 3.6em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}
.pillar__text {
  max-width: 30em;
  margin: 0;
  color: var(--lighter-2);
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.4;
}

@media screen and (max-width: 991px) {
  .pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { --pillar-pad: 2.4em; }
  .pillar__title { font-size: 4em; }
  .pillar__text { font-size: 1.7em; }
}

@media screen and (max-width: 479px) {
  .pillars__grid { grid-template-columns: 1fr; }
  .pillar { --pillar-pad: 1.6em; }
  .pillar__media { padding: 2.4em var(--pillar-pad); }
  .pillar__body { gap: 2.4em; min-height: 0; padding: 2.8em var(--pillar-pad); }
  .pillar__title { font-size: 3.6em; }
  .pillar__text { font-size: 1.6em; }
}