/* The Run Club's two pages on citadelfitness.app: Safety and Filming.
 *
 * Loaded after /styles.css, so the nav, feature cards, glows and reveals
 * are the home page's own. This adds only what those pages need beyond it:
 * the safety resource's purple, the help numbers, the white ribbon, and the
 * review banner that stays until the pages have been signed off.
 *
 * Purple marks women's safety and nothing else: noticeable at a glance,
 * never the whole page. Buttons stay ember. */
:root {
  --club-purple: var(--calendar-2);
  --club-purple-soft: rgba(139, 92, 246, 0.12);
  --club-purple-line: rgba(139, 92, 246, 0.38);
}

.review-banner {
  position: relative;
  z-index: 60;
  margin: 0;
  padding: 9px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink100);
  background: var(--club-purple-soft);
  border-bottom: 1px solid var(--club-purple-line);
}
.review-banner b { color: var(--white); }

section.page-head { padding-top: 150px; padding-bottom: 36px; position: relative; overflow: hidden; }
.page-head h1 { font-size: clamp(34px, 5.2vw, 52px); margin-bottom: 14px; }
.page-head .kicker, .page-head h1, .page-head p { position: relative; z-index: 1; }
/* Everything on these pages sits in one 880px column, the head included,
   so the heading, the cards and the lists all start on the same line. The
   margin is a share of the section's own width, which is capped, so it
   cannot drift from the auto margins the blocks below it use. */
.page-head .kicker, .page-head h1, .page-head .lede { margin-left: max(0px, calc((100% - 880px) / 2)); margin-right: 0; }
.page-head .kicker, .page-head h1 { max-width: 880px; }
.page-head .lede { max-width: 620px; }
.community .feature-grid { max-width: 880px; margin-left: auto; margin-right: auto; }
section.tight { padding-top: 24px; padding-bottom: 56px; position: relative; }
.section-head.left { text-align: left; margin-left: auto; margin-right: auto; max-width: 880px; }
.feature-grid--4 { grid-template-columns: repeat(2, 1fr); }
.muted { color: var(--ink500); font-size: 14px; }
.link { color: var(--primary); font-weight: 600; }

.safety .kicker { color: var(--club-purple); }
.safety .feature-card:hover { border-color: var(--club-purple-line); }
.safety .feature-icon { background: var(--club-purple-soft); color: var(--club-purple); }

.purple-card, .ribbon-card {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  border-radius: 22px;
  padding: 28px;
}
.purple-card { border: 1px solid var(--club-purple-line); background: linear-gradient(160deg, var(--club-purple-soft), var(--ink800)); }
.ribbon-card { border: 1px solid rgba(255, 255, 255, 0.18); border-left: 4px solid var(--white); background: var(--ink800); }
.ribbon-card .kicker { color: var(--white); }
.purple-card h2, .ribbon-card h2 { font-family: var(--font-display); font-size: 26px; margin: 0 0 12px; }
.plain { margin: 0; padding-left: 20px; color: var(--ink100); }
.plain li { margin: 8px 0; line-height: 1.55; }

.numbers {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.number { border: 1px solid var(--club-purple-line); border-radius: 16px; padding: 16px 18px; background: var(--ink800); font-size: 14px; color: var(--ink300); }
.number b { display: block; font-family: var(--font-display); font-size: 24px; color: var(--white); }
.number a { color: inherit; text-decoration: none; }

.affairs { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: grid; gap: 12px; position: relative; z-index: 1; }
.affairs li { border-left: 3px solid var(--club-purple); padding: 4px 0 4px 14px; }
.affairs h3 { margin: 4px 0; font-size: 17px; }
.affairs .date { color: var(--ink500); font-size: 12.5px; }
.sources { max-width: 880px; margin: 0 auto; padding-left: 20px; color: var(--ink300); font-size: 14px; }
.sources a { color: var(--primary); }

.help-strip {
  margin: 0;
  border-top: 1px solid var(--club-purple-line);
  background: var(--club-purple-soft);
  font-size: 14px;
  text-align: center;
  padding: 12px 16px;
  color: var(--ink100);
}
.help-strip a { color: var(--white); font-weight: 700; text-decoration: none; white-space: nowrap; }

@media (max-width: 860px) { .feature-grid--4 { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  section.page-head { padding-top: 120px; }
  .purple-card, .ribbon-card { padding: 22px 18px; }
}