/* Ballspedia — Public site base styles (hand-rolled, no framework) */
:root {
    --color-bg: #ffffff;
    --color-text: #14161a;
    --color-muted: #6b7280;
    --color-accent: #0f6d5e;
    --color-border: #e5e7eb;
    --radius: 8px;
    --container-width: 1140px;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Manrope", "Segoe UI", Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Manrope", "Segoe UI", Arial, sans-serif;
    line-height: 1.15;
    margin-top: 0;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.btn { display: inline-block; padding: 10px 20px; border-radius: var(--radius); background: var(--color-accent); color: #fff; border: none; cursor: pointer; font-size: 14px; }
.btn.is-loading, .btn:disabled { opacity: .7; cursor: not-allowed; }
.btn--outline { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); }
.btn--danger { background: #b91c1c; }
.btn--sm { padding: 6px 12px; font-size: 13px; }
main { min-height: 60vh; }
.section-inner { max-width: var(--container-width); margin: 0 auto; padding: 48px 24px; }

/* Shared event-card grid — used on Home, Companies detail, Events index */
.featured-events__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 0; }
.event-card { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.event-card img { height: 160px; width: 100%; object-fit: cover; }
.event-card__body { padding: 16px; }
.event-card__link { color: var(--color-accent); font-size: 13px; font-weight: 600; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Shared page-banner hero strip, used on About/Companies/Team/Events/Contact */
.page-banner { position: relative; height: 320px; margin-top: 0; display: flex; align-items: center; justify-content: center; background-color: #14161a; background-size: cover; background-position: center; color: #fff; }
.page-banner__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.page-banner h1 { position: relative; z-index: 1; font-size: 40px; padding: 0 20px; text-align: center; }

@media (max-width: 640px) {
    .section-inner { padding: 40px 20px; }
    .page-banner { height: 220px; }
    .page-banner h1 { font-size: 28px; }
}