/* Hide this image on desktop/tablet by default */
.kb-image379_77c68d-47 {
  display: none;
}

/* Show only on mobile (screens up to 768px wide) */
@media (max-width: 768px) {
  .kb-image379_77c68d-47 {
    display: block;
  }
}





/* Mobile / Tablet / Desktop visibility helpers for any block */
@media (max-width: 767.98px) {        /* MOBILE */
  .show-mobile { display: block !important; }
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024.98px) {  /* TABLET */
  .show-tablet { display: block !important; }
  .hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {          /* DESKTOP */
  .show-desktop { display: block !important; }
  .hide-desktop { display: none !important; }
}

/* Ensure figures/images behave when toggled */
.wp-block-kadence-image.show-mobile,
.wp-block-kadence-image.hide-mobile,
.wp-block-image.show-mobile,
.wp-block-image.hide-mobile {
  margin: 0; padding: 0;
}





/* Desktop only: adjust breakpoint to match your site */
@media (min-width: 1024px) {
  /* The sticky column must be inside a container that doesn't clip overflow.
     Make sure NO ancestor has overflow: hidden/auto/clip on the sticky axis. */

  .sticky-col {
    position: sticky;
    /* Keep it pinned to the top; we’ll center the inner content */
    top: var(--sticky-offset, 24px);
    /* Ensure the sticky element’s box spans the viewport height minus top offset */
    height: calc(100dvh - var(--sticky-offset, 24px));
    align-self: flex-start; /* important so sticky works within flex rows */
    display: flex;          /* for vertical centering of the inner wrapper */
  }

  /* If the WP admin bar is visible, bump the offset */
  body.admin-bar .sticky-col {
    top: calc(var(--sticky-offset, 24px) + 32px); /* 32px desktop admin bar */
    height: calc(100dvh - (var(--sticky-offset, 24px) + 32px));
  }

  /* Center the content vertically & prevent it from stretching */
  .sticky-col .sticky-center {
    margin: auto;           /* centers both horizontally and vertically in the flex parent */
    max-height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* If your sticky content can be taller than viewport, allow inner scrolling instead of breaking sticky */
  .sticky-col .sticky-center > * {
    max-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* keeps map/inner scroll from hijacking the page */
  }

  /* Optional: ensure the scrolling column behaves normally */
  .scroll-col {
    overflow: visible; /* don’t clip; let the page scroll */
  }

  /* Kadence rows are often display:flex; make sure no transforms kill sticky in Safari */
  .kb-row-layout-wrap,
  .wp-site-blocks {
    transform: none !important; /* only if you previously applied transforms */
  }
}

/* Mobile/tablet: disable the sticky so the layout is friendly */
@media (max-width: 1023.98px) {
  .sticky-col {
    position: static;
    height: auto;
  }
}



/*Removes watermark from post maps*/
.leaflet-control-attribution,
.leaflet-control-container {
  display: none !important;
}





/* Outer width + padding */
.related-posts-wrap,
.entry-related {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Grid that tightens card width */
.related-posts-wrap .entries,
.related-posts-wrap .archive-grid,
.related-posts-wrap .grid,
.entry-related .entries,
.entry-related .archive-grid,
.entry-related .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}

/* Cap each card width + tidy internals 
.related-posts-wrap .entry,
.entry-related .entry {
  max-width: 320px;
  padding: 0;
  gap: 8px;
}*/

.related-posts-wrap .entry-title,
.entry-related .entry-title {
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.2;
  margin: 6px 0 0;
}

/* Uniform aspect ratio for thumbnails (desktop/tablet) */
.related-posts-wrap .post-thumbnail,
.related-posts-wrap .post-thumbnail-inner,
.related-posts-wrap .entry .kadence-entry-thumb,
.entry-related .post-thumbnail,
.entry-related .post-thumbnail-inner,
.entry-related .entry .kadence-entry-thumb {
  aspect-ratio: 4 / 3;    /* change to 16/9 or 1/1 if preferred */
  overflow: hidden;
  height: auto !important; /* ensure ratio controls height */
}

.related-posts-wrap .post-thumbnail img,
.related-posts-wrap .post-thumbnail-inner img,
.related-posts-wrap .entry .kadence-entry-thumb img,
.entry-related .post-thumbnail img,
.entry-related .post-thumbnail-inner img,
.entry-related .entry .kadence-entry-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Mobile: center the section, 1 column, use square thumbs (tidy) */
@media (max-width: 768px) {
  .related-posts-wrap,
  .entry-related {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .related-posts-wrap .entries,
  .related-posts-wrap .archive-grid,
  .related-posts-wrap .grid,
  .entry-related .entries,
  .entry-related .archive-grid,
  .entry-related .grid {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }

  .related-posts-wrap .entry,
  .entry-related .entry {
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .related-posts-wrap .post-thumbnail,
  .related-posts-wrap .post-thumbnail-inner,
  .related-posts-wrap .entry .kadence-entry-thumb,
  .entry-related .post-thumbnail,
  .entry-related .post-thumbnail-inner,
  .entry-related .entry .kadence-entry-thumb {
    aspect-ratio: 1 / 1; /* square on mobile */
  }
}


/* Only apply extra padding on desktop */
@media (min-width: 1025px) {
  .single-post .content-area {
    padding-left: 200px;
    padding-right: 200px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}



/* Make "Best For" chips text bold */
.obrg-bestforwrap .obrg-chip {
  font-weight: 600; /* semi-bold; use 700 for full bold */
}