/* BRASA — the cinematic night break and TONIGHT AT BRASA event posters. */

.nights {
  position: relative;
  min-height: min(92svh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-block: clamp(4rem, 12vh, 8rem);
}
.nights__media { position: absolute; inset: -8% 0; z-index: 0; }
.nights__media img { width: 100%; height: 100%; object-fit: cover; }
.nights__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 9, 8, .78) 0%, rgba(11, 9, 8, .28) 40%, rgba(11, 9, 8, .92) 100%);
}
.nights__inner { position: relative; z-index: 1; }
.nights__copy { max-width: 46ch; margin-top: 1.6rem; color: var(--cream-72); }

.events { padding-block: clamp(4rem, 11vh, 8rem); }
.events__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.events__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

/* posters, not UI cards: full-bleed photo, hard type, one ember rule */
.poster {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--black);
  aspect-ratio: 3 / 4;
  isolation: isolate;
}
.poster img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .68;
  transition: transform var(--dur-image) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 9, 8, .55), rgba(11, 9, 8, .2) 45%, rgba(11, 9, 8, .95));
}
.poster:hover img { transform: scale(var(--img-zoom)); opacity: .8; }

.poster__body {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: clamp(1.1rem, 2vw, 1.8rem);
  display: grid;
  gap: .5rem;
}
.poster__day {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ember);
}
.poster__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--cream);
}
.poster__time {
  font-size: var(--t-small);
  letter-spacing: .1em;
  color: var(--cream-72);
  padding-top: .5rem;
  border-top: 1px solid var(--cream-14);
}

@media (max-width: 860px) {
  .events__grid { grid-template-columns: 1fr; }
  .poster { aspect-ratio: 16 / 10; }
}