/*
 * Front styling for the events module.
 * Every class is prefixed cdt- so nothing here can clash with the theme.
 */

.cdt-events__title{margin:2.5rem 0;font-weight:500;text-align:center;}

/* The cards carry their own background, so the gutter cannot come from column
   padding - it would be painted grey. The grid owns the widths instead and the
   spacing comes from a real gap. Change --cdt-gap to retune it, the column maths
   below follows automatically. */
.cdt-events{--cdt-gap:20px;--cdt-scroll-offset:100px;}
.cdt-events__grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--cdt-gap);width:100%;}

/* Only the home teaser centres a short row - 2 cards out of 3 look wrong shoved
   against the left under a centred heading. The CMS list packs left so a lone
   event lines up with the text above it. */
.cdt-events--home .cdt-events__grid{justify-content:center;}

/* scroll-margin-top keeps the card clear of the sticky header when it is jumped
   to from a home page link - raise --cdt-scroll-offset if the header is taller. */
.cdt-event{position:relative;background-color:#f6f6f6;padding:0;flex:0 0 auto;width:100%;scroll-margin-top:var(--cdt-scroll-offset);}

/* Marks the event that was jumped to, so it is obvious which one it is. */
.cdt-event:target{outline:2px solid #009d40;outline-offset:4px;}

/* One per row on phones, then: home goes 2-up on tablet and 3-up on desktop,
   the CMS list stays 2-up from desktop. Widths subtract each row's share of the
   gaps, so n cards + (n-1) gaps land on exactly 100%. */
@media (min-width:768px){
  .cdt-events--home .cdt-event{width:calc(50% - var(--cdt-gap) / 2);}
}
@media (min-width:992px){
  .cdt-events--home .cdt-event{width:calc(33.333% - var(--cdt-gap) * 2 / 3);}
  .cdt-events--list .cdt-event{width:calc(50% - var(--cdt-gap) / 2);}
}
.cdt-event__image{display:block;position:relative;width:100%;height:auto;}

.cdt-event__date{
  display:flex;position:relative;width:70px;height:70px;color:#fff;
  background-color:#009d40;padding:10px;text-align:center;margin-top:-40px;
  box-shadow:2px 2px 6px rgb(0 0 0 / 40%);flex-direction:column;
  justify-content:center;align-items:center;
}
.cdt-event__date h3{margin:0;}

.cdt-event__body{padding:20px 35px;margin-top:-50px;border:1px solid #f1f1f1;text-align:left;}
.cdt-event__body h2{padding-left:55px;margin-top:10px;margin-bottom:25px;font-size:18px;min-height:40px;}

.cdt-event__text{overflow: hidden;}

/* Home cards keep room at the bottom for the link parked over them. */
.cdt-events--home .cdt-event__body{padding-bottom:50px;}
.cdt-event__link{font-weight:500;color:#7a7a7a !important;position:absolute;right:35px;bottom:10px;}

.cdt-ribbon{width:150px;height:150px;overflow:hidden;position:absolute;}
.cdt-ribbon::before,.cdt-ribbon::after{position:absolute;z-index:0;content:'';display:block;border:5px solid #067433;}
.cdt-ribbon span{
  position:absolute;display:block;width:225px;padding:15px 0;background-color:#009d40;
  box-shadow:0 5px 10px rgba(0,0,0,.1);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2);
  text-align:center;font-weight:700;
}
.cdt-ribbon--top-right{top:-10px;right:-10px;}
.cdt-ribbon--top-right::before,.cdt-ribbon--top-right::after{border-top-color:transparent;border-right-color:transparent;}
.cdt-ribbon--top-right::before{top:0;left:0;}
.cdt-ribbon--top-right::after{bottom:0;right:0;}
.cdt-ribbon--top-right span{left:-25px;top:30px;transform:rotate(45deg);}

/* The two home page counts. Cards past the limit are rendered but dropped here;
   the breakpoint follows Bootstrap's xs / sm boundary. */
@media (max-width:767.98px){
  .cdt-event--hide-mobile{display:none;}
}
@media (min-width:768px){
  .cdt-event--hide-desktop{display:none;}
}

@media only screen and (min-width:1200px){
  .cdt-event__image{max-height:175px;}
}