/* Grid layout (featured big on the left, small cards on right) */
.cp-events-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-auto-rows: 300px;
  gap: 18px;
  align-items: stretch;
}

.cp-event-card{
  cursor:pointer;
  border-radius:14px;
  overflow:hidden;
  background:#f7f7f9;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
  outline: none;
}
.cp-event-card:focus,
.cp-event-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.cp-event-card.is-featured{
  grid-row: span 2;
  grid-column: 1 / 2;
}
.cp-event-card__inner,
.cp-event-img{ width:100%; height:100%; object-fit:cover; display:block; border-radius: 14px }

.cp-event-img:hover, .cp-event-img:active {
    border: 4px solid #2da7df;
}

/* Modal */
.cp-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.cp-modal.is-open{ display:block; }
.cp-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.cp-modal__dialog{
  position: relative;
    margin: 40px auto;
    max-width: 450px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    overflow: hidden;
    /* height: 95vh; */
}
.cp-modal__title{ margin:0; padding:14px 20px; font-size:18px; border-bottom:1px solid #eee; }
.cp-modal__body{ padding:0; }
.cp-modal__body img{ display:block; width:100%; height:auto; }
.cp-modal__footer{ display:flex; justify-content:flex-end; gap:10px; padding:14px 16px; border-top:1px solid #eee; }
.cp-btn{
  display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none;
  background:#002F87; color:#fff; font-weight:600;
  text-align: center;
}
.cp-event-modal__close{
  position:absolute; top:6px; right:10px; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer;
}
.wellness-event-top-text {
    color: #002F87;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
}
.wellness-event-top-text::after {
        content: "";
        height: 3px;
        width: 71%;
    background: #002F87;
    display: inline-block;
    margin: 0 0px 0px 50px;
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 1024px){
  .cp-events-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .cp-event-card.is-featured{ grid-row: span 2; grid-column:auto; }
  .cp-modal__dialog{
    margin: 40px 20px;
  }
  .cp-event-modal__close {
    font-size: 38px;
  }
}
@media (max-width: 640px){
  .cp-events-grid{ grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .cp-event-card.is-featured{ grid-row: auto; }
  .wellness-event-top-text {
    text-align: center;
  }
  .wellness-event-top-text::after {
    margin: 0 auto;
  }
  .cp-modal__dialog{
    margin: 40px 20px;
  }
  .cp-event-modal__close {
    font-size: 38px;
  }
}