/* styles/committee-page.css — shared sections used by all 5 committee pages
   (community-service, events-committee, unity, fundraising, public-relations),
   rendered by js/pages/committee-page.js. Shared like event-card.css/
   fun-fact-widget.css: imported by multiple pages, not truly global. */

/* Blurb (left) + VP (right) side by side — the VP intro no longer gets its
   own labeled section, it just sits alongside the combined blurb/why-it-
   matters paragraph. */
.committee-intro {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--space-6);
  align-items: start;
}

.committee-blurb {
  text-align: left;
}

.committee-vp {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.committee-vp-photo {
  width: 200px;
  height: 200px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3.25rem;
}

.committee-vp-role {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.committee-vp-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.committee-vp-organelle {
  margin-top: var(--space-1);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-text-muted);
}

/* A thin full-width strip, not a section — a quick, discreet mention of
   what this committee plans on the way down to "About the Committee",
   not a whole bulleted-list block of its own. */
.committee-activities-banner {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-5);
}

.committee-meeting-info {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.committee-join {
  margin-top: var(--space-5);
}

.committee-join #committee-interest-form {
  margin-top: var(--space-4);
  text-align: left;
}

.committee-recap-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  max-width: 560px;
  margin: 0 auto;
}

.committee-recap-tile {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  opacity: 0.7;
}

.committee-recap-tile:nth-child(even) {
  opacity: 0.5;
}

@media (max-width: 640px) {
  .committee-intro {
    grid-template-columns: 1fr;
  }
  .committee-blurb {
    text-align: center;
  }
  .committee-vp-photo {
    width: 160px;
    height: 160px;
    font-size: 2.5rem;
  }
  .committee-recap-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}