/* ============================================================
   Staffordshire Quantums — theme
   Sits on top of the shared stylesheet by re-pointing its colour
   tokens: red and yellow come from the club crest, near-black from
   its lettering. The repeating border is drawn after the shirt trim.
   ============================================================ */

:root {
  --green:        #C8202F;   /* the Quantums' primary red (text-safe on cream) */
  --green-dark:   #A51825;
  --green-deep:   #1B1B1B;   /* near-black: footer, and text on yellow buttons */
  --gold:         #F0C820;
  --gold-deep:    #D4A400;
  --cream:        #F7F3E8;
  --ink:          #1E1E1E;
  --ink-soft:     #4F4B45;
  --line:         #D9CFB5;
}

.site-header { background: #1B1B1B; border-bottom: 0; }
.brand img { height: 54px; }
.brand-word { color: #fff; }

.q-band {
  height: 20px;
  background: #E02838 url(/assets/img/quantums-tapa.png) repeat-x;
  background-size: 32px 20px;
}

footer.site-footer { background: #1B1B1B; }
footer.site-footer img { height: 64px; }

/* Home page */
.q-hero {
  background: radial-gradient(ellipse at 80% 20%, #8E1722 0%, #3A0C12 45%, #1B1B1B 100%);
  color: #fff;
  padding: 64px 0 56px;
}
.q-hero .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.q-hero h1 { color: var(--gold); font-size: clamp(44px, 8vw, 84px); line-height: 0.95; margin: 0 0 16px; font-style: italic; }
.q-hero p { color: #F3E9D2; font-size: 19px; max-width: 46ch; margin: 0 0 24px; }
.q-hero img { width: 230px; height: auto; flex: 0 0 auto; }
@media (max-width: 760px) { .q-hero img { display: none; } .q-hero { padding: 44px 0 40px; } }

.q-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.q-facts li { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold-deep); padding: 14px 16px; }
.q-facts strong { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 22px; color: var(--green); }
.q-facts span { font-size: 14px; color: var(--ink-soft); }

.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.q-card { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--green); padding: 22px; }
.q-card h3 { margin-top: 0; }
.q-card.gold { border-top-color: var(--gold-deep); }

/* Rugby Card page: the "selected club" tint was green */
.slot-selected { background: #FBE9EA; }
.slot-reserved { background: #FBF6E4; }

.q-grid { margin-top: 22px; }
.q-card .btn { font-size: 17px; padding: 10px 18px; }

/* ---- The Men of Steel ---- */
.mos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
.mos-card {
  background: #C8202F;            /* the Quantums' red */
  color: #FFE98A;                 /* a paler yellow for the small print, so it stays readable */
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  display: flex; flex-direction: column;
}
.mos-card .mos-band { height: 20px; background: #E02838 url(/assets/img/quantums-tapa.png) repeat-x; background-size: 32px 20px; }
.mos-season {
  font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-style: italic;
  font-size: 40px; line-height: 1; color: #F0C820; padding: 18px 20px 4px; letter-spacing: 0.5px;
}
.mos-photo { margin: 10px 20px 0; border: 4px solid #F0C820; border-radius: 6px; aspect-ratio: 4 / 5; background: #8E1722; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mos-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mos-photo img.mos-crest { width: 55%; height: auto; object-fit: contain; opacity: 0.9; }
.mos-name { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 30px; line-height: 1.05; color: #F0C820; margin: 16px 20px 6px; }
.mos-writeup { margin: 0 20px 22px; font-size: 16px; line-height: 1.5; color: #FFE98A; white-space: pre-line; }
.mos-empty { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--gold-deep); padding: 28px; text-align: center; color: var(--ink-soft); }