/* cisa.fi additions to packs/article.
   Loaded after the pack sheet, so these win. Only the two things the pack has
   no equivalent for: the team grid and the linked front-page cards. */

/* ------------------------------------------------------------- team grid */

.team { padding: 48px 0 64px; }
.team-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.member { background: var(--surface); border-radius: var(--radius); overflow: hidden;
          border: 1px solid var(--accent-soft); }
/* The 17 headshots are not one shape — they range from 345x518 to square.
   A fixed aspect box with object-fit keeps the grid even without stretching
   anyone's face. */
.member img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: 50% 20%;          /* faces sit high in these crops */
  background: var(--accent-soft);
}
.member-name {
  margin: 14px 16px 2px; font-family: var(--font-display); font-weight: 700;
  color: var(--ink); font-size: 1.05rem;
}
.member-role { margin: 0 16px 6px; font-size: 0.9rem; color: var(--body); opacity: 0.85; }
.member-mail { margin: 0 16px 16px; font-size: 0.85rem; word-break: break-word; }
.member-mail a { color: var(--accent); }

/* ------------------------------------------------- front page link cards
 * Client, 2026-08-13: two per row on desktop with large images, one per row
 * on mobile. The pack's default is auto-fill/minmax(240px), which packs four
 * across a desktop and makes each image small — right for eight typographic
 * tip cards on viiniveli, wrong for four photographic cards here.
 *
 * Explicit column counts rather than auto-fill, because "two per row" is the
 * instruction: auto-fill would give three on a wide monitor. */

.tip-grid { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .tip-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
/* Larger, more cinematic crop than the pack's 3/2 — these are photographs
   carrying the page, not thumbnails beside text. */
.tip img { aspect-ratio: 16 / 10; }
.tip-link .tip-title { font-size: 1.15rem; margin-top: 2px; }


.tip-link {
  display: block; color: inherit; text-decoration: none; height: 100%;
}
.tip-link .tip-eyebrow, .tip-link .tip-title, .tip-link .tip-body { display: block; }
.tip-link .tip-body {
  margin: 0 16px 16px; font-size: 0.9rem; color: var(--body); opacity: 0.9;
}
.tip:hover { border-color: var(--accent); }
.tip-link:hover .tip-title { color: var(--accent); }

/* The PDF/website buttons inside page bodies. `.button` is the pack's, this
   only gives it breathing room inside prose. */
.prose .button { margin: 8px 0 4px; }