/* Backstage @ NAG — brand layer on top of Bootstrap 5.3 dark theme.
   Change --bsn-accent to re-color the whole site. */
:root {
  --bsn-accent: #f5a623;
  --bsn-accent-hover: #ffc45c;
  --bsn-accent-contrast: #1a1200;
  --bsn-surface: #1c1c21;
  --bsn-line: rgba(255, 255, 255, 0.08);
  --bsn-display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0f0f12;
  --bs-body-color: #ececf1;
  --bs-link-color: var(--bsn-accent);
  --bs-link-hover-color: var(--bsn-accent-hover);
  --bs-link-color-rgb: 245, 166, 35;
  --bs-link-hover-color-rgb: 255, 196, 92;
}

h1, h2, h3, .display-3, .display-4, .bsn-brand {
  font-family: var(--bsn-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Nav */
.bsn-nav { background: var(--bsn-surface); border-bottom: 1px solid var(--bsn-line); }
.bsn-brand { font-size: 1.75rem; color: var(--bsn-accent) !important; padding-top: 0; padding-bottom: 0; }
.bsn-brand-logo { display: block; height: 2.5rem; width: auto; }
.bsn-nav .nav-link { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }
.bsn-nav .nav-link.active { color: var(--bsn-accent); }

/* Hero */
.bsn-hero {
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(245, 166, 35, 0.18), transparent 60%),
    var(--bs-body-bg);
  border-bottom: 1px solid var(--bsn-line);
}
.bsn-hero-title { margin: 0; line-height: 0; }
.bsn-hero-logo { display: block; width: min(34rem, 100%); height: auto; }
.bsn-kicker { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; color: var(--bsn-accent); margin-bottom: 0.5rem; }

/* Sections */
.bsn-section-title { font-size: 2.25rem; display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.bsn-more { font-family: system-ui, sans-serif; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; }

/* Buttons */
.btn-accent {
  --bs-btn-bg: var(--bsn-accent);
  --bs-btn-color: var(--bsn-accent-contrast);
  --bs-btn-border-color: var(--bsn-accent);
  --bs-btn-hover-bg: var(--bsn-accent-hover);
  --bs-btn-hover-border-color: var(--bsn-accent-hover);
  --bs-btn-hover-color: var(--bsn-accent-contrast);
  --bs-btn-active-bg: var(--bsn-accent-hover);
  --bs-btn-active-color: var(--bsn-accent-contrast);
  font-weight: 600;
}

/* Event cards */
.bsn-card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.bsn-card { background: var(--bsn-surface); border: 1px solid var(--bsn-line); border-radius: 0.5rem; overflow: hidden; }
.bsn-card-link { display: flex; gap: 1rem; padding: 1rem; color: inherit; text-decoration: none; transition: background-color 0.15s ease; }
.bsn-card-link:hover { background: rgba(255, 255, 255, 0.04); color: inherit; }
.bsn-date {
  flex: 0 0 4.5rem; text-align: center; line-height: 1; padding: 0.5rem 0;
  font-family: var(--bsn-display); background: var(--bsn-accent); color: var(--bsn-accent-contrast); border-radius: 0.375rem;
}
.bsn-date-day { display: block; font-size: 2.5rem; }
.bsn-date-month { display: block; font-size: 1rem; letter-spacing: 0.15em; text-transform: uppercase; }
.bsn-card-title { font-size: 1.75rem; margin: 0 0 0.25rem; }
.bsn-card-meta, .bsn-card-genre { margin: 0; font-size: 0.9rem; color: var(--bs-secondary-color); }
.bsn-card-genre { text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; }

/* Event detail */
.bsn-poster { max-width: 100%; }
.bsn-meta li { margin-bottom: 0.25rem; }

/* Gallery */
.bsn-gallery { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.gallery-item { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 0.375rem; background: var(--bsn-surface); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Video */
.bsn-video { border-radius: 0.5rem; overflow: hidden; background: var(--bsn-surface); }

/* Prose, social, footer */
.bsn-prose { max-width: 70ch; }
.bsn-prose img { max-width: 100%; }
.bsn-social a { font-size: 1.75rem; margin: 0 0.35rem; }
.bsn-footer { background: var(--bsn-surface); border-top: 1px solid var(--bsn-line); }

@media (prefers-reduced-motion: reduce) {
  .bsn-card-link { transition: none; }
}