/* card — card, event/people card, tile
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* Card. The direction moves the accent edge from border-bottom to the LEFT,
   3px resting, 7px on hover, carrying the taxonomy colour. */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: var(--card-edge) solid var(--accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-left-width var(--transition), box-shadow var(--transition);
}
.card:hover { border-left-width: var(--card-edge-hover); }
.card--students { border-left-color: var(--aud-students); }
.card--parents  { border-left-color: var(--aud-parents); }
.card--employers { border-left-color: var(--aud-employers); }
.card--neutral  { border-left-color: var(--dblue); }
.card--brand    { border-left-color: var(--accent-2); }
/* Legacy colour-named modifiers. */
.card--magenta { border-left-color: var(--surface-brand); }
.card--lime { border-left-color: var(--lime); }
.card--navy { border-left-color: var(--navy); }
.card--green { border-left-color: var(--aud-employers-text); }

.card > img, .card .card-image {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); color: var(--ph-ink);
}
.card .card-section { display: flex; flex-direction: column; gap: .55rem; flex: 1 1 auto; padding: 1.4rem 1.5rem; }
.card h3 { font-size: 1.4375rem; }
.card .feature-link { color: var(--text-heading); text-decoration: none; }
.card .feature-link:hover { color: var(--link); text-decoration: underline; }
.card .card-info, .card .card__by, .card .card-date, .card .card-location {
  font-size: var(--fs-min); color: var(--muted); line-height: 1.5;
}
.card .card-info { margin-top: auto; padding-top: .9rem; }

/* Row/list variants. */
.course-cards-list .card, .file-cards-list-plain .card,
.people-cards-list > .card, .people-cards-list-image > .card, .people-cards-list-full > .card { flex-direction: row; }
.course-cards-list .card .card-image,
.people-cards-list > .card .card-image,
.people-cards-list-image > .card .card-image,
.people-cards-list-full > .card .card-image { flex: 0 0 168px; aspect-ratio: auto; }
.file-cards-list-plain .card-section { flex-direction: row; align-items: center; gap: .875rem; }
.file-cards-list-plain .card h3, .file-cards-list-plain .card h4 { margin-bottom: 0; flex: 1 1 auto; }
.file-cards-list-plain .card-info { margin-top: 0; padding-top: 0; }

/* Event card. The block wraps the 16:9 image + a floating datebox badge in
   .event-card-media, then the text in a normal column .card-section. */
.event-card { overflow: hidden; }
.event-card-media { position: relative; }
.event-card-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.event-card-media .event-card-datebox {
  position: absolute; top: 12px; left: 12px;
  background: var(--white); border-radius: var(--radius-sm);
  padding: .5rem .85rem; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: center;
}
.event-card .card-section { padding: 1.3rem 1.4rem 1.5rem; }
.event-card-datebox { text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }
.event-card-day, .event-card-datebox-day { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--text-heading); }
.event-card-mon, .event-card-datebox-mon { font-size: var(--fs-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.event-card-cat { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--link); margin-bottom: .4rem; }
.event-card h3 { margin-bottom: .3rem; }
.event-card .card-info { display: flex; flex-direction: column; gap: .25rem; margin-top: auto; padding-top: .9rem; }
.event-card-time, .event-card .card-location { display: inline-flex; align-items: center; gap: .4rem; }

/* People card. */
.people-cards .card-name { padding: 1.2rem 1.1rem 0; }
.people-cards .card-name h3 { font-family: var(--font-display); margin-bottom: 0; }
.people-cards .card-info-role { margin: .35rem 0 0; font-size: var(--fs-min); color: var(--muted); }
.people-cards .card-section { padding: .8rem 1.1rem 1.4rem; }
.people-cards .card-info-summary { margin-bottom: .8rem; font-size: var(--fs-min); line-height: 1.5; color: var(--muted); }
.people-cards .card-info-contact { margin: 0; font-size: var(--fs-min); }

/* Tile — a card with no image and one number that earns the click. */
.card-grid__card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--white); text-decoration: none;
  border: 1px solid var(--line);
  border-left: var(--card-edge) solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.6rem;
  transition: border-left-width var(--transition);
}
.card-grid__card:hover { border-left-width: var(--card-edge-hover); }
.card-grid__category { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--em-color); }
.card-grid__card-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.5625rem; line-height: 1.08; color: var(--text-heading); }
.card-grid__description { font-size: var(--fs-min); color: var(--muted); }
.card-grid__pill { margin-top: auto; padding-top: .9rem; font-size: var(--fs-min); color: var(--muted); font-variant-numeric: tabular-nums; }
.card-grid__group-heading { font-size: 1.4rem; margin-bottom: .8rem; }