/* Cards component stylesheet — v0241
   Canonical shared card styles for reusable card components.
   Event Card v1.0 is documented in docs/EVENT-CARD-V1-0.md.
   Page CSS may handle section spacing/layout, not card internals.
*/

/* Event Card v1.0 */
.event-card-final{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid rgba(44,38,32,.09);
  border-radius:28px;
  background:rgba(255,252,246,.88);
  box-shadow:0 26px 62px -52px rgba(44,38,32,.38);
  transition:transform .22s ease, box-shadow .22s ease;
}

.event-card-final[data-card-clickable="true"]{
  cursor:pointer;
}

.event-card-final[data-card-clickable="true"]:hover{
  transform:translateY(-3px);
}

.event-card-final::after{
  content:"";
  position:absolute;
  right:-78px;
  top:-86px;
  width:210px;
  height:180px;
  border-radius:48% 52% 44% 56%;
  background:rgba(181,98,62,.055);
  pointer-events:none;
}

.event-card-final-image{
  position:relative;
  display:block;
  flex:0 0 auto;
  aspect-ratio:16 / 10.2;
  overflow:hidden;
  text-decoration:none;
}

.event-card-final-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.event-card-final:hover .event-card-final-image img{
  transform:scale(1.035);
}

.event-card-final-date{
  position:absolute;
  top:14px;
  left:14px;
  display:grid;
  place-items:center;
  min-width:58px;
  min-height:58px;
  padding:8px;
  border-radius:16px;
  background:rgba(255,252,246,.92);
  box-shadow:0 14px 28px -22px rgba(44,38,32,.5);
}

.event-card-final-date strong{
  color:var(--terracotta);
  font-family:var(--serif);
  font-size:1.55rem;
  line-height:.92;
}

.event-card-final-date small{
  color:var(--ink-soft);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.event-card-final-price{
  position:absolute;
  top:16px;
  right:16px;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:7px 11px;
  border-radius:999px;
  background:var(--terracotta);
  color:#fff;
  font-size:.82rem;
  font-weight:800;
}

.event-card-final-body{
  position:relative;
  z-index:1;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:14px;
  min-height:0;
  padding:24px;
}

.event-card-final h3{
  margin:0;
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.36rem,1.72vw,1.74rem);
  line-height:1.14;
  letter-spacing:-.03em;
}

.event-card-title-line{
  display:block;
}

.event-card-hostline{
  display:flex;
  align-items:center;
  min-width:0;
}

.event-card-hostline .event-host-avatar + .event-host-avatar{
  margin-left:-10px;
}

.event-host-avatar{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(181,98,62,.16), rgba(241,233,212,.78));
  color:var(--terracotta);
  font-weight:800;
  border:2px solid rgba(255,255,255,.76);
  box-shadow:0 12px 26px -22px rgba(44,38,32,.52);
}

.event-host-avatar--image{
  overflow:hidden;
  position:relative;
}

.event-host-avatar--image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.event-host-avatar-fallback{
  display:none;
}

.event-host-avatar:not(.event-host-avatar--image) .event-host-avatar-fallback{
  display:grid;
  place-items:center;
}

.event-hosts-text{
  min-width:0;
  margin-left:10px;
  font-family:var(--body);
  font-size:.86rem;
  line-height:1.34;
  color:rgba(44,38,32,.66);
}

.event-hosts-text strong{
  font-weight:500;
}

.event-card-final p{
  margin:0;
  color:var(--ink-soft);
  line-height:1.62;
  font-size:.95rem;
}

.event-card-mini-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  color:rgba(44,38,32,.64);
  font-size:.88rem;
}

.event-card-mini-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.event-card-mini-icon{
  width:18px;
  height:18px;
  color:var(--terracotta);
  flex:0 0 18px;
}

.event-card-dual-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:12px;
  align-items:center;
  margin-top:auto;
  padding-top:4px;
}

.event-card-more,
.event-card-ticket{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  min-height:44px;
  border-radius:999px;
  font-weight:400;
  text-decoration:none;
  cursor:pointer;
}

.event-card-more{
  border:1px solid rgba(44,38,32,.12);
  background:rgba(255,255,255,.48);
  color:var(--ink);
}

.event-card-ticket{
  border:0;
  padding:0 18px;
  background:var(--terracotta);
  color:#fff;
  font:inherit;
}

.event-action-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
}

.event-card-grid,
.event-card-grid--home{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  align-items:stretch;
}

@media(max-width:1080px){
  .event-card-grid,
  .event-card-grid--home{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px){
  .event-card-grid,
  .event-card-grid--home{
    grid-template-columns:1fr;
  }

  /* v0261: Event Card v1.1 action layout stays component-wide consistent.
     Home, Aanbod and related-event cards must keep both CTA buttons side-by-side
     on mobile. Page CSS may not stack these buttons per context. */
  .event-card-final[data-component="event-card"] .event-card-dual-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    gap:12px;
  }
}



/* Event Ticket Modal v1.0 — shared component
   Required wherever Event Card v1.0 includes a ticket modal trigger.
   This was moved into shared component CSS in v0242 so Home and Aanbod use the same modal.
*/
.event-ticket-modal[hidden]{
  display:none !important;
}

.event-ticket-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:24px;
}

.event-ticket-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(44,38,32,.48);
  backdrop-filter:blur(8px);
}

.event-ticket-modal__dialog{
  position:relative;
  z-index:1;
  width:min(940px, calc(100vw - 32px));
  max-height:min(88vh, 900px);
  overflow:auto;
  border:1px solid rgba(44,38,32,.10);
  border-radius:32px;
  background:#fff;
  box-shadow:0 38px 110px -50px rgba(44,38,32,.62);
}

.event-ticket-modal__dialog:focus{
  outline:none;
}

.event-ticket-modal__close{
  position:sticky;
  top:18px;
  float:right;
  z-index:3;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:18px 18px -62px auto;
  border:1px solid rgba(44,38,32,.10);
  border-radius:50%;
  background:rgba(255,255,255,.86);
  color:var(--ink);
  font-size:1.55rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 28px -24px rgba(44,38,32,.46);
}

.event-ticket-modal__header{
  padding:38px 38px 18px;
}

.event-ticket-modal__header h2{
  max-width:760px;
  margin:8px 0 8px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(2rem,3.7vw,3.45rem);
  line-height:1.04;
  letter-spacing:-.045em;
}

.event-ticket-modal__header p{
  margin:0;
  color:var(--ink-soft);
}

.event-ticket-modal__embed{
  padding:0 38px 38px;
}

.event-ticket-modal__embed .ot-iframe{
  min-height:560px;
  width:100%;
  border:1px solid rgba(44,38,32,.09);
  border-radius:22px;
  background:#fff;
  overflow:hidden;
}

.event-ticket-modal__loading{
  display:grid;
  place-items:center;
  min-height:260px;
  border:1px dashed rgba(44,38,32,.16);
  border-radius:22px;
  background:#fff;
  color:var(--ink-soft);
  font-weight:700;
}

.event-ticket-modal__fallback{
  margin:14px 0 0;
  color:var(--ink-soft);
  font-size:.94rem;
}

.event-ticket-modal__fallback a{
  color:var(--terracotta);
  font-weight:800;
  text-decoration:none;
}

body.ticket-modal-open{
  overflow:hidden;
}

/* v0282 — popup dialog surfaces stay plain white sitewide. */
.event-ticket-modal__dialog,
.event-ticket-modal--embed-only .event-ticket-modal__dialog{
  background:#fff;
}


/* Embed-only variant used by Event Card v1.0 */
.event-ticket-modal--embed-only{
  padding:18px;
}

.event-ticket-modal--embed-only .event-ticket-modal__dialog{
  width:min(880px, calc(100vw - 28px));
  max-height:92vh;
  padding:22px;
  border-radius:30px;
  overflow:auto;
}

.event-ticket-modal--embed-only .event-ticket-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  margin:0;
  float:none;
  background:rgba(255,255,255,.92);
}

.event-ticket-modal--embed-only .event-ticket-modal__embed{
  padding:50px 0 0;
}

.event-ticket-modal--embed-only .event-ticket-modal__embed .ot-iframe{
  min-height:680px;
  border-radius:20px;
}

.event-ticket-modal--embed-only .event-ticket-modal__loading{
  min-height:520px;
}

.event-ticket-modal--embed-only .event-ticket-modal__fallback{
  text-align:center;
  margin-top:12px;
}

@media(max-width:680px){
  .event-ticket-modal{
    padding:10px;
  }

  .event-ticket-modal__dialog{
    width:calc(100vw - 20px);
    max-height:90vh;
    border-radius:24px;
  }

  .event-ticket-modal__close{
    top:12px;
    width:42px;
    height:42px;
    margin:12px 12px -54px auto;
  }

  .event-ticket-modal__header{
    padding:30px 20px 16px;
  }

  .event-ticket-modal__embed{
    padding:0 20px 24px;
  }

  .event-ticket-modal__embed .ot-iframe{
    min-height:600px;
  }

  .event-ticket-modal--embed-only{
    padding:8px;
  }

  .event-ticket-modal--embed-only .event-ticket-modal__dialog{
    width:calc(100vw - 16px);
    max-height:92vh;
    padding:14px;
    border-radius:22px;
  }

  .event-ticket-modal--embed-only .event-ticket-modal__close{
    top:10px;
    right:10px;
  }

  .event-ticket-modal--embed-only .event-ticket-modal__embed{
    padding-top:48px;
  }

  .event-ticket-modal--embed-only .event-ticket-modal__embed .ot-iframe{
    min-height:650px;
    border-radius:16px;
  }
}


/* v0247 Mobile ticket modal: fullscreen sheet */
@media(max-width:680px){
  .event-ticket-modal{
    display:block;
    padding:0;
    background:#fff;
  }

  .event-ticket-modal__overlay{
    display:none;
  }

  .event-ticket-modal__dialog,
  .event-ticket-modal--embed-only .event-ticket-modal__dialog{
    width:100vw;
    max-width:none;
    height:100dvh;
    max-height:none;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:#fff;
    box-shadow:none;
    overflow:auto;
  }

  .event-ticket-modal__close,
  .event-ticket-modal--embed-only .event-ticket-modal__close{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 12px);
    right:14px;
    z-index:10;
    width:48px;
    height:48px;
    margin:0;
    border:1px solid rgba(44,38,32,.12);
    border-radius:999px;
    background:#fff;
    color:var(--ink);
    font-size:1.65rem;
    box-shadow:0 14px 32px -22px rgba(44,38,32,.42);
  }

  .event-ticket-modal__header{
    padding:calc(env(safe-area-inset-top, 0px) + 74px) 18px 14px;
    background:#fff;
  }

  .event-ticket-modal__header h2{
    font-size:clamp(1.8rem,9vw,2.55rem);
  }

  .event-ticket-modal__embed,
  .event-ticket-modal--embed-only .event-ticket-modal__embed{
    padding:calc(env(safe-area-inset-top, 0px) + 70px) 10px 16px;
    background:#fff;
  }

  .event-ticket-modal__embed .ot-iframe,
  .event-ticket-modal--embed-only .event-ticket-modal__embed .ot-iframe{
    min-height:calc(100dvh - 92px);
    width:100%;
    border:0;
    border-radius:0;
    background:#fff;
  }

  .event-ticket-modal__loading,
  .event-ticket-modal--embed-only .event-ticket-modal__loading{
    min-height:calc(100dvh - 110px);
    border:0;
    border-radius:0;
    background:#fff;
  }

  .event-ticket-modal__fallback,
  .event-ticket-modal--embed-only .event-ticket-modal__fallback{
    padding:0 12px 18px;
    margin:0;
    background:#fff;
    text-align:center;
  }
}

/* v0249 Mobile ticket modal: true fullscreen overlay above sticky header
   Must cover the fixed mobile header/statusbar and preserve desktop lightbox.
*/
@media(max-width:680px){
  .event-ticket-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483500 !important;
    display:block;
    width:100vw;
    height:100dvh;
    min-height:100vh;
    padding:0 !important;
    background:#fff;
    overflow:hidden;
    overscroll-behavior:contain;
    isolation:isolate;
  }

  .event-ticket-modal__overlay{
    display:none !important;
  }

  .event-ticket-modal__dialog,
  .event-ticket-modal--embed-only .event-ticket-modal__dialog{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483501;
    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;
    min-height:100vh;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .event-ticket-modal__close,
  .event-ticket-modal--embed-only .event-ticket-modal__close{
    position:fixed !important;
    top:calc(env(safe-area-inset-top, 0px) + 12px) !important;
    right:14px !important;
    z-index:2147483502 !important;
    width:48px;
    height:48px;
    margin:0 !important;
    border:1px solid rgba(44,38,32,.12);
    border-radius:999px;
    background:#fff;
    color:var(--ink);
    font-size:1.65rem;
    line-height:1;
    box-shadow:0 14px 32px -22px rgba(44,38,32,.42);
  }

  .event-ticket-modal__header{
    padding:calc(env(safe-area-inset-top, 0px) + 74px) 18px 14px;
    background:#fff;
  }

  .event-ticket-modal__embed,
  .event-ticket-modal--embed-only .event-ticket-modal__embed{
    padding:calc(env(safe-area-inset-top, 0px) + 70px) 10px 16px !important;
    background:#fff;
  }

  .event-ticket-modal__embed .ot-iframe,
  .event-ticket-modal--embed-only .event-ticket-modal__embed .ot-iframe{
    display:block;
    width:100%;
    min-height:calc(100dvh - 92px) !important;
    border:0 !important;
    border-radius:0 !important;
    background:#fff;
  }

  .event-ticket-modal__loading,
  .event-ticket-modal--embed-only .event-ticket-modal__loading{
    min-height:calc(100dvh - 110px) !important;
    border:0 !important;
    border-radius:0 !important;
    background:#fff;
  }
}


/* v0251 — Event Card v1.1 action row alignment
   Cards keep equal height in grids, while the CTA row is pinned to the bottom.
   This protects Home, Aanbod and related-event contexts from uneven title/excerpt lengths.
*/
.event-card-final[data-component="event-card"]{
  display:flex;
  flex-direction:column;
}

.event-card-final[data-component="event-card"] .event-card-final-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
}

.event-card-final[data-component="event-card"] .event-card-dual-actions{
  margin-top:auto;
}


/* Event today status badge — v0271
   Subtle visual highlight for events that happen today.
   State is content/data driven: data-event-status="today" / .event-card-final--today.
*/
.event-card-final--today{
  border-color:rgba(181,98,62,.28);
  box-shadow:0 30px 70px -54px rgba(181,98,62,.48);
}

.event-card-final--today::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border:1px solid rgba(181,98,62,.26);
  border-radius:inherit;
  pointer-events:none;
  animation:event-today-card-pulse 3.2s ease-in-out infinite;
}

.event-card-status-badge,
.event-detail-status-badge{
  position:absolute;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,252,246,.94);
  color:var(--terracotta);
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
  box-shadow:0 14px 28px -22px rgba(44,38,32,.52);
}

.event-card-status-badge{
  left:16px;
  bottom:16px;
}

.event-status-dot{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--terracotta);
  box-shadow:0 0 0 0 rgba(181,98,62,.36);
  animation:event-status-dot-pulse 1.8s ease-out infinite;
}

@keyframes event-today-card-pulse{
  0%, 100%{ opacity:.18; }
  50%{ opacity:.56; }
}

@keyframes event-status-dot-pulse{
  0%{ box-shadow:0 0 0 0 rgba(181,98,62,.36); }
  70%{ box-shadow:0 0 0 8px rgba(181,98,62,0); }
  100%{ box-shadow:0 0 0 0 rgba(181,98,62,0); }
}

@media (prefers-reduced-motion: reduce){
  .event-card-final--today::before,
  .event-status-dot{
    animation:none;
  }
}


/* v0272 — Event status variants and disabled ticket state
   Status is data-driven via data-event-start-datetime / data-event-end-datetime.
   Ticket actions close once event_start has passed.
*/
.event-card-final--in-progress{
  border-color:rgba(143,151,121,.34);
  box-shadow:0 30px 70px -54px rgba(143,151,121,.44);
}

.event-card-final--past{
  opacity:.76;
}

.event-card-status-badge--in-progress,
.event-detail-status-badge--in-progress{
  color:var(--olive);
}

.event-card-status-badge--past,
.event-detail-status-badge--past{
  color:rgba(44,38,32,.64);
}

.event-card-status-badge--in-progress .event-status-dot,
.event-detail-status-badge--in-progress .event-status-dot{
  background:var(--olive);
  box-shadow:0 0 0 0 rgba(143,151,121,.34);
}

.event-card-status-badge--past .event-status-dot,
.event-detail-status-badge--past .event-status-dot{
  background:rgba(44,38,32,.42);
  animation:none;
  box-shadow:none;
}

.event-card-ticket.event-ticket-is-disabled,
.event-card-ticket[disabled],
.event-card-ticket[aria-disabled="true"]{
  background:rgba(44,38,32,.12);
  color:rgba(44,38,32,.62);
  cursor:not-allowed;
}

.event-card-ticket.event-ticket-is-disabled .event-action-icon{
  opacity:.72;
}

/* v0273 — Event countdown and cleaner started/past status UI
   - Countdown badge starts 24h before event_start.
   - In-progress label is "Nu bezig".
   - Past image badges are removed by JS, not styled as a visible overlay.
*/
.event-card-final--starting-soon{
  border-color:rgba(181,98,62,.28);
  box-shadow:0 30px 70px -54px rgba(181,98,62,.48);
}

.event-card-final--starting-soon::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border:1px solid rgba(181,98,62,.26);
  border-radius:inherit;
  pointer-events:none;
  animation:event-today-card-pulse 3.2s ease-in-out infinite;
}

.event-card-status-badge--starting-soon,
.event-detail-status-badge--starting-soon{
  max-width:calc(100% - 32px);
  color:var(--terracotta);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.18;
  text-transform:none;
  white-space:normal;
}

.event-card-status-badge--starting-soon .event-status-dot,
.event-detail-status-badge--starting-soon .event-status-dot{
  background:var(--terracotta);
}

@media (prefers-reduced-motion: reduce){
  .event-card-final--starting-soon::before{
    animation:none;
  }
}

/* v0274 — Past event cards are removed from standard website lists.
   Hidden cards must not reappear through context/page CSS.
*/
.event-card-final[hidden],
.event-card-final[data-event-hidden-reason="past-event"]{
  display:none !important;
}

.event-card-ticket[hidden]{
  display:none !important;
}