/* TEGRITY V2 — BUILD PHILOSOPHY
   The five principles. Each card takes its accent from the semantic palette;
   the fifth is the closer and gets royal purple plus the full width. */
@import "home.css";

.principles {
  list-style: none;
  padding: 0;
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-4);
}

.principle {
  --tone: var(--color-ink);
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  background: var(--color-paper-2);
  border-radius: var(--radius);
}
.principle[data-tone="info"] { --tone: var(--color-info); }
.principle[data-tone="success"] { --tone: var(--color-success); }
.principle[data-tone="warning"] { --tone: var(--color-warning); }
.principle[data-tone="danger"] { --tone: var(--color-danger); }
.principle[data-tone="royal"] { --tone: var(--color-royal); }

/* the accent rule */
.principle::before {
  content: "";
  position: absolute;
  left: 0; top: var(--space-6); bottom: var(--space-6);
  width: 2px;
  background: var(--tone);
}

.principle__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--tone);
}
.principle__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--tr-h2);
  color: var(--color-ink);
  margin-top: var(--space-2);
}
.principle__sub {
  margin-top: var(--space-2);
  color: var(--tone);
}
.principle__body { margin-top: var(--space-4); color: var(--color-body); }

@media (min-width: 861px) {
  .principles { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }

  /* the closer: full width, statement on the left, paragraph on the right,
     so the row never reads as a half-empty card */
  .principle:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "num  body" "head body" "sub  body";
    column-gap: var(--space-12);
    align-content: start;
  }
  .principle:last-child .principle__n { grid-area: num; }
  .principle:last-child .principle__title { grid-area: head; }
  .principle:last-child .principle__sub { grid-area: sub; }
  .principle:last-child .principle__body {
    grid-area: body;
    align-self: start;
    margin-top: 0;
  }
}