h1.video-page-title {
   text-align: center;
   max-width: 1200px;
   margin: 0 auto;
}

.resource-wrap {
   margin-right: 50px;
}

.resource-post img {
   float: left;
   margin-left: 0 !important;
   max-width: 60%;
   margin-right: 1rem;
   margin-bottom: 1rem;
   border-radius: 20px;
}

.resource-author-wrap {
   display: flex;
   align-items: center; /* vertical centering */
   gap: 1rem; /* space between image and text */
   margin: 2rem 0;
}

.resource-author img,
.resource-author-photo {
   max-width: 6rem;
   width: 100%;
   height: auto;
   border-radius: 3rem;
   display: block;
}

.resource-author-name {
   margin: 0;
   font-weight: bold;
   line-height: 1;
}

.resource-published-date {
   margin: 0;
   font-size: 0.9rem;
   color: #666;
}

.resource-author-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.resource-gated-cta {
   margin-top: 2rem;
}

   .resource-gated-cta .btn {
      min-width: 220px;
   }

/*# Client Spotlight #*/
img.client-spotlight-main {
   float: left;
   margin-right: 15px;
   margin-bottom: 15px;
}

.client-spotlight-sidebar-wrap, .podcast-sidebar-wrap, .webinar-sidebar-wrap {
   min-height: 500px;
   background-color: #005C7D; /*#003146;*/
   border-radius: 40px;
   margin: 0 20px;
   color: #fff;
   position: relative;
   text-align: center;
   padding: 60px 30px;
}

   .client-spotlight-sidebar-wrap img {
      width: 80%;
      margin-bottom: 60px;
   }

.btn-white--outline {
   color: #fff;
   border: solid 2px #fff;
   width: 100%;
   white-space: nowrap;
   background-color: transparent;
   font-size: 1.1875rem;
   font-family: "Noto Sans", sans-serif;
   font-weight: 700;
   color: #fff;
   text-align: center;
   cursor: pointer;
   line-height: 1.4;
}

.client-spotlight-sidebar-wrap a {
   color: #fff;
   text-align: center;
}

.client-spotlight-sidebar-wrap, .webinar-sidebar-wrap a.cta {
   position: absolute;
   bottom: 40px;
   left: 0;
   margin-left: auto;
   margin-right: auto;
   width: 80%;
   right: 0;
}

/*# Podcasts #*/
.podcast-sidebar-wrap {
   background-color: #003e53;
   padding-top: 10px;
   padding-bottom: 15px;
}

.podcast-sidebar-wrap .leaderchat-logo {
   max-width: 225px;
}

h4.podcast-subscribe-today {
   color: #fff;
   font-size: 2rem;
   font-weight: 200;
   margin-bottom: 2rem;
}

a .podcast-subscribe {
   /* make the subscribe button layout a left-aligned inline flex row */
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0.75rem;
   padding: 0.75rem 1rem; /* keeps comfortable touch/click area */
   text-align: left; /* override centered parent */
   box-sizing: border-box;
}

/* Podcast subscribe: force left-aligned icon + stacked text to the right */
.podcast-sidebar-wrap a.podcast-subscribe {
   display: flex !important;
   flex-direction: row !important;
   align-items: center !important;
   justify-content: flex-start !important;
   gap: 0.75rem;
   padding: 0.75rem 1rem;
   text-align: left; /* override parent centering */
   box-sizing: border-box;
   margin-bottom: 15px;
}

   /* icon fixed size on the left */
   .podcast-sidebar-wrap a.podcast-subscribe img.podcast-icon {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      margin: 0;
      display: block;
   }

   /* stack the two text lines to the right of the icon */
   .podcast-sidebar-wrap a.podcast-subscribe .podcast-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      line-height: 1;
   }

   /* sizes for the lines */
   .podcast-sidebar-wrap a.podcast-subscribe .listen-on {
      font-size: 0.8rem;
      font-weight: 600;
      margin-bottom: 0.12rem;
      color: #fff;
   }

   .podcast-sidebar-wrap a.podcast-subscribe .podcast-service {
      font-size: 1.25rem;
      font-weight: 800;
      color: #fff;
   }

   /* keep full-width button appearance but ensure layout stays left-to-right */
   .podcast-sidebar-wrap a.podcast-subscribe.btn-white--outline {
      width: 100%;
   }

/* small screens: stack icon above text for narrow widths */
@media (max-width: 480px) {
   a.podcast-subscribe {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

      a.podcast-subscribe .podcast-text {
         align-items: center;
      }
}

/* Responsive: stack icon above text on very narrow screens */
@media (max-width: 480px) {
   .podcast-sidebar-wrap a.podcast-subscribe {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
   }

      .podcast-sidebar-wrap a.podcast-subscribe .podcast-text {
         align-items: center;
      }
}

/*## Webinars ##*/
.webinar-sidebar-wrap {
   min-height: 400px;
}

   .webinar-sidebar-wrap h3 {
      color: #fff;
      margin-bottom: 30px;
   }


.lightbox {
   background-color: rgba(0, 0, 0, 0.8);
   overflow: scroll;
   position: fixed;
   display: none;
   z-index: 9999;
   bottom: 0;
   right: 0;
   left: 0;
   top: 0;
}

.lightbox-container {
   position: relative;
   max-width: 960px;
   margin: 7% auto;
   display: block;
   padding: 0 3%;
   height: auto;
   z-index: 10;
}

@media screen and (max-width: 768px) {
   .lightbox-container {
      margin-top: 10%;
   }
}

@media screen and (max-width: 414px) {
   .lightbox-container {
      margin-top: 13%;
   }
}

.lightbox-content {
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.lightbox-close {
   text-transform: uppercase;
   background: transparent;
   position: absolute;
   font-weight: 300;
   font-size: 12px;
   display: block;
   border: none;
   color: white;
   top: -22px;
   right: 3%;
}

.video-container {
   padding-bottom: 56.25%;
   position: relative;
   padding-top: 30px;
   overflow: hidden;
   height: 0;
}

   .video-container iframe,
   .video-container object,
   .video-container embed {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
   }
/* Related items (podcast page) — blog-cards wrapper with resource-item-* internals */
.resource-item-cards {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   justify-content: space-between; /* even spacing across the row */
   gap: 20px;
   flex-wrap: nowrap; /* stay in one line */
   overflow: hidden; /* clip overflow when fewer than 5 fit */
}

/* Each card wrapper should not grow beyond its slot */
.resource-item-card-wrapper {
   flex: 0 0 calc((100% - (20px * 4)) / 5); /* 5 cards, 4 gaps */
   max-width: calc((100% - (20px * 4)) / 5);
}

.resource-item-cards.related4items .resource-item-card-wrapper {
   flex: 0 0 calc((100% - (20px * 3)) / 4); /* 5 cards, 4 gaps */
   max-width: calc((100% - (20px * 3)) / 4);
}


/* Clickable card */
.resource-item-card {
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid #e6e6e6;
   border-radius: 30px;
   box-shadow: 0 1px 2px rgba(0,0,0,0.05);
   color: inherit;
   text-decoration: none;
   min-height: 375px;
   height: 100%;
   overflow: hidden;
   position: relative; /* Ensure card is a positioned container for absolute CTA */
}

/* Image scaled smaller than blog cards */
.resource-item-card-image {
   width: 100%;
   height: 160px; /* smaller height to fit 5 across comfortably */
   object-fit: cover;
   display: block;
}

/* Card body */
.resource-item-card-body {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 20px; /* consistent left/right with CTA */
   padding-bottom: 80px; /* extra room for CTA height + bottom margin */
}

/* Title smaller than blog cards */
.resource-item-card-title {
   font-size: 1.2rem;
   line-height: 1.2;
   margin: 0;
   color: #222;
}

/* Description trimmed */
.resource-item-card-description {
   /*font-size: 0.85rem;*/
   color: #444;
   margin: 10px 0;
   /*   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
*/ overflow: hidden;
}

/* CTA */
.resource-item-card-cta {
   position: absolute;
   left: 20px; /* same as body padding-left */
   right: 20px; /* same as body padding-right */
   bottom: 20px; /* 20px margin from bottom */
   display: block;
   width: auto; /* fills between left/right */
   margin-top: 0;
   text-align: center; /* optional: center CTA text */
}

/* Dim the currently selected resource card */
.resource-item-card.resource-item-card--selected {
   opacity: 0.45;
   filter: grayscale(20%);
   pointer-events: none; /* prevent clicking the current page */
}

   /* Keep text readable even when dimmed */
   .resource-item-card.resource-item-card--selected .resource-item-card-title,
   .resource-item-card.resource-item-card--selected .resource-item-card-description,
   .resource-item-card.resource-item-card--selected .resource-item-card-cta {
      color: #000;
   }

/* Prevent wrapping to next line at larger sizes; at narrow screens allow scroll instead of wrap */
/*@media (max-width: 992px) {
   .resource-item-cards {
      overflow-x: auto; 
      justify-content: flex-start;
   }

   .resource-item-card-wrapper {
      flex: 0 0 220px; 
      max-width: 220px;
   }
}*/

/* Resource items carousel — namespaced to avoid collisions */
.resource-carousel {
   position: relative;
}

/* Slick slides spacing (local to this carousel) */
.resource-carousel__slick .resource-item-card-wrapper {
   margin: 0 12px;
   padding: 0;
}

/* Create side peeks without centerMode by padding the list */
.resource-carousel__slick .slick-list {
   padding-left: 6%;
   padding-right: 6%;
}

/* Give the slick list side padding to help partial slide visibility (centerMode) */
.resource-carousel__slick .slick-list {
   padding-left: 0;   /* centerPadding handles side reveal */
   padding-right: 0;
}

/* Equal-height slides within the resource carousel */
.resource-carousel__slick .slick-list {
    /* allow child track to size naturally */
    height: auto;
}

.resource-carousel__slick .slick-track {
    display: flex;              /* lay out slides in a flex row */
    align-items: stretch;       /* stretch all slides to the tallest */
}

.resource-carousel__slick .slick-slide {
    height: auto;               /* let slide expand to track height */
    display: flex !important;   /* so inner wrapper can take full height */
    align-items: stretch;       /* make wrapper fill slide vertically */
}

/* Your wrapper and card should fill the slide */
.resource-carousel__slick .resource-item-card-wrapper {
    display: flex;
    flex: 1 1 auto;
}

.resource-carousel__slick .resource-item-card {
    display: flex;
    flex-direction: column;
    height: 100%;               /* fill wrapper */
}

/* Ensure inner body can grow, CTA stays pinned */
.resource-carousel__slick .resource-item-card-body {
    flex: 1 1 auto;             /* take remaining space */
    position: relative;
    padding-bottom: 80px;       /* room for CTA pinned at bottom */
}

.resource-carousel__slick .resource-item-card-cta {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
}

/* Scoped reset + sizing for custom arrows */
.resource-carousel__arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 3;

   /* Reset any inherited button styles */
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 50%;
   box-shadow: 0 1px 2px rgba(0,0,0,0.08);

   display: inline-flex;
   align-items: center;
   justify-content: center;

   width: 40px;
   height: 40px;
   padding: 0;       /* remove large padding from global styles */
   margin: 0;        /* prevent vertical shifts */
   cursor: pointer;

   /* Prevent font-size-based scaling */
   font-size: 0;
   line-height: 0;
}

/* Left/right positions */
.resource-carousel__arrow--prev { left: 10px; }
.resource-carousel__arrow--next { right: 10px; }

.resource-carousel__slick {
   position: relative;
}

/* Keep SVG icons at a fixed size */
.resource-carousel__arrow svg {
   width: 18px;
   height: 18px;
   flex: 0 0 18px;
   display: block;
   fill: currentColor;
}

/* If any global button styles still leak in, hard reset common props */
.resource-carousel__arrow,
.resource-carousel__arrow:focus,
.resource-carousel__arrow:hover {
   text-decoration: none;
   outline: none;
   color: #333;
}

@media (max-width: 768px) {
   .resource-carousel__arrow {
      opacity: 0.5;
   }
   .resource-carousel__arrow:hover {
      opacity: 1;
   }
}

/* Optional: hide arrows on very small screens */
@media (max-width: 520px) {
   .resource-carousel__arrow {
      width: 32px;
      height: 32px;
   }
   .resource-carousel__arrow svg {
      width: 16px;
      height: 16px;
   }
}

/* Fade non-centered slides in the resource carousel */
.resource-carousel__slick .slick-slide {
   transition: opacity 200ms ease;
}
.resource-carousel__slick .slick-slide:not(.slick-center) .resource-item-card {
   opacity: 0.6; /* side peeks muted */
}

/* Fade only partially visible (peek) slides */
.resource-carousel__slick .slick-slide.is-peek .resource-item-card {
   opacity: 0.6;
   transition: opacity 200ms ease;
}
/* Ensure fully visible slides are solid */
.resource-carousel__slick .slick-slide:not(.is-peek) .resource-item-card {
   opacity: 1;
}

/* Keep the currently selected card rule stronger (already present). If needed: */
.resource-carousel__slick .resource-item-card.resource-item-card--selected {
   opacity: 0.45; /* still dimmer than side peeks */
}

@media (max-width: 768px) {
  .resource-carousel__slick .slick-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .resource-carousel__slick .slick-track {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .resource-carousel__slick .slick-slide {
    box-sizing: border-box;
    margin: 0 !important;           /* prevent inter-slide gaps from reducing width */
    width: 100% !important;         /* force each slide to be full list width */
  }
  /*.resource-item-card-wrapper,
  .resource-item-card {
    box-sizing: border-box;
    width: 100% !important;*/         /* avoid fixed widths like 360px causing overflow */
    /*max-width: 100% !important;
  }*/
}

/* ===== Related4Items (Slick) – borrow container look from Related Resources Widget ===== */

/* Top section layout and link styling */
.related-resources-widget__top-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 10px;
  width: 100%;
  margin-bottom: 40px;
}

.related-resources-widget__top-section-header {
  font-weight: 500;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: #212121;
  margin: 0;
}

.related-resources-widget__top-section-link {
  max-width: fit-content;
  font-weight: 700;
  font-size: 19px;
  line-height: 26px;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: -0.316667px;
  color: inherit;              /* keep site theme color */
  text-decoration: none;
}
.related-resources-widget__top-section-link:hover,
.related-resources-widget__top-section-link:active,
.related-resources-widget__top-section-link:focus {
  text-decoration: underline;
}

/* IMPORTANT: disable the static grid so Slick controls width/flow */
.related-resources-widget .resource-item-cards.related4items {
  display: block;              /* override earlier flex grid */
  gap: 0;                      /* gutters handled by slide margins below */
  overflow: hidden;
}

/* Slide gutters (desktop/tablet); compensate with list negative margins */
.related-resources-widget .related4items .slick-list {
  margin: 0 -12px;             /* keeps outer edges aligned while slides have margin */
}
.related-resources-widget .related4items .slick-slide {
  margin: 0 12px;              /* visual gap between cards */
}

/* Prevent fixed widths from the static grid from interfering */
/*.related4items .resource-item-card-wrapper {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
}
*/
/* Dots styling borrowed from widget */
.related4items .slick-dots {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}
.related4items .slick-dots li {
  margin: 0;
  padding: 0;
}
   .related4items .slick-dots li button {
      border: 2px solid #008065; /* falls back to brand blue-ish */
      width: 12px;
      height: 12px;
      padding: 0;
      font-size: 0;
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
   }
.related-resources-widget .related4items .slick-dots li.slick-active button {
   background-color: #008065;
}

/* Mobile: ensure a single full-width slide with no peeks or gutters */
@media (max-width: 700px) {

   .related4items .slick-dots {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 10px;
      margin: 20px 0;
   }

   .related4items .slick-dots li.slick-active button {
      background-color: #008065;
   }
}

/* Optional: larger heading like the widget on wide screens */
@media (min-width: 1200px) {
  .related-resources-widget__top-section {
    margin-bottom: 60px;
  }
  .related-resources-widget__top-section-header {
    font-size: 60px;
    line-height: 70px;
  }
}