/* =========================
   1. Event Gallery — Brand-styled, centered, responsive
   ========================= */

/* Container layout for title + filters + grid */
#event-gallery {
  padding-top: 40px;
  padding-bottom: 60px;
  background: transparent;
}

/* Title + filter wrapper */
#event-gallery .tm-sc-section-title {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}

/* Left title area (large, stacked) */
#event-gallery .title-wrapper {
  flex: 0 0 220px;
  max-width: 220px;
}

#event-gallery .title-wrapper .title {
  font-size: 3.4rem;
  line-height: 1.02;
  margin: 0;
  color: #181818;
  font-weight: 700;
  letter-spacing: -1px;
}

/* Right area holds filters and is centered horizontally */
#event-gallery .isotope-layout-filter {
  flex: 1 1 0%;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Filter pill styles (brand colors) */
#event-gallery .isotope-layout-filter a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 28px;
  background: #fff;
  border: 2px solid #FFB64C; /* gold outline */
  color: #4B2E12; /* dark brown text */
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease, color .28s ease;
}

/* Hover */
#event-gallery .isotope-layout-filter a:hover,
#event-gallery .isotope-layout-filter a:focus {
  background: #FFB64C;
  color: #4B2E12;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  outline: none;
}

/* Active (selected) pill */
#event-gallery .isotope-layout-filter a.active {
  background: #F28C28; /* deep orange */
  border-color: #F28C28;
  color: #fff;
  box-shadow: 0 12px 36px rgba(242,140,40,0.24);
  transform: translateY(-4px);
}

/* Give small pills a subtle size reduction */
#event-gallery .isotope-layout-filter a.small {
  padding: 8px 14px;
  font-size: 12px;
}

/* Space under filters */
#event-gallery .isotope-layout-filter {
  margin-bottom: 36px;
}

/* Center the isotope grid and limit width for neat layout */
#isotope-gallery {
  display: block;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* The inner grid uses Bootstrap row/cols already. We tune spacing */
#isotope-gallery .isotope-layout-inner {
  margin-left: -18px;
  margin-right: -18px;
}

/* Each item column padding */
#isotope-gallery .isotope-item {
  padding-left: 18px;
  padding-right: 18px;
  margin-bottom: 32px;
  box-sizing: border-box;
}

/* Gallery card */
.tm-gallery.tm-portfolio {
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}

/* Image container + sizing */
.tm-gallery .thumb {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  background: #eee;
}

.tm-gallery .thumb img {
  width: 100%;
  height: 220px; /* fixed height for a neat grid */
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.9,.2,1);
}

/* Hover zoom */
.tm-gallery:hover .thumb img,
.tm-gallery:focus-within .thumb img {
  transform: scale(1.06);
}

/* Overlay (brand tinted) */
.tm-gallery .overlay-shade {
  background-color: rgba(242,140,40,0.08);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: background-color .28s ease;
}

/* Icons holder */
.tm-gallery .icons-holder {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  z-index: 6;
}

/* Magnifying icon style */
.tm-gallery .icons-holder .hover-link {
  background: rgba(255,255,255,0.92);
  color: #4B2E12;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  transition: transform .25s ease;
  text-decoration: none;
}

/* On hover reveal overlay + icon */
.tm-gallery:hover .overlay-shade {
  background-color: rgba(242,140,40,0.24);
}
.tm-gallery:hover .icons-holder,
.tm-gallery:focus-within .icons-holder {
  opacity: 1;
  transform: translateY(0);
}
.tm-gallery:hover .hover-link { transform: scale(1.03); }

/* Hide captions entirely */
.tm-gallery .tm-gallery-content-wrapper {
  display: none !important;
}

/* Responsive adjustments */
@media (min-width: 1200px) {
  #isotope-gallery .isotope-item.col-lg-3 { width: 25%; float: left; }
}
@media (min-width: 992px) and (max-width:1199px) {
  #isotope-gallery .isotope-item.col-lg-3,
  #isotope-gallery .isotope-item.col-md-4 { width: 33.3333%; float: left; }
}
@media (min-width: 768px) and (max-width:991px) {
  #isotope-gallery .isotope-item.col-md-4,
  #isotope-gallery .isotope-item.col-sm-6 { width: 50%; float: left; }
}
@media (max-width:767px) {
  #event-gallery .tm-sc-section-title { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  #event-gallery .title-wrapper { flex: 0 0 auto; max-width: none; }
  #event-gallery .title-wrapper .title { font-size: 2.6rem; }
  #isotope-gallery .isotope-item { width: 100% !important; float: none; }
  .tm-gallery .thumb img { height: 160px; }
  #event-gallery .isotope-layout-filter { justify-content: center; }
}

/* Center the Event Gallery title and place filters below it */
#event-gallery .tm-sc-section-title {
  display: block !important;
  text-align: center;
}
#event-gallery .title-wrapper {
  max-width: 100% !important;
  margin: 0 auto 12px auto !important;
}
#event-gallery .title-wrapper .title {
  text-align: center !important;
  font-size: 3rem;
  margin-bottom: 10px;
}
#event-gallery .isotope-layout-filter {
  justify-content: center !important;
  display: flex !important;
  flex-wrap: wrap;
  margin-top: 10px;
  gap: 12px;
  width: 100%;
  text-align: center;
}
#event-gallery .title-wrapper .title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #F28C28; /* brand orange */
  margin: 12px auto 0 auto;
  border-radius: 4px;
}

/* =========================
   2. Webinar List Styles
   ========================= */
.webinar-item {
    display: flex;
    align-items: center;
    background: #fff;
    border-left: 6px solid #F28C28; /* Brand Orange */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    padding: 25px;
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* For button positioning */
}
.webinar-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-left-color: #4B2E12; /* Brand Brown */
}
.webinar-date-box {
    min-width: 110px;
    text-align: center;
    padding-right: 25px;
    margin-right: 25px;
    border-right: 2px solid #f0f0f0;
}
.webinar-date-box .w-day {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #4B2E12;
    line-height: 1;
}
.webinar-date-box .w-month {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: #F28C28;
    margin-top: 5px;
}
.webinar-date-box .w-year {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}
.webinar-content {
    flex-grow: 1;
}
.webinar-content h5 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}
.webinar-content .w-tag {
    display: inline-block;
    background-color: #eee;
    color: #555;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.webinar-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}
/* Webinar Button */
.webinar-action {
    margin-left: 20px;
    min-width: 120px;
    text-align: right;
}
/* Mobile Responsiveness for Webinars */
@media(max-width: 767px) {
    .webinar-item { flex-direction: column; text-align: center; }
    .webinar-date-box { 
        border-right: none; 
        border-bottom: 1px solid #f0f0f0; 
        margin-right: 0; 
        padding-right: 0;
        margin-bottom: 15px; 
        padding-bottom: 15px; 
        width: 100%;
    }
    .webinar-action {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
        text-align: center;
    }
}

/* =========================
   3. News Box Styles
   ========================= */
.news-box-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* Active items get the brand Orange border */
.news-box-item.active-news {
    border-top: 4px solid #F28C28; 
}
/* Past items get a Grey border */
.news-box-item.past-news {
    border-top: 4px solid #6c757d;
    background: #fcfcfc;
}
.news-box-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.news-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}
.badge-open { background-color: #e6f7e9; color: #28a745; }
.badge-closed { background-color: #ececec; color: #666; }
.badge-video { background-color: #fff0e6; color: #F28C28; }

.news-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}
.news-desc {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
    margin-bottom: 20px;
}