/* ==========================================================================
   mod_scheuerevents_upcoming – upcoming.css
   Kompakte Grid-Ansicht (4 Spalten Desktop, 2 Tablet, 1 Mobil).
   Basiert 1:1 auf dem Design in upcoming-events_custom-code.txt.
   Nutzt CSS-Variablen: --maincolor, --secondcolor, --thirdcolor.
   ========================================================================== */

.se-upcoming { margin: 0; }

.se-upcoming__heading {
  color: var(--maincolor);
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  margin: 0 0 32px;
}

.se-upcoming__empty {
  text-align: center;
  padding: 32px 16px;
  opacity: .8;
}

.se-upcoming__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: start;
  margin: 0 auto;
}
.se-upcoming--cols-1 .se-upcoming__grid { grid-template-columns: 1fr; }
.se-upcoming--cols-2 .se-upcoming__grid { grid-template-columns: repeat(2, 1fr); }
.se-upcoming--cols-3 .se-upcoming__grid { grid-template-columns: repeat(3, 1fr); }
.se-upcoming--cols-5 .se-upcoming__grid { grid-template-columns: repeat(5, 1fr); }
.se-upcoming--cols-6 .se-upcoming__grid { grid-template-columns: repeat(6, 1fr); }

/* Breakpoints:
   - < 768px: 1 column (mobile & small tablet portrait — cards get too cramped otherwise)
   - 768–1199px: 2 columns (tablet + small desktop)
   - >= 1200px: configured column count (usually 4)
*/
@media (max-width: 1199.98px) {
  .se-upcoming__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .se-upcoming__grid { grid-template-columns: 1fr; }
}

/* Card --------------------------------------------------------------------- */

.se-upcoming-card {
  display: flex;
  flex-direction: column;
}
.se-upcoming-card.is-clickable { cursor: pointer; }
.se-upcoming-card.is-clickable:focus-visible {
  outline: 3px solid var(--secondcolor, #f26c1a);
  outline-offset: 3px;
}

/* Banner with title on blurred bg */
.se-upcoming-card__banner {
  position: relative;
  min-height: 5.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: .5em 1em;
  text-align: center;
}
.se-upcoming-card__banner-bg {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center top;
  filter: blur(10px);
  transform: scale(1.15);
}
.se-upcoming-card__banner-tint {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(0, 25, 54, .8) 35%, rgba(13, 7, 101, .5) 100%);
}
.se-upcoming-card__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: 'Permanent Marker', cursive;
  font-size: 30px;
  line-height: 30px;
  color: var(--secondcolor, #f26c1a);
}

/* Square photo */
.se-upcoming-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.se-upcoming-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.se-upcoming-card__subtitle {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: .9em 1em;
  background-image: linear-gradient(90deg, rgba(0, 25, 54, .8) 35%, rgba(13, 7, 101, .5) 100%);
  font-size: 1.2em;
  line-height: 1em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}

/* Date strip */
.se-upcoming-card__date {
  padding: 10px;
  background-color: var(--secondcolor, #f26c1a);
  font-family: 'Permanent Marker', cursive;
  font-size: 2.4em;
  line-height: 1.2;
  color: #000;
  text-align: center;
}

/* CTA */
.se-upcoming-card__cta {
  padding: 20px 16px 0;
  text-align: center;
}
/* Button styling comes from the template's own .btn-primary class. */

.se-upcoming-card__cta-text {
  margin: 0;
  color: var(--maincolor);
  font-size: 15px;
}