/* ===== Luxe Agenda (page-only) ===== */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root{
  --lx-panel: rgba(255,255,255,.06);
  --lx-border: rgba(255,255,255,.14);
  --lx-text: rgba(255,255,255,.92);
  --lx-muted: rgba(255,255,255,.68);

  --lx-gold-1: #f6d37a;
  --lx-gold-2: #caa34a;

  --lx-shadow: 0 18px 50px rgba(0,0,0,.55);
  --lx-radius: 22px;
}

/* Section background + subtle "stage light" glow */
.lx-agenda{
  position: relative;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(246,211,122,.12), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(122,92,255,.10), transparent 55%),
    linear-gradient(180deg, #06050a 0%, #07060a 100%);
  color: var(--lx-text);
  padding: 72px 16px 84px;
  overflow: hidden;
}

.lx-agenda::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.07), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 10px);
  pointer-events:none;
  opacity:.35;
}

.lx-agenda__inner{
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  z-index: 1;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.lx-agenda__header{ margin-bottom: 26px; }

.lx-agenda__kicker{
  margin: 0 0 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lx-muted);
  font-size: 12px;
}

.lx-agenda__title{
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.03;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.lx-agenda__lead{
  margin: 0;
  color: var(--lx-muted);
  max-width: 62ch;
  font-size: 16px;
}

/* Grid */
.lx-agenda__grid{
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

/* Card */
.lx-card{
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  padding: 18px;
  border-radius: var(--lx-radius);
  background: linear-gradient(180deg, var(--lx-panel) 0%, rgba(255,255,255,.04) 100%);
  border: 1px solid var(--lx-border);
  box-shadow: var(--lx-shadow);
  backdrop-filter: blur(10px);
}

.lx-card::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(246,211,122,.35), rgba(255,255,255,.10), rgba(122,92,255,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: .55;
}

.lx-card:hover{
  transform: translateY(-2px);
  transition: transform 160ms ease;
}

/* Date block */
.lx-card__date{
  border-radius: 18px;
  border: 1px solid rgba(246,211,122,.28);
  background:
    radial-gradient(500px 250px at 50% 0%, rgba(246,211,122,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px 10px;
}

.lx-date__day{
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.lx-date__month{
  margin-top: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--lx-text);
  opacity: .9;
}

.lx-date__year{
  margin-top: 4px;
  font-size: 12px;
  color: var(--lx-muted);
}

/* Card content */
.lx-card__top{
  display:flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.lx-card__title{
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.lx-card__meta{
  margin-top: 8px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  color: var(--lx-muted);
  font-size: 13px;
}

.lx-meta__dot{ opacity:.55; }

.lx-card__desc{
  margin: 12px 0 0;
  color: rgba(255,255,255,.80);
  font-size: 14px;
  max-width: 78ch;
}

/* Badges */
.lx-badge{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.lx-badge--available{
  border-color: rgba(246,211,122,.35);
  background: rgba(246,211,122,.14);
  color: rgba(255,255,255,.92);
}

/* FELLE luxe "Uitverkocht" (goud/rood) */
.lx-badge--soldout{
  position: relative;
  border: 1px solid rgba(255, 77, 109, .55);
  background: linear-gradient(135deg, #ff4d6d 0%, #c1121f 42%, #f6d37a 100%);
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  box-shadow:
    0 0 0 1px rgba(255,77,109,.35),
    0 8px 22px rgba(255,77,109,.35),
    0 0 28px rgba(246,211,122,.25);
  letter-spacing: .08em;
}

/* Buttons */
.lx-card__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.lx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--lx-text);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
  user-select:none;
}

.lx-btn:focus{
  outline: 3px solid rgba(246,211,122,.25);
  outline-offset: 2px;
}

.lx-btn__arrow{
  margin-left: 10px;
  opacity: .9;
}

.lx-btn--primary{
  border-color: rgba(246,211,122,.45);
  background: linear-gradient(135deg, rgba(246,211,122,.26), rgba(202,163,74,.14));
  box-shadow: 0 14px 35px rgba(246,211,122,.12);
}

.lx-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(246,211,122,.18);
}

.lx-btn--ghost:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}

/* Luxere “wachtlijst” button (past bij soldout) */
.lx-btn--muted{
  border: 1px solid rgba(255,77,109,.6);
  background: linear-gradient(135deg, rgba(255,77,109,.25), rgba(193,18,31,.25));
  color: #fff;
  box-shadow: 0 10px 30px rgba(255,77,109,.25);
}

.lx-btn--muted:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(255,77,109,.35);
}

/* Sold out card behavior */
.lx-card--soldout{
  opacity: .92;
}

.lx-card--soldout .lx-card__date{
  border-color: rgba(255,255,255,.18);
}

/* Primary CTA uitschakelen als hij per ongeluk op soldout card staat */
.lx-card--soldout .lx-btn--primary{
  pointer-events:none;
  opacity:.45;
}

/* Footer note */
.lx-agenda__footer{ margin-top: 18px; }

.lx-note{
  display:flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: var(--lx-radius);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

.lx-note__spark{
  color: var(--lx-gold-1);
  font-size: 18px;
}

.lx-note__text{
  margin: 0;
  color: var(--lx-muted);
  font-size: 14px;
  flex: 1;
}

.lx-link{
  color: var(--lx-text);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  border-bottom: 1px solid rgba(246,211,122,.35);
  padding-bottom: 2px;
}

.lx-link:hover{
  border-bottom-color: rgba(246,211,122,.65);
}

/* Responsive */
@media (max-width: 760px){
  .lx-card{
    grid-template-columns: 1fr;
  }

  .lx-card__date{
    display:flex;
    gap: 12px;
    justify-content:flex-start;
    align-items: baseline;
    padding: 14px 14px;
  }

  .lx-date__day{ font-size: 28px; }
  .lx-date__month, .lx-date__year{ margin: 0; }

  .lx-note{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
	
}