/* Podcast page - Futurotel Connect-like layout using main site palette */

.podcast-main{
  padding-top: 50px;
  padding-bottom: 30px;
}

.podcast-page-title{
  margin: 0 0 10px;
}

.podcast-page-subtitle{
  max-width: 680px;
  margin: 0 auto 30px;
  color: #aaa;
}

.podcast-season{
  margin: 0 0 40px;
}

.podcast-season-title{
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: #85ab00; /* accent already used in the site */
}

/* Bootstrap 3 float grid can "masonry" when heights differ.
   Force a real grid with flex so rows don't break. */
.podcast-season .row{
  display: flex;
  flex-wrap: wrap;
}

.podcast-season .row > [class*="col-"]{
  float: none !important;
  display: flex;
}

.podcast-card{
  border: 1px solid rgba(25,36,42,.12);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  margin-bottom: 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 16:9 ratio wrapper (bootstrap-agnostic) */
.podcast-ratio-16x9{
  display: block;
  position: relative;
  width: 100%;
  background: #000;
}
.podcast-ratio-16x9:before{
  content: '';
  display: block;
  padding-top: 56.25%;
}

.podcast-card-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.podcast-card-play{
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,26,28,.82);
  color: #fff;
}
.podcast-ratio-16x9:hover .podcast-card-play{
  background: rgba(65,91,184,.92);
}

.podcast-card-body{
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.podcast-card-title{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #19242a;
  line-height: 1.35;
  /* clamp title to avoid variable heights */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}

.podcast-card-desc{
  color: #5b5b5b;
  margin: 0 0 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: calc(1.4em * 3);
}

.podcast-card-desc-spacer{
  flex: 1;
  min-height: calc(1.4em * 3);
}

.podcast-btn{
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 6px;
  background: #1a1a1c;
  color: #fff;
  padding: 10px 14px;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: auto;
}
.podcast-btn:hover,
.podcast-btn:focus{
  color: #fff;
  background: #415bb8;
  text-decoration: none;
}

.podcast-empty{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 18px;
  max-width: 520px;
}

.podcast-includes{
  background: #f3f3f3;
  padding: 50px 0;
}

.podcast-includes-title{
  margin: 0 0 26px;
  color: #19242a;
  font-weight: 700;
}

.podcast-include-item{
  background: #fff;
  border: 1px solid rgba(25,36,42,.08);
  border-radius: 10px;
  padding: 18px 14px;
  margin-bottom: 20px;
}

.podcast-include-icon{
  font-size: 26px;
  color: #85ab00;
  margin-bottom: 10px;
}

@supports not (-webkit-line-clamp: 2) {
  /* Fallback: keep consistent height even without line-clamp */
  .podcast-card-title{ max-height: calc(1.35em * 2); }
  .podcast-card-desc{ max-height: calc(1.4em * 3); }
}