@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.tpe-section{background:#FFFFFF;padding:100px 0;font-family:'Montserrat',sans-serif;}
.tpe-container{max-width:1320px;margin:0 auto;padding:0 20px;}

.tpe-header{text-align:center;}
.tpe-badge{display:inline-flex;align-items:center;justify-content:center;width:115px;height:29px;padding:6px 16px;border-radius:25px;background:#000;color:#fff;font-family:'Montserrat',sans-serif;font-weight:500;font-size:14px;line-height:100%;box-sizing:border-box;}
.tpe-title{font-family:'Montserrat',sans-serif;font-weight:600;font-size:40px;line-height:140%;color:#272727;max-width:984px;margin:20px auto;text-align:center;}
.tpe-title__accent{color:#F00000;}
.tpe-desc{font-family:'Montserrat',sans-serif;font-weight:500;font-size:14px;line-height:180%;color:#747474;max-width:980px;margin:0 auto;text-align:center;}

.tpe-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px;}
.tpe-filters--categories{margin-top:24px;}
.tpe-filter{font-family:'Montserrat',sans-serif;font-weight:500;font-size:14px;line-height:100%;padding:10px 18px;border-radius:25px;background:#FFFFFF;border:1px solid #D9D9D9;color:#272727;cursor:pointer;transition:.25s ease;box-sizing:border-box;}
.tpe-filter:hover{border-color:#272727;}
.tpe-filter.is-active{background:#000;color:#fff;border-color:#000;}

.tpe-slider-wrap{margin-top:48px;position:relative;width:100%;}

.tpe-slider-controls{
  position:relative;
  display:flex;
  align-items:center;
  padding:0 52px;
}

.tpe-slider-controls .swiper-button-prev,
.tpe-slider-controls .swiper-button-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:40px;
  height:40px;
  margin:0;
  border-radius:50%;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s ease;
}

.tpe-slider-controls .swiper-button-prev:after,
.tpe-slider-controls .swiper-button-next:after{display:none;}

.tpe-slider-controls .swiper-button-prev{
  left:0;
  background:#EBEBEB;
  color:#272727;
}

.tpe-slider-controls .swiper-button-next{
  right:0;
  background:#F00000;
  color:#fff;
}

.tpe-slider-controls .swiper-button-prev:hover,
.tpe-slider-controls .swiper-button-next:hover{opacity:.9;}

.tpe-slider-controls .swiper-button-disabled{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none;
}

.tpe-slider-wrap .swiper-pagination{
  position:static;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  width:100%;
  margin-top:24px;
}

.tpe-slider-wrap .swiper-pagination-bullet{
  width:8px;
  height:8px;
  margin:0 !important;
  padding:0;
  border:0;
  border-radius:50%;
  background:#D9D9D9;
  opacity:1;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

.tpe-slider-wrap .swiper-pagination-bullet-active{
  background:#F00000;
}

/* Swiper clips partial side slides; do not use overflow:visible on desktop. */
.tpe-swiper{
  width:100%;
  padding:8px 4px 16px;
  overflow:hidden;
}

.tpe-card{width:100%;max-width:312px;height:474px;border:1px solid #E8E8E8;border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column;margin:0 auto;box-sizing:border-box;transition:none !important;transform:none !important;box-shadow:none !important;}
.tpe-card:hover,.tpe-card:focus,.tpe-card:focus-within{transform:none !important;box-shadow:none !important;}

.tpe-card__image-link{display:block !important;width:100% !important;height:208px !important;min-height:208px !important;max-height:208px !important;overflow:hidden !important;position:relative;}
.tpe-card__badge{position:absolute;top:10px;left:10px;right:auto;z-index:5;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#F00000;color:#fff;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;padding:5px 10px;text-transform:uppercase;line-height:1;pointer-events:none;}
.tpe-card__image-link:hover,.tpe-card__image-link:focus{transform:none !important;}
.tpe-card__image{position:relative;z-index:1;width:100% !important;height:208px !important;min-height:208px !important;max-height:208px !important;object-fit:cover !important;object-position:center !important;display:block !important;border-radius:0 !important;border-top-left-radius:16px !important;border-top-right-radius:16px !important;margin:0 !important;padding:0 !important;transition:none !important;transform:none !important;filter:none !important;opacity:1 !important;}
.tpe-card:hover .tpe-card__image,
.tpe-card__image-link:hover .tpe-card__image,
.tpe-card__image:hover{transform:none !important;scale:1 !important;filter:none !important;opacity:1 !important;}

/* Video preview cards (shared with Premium Blog Module) */
.tpe-card--video .tpe-card__media{
  display:block !important;
  width:100% !important;
  height:208px !important;
  min-height:208px !important;
  max-height:208px !important;
  overflow:hidden !important;
  position:relative;
}
.tpe-card--video .pbm-video-thumb{
  width:100%;
  height:100%;
  border-radius:0;
  background:#111;
}
.tpe-card--video .pbm-video-thumb__trigger{
  width:100%;
  height:208px !important;
  min-height:208px !important;
  max-height:208px !important;
  aspect-ratio:auto;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}
.tpe-card--video .pbm-video-thumb__image{
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}
.tpe-card--video .pbm-video-thumb__play svg{
  width:56px;
  height:auto;
}
.tpe-card--video .pbm-video-thumb__play-bg{
  color:#fff;
}
.tpe-card--video .pbm-video-thumb__play svg path:last-child{
  fill:#111;
}
.tpe-card--video .pbm-video-thumb__trigger:hover .pbm-video-thumb__image,
.tpe-card--video .pbm-video-thumb__trigger:focus-visible .pbm-video-thumb__image{
  transform:scale(1.04) !important;
}
.tpe-card--video .pbm-video-thumb__trigger:hover .pbm-video-thumb__overlay,
.tpe-card--video .pbm-video-thumb__trigger:focus-visible .pbm-video-thumb__overlay{
  background:rgba(0,0,0,.42);
}
.tpe-card--video .pbm-video-thumb__trigger:hover .pbm-video-thumb__play svg,
.tpe-card--video .pbm-video-thumb__trigger:focus-visible .pbm-video-thumb__play svg{
  transform:scale(1.08);
}

/* Multi-image card gallery (shared pbm-card-gallery component) */
.tpe-card .pbm-card-gallery,
.tpe-card .pbm-card-gallery__stage,
.tpe-card .pbm-card-gallery__link,
.tpe-card .pbm-card-gallery__track{
  height:208px !important;
  min-height:208px !important;
  max-height:208px !important;
}
.tpe-card .pbm-card-gallery{
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  overflow:hidden;
}
.tpe-card .pbm-card-gallery__slide img{
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

.tpe-card__body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1;gap:10px;}
.tpe-card__category{display:inline-flex !important;align-items:center;width:fit-content;font-weight:600;font-size:12px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#F00000;visibility:visible !important;opacity:1 !important;}
.tpe-card__date{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px;line-height:140%;color:#272727;}
.tpe-card__date svg{color:#272727;}
.tpe-card__title{font-weight:600;font-size:18px;line-height:140%;color:#F00000;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tpe-card__excerpt{font-weight:500;font-size:14px;line-height:160%;color:#747474;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.tpe-card__link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:#000;text-decoration:none;}
.tpe-card__link:hover{color:#F00000;}

.tpe-empty{text-align:center;padding:60px 20px;color:#747474;font-weight:500;width:100%;}

@media (max-width:1199px){
  .tpe-title{font-size:32px;}
}

/* Mobile: 80% card width + 20% peek, horizontal swipe carousel */
@media (max-width:767px){
  .tpe-section{padding:60px 0;}
  .tpe-container{padding-left:20px;padding-right:0;}
  .tpe-title{font-size:28px;}
  .tpe-desc{max-width:100%;padding-right:20px;}

  /* Category filters — horizontal scroll with next pill peeking */
  .tpe-filters--categories{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    gap:10px;
    margin-top:24px;
    margin-right:0;
    padding:0 0 8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .tpe-filters--categories::-webkit-scrollbar{display:none;}
  .tpe-filter{
    flex:0 0 calc(30vw - 36px);
    max-width:calc(80vw - 36px);
    scroll-snap-align:start;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Card carousel */
  .tpe-slider-wrap{margin-top:32px;padding-right:0;}
  .tpe-swiper{
    overflow:visible;
    padding:8px 0 16px;
  }
  .tpe-swiper .swiper-slide{
    width:calc(80vw - 36px);
    max-width:none;
    height:auto;
    scroll-snap-align:start;
  }
  .tpe-card{
    width:100%;
    max-width:none;
    height:474px;
    margin:0;
  }

  .tpe-slider-controls{
    padding:0 44px 0 36px;
  }

  .tpe-slider-controls .swiper-button-prev{
    left:-4px;
  }

  .tpe-slider-controls .swiper-button-next{
    right:0;
  }

  .tpe-slider-wrap .swiper-pagination{
    margin-top:20px;
    padding-right:20px;
  }
}

@media (min-width:768px) and (max-width:1023px){
  .tpe-swiper .swiper-slide{
    height:auto;
  }

  .tpe-card{
    width:100%;
    max-width:none;
    height:474px;
    min-height:474px;
    max-height:474px;
    margin:0;
  }
}

/*
 * Desktop (>=1024px): 3 full cards + ~30% side peeks.
 * Swiper slidesPerView 3.6; peek offset applied in tradex-past-events.js.
 */
@media (min-width:1024px){
  .tpe-slider-wrap{
    width:100%;
    overflow:hidden;
  }

  .tpe-swiper{
    width:100%;
    overflow:hidden;
  }

  .tpe-swiper .swiper-wrapper{
    align-items:stretch;
  }

  .tpe-swiper .swiper-slide{
    height:auto;
    box-sizing:border-box;
  }

  .tpe-card{
    width:100%;
    max-width:none;
    height:474px;
    min-height:474px;
    max-height:474px;
    margin:0;
  }
}