/* BRIDGOVANJE — Bridge's event sub-brand: bolder, darker, more dynamic,
   but built from the same tokens/motion system as the rest of the site. */

.theme-night {
  --color-bg: var(--color-ink-950);
  --color-text: var(--color-text-inverse);
  --color-text-muted: var(--color-text-inverse-muted);
  --color-line: var(--color-line-inverse);
  background: var(--color-ink-950);
}

.theme-night .site-footer {
  border-top: var(--line-hairline) solid var(--color-line-inverse);
}

/* ---- Hero ---- */
.bg-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-ink-950);
}

.bg-hero__media {
  position: absolute;
  inset: -6%;
}

.bg-hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 20% 15%, rgba(217, 161, 92, 0.18), transparent 60%),
    radial-gradient(55% 40% at 85% 20%, rgba(111, 168, 160, 0.14), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.bg-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 21, 18, 0.35) 0%, rgba(11, 21, 18, 0.55) 55%, rgba(11, 21, 18, 0.92) 100%);
}

.bg-hero__content {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-2xl);
  color: var(--color-text-inverse);
}

.bg-hero__eyebrow {
  color: var(--color-ember-400);
}

/* Off-season note — only shown when CONFIG.BRIDGOVANJE_OPEN is false
   (body.bridgovanje-closed, toggled by bridgovanje-toggle.js). Covers a
   direct/refresh visit to this page while the header button is locked. */
.bg-hero__season-note {
  display: none;
  margin-top: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--color-text-inverse-muted);
}

body.bridgovanje-closed .bg-hero__season-note {
  display: block;
}

.bg-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.5rem, 11vw, 8.5rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--color-text-inverse);
  margin-top: var(--space-sm);
  padding-bottom: 0.08em;
  overflow: visible;
}

/* Below ~420px the 3.5rem floor above is wider than the viewport itself for
   this single unbreakable word ("BRIDŽOVANJE" has no spaces to wrap on),
   so it was getting clipped on the right by .reveal-text's overflow:hidden.
   A lower floor here lets it keep shrinking with the viewport instead of
   hitting a hard minimum too early. */
@media (max-width: 480px) {
  .bg-hero__title {
    font-size: clamp(2.3rem, 12vw, 3.5rem);
  }
}

.bg-hero__subtitle {
  margin-top: var(--space-md);
  max-width: 42ch;
  font-size: var(--fs-lead);
  color: var(--color-text-inverse-muted);
}

.bg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Oversized background wordmark, decorative only */
.bg-hero__bg-word {
  position: absolute;
  inset: auto 0 -6% 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(6rem, 26vw, 22rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 248, 243, 0.08);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ---- Staggered entrance for hero title lines ---- */
.bg-hero__title .reveal-text__line {
  transition-duration: var(--dur-reveal);
}

.bg-hero__title .reveal-text__line:nth-child(1) { transition-delay: 60ms; }
.bg-hero__title .reveal-text__line:nth-child(2) { transition-delay: 180ms; }

/* ---- Section: what is BRIDGOVANJE ---- */
.bg-intro {
  background: var(--color-ink-950);
  color: var(--color-text-inverse);
}

.bg-intro__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.bg-intro__image {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
}

.bg-intro .lead {
  color: var(--color-text-inverse-muted);
}

@media (max-width: 959px) {
  .bg-intro__grid {
    gap: var(--space-md);
  }
}

@media (min-width: 960px) {
  .bg-intro__grid {
    grid-template-columns: 1fr 0.85fr;
  }
}

/* ---- Next event block ---- */
.bg-next {
  background: linear-gradient(160deg, var(--color-ink-900), var(--color-ink-950));
  color: var(--color-text-inverse);
  border-top: var(--line-hairline) solid var(--color-line-inverse);
  border-bottom: var(--line-hairline) solid var(--color-line-inverse);
}

.bg-next__card {
  position: relative;
  border: var(--line-hairline) solid var(--color-line-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  overflow: hidden;
}

.bg-next__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 0% 0%, rgba(217, 161, 92, 0.12), transparent 60%);
  pointer-events: none;
}

.bg-next__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--color-text-inverse-muted);
}

.bg-next__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.bg-next__title {
  font-size: var(--fs-h2);
}

.bg-next__meta {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}

.bg-next__meta-item {
  border-top: var(--line-hairline) solid var(--color-line-inverse);
  padding-top: var(--space-xs);
}

.bg-next__meta-item h3 {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
  margin-bottom: 4px;
}

.bg-next__meta-item p {
  font-family: var(--font-display);
  font-size: 1.15rem;
}

@media (min-width: 720px) {
  .bg-next__meta {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Atmosphere gallery ---- */
.bg-atmosphere {
  background: var(--color-ink-950);
  color: var(--color-text-inverse);
}

.bg-atmosphere__grid {
  columns: 1;
  column-gap: var(--space-sm);
}

@media (min-width: 640px) {
  .bg-atmosphere__grid { columns: 2; }
}

@media (min-width: 1024px) {
  .bg-atmosphere__grid { columns: 3; }
}

.bg-atmosphere__item {
  break-inside: avoid;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}

.bg-atmosphere__item .image-slot,
.bg-atmosphere__item img {
  aspect-ratio: var(--ar, 4 / 5);
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.bg-atmosphere__item video.media-video {
  position: relative;
  aspect-ratio: var(--ar, 4 / 5);
}

/* ---- Previous editions grid ---- */
.bg-editions {
  background: var(--color-ink-950);
  color: var(--color-text-inverse);
}

.bg-editions__grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .bg-editions__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .bg-editions__grid { grid-template-columns: repeat(3, 1fr); }
}

.bg-edition-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.bg-edition-card img,
.bg-edition-card .image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-edition-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 21, 18, 0.92) 100%);
}

.bg-edition-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--space-sm);
  color: var(--color-text-inverse);
}

.bg-edition-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.bg-edition-card__meta {
  font-size: var(--fs-small);
  color: var(--color-text-inverse-muted);
  margin-top: 2px;
}

.bg-edition-card--placeholder {
  border: var(--line-hairline) dashed var(--color-line-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
}

.bg-edition-card--placeholder p {
  font-size: var(--fs-small);
  color: var(--color-text-inverse-muted);
  max-width: 20ch;
}

/* ---- Final CTA ---- */
.bg-cta {
  background: var(--color-ink-950);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}

.bg-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 50% 0%, rgba(217, 161, 92, 0.14), transparent 60%);
  pointer-events: none;
}

.bg-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.bg-cta__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  max-width: 20ch;
}