/**
 * Event page — a full-width hero carousel on top, then a two-column body:
 * the editorial content on the left, a framed event-info box on the right.
 *
 * The carousel itself is the Gallery React island (src/components/Gallery.tsx);
 * the styles here also cover the no-JS fallback (raw <img>s) it enhances.
 */

/* --- Hero carousel ------------------------------------------------------- */
.reciklart-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.reciklart-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}
.reciklart-carousel__slide {
  flex: 0 0 100%;
  height: 100%;
}
.reciklart-carousel__slide img,
.reciklart-carousel--single img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No-JS fallback: the server-rendered images before the island mounts. */
.reciklart-event__carousel > img {
  display: block;
  width: 100%;
  height: auto;
}

.reciklart-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.reciklart-carousel__dots button {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.reciklart-carousel__dots button.is-active { background: #fff; }

/* --- Body: two columns --------------------------------------------------- */
.reciklart-event__body {
  width: min(88rem, 100% - 4rem);
  margin: 2.5rem auto;
  display: grid;
  /* Give the editorial text the lion's share; keep the info box readable. */
  grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) {
  .reciklart-event__body { grid-template-columns: 1fr; }
}

.reciklart-event__main,
.reciklart-event__info {
  background: var(--text-bg-event);
  color: var(--content-color);
  font-family: var(--content-font);
  font-size: var(--content-size);
  font-weight: var(--content-weight);
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow-wrap: break-word;
  word-break: break-word;
}
.reciklart-event__main > * + * { margin-top: 1rem; }

.reciklart-event__title {
  font-family: var(--page-title-font);
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  color: var(--page-title-color);
  margin: 0 0 1rem;
}
.reciklart-event__short { font-weight: bold; }
.reciklart-event__video :where(iframe, video) {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Framed info box — clearly divided from the rest of the page. */
.reciklart-event__info { border: 2px solid var(--color-accent); }
.reciklart-event__info-row + .reciklart-event__info-row { margin-top: 1rem; }
.reciklart-event__label {
  display: block;
  text-transform: uppercase;
  font-size: 0.7em;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin-bottom: 0.15rem;
}
.reciklart-event__info a { text-decoration: underline; }