/* Wrapper */

.ces-events-list { width: 100%; }



/* Tabs */

.ces-events-tabs {

  display: flex;

  gap: 17%;

  flex-wrap: wrap;

  margin-bottom: 20px;

  border-bottom: 1px solid #707070;

}

.ces-events-tabs .ces-tab {

    appearance: none;

    background: transparent;

    color: #000000;

    border: none;

    padding: 10px 0px;

    font-family: "Manrope", Sans-serif;

    font-size: 18px;

    cursor: pointer;

}

.ces-events-tabs .ces-tab[aria-selected="true"],

.ces-events-tabs .ces-tab:hover {

  color: #9E0303;

  font-weight: 900;

}



/* Groups */

.ces-month-group,

.ces-year-group { display: none; }

.ces-month-group.is-active,

.ces-year-group.is-active { display: block; }



/* Event row: 3 columns */

.ces-event-row {

  display: grid;

  grid-template-columns: 25% 50% 25%;

  align-items: stretch;

  min-height: 120px;

  margin-bottom: 10px;

}



.ces-col { padding: 16px 18px; display: grid; align-content: center; gap: 8px; }



.ces-col-1 {

  background: #9E0303;

  mix-blend-mode: multiply;

  color: #fff;

}

.ces-col-2 {

  background: rgba(158, 3, 3, 0.6);

  color: #fff;

}

.ces-col-3 {

  background: rgba(158, 3, 3, 0.3);

  mix-blend-mode: multiply;

  color: #fff;

}



/* Col 1 text */

.ces-date-line { font-family: "Manrope", Sans-serif; font-weight: 500; font-size: 18px; }

.ces-time-line { font-family: "Manrope", Sans-serif; font-weight: 500; font-size: 18px; }

.ces-venue     { font-family: "Manrope", Sans-serif; font-weight: 500; font-size: 18px; }



/* Col 2 title */

.ces-col-2 .ces-title {

  font-family: "Manrope", Sans-serif;

  font-weight: 400;

  font-size: 24px;

  line-height: 1.25;

}



/* Col 3 CTA */

.ces-cta-link {

  align-self: center;

  justify-self: center;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #000000;

  text-decoration: none;

  font-family: "Manrope", Sans-serif;

  font-weight: 700;

  font-size: 18px;

}

.ces-cta-link svg { width: 29px; height: 29px; fill: #000000; color: #000000; transition: transform .3s ease; }





.ces-cta-link:hover { color: #000000;}

.ces-cta-link:hover svg { transform: translateX(10px); }





.ces-events-list--archive .ces-event-row.is-past .ces-col-1{

background: rgba(118, 109, 91, 1);

} 

.ces-events-list--archive .ces-event-row.is-past .ces-col-2{

background: rgba(118, 109, 91, 0.6);

} 

.ces-events-list--archive .ces-event-row.is-past .ces-col-3{

background: rgba(118, 109, 91, 0.3);

} 



/* Scope by list */

.ces-events-list--upcoming .ces-event-row.is-upcoming { /* styles for future items */ }

.ces-events-list--archive  .ces-event-row.is-past     { /* styles for past items   */ }



/* Or target the CTA only */

.ces-cta-link.is-upcoming { /* … */ }

.ces-cta-link.is-past     { /* … */ }



/* ===== Smaller desktops (≤ 1400px) ===== */

@media (max-width: 1400px) {

  .ces-col { padding: 14px 16px; }

  .ces-col-2 .ces-title { font-size: 26px; }

  .ces-date-line { font-size: 15px; }

}



/* ===== Laptops (≤ 1200px) ===== */

@media (max-width: 1200px) {

  .ces-event-row { min-height: 110px; }

  .ces-col { padding: 12px 14px; }

  .ces-col-2 .ces-title { font-size: 24px; }

  .ces-date-line { font-size: 14px; }

  .ces-time-line, .ces-venue { font-size: 13px; }

}



/* ===== Tablets landscape (≤ 992px) ===== */

@media (max-width: 992px) {

  .ces-event-row { grid-template-columns: 28% 44% 28%; }

  .ces-col-2 .ces-title { font-size: 22px; }

}



/* ===== Tablets portrait (≤ 768px) ===== */

@media (max-width: 768px) {

  .ces-event-row {

    row-gap: 0px;

    display: grid;

    grid-template-columns: 1fr;

    grid-template-areas:

      "col2"

      "col1"

      "col3";



  }

  .ces-col { padding: 12px; }

  .ces-cta-link { justify-self: start; }

  .ces-col-1 { grid-area: col1; }

  .ces-col-2 { grid-area: col2; }

  .ces-col-3 { grid-area: col3; justify-items: start;  }

}



/* ===== Phones (≤ 576px) ===== */

@media (max-width: 576px) {

  .ces-events-tabs { gap: 8px; }

  .ces-events-tabs .ces-tab { padding: 6px 10px; font-size: 13px; }

  .ces-col-2 .ces-title { font-size: 20px; }

  .ces-date-line { font-size: 13px; }

  .ces-time-line, .ces-venue { font-size: 12px; }

  .ces-cta-link { font-size: 15px; }

}

.ces-tabs-nav{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
}

.ces-tabs-track{
  flex:1;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-bottom: 1px solid #707070;
}

.ces-tabs-track::-webkit-scrollbar{display:none}

.ces-tabs-arrow{
  all:unset;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:6px 10px;
  line-height:0;
  flex:0 0 auto;
  background-color: transparent !important;
  border: none !important;
}

.ces-tabs-arrow svg{
  display:block;
  width:10.291px;
  height:18px;
  fill:#000;
  transition:transform .3s ease, opacity .3s ease;
}

.ces-tabs-arrow--prev svg{
  transform:rotate(180deg);
}

.ces-tabs-arrow:hover svg{
  transform:translateX(5px);
}

.ces-tabs-arrow--prev:hover svg{
  transform:rotate(180deg) translateX(5px);
}

.ces-tabs-arrow:disabled{
  opacity:.35;
  cursor:default;
}

.ces-tabs-arrow:disabled svg{
  transform:none;
}
.ces-tabs-arrow--prev:disabled svg{
  transform:rotate(180deg);
}



/* Arrow mode overrides: keep your gap (17%) but prevent wrapping */
.ces-tabs-track .ces-events-tabs{
  width:100%;
  min-width:100%;
  flex-wrap:nowrap !important;
  margin-bottom:0;
}

.ces-has-tab-arrows .ces-events-tabs{
  border-bottom:none !important;
}