/*
  Bier Keller Events (Skiddle)
  Extras that aren't in Tailwind by default (kept scoped to .bke-scope).
*/

.bke-scope .line-clamp-2{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* Simple reveal animation (replaces Framer Motion on the React build). */
.bke-scope .bke-reveal{
  opacity:0;
  transform:translateY(16px) scale(0.98);
  transition:opacity 600ms ease, transform 600ms ease;
  transition-delay:var(--bke-delay, 0ms);
}

.bke-scope .bke-reveal.bke-revealed{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Keep inline SVG icons crisp and aligned. */
.bke-scope svg{ display:block; }

/* Card text + grid settings (configurable in WP admin). */
.bke-scope{
  /* Provide Tailwind v4-style color variables so values like
     color-mix(in oklab, var(--color-purple-950) 40%, transparent)
     resolve even when Tailwind isn't loaded globally. */
  --color-purple-950: #3b0764;
}

.bke-scope .bke-card-body{
  color: var(--bke-card-text, #fff);
  /* Make sure the card always has a visible background even if a theme
     overrides gradient utilities or custom properties are unsupported. */
  background-color: #000 !important;
  background-image: linear-gradient(to bottom right, var(--bke-card-bg, var(--tw-gradient-from, rgba(59,7,100,.4))), #000) !important;
}

/* Event title color (configurable). */
.bke-scope .bke-event-title{
  color: var(--bke-title-color, var(--bke-card-text, #fff));
}

/* One-line truncation for event titles. */
.bke-scope.bke-title-truncate .bke-event-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Equal-height cards: keep the call-to-action aligned. */
.bke-scope.bke-equal-height .bke-grid{ align-items: stretch; }
.bke-scope.bke-equal-height .bke-card{ height: 100%; display: flex; flex-direction: column; }
.bke-scope.bke-equal-height .bke-card-body{ flex: 1; display: flex; flex-direction: column; }
.bke-scope.bke-equal-height .bke-card-body a,
.bke-scope.bke-equal-height .bke-card-body button{ margin-top: auto; }

.bke-scope .bke-meta{
  opacity: 0.75;
  font-size: var(--bke-meta-size, 16px);
}

.bke-scope .bke-datetime{
  font-style: var(--bke-datetime-style, normal);
  font-weight: var(--bke-datetime-weight, 400);
}

.bke-scope .bke-btn{
  background: var(--bke-btn-bg, rgba(147,51,234,0.9)) !important;
  color: var(--bke-btn-text-color, #fff) !important;
  text-decoration: none;
}

.bke-scope .bke-btn:hover{
  filter: brightness(1.05);
}

@media (min-width: 1024px){
  .bke-scope .bke-grid{
    grid-template-columns: repeat(var(--bke-cols, 3), minmax(0, 1fr));
  }
}