/*!
 * podcast-grid.css — turns the theme's `.podcast-style6` (a horizontal row,
 * image-beside-text) into a vertical card for the 3-column grids on the
 * podcasts listing and the home "Latest podcasts" / "Hands-on workshops"
 * sections. At col-lg-4 width there isn't room for both a legible image and
 * a legible title side-by-side, so image-on-top/content-below is used instead.
 *
 * Also pins a stable image crop (real thumbnails come from another site at
 * unknown/inconsistent sizes) and reserves the same box while a thumbnail is
 * still missing, so a broken image doesn't collapse the card.
 *
 * NOTE: the podcasts listing (.filter-active/.filter-item) is driven by
 * Isotope (theme/js/main.js), which absolutely-positions each card once it
 * initializes. That means flexbox/grid "stretch to equal height" tricks don't
 * work here — Isotope measures each card's own height and places the next
 * row below the tallest one, so uneven card heights must be fixed by making
 * each card's *content* a consistent height (title clamping below), not by
 * stretching cards to fill a shared row height.
 */
.podcast-style6 {
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 16px;
  border: 1px solid var(--border-color, #e5e5e5);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.podcast-style6:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}
.podcast-style6 .podcast-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background-color: var(--smoke-color);
  overflow: hidden;
}
.podcast-style6 .podcast-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* The old .podcast-style7 "tilted pop-out" flourish, adapted to a thumbnail
   that's always visible (style7's was hidden until hover): tilt + scale the
   image itself on hover instead of popping a hidden decorative copy. */
.podcast-style6:hover .podcast-img img {
  transform: rotate(-4deg) scale(1.15);
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.25);
}
.podcast-style6 .podcast-content {
  padding: 24px 24px 28px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Button on the card's trailing (left, in RTL) edge. */
.podcast-style6 .podcast-content .vs-btn {
  align-self: flex-end;
}

/* Clamp every title to 2 lines so cards in the same row end at the same
   height regardless of how long the episode title is; short titles still
   reserve the 2-line box via min-height so the meta/button below always
   start at the same offset. */
.podcast-style6 .podcast-title {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  margin-bottom: 10px;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.6em);
}

.podcast-style6 .podcast-content > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* .podcast-meta in the vendored theme only styles <a> children (category + episode
   link); our cards also show the host and duration as plain text, so extend the
   "." separator to any meta child and drop the trailing one. */
.podcast-style6 .podcast-meta {
  /* keep every card's meta line to a single row (a long host name would
     otherwise wrap and push that card's button lower than its row-mates) */
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  margin-bottom: 20px;
}
.podcast-style6 .podcast-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--body-color);
}
.podcast-style6 .podcast-meta span + span {
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--border-color);
}
/* The duration is always the last item: never let it shrink or clip; a long guest or
   host name before it truncates with an ellipsis instead. */
.podcast-style6 .podcast-meta span:last-child {
  flex-shrink: 0;
  overflow: visible;
}
.podcast-style6 .podcast-meta i {
  color: var(--theme-color);
  font-size: 13px;
}

/* Episode-number badge straddling the seam between the thumbnail and the
   category strip, on the trailing (left, in RTL) side. It lives inside the
   strip (the thumbnail box clips overflow) and is pulled up by half its height. */
.podcast-card-episode {
  position: absolute;
  top: -13px;
  inset-inline-end: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background-color: #339966;
  color: var(--white-color);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Publish-date badge: same seam as the number badge, on the leading (right, in RTL) side. */
.podcast-card-date {
  position: absolute;
  top: -13px;
  inset-inline-start: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background-color: #ac39ac;
  color: var(--white-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(172, 57, 172, 0.35);
}
.podcast-card-date i {
  font-size: 11px;
}

/* Category strip between the thumbnail and the text. */
.podcast-card-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Extra top padding: the number/date badges hang 13px into the strip, so the
     category text starts below them instead of under the date badge. */
  padding: 24px 24px 10px;
  background-color: var(--secondary-color);
  color: var(--white-color);
  font-size: 14px;
  font-weight: 600;
}
.podcast-card-bar i {
  font-size: 13px;
  opacity: 0.85;
}

/* Cards without a category strip: the badge straddles the photo/body seam instead,
   so the body hosts it and leaves room for it above the title. */
.podcast-card--nostrip .podcast-content {
  position: relative;
  padding-top: 28px;
}

/* Summary clamped to 3 lines and reserving that box, so rows stay level. */
.podcast-card-summary {
  font-size: 14px;
  line-height: 1.9;
  color: var(--body-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: calc(3 * 1.9em);
  margin-bottom: 16px;
}

/* Stacked meta (roundtable cards): several guest names do not fit beside the duration on
   one row, so each item gets its own line and the names may wrap instead of truncating. */
.podcast-style6 .podcast-meta--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  white-space: normal;
  overflow: visible;
}
.podcast-style6 .podcast-meta--stack span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.6;
}
.podcast-style6 .podcast-meta--stack span + span {
  padding-inline-start: 0;
  border-inline-start: 0;
}