/* Page layout for stormchaserscup.com. Colours, type, spacing and components come from the design
   system (tokens.css and bundle.css, built from branding/design-system/project/). This file only
   places them on the page. Mobile first. */

html { scroll-behavior: smooth; scroll-padding-top: var(--space-4); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-size: 17px; line-height: 26px; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }

.wrap { box-sizing: border-box; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 var(--space-4); }
.measure { max-width: 65ch; }

/* Visually hidden, still read by screen readers (for example "Website of Ramada..."). */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 10; padding: var(--space-3) var(--space-4);
  background: var(--action); color: var(--on-action); border-radius: var(--radius-md); }
.skip-link:focus { top: var(--space-4); }

/* Preview builds only: says plainly that the page isn't live. */
.preview-banner { background: var(--ice); color: var(--on-ice); padding: var(--space-3) 0; }

/* The first screen. */
.top { padding: var(--space-4) 0; }
.scc-event-eyebrow { color: var(--ink-muted); }
.scc-event .scc-cta { margin-top: var(--space-2); }
.scc-event-sanction { color: var(--ink-muted); }
@media (max-width: 639px) {
  .top { padding-top: var(--space-3); }
  .scc-event { gap: var(--space-4); padding: var(--space-4); }
  .scc-event-mark { max-width: 140px; }
}

/* Page sections: long page, read in chapters. */
.section { padding: var(--space-12) 0; }
.section-band { background: var(--surface-band); }
@media (min-width: 640px) { .section { padding: var(--space-16) 0; } }
.section-body { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.section-body > * { min-width: 0; }
.sub-heading { margin-top: var(--space-4); }

/* Cards: divisions, hotels, venues. Flat, raised surface, hairline border. */
.cards { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4);
  background: var(--surface-raised); border: var(--border-thin) solid var(--line); border-radius: var(--radius-md); }
@media (min-width: 640px) { .card { padding: var(--space-6); } }
.card-meta { color: var(--ink-muted); }
.card ul { padding-left: 1.2em; display: grid; gap: var(--space-1); }
.card-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.card-links a { display: inline-flex; align-items: center; min-height: 48px; }

.plain-list { padding-left: 1.2em; display: grid; gap: var(--space-2); }

/* Schedule: one group per day. */
.day { display: grid; gap: var(--space-3); }
.games { display: grid; gap: var(--space-3); }

/* Apply section. */
.apply-head { display: grid; gap: var(--space-4); }
.form-wrap { max-width: 720px; }
.form-done { display: grid; gap: var(--space-2); }

/* Footer: the badge and text stack on phones. */
.scc-footer .wrap { display: grid; gap: var(--space-4); padding: 0 var(--space-4); }
.scc-footer { padding-left: 0; padding-right: 0; }
.scc-footer-badge { flex: none; }

/* Rules links under the rules sentence. */
.link-list { gap: 0; }
.link-list a { display: inline-flex; align-items: center; min-height: 48px; }