/* Desktop event cards (Beranda and the certificate list, 11 Nov 2026): no outline, white with a soft shadow, the poster sits 12px inside the card on the left, right and top. Phones keep the outlined card with the full-width poster. */
@media(min-width:1024px){
  .card-bars .event-card{border:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(20,35,58,.08),0 6px 18px rgba(20,35,58,.10);transition:box-shadow .18s,transform .18s}
  .card-bars .event-card:hover,.card-bars .event-card:active,.card-bars .event-card:focus-within{border-color:transparent;box-shadow:0 10px 26px rgba(20,35,58,.16);transform:translateY(-2px)}
  .card-bars .event-card.has-poster .card-media{padding:12px 12px 0}
  .card-bars .event-card.has-poster .card-media>a{display:block;border-radius:8px;overflow:hidden}
  .card-bars .event-card.has-poster .card-media img.card-poster{display:block;width:100%}
  .card-bars .event-card.has-poster .card-tags{padding-left:12px;padding-right:12px}
  .card-bars .event-card .card-body{padding-left:12px;padding-right:12px}
  .card-bars .event-card .card-cta{display:grid;grid-template-columns:16px minmax(0,1fr) 16px;gap:0;margin-left:-12px;margin-right:-12px;text-align:center}
  .card-bars .event-card .card-cta>span{grid-column:2;text-align:center}
  .card-bars .event-card .card-cta>.icon{grid-column:3;justify-self:end}
}
@media(min-width:1024px) and (prefers-reduced-motion:reduce){
  .card-bars .event-card,.card-bars .event-card:hover,.card-bars .event-card:active,.card-bars .event-card:focus-within{transition:none;transform:none}
}