/* ========= VRASEL (scoped) ========= */
/* change: scope to #vrasel-page so nothing else is affected */
#vrasel-page .vr-cards{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
#vrasel-page .vr-card{
  min-height: 160px;
}

/* Steps list */
#vrasel-page .vr-steps{
  margin: 0;
  padding-left: 1.2rem;
  max-width: 60ch;
}

/* Audience tabs */
#vrasel-page .vr-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0 16px;
}
#vrasel-page .vr-tab{
  border:1px solid #2a2a2a; background:#101010; color:#fff;
  border-radius:999px; padding:8px 14px; cursor:pointer;
}
#vrasel-page .vr-tab.is-active{ border-color: var(--c-accent); }

/* Panels */
#vrasel-page .vr-panels > .vr-panel{ max-width: 60ch; }
#vrasel-page .vr-panels ul{ margin:0; padding-left:1.2rem; }

/* Logos row */
#vrasel-page .vr-logos{
  justify-content:center;
  gap: var(--space-5);
}

/* CTA cards */
#vrasel-page .vr-cta-cards{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Next event callout (optional) */
#vrasel-page .vr-next{
  margin-top: var(--space-5);
}
#vrasel-page .vr-next .card{
  display:flex; flex-direction:column; gap:8px;
  max-width:560px; margin-inline:auto; text-align:center;
}
#vrasel-page .vr-next .hero__ctas{
  justify-content:center;
}

/* ==== VRASEL → site-wide card look, no global overrides ==== */
/* change: turn key VRASEL sections into responsive card grids */
#vrasel .v-grid,
#vrasel #why-vrasel,
#vrasel #how-matches,
#vrasel #format,
#vrasel #seasons,
#vrasel #prizing,
#vrasel #equipment,
#vrasel #register {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

/* change: make “items” inside those sections look like cards
   (works whether they’re <div> children or <li> from a list) */
#vrasel #why-vrasel > * ,
#vrasel #how-matches > * ,
#vrasel #format > * ,
#vrasel #seasons > * ,
#vrasel #prizing > * ,
#vrasel #equipment > * ,
#vrasel #register > * ,
#vrasel #why-vrasel li,
#vrasel #how-matches li,
#vrasel #format li,
#vrasel #seasons li,
#vrasel #prizing li,
#vrasel #equipment li {
  list-style: none;                 /* for list-based content */
  background:#0b0b0b;
  border:1px solid #161616;
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;                 /* match site cards */
}

/* change: keep headings tidy inside cards */
#vrasel #why-vrasel h3,
#vrasel #how-matches h3,
#vrasel #format h3,
#vrasel #seasons h3,
#vrasel #prizing h3,
#vrasel #equipment h3 {
  margin: .25rem 0;
}

/* change: center section titles, keep comfortable width */
#vrasel .section-title {
  text-align: center;
  max-width: 75ch;
  margin: 0 auto var(--space-4);
}

/* change: consistent CTA row inside any VRASEL card */
#vrasel .btn-row{
  margin-top:auto;
  display:flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* change: optional media block for icons/images inside cards */
#vrasel .card-media{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
#vrasel .card-media img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* change: if a section is a single wide explainer, keep it centered */
#vrasel .wide-card{
  max-width: 900px;
  margin-inline: auto;
}

/* === VRASEL cards & grids (match global cards) === */
.vrasel .grid{
  display:grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

.vrasel .card{
  background:#0b0b0b;
  border:1px solid #161616;
  border-radius:var(--radius);
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
}

.vrasel .card h3{ margin:.25rem 0; }
.vrasel .card p{ margin:0; }
.vrasel .card .btn-row{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

/* keep section titles centered like other pages */
.vrasel .section-title{ text-align:center; }

/* optional: keep long text blocks readable */
.vrasel .prose{ max-width: 70ch; margin-inline:auto; }

/* === VRASEL: glow for images used inside cards/media blocks === */
#vrasel .card-media img,
#vrasel .card img{
  filter: drop-shadow(0 8px 14px rgba(0,255,102,.22))
          drop-shadow(0 0 28px rgba(0,255,102,.18));
}
#vrasel .card-media img:hover,
#vrasel .card img:hover{
  filter: drop-shadow(0 10px 22px rgba(0,255,102,.28))
          drop-shadow(0 0 34px rgba(0,255,102,.22));
}

/* VRASEL action banner */
.action-banner {
  text-align: center;
  margin: 2rem auto 3rem;
}
.action-banner__img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* --- VRASEL hero banner --- */
.hero--with-banner .hero__banner {
  margin: 0 0 1.25rem 0;
}

/* Default (contained to .container width) */
.hero--with-banner .hero__banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(220px, 38vw, 520px); /* breathable on mobile, not towering on desktop */
  object-fit: cover;
  border: 2px solid var(--c-accent, #00ff66);
  border-radius: 12px;
}

/* Optional: EDGE-TO-EDGE (full-bleed) */
/* Add .is-fullbleed on the .hero section to activate */
.hero--with-banner.is-fullbleed {
  /* allow the image to bleed out of the container */
  position: relative;
}
.hero--with-banner.is-fullbleed .hero__banner {
  /* pull the figure out to the edges while keeping content padding intact */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.hero--with-banner.is-fullbleed .hero__banner-img {
  width: 100vw;          /* true edge-to-edge */
  max-height: clamp(220px, 38vw, 520px);
  border-radius: 0;      /* banners usually bleed with square corners */
  border-width: 0;       /* looks cleaner without the border at full-bleed */
}

/* Hero banner image override */
.hero img.hero-banner {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;   /* preserve full image, no crop */
  margin: 0 auto;
  border: none;          /* remove any inherited border */
  outline: none;
}

/* restore neon border for the hero image (centered, non-stretched) */
#vrasel-page .hero img.hero-banner {
  border: 2px solid var(--c-accent, #00ff66);
  border-radius: 12px;
  box-sizing: border-box; /* keep layout stable with border */
  display: block;
  margin: 0 auto;         /* stay centered */
  height: auto;
  max-width: 80%;
  object-fit: contain;    /* no crop at the top */
}

/* Center audience section */
#audiences { text-align: center; }
#audiences h2 { text-align: center; }               /* your h2 lacks .section-title */
#audiences .vr-tabs {
  display: inline-flex; justify-content: center; gap: 1rem; margin-bottom: 1rem;
}
#audiences .vr-panels {
  max-width: 720px; margin-inline: auto; text-align: left; /* center the block itself */
}

/* Center participating & host campuses */
#schools { text-align: center; }                     /* was #campuses */
#schools .vr-logos {
  display: flex;                                     /* ensure flex so justify works */
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}