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

.blog-post img {
   float: left;
   margin-left: 0 !important;
   max-width: 60%;
   margin-right: 1rem;
   margin-bottom: 1rem;
}

/* These apply to smaller screens */
.blog-post h2 {
   font-size: 1.3125rem;
   line-height: 1.4;
}

.blog-post h3 {
   font-size: 1.3125rem;
   line-height: 1.4;
}

.blog-post h4 {
   font-size: 1.275rem;
   line-height: 1.4;
}

.blog-post h5 {
   font-size: 1.2rem;
   line-height: 1.4;
}
/* These apply to desktop */
@media (min-width: 60em) {
   .blog-post h2 {
      font-size: 1.625rem;
      line-height: 1.4;
   }

   .blog-post h3 {
      font-size: 1.4rem;
      line-height: 1.4;
   }

   .blog-post h4 {
      font-size: 1.225rem;
      line-height: 1.4;
   }

   .blog-post h5 {
      font-size: 1.125rem;
      line-height: 1.4;
      font-weight: bold;
   }
}

/* Author row: image + text side-by-side and vertically centered */
.blog-author-wrap {
   display: flex;
   align-items: center; /* vertical centering */
   gap: 1rem; /* space between image and text */
   margin: 2rem 0;
}

/* Keep the image sizing you want */
.blog-author img,
.blog-author-photo {
   max-width: 6rem;
   width: 100%;
   height: auto;
   border-radius: 3rem;
   display: block;
}

/* Ensure name and date sit in flow to the right of the image */
.blog-author-name {
   margin: 0;
   font-weight: bold;
   line-height: 1;
}

/* smaller, muted published date under or beside the name */
.blog-published-date {
   margin: 0;
   font-size: 0.9rem;
   color: #666;
}

/* If you want name above date (stacked) keep a vertical layout for text block) */
.blog-author-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/**# Related #**/

/* Related items (podcast page) — blog-cards wrapper with blog-item-* internals */
.blog-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 */
.blog-item-card-wrapper {
   flex: 0 0 calc((100% - (20px * 4)) / 5); /* 5 cards, 4 gaps */
   max-width: calc((100% - (20px * 4)) / 5);
}

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


/* Clickable card */
.blog-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;
   height: 100%;
   overflow: hidden;
   position: relative; /* Ensure card is a positioned container for absolute CTA */
}

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

/* Card body */
.blog-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 */
.blog-item-card-title {
   font-size: 1.2rem;
   line-height: 1.2;
   margin: 0;
   color: #222;
}

/* Description trimmed */
.blog-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 */
.blog-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 */
.blog-item-card.blog-item-card--selected {
   opacity: 0.45;
   filter: grayscale(20%);
   pointer-events: none; /* prevent clicking the current page */
}

   /* Keep text readable even when dimmed */
   .blog-item-card.blog-item-card--selected .blog-item-card-title,
   .blog-item-card.blog-item-card--selected .blog-item-card-description,
   .blog-item-card.blog-item-card--selected .blog-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) {
   .blog-item-cards {
      overflow-x: auto; /* horizontal scroll on smaller screens */
      justify-content: flex-start;
   }

   .blog-item-card-wrapper {
      flex: 0 0 220px; /* fixed width per card for scroll */
      max-width: 220px;
   }
}

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

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

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

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

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

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

.blog-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 */
.blog-carousel__slick .blog-item-card-wrapper {
   display: flex;
   flex: 1 1 auto;
}

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

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

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

/* Scoped reset + sizing for custom arrows */
.blog-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 */
.blog-carousel__arrow--prev {
   left: 10px;
}

.blog-carousel__arrow--next {
   right: 10px;
}

.blog-carousel__slick {
   position: relative;
}

/* Keep SVG icons at a fixed size */
.blog-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 */
.blog-carousel__arrow,
.blog-carousel__arrow:focus,
.blog-carousel__arrow:hover {
   text-decoration: none;
   outline: none;
   color: #333;
}

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

      .blog-carousel__arrow svg {
         width: 16px;
         height: 16px;
      }
}

/* Fade non-centered slides in the resource carousel */
.blog-carousel__slick .slick-slide {
   transition: opacity 200ms ease;
}

   .blog-carousel__slick .slick-slide:not(.slick-center) .blog-item-card {
      opacity: 0.6; /* side peeks muted */
   }

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

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