/* Page layout for the static site. Colours, type and component styles come from tokens.css and components.css. */

/* The site's spacing steps are fluid; tokens.json stores their maximums. */
:root {
  --space-20: min(1.5rem, 2vw);
  --space-30: min(2.5rem, 3vw);
  --space-40: min(4rem, 5vw);
  --space-50: min(6.5rem, 8vw);
  --space-60: min(10.5rem, 13vw);
  --content: 620px;
  --wide: 1000px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface); }
/* body must stay transparent so the fixed background video shows through every section */
body.gta-root { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: transparent; }

/* Site-wide background video, fixed behind all content (as on the WordPress site) */
#bg-video { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; object-fit: cover; z-index: -1; }
@media (max-width: 768px) { #bg-video { object-fit: contain; object-position: center; width: 100%; height: 100%; } }
@media (max-width: 480px) and (orientation: portrait) { #bg-video { object-position: center top; } }
@media (prefers-reduced-motion: reduce) { #bg-video { display: none; } }
main { flex: 1; }
img, video { max-width: 100%; height: auto; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink-bright); color: var(--surface) !important; padding: 8px 16px; z-index: 10; }
.skip-link:focus { left: 8px; }

.wrap { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Header extras: Spotify link sits with the nav */
.gta-header .spotify { display: inline-flex; }
.gta-header .spotify img { width: 48px; height: 48px; display: block; }
.gta-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* Home: signup */
.signup-section { padding-block: var(--space-50) var(--space-40); display: flex; justify-content: center; }
.signup-section .gta-signup { width: min(420px, 100%); }
.gta-signup .gta-btn--outline { border-color: var(--logo-graphite); }
.signup-thanks { font: 400 16.8px/26.04px var(--font-body); text-align: center; }

/* Home: hero */
.hero { padding-block: var(--space-60); }

/* Home: feed */
.feed { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-40); padding-block: var(--space-50); }
.feed-logo img { width: 200px; height: auto; }
.feed-posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-50); }
.gta-post img, .gta-post video { margin-bottom: var(--space-10); }
.gta-post video { width: 100%; max-width: 480px; background: var(--surface-raised); display: block; }
.gta-post h3 { font: 400 29.6px/38.48px var(--font-heading); margin: var(--space-10) 0 8px; }
.gta-post strong { font-weight: 600; }

/* About */
.about { padding-block: var(--space-50); display: grid; gap: var(--space-40); }
.about .gta-quote { margin-top: var(--space-20); }
.members { display: grid; gap: var(--space-20); }

/* Footer */
.site-footer { padding-block: var(--space-60) var(--space-40); }

@media (max-width: 780px) {
  .feed { grid-template-columns: minmax(0, 1fr); }
  .feed-logo { display: none; }
  .gta-footer { grid-template-columns: 1fr 1fr; }
  .gta-footer > :first-child { grid-column: 1 / -1; }
  .gta-hero h1 { font-size: 32px; line-height: 38px; }
  .gta-page-title { font-size: 40px; line-height: 46px; }
  .gta-quote { padding: 28px; }
  .gta-quote p { font-size: 24px; line-height: 32px; }
}
@media (max-width: 520px) {
  .gta-header { flex-wrap: wrap; }
  .gta-site-title { font-size: 15px; }
}