/* ============================================================
   CARDS — performer/speaker/delegate cards, feature cards,
   mission grid, theme card, press cards
   ============================================================ */

/* -- Person card (performers / speakers / delegates grid) -- */
.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
@media (min-width: 640px) {
  .person-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem; }
}

.person-card {
  display: block;
  background: rgba(23,16,13,.05);
  border: 1px solid rgba(23,16,13,.28);
  padding: var(--space-sm);
  min-height: 44px;
  transition: transform var(--duration-base) ease, background var(--duration-base) ease, border-color var(--duration-base) ease;
}
.on-dark .person-card,
.on-indigo .person-card {
  background: rgba(241,231,210,.05);
  border-color: rgba(241,231,210,.22);
}
@media (hover: hover) {
  .person-card:hover { background: rgba(23,16,13,.11); border-color: currentColor; transform: translateY(-4px); }
  .on-dark .person-card:hover,
  .on-indigo .person-card:hover { background: rgba(241,231,210,.1); }
}

.person-card__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: flex-end;
  padding: .6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--color-paper);
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
  background: var(--tone, var(--color-flame));
}
/* Real photo (<img>) doesn't need the placeholder's padding/tint - that
   was only there to inset the initials text and give the empty box a
   color. Higher specificity than the shared class above, so this wins
   regardless of source order. */
img.person-card__photo {
  padding: 0;
  background: none;
}

.person-index { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; opacity: .65; }
.person-name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 1.05;
  margin: .5rem 0 .3rem;
}
.person-tag {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .05em;
  opacity: .8;
}
.person-role {
  display: inline-block;
  margin-top: .4rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border: 1px solid currentColor;
  opacity: .75;
}

.person-card--more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  min-height: 100%;
}

/* -- Feature card (conference features) -- */
.feature-grid {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}
@media (min-width: 768px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}
.feature-card {
  background: rgba(23,16,13,.05);
  border: 1px solid rgba(23,16,13,.18);
  padding: var(--space-lg);
}
.feature-card .icon { width: 32px; height: 32px; color: var(--color-ink); margin-bottom: var(--space-sm); }
.feature-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.2rem;
  margin-bottom: .5rem;
}
.feature-card p { font-size: .95rem; line-height: 1.62; color: var(--color-muted-on-yellow); }

/* -- Theme card (about page) -- */
.theme-card { border: 2px solid var(--color-brass-deep); padding: var(--space-lg); }
.theme-card .tag {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--color-brass-deep);
}
.theme-card h3 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.8rem; line-height: 1.02; margin: .7rem 0 .5rem;
}
.theme-card p { font-family: var(--font-body); font-style: italic; font-size: 1.02rem; line-height: 1.55; }

/* -- PDF fallback card (mobile-only "open the PDF" prompt, see
   partials/pdf-fallback-card.ejs) - each page's own stylesheet controls
   when this shows/hides (schedule.css, lightbox.css); this is just the
   look. Same bones as .theme-card (bordered block) but with an icon +
   tag + real body copy instead of a pull-quote, since this is a
   functional prompt, not an editorial callout. */
.pdf-fallback-card {
  border: 2px solid var(--color-brass-deep);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
.pdf-fallback-card__icon {
  color: var(--color-flame);
  margin-bottom: var(--space-sm);
}
.pdf-fallback-card .tag {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--color-brass-deep);
}
.pdf-fallback-card h3 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.7rem; line-height: 1.02; margin: .5rem 0;
}
.pdf-fallback-card .muted { font-size: .95rem; }
.pdf-fallback-card .btn { margin-top: var(--space-md); }

/* -- Mission grid (about page) -- */
.mission-grid {
  display: grid;
  gap: 1px;
  background: rgba(23,16,13,.15);
  border: 1px solid rgba(23,16,13,.15);
  margin-top: var(--space-sm);
}
@media (min-width: 640px) {
  .mission-grid { grid-template-columns: repeat(2, 1fr); }
}
.mission-item { background: var(--color-paper); padding: var(--space-lg); }
.mission-item .num { font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; color: var(--color-flame); line-height: 1; }
.mission-item h3 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .01em; margin: .6rem 0 .4rem;
}
.mission-item p { font-size: .93rem; line-height: 1.6; color: var(--color-muted-on-paper); }

/* -- Press list -- */
.press-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-lg);
  border-top: 1px solid rgba(23,16,13,.15);
}
.press-row {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding-block: var(--space-md);
  border-bottom: 1px solid rgba(23,16,13,.15);
}
.press-row__cover {
  flex-shrink: 0;
  width: 84px;
  aspect-ratio: 1 / 1;
  background: var(--tone, var(--color-indigo));
}
@media (min-width: 640px) {
  .press-row__cover { width: 120px; }
}
.press-row__body { min-width: 0; flex: 1; }
.press-row time { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brass-deep); }
.press-row h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1.15;
  margin: .3rem 0 .4rem;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.press-row p {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--color-muted-on-paper);
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.press-row .btn-ghost { margin-top: .5rem; font-size: .74rem; }
.press-card .btn-ghost { margin-top: var(--space-sm); align-self: flex-start; }