/* Calendar events — demo-like card, no white gutters; image stays light */

.section.calendar .calendar-item {
  background: transparent !important;
}

/* Kill Bootstrap column gutters; keep one horizontal row on desktop */
.section.calendar .calendar-item > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

.section.calendar .calendar-item > .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Image column: stretch to text block height */
.section.calendar .calendar-item > .row > .col-lg-4.col-xl-3,
.section.calendar .calendar-item > .row > .col-lg-4 {
  align-self: stretch !important;
  background: transparent !important;
  flex: 0 0 270px !important;
  width: 270px !important;
  max-width: 270px !important;
  min-width: 0;
  display: flex;
  position: relative;
}

.section.calendar .calendar-item__img {
  background: transparent !important;
  margin: 0;
  padding: 0 !important;
  padding-bottom: 0 !important;
  display: block;
  line-height: 0;
  width: 100%;
  height: 100% !important;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  align-self: stretch;
}

.section.calendar .calendar-item__img img,
.section.calendar .calendar-item__img .img--bg {
  display: block;
  position: absolute !important;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover; /* fill height/width, keep proportions (crop if needed) */
  vertical-align: top;
}

/* Text + meta: one continuous surface, can shrink so row stays horizontal */
.section.calendar .calendar-item > .row > .col-lg-6.col-xl-7,
.section.calendar .calendar-item > .row > .col-lg-6,
.section.calendar .calendar-item > .row > .col-lg-2.col-xl-2,
.section.calendar .calendar-item > .row > .col-lg-2 {
  align-self: stretch !important;
  background: #f3f4f5;
  transition: background .3s ease;
  display: flex;
  min-width: 0;
}

.section.calendar .calendar-item > .row > .col-lg-6.col-xl-7,
.section.calendar .calendar-item > .row > .col-lg-6 {
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
}

.section.calendar .calendar-item > .row > .col-lg-2.col-xl-2,
.section.calendar .calendar-item > .row > .col-lg-2 {
  flex: 0 0 150px !important;
  width: 150px !important;
  max-width: 150px !important;
}

.section.calendar .calendar-item__details,
.section.calendar .calendar-item__meta {
  background: transparent;
  width: 100%;
  min-width: 0;
  transition: color .3s ease;
}

.section.calendar .calendar-item__details {
  padding: 22px 28px;
}

.section.calendar .calendar-item__title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.section.calendar .calendar-item__meta {
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

/* Description default */
.section.calendar .calendar-item__description,
.section.calendar .calendar-item_description {
  color: #6b7280;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  transition: color .3s ease;
}

/* Hover: dark only on text+meta (image column untouched) */
.section.calendar .calendar-item:hover > .row > .col-lg-6.col-xl-7,
.section.calendar .calendar-item:hover > .row > .col-lg-6,
.section.calendar .calendar-item:hover > .row > .col-lg-2.col-xl-2,
.section.calendar .calendar-item:hover > .row > .col-lg-2 {
  background: #1d252b;
}

.section.calendar .calendar-item:hover .calendar-item__title a {
  color: #fff;
}

.section.calendar .calendar-item:hover .calendar-item__category {
  color: #aeb4bb;
}

.section.calendar .calendar-item:hover .calendar-item__description,
.section.calendar .calendar-item:hover .calendar-item_description {
  color: #c5ccd3;
}

.section.calendar .calendar-item:hover .calendar-item__time {
  color: #fff;
}

.section.calendar .calendar-item:hover .calendar-item__link {
  color: #fdd340;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Theme hides the link until hover — keep it reserved in layout */
.section.calendar .calendar-item__link {
  transition: color .3s ease, opacity .3s ease, visibility .3s ease;
}

/* Keep image column light even if theme paints the whole card */
.section.calendar .calendar-item:hover > .row > .col-lg-4.col-xl-3,
.section.calendar .calendar-item:hover > .row > .col-lg-4,
.section.calendar .calendar-item:hover .calendar-item__img {
  background: transparent !important;
}

/* Category tabs: single row + arrows */
.section.calendar .calendar-filter-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.section.calendar .calendar-filter__prev,
.section.calendar .calendar-filter__next {
  flex: 0 0 auto;
  list-style: none;
  cursor: pointer;
  color: #333;
  font-size: 16px;
  line-height: 1;
  padding: 6px 4px;
  user-select: none;
  transition: color .3s ease;
}

.section.calendar .calendar-filter__prev:hover,
.section.calendar .calendar-filter__next:hover {
  color: #a3a3a3;
}

.section.calendar .calendar-filter__prev.is-disabled,
.section.calendar .calendar-filter__next.is-disabled {
  opacity: .35;
  pointer-events: none;
}

.section.calendar .calendar-filter__track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.section.calendar .filter-panel.calendar-filter {
  display: flex;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
}

.section.calendar .filter-panel.calendar-filter::-webkit-scrollbar {
  display: none;
}

.section.calendar .filter-panel.calendar-filter .filter-panel__item {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-right: 28px !important;
  padding-top: 8px;
  padding-bottom: 8px;
}

.section.calendar .filter-panel.calendar-filter .filter-panel__item:last-child {
  margin-right: 0 !important;
}

@media (max-width: 1199.98px) {
  .section.calendar .calendar-item > .row > .col-lg-4.col-xl-3,
  .section.calendar .calendar-item > .row > .col-lg-4 {
    flex-basis: 220px !important;
    width: 220px !important;
    max-width: 220px !important;
  }
  .section.calendar .calendar-item > .row > .col-lg-2.col-xl-2,
  .section.calendar .calendar-item > .row > .col-lg-2 {
    flex-basis: 130px !important;
    width: 130px !important;
    max-width: 130px !important;
  }
}

@media (max-width: 991.98px) {
  .section.calendar .calendar-filter-nav {
    margin-top: 18px;
  }
  .section.calendar .filter-panel.calendar-filter .filter-panel__item {
    margin-right: 20px !important;
  }
  .section.calendar .calendar-item > .row {
    flex-wrap: wrap !important;
  }
  .section.calendar .calendar-item > .row > .col-lg-4.col-xl-3,
  .section.calendar .calendar-item > .row > .col-lg-4 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .section.calendar .calendar-item > .row > .col-lg-6.col-xl-7,
  .section.calendar .calendar-item > .row > .col-lg-6 {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .section.calendar .calendar-item__details {
    padding: 16px 18px;
  }
}