/* styles/pages/opportunities.css — page-level layout for opportunities.html only */
/* This is the events/committees hub — each full-width bar previews one
   committee's blurb, common activities, VP, and soonest upcoming event,
   linking through to that committee's own full page. */

.page-header {
  --page-header-photo: url('/assets/images/banners/opportunities-banner.jpg');
}

.opportunity-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.opportunity-bar {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.opportunity-bar-content {
  text-align: left;
}

.opportunity-bar-content h3 {
  font-size: 2rem;
  margin-bottom: var(--space-2);
}

.opportunity-title-link {
  color: var(--color-primary);
}

.opportunity-title-link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.opportunity-activities {
  margin: var(--space-4) 0;
}

.opportunity-activities h4,
.opportunity-next-activity h4 {
  color: var(--color-primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-2);
}

.opportunity-activities ul {
  margin: 0;
  padding-left: var(--space-5);
  font-size: 0.9rem;
}

.opportunity-next-activity {
  margin: var(--space-4) 0 0;
}

.opportunity-next-activity-link {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.opportunity-preview-event {
  margin: 0;
  transition: filter var(--transition-fast);
}

.opportunity-preview-event .event-card {
  margin-bottom: 0;
}

/* The card's own text blurs out from under the "See More" overlay on
   hover/focus, instead of just dimming — it was still legible and
   fighting with the overlay text otherwise. */
.opportunity-next-activity-link:hover .opportunity-preview-event,
.opportunity-next-activity-link:focus-visible .opportunity-preview-event {
  filter: blur(3px);
}

/* "See More" reveals over the event-preview card on hover/focus — that
   card, not the VP photo or the "Next Activity" heading text, is the link
   through to the committee page. */
.opportunity-next-activity-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.opportunity-next-activity-link:hover .opportunity-next-activity-hover,
.opportunity-next-activity-link:focus-visible .opportunity-next-activity-hover {
  opacity: 1;
}

/* VP profile block — a plain, fixed-size square (never stretched to match
   the content column's height) with name/role beneath it. DOM order keeps
   it after Next Activity, matching how narrow screens stack it; the
   >640px grid below repositions it beside the blurb/activities instead. */
.opportunity-vp-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--space-4) 0 0;
  text-align: center;
}

.opportunity-vp-photo {
  width: 160px;
  height: 160px;
  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: 2.5rem;
}

.opportunity-vp-info {
  margin-top: var(--space-2);
}

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

.opportunity-vp-name {
  font-weight: 700;
  color: var(--color-primary);
}

/* Wide enough for the blurb/activities and the VP square to sit side by
   side: content on the left, VP block pulled up beside it on the right
   (align-items: start keeps the square from stretching to match the
   content column's height), with Next Activity spanning full width below
   both. */
@media (min-width: 641px) {
  .opportunity-bar {
    display: grid;
    grid-template-columns: 1fr 180px;
    column-gap: var(--space-6);
    row-gap: var(--space-4);
    align-items: start;
  }
  .opportunity-bar-content {
    grid-column: 1;
    grid-row: 1;
  }
  .opportunity-vp-block {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .opportunity-next-activity {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .opportunity-bar-content {
    text-align: center;
  }
  .opportunity-activities ul {
    display: inline-block;
    text-align: left;
  }
}