/*
 * podcast-card.css — Te Podcast Card v1.1.0
 * Light card — theo đúng ảnh 3
 */

:root {
  --pc-bg:          #ffffff;
  --pc-border:      #E1E8EB;
  --pc-radius:      14px;
  --pc-radius-sm:   6px;

  --pc-primary:     #048996;
  --pc-dark:        #000F15;
  --pc-muted:       #788890;
  --pc-separator:   #E1E8EB;

  --pc-duration-bg: rgba(0, 0, 0, 0.68);
  --pc-play-bg:     rgba(0, 0, 0, 0.48);

  --pc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ================================================
   CARD WRAPPER
   ================================================ */
.te-podcast-card {
  background:     var(--pc-bg);
  border:         1px solid var(--pc-border);
  border-radius:  var(--pc-radius);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  cursor:         pointer;
  font-family:    var(--pc-font);
  transition:     transform 0.22s ease, box-shadow 0.22s ease;
}
.te-podcast-card:hover {
  transform:  translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}

/* ================================================
   THUMBNAIL
   ================================================ */
.te-pc-thumb-wrap {
  position:     relative;
  width:        100%;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  background:   #dde8ec;
  flex-shrink:  0;
}

.te-pc-thumb {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.30s ease;
}
.te-podcast-card:hover .te-pc-thumb {
  transform: scale(1.04);
}

.te-pc-thumb--blank {
  width:           100%;
  height:          100%;
  background:      linear-gradient(135deg, #c8dde3 0%, #dde8ec 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Play button */
.te-pc-play {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%) scale(0.82);
  width:           46px;
  height:          46px;
  border-radius:   50%;
  background:      var(--pc-play-bg);
  border:          2px solid rgba(255,255,255,0.85);
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  cursor:          pointer;
  backdrop-filter: blur(4px);
	display:none;
}
.te-podcast-card:hover .te-pc-play {
  opacity:   1;
  transform: translate(-50%, -50%) scale(1);
}
.te-pc-play:hover {
  background:   var(--pc-primary);
  border-color: var(--pc-primary);
}

/* Duration badge — góc dưới phải thumbnail */
.te-pc-duration {
  position:        absolute;
  bottom:          8px;
  right:           8px;
  background:      var(--pc-duration-bg);
  color:           #fff;
  font-size:       12px;
  font-weight:     600;
  padding:         2px 7px;
  border-radius:   var(--pc-radius-sm);
  line-height:     1.65;
  letter-spacing:  0.3px;
  backdrop-filter: blur(4px);
  pointer-events:  none;
}

/* ================================================
   META AREA
   ================================================ */
.te-pc-meta {
  padding:        13px 14px 14px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
  flex:           1;
  position:       relative;
}

/* Date + more options row */
.te-pc-top-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* Date — primary color */
.te-pc-date {
  font-size:   12px;
  font-weight: 500;
  color:       #006670;
  margin:      0;
	letter-spacing:2px;
  line-height: 1;
}

/* More options ··· */
.te-pc-more {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--pc-muted);
  font-size:   18px;
  line-height: 1;
  padding:     0 2px;
  letter-spacing: 1px;
  transition:  color 0.15s;
  display:     flex;
  align-items: center;
}
.te-pc-more:hover { color: var(--pc-dark); }

/* Title */
.te-pc-title {
  font-size:    20px;
  font-weight:  700;
  color:        #0C1E24;
  line-height:  1.40;
  margin:       0;
  display:      -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:     hidden;
  font-family:  var(--pc-font);
}

/* Separator */
.te-pc-divider {
  height:     1px;
  background: var(--pc-separator);
  margin:     2px 0;
  flex-shrink: 0;
}

/* Bottom row: category trái — share phải */
.te-pc-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
}

.te-pc-bottom-left {
  display:    flex;
  align-items: center;
  gap:         4px;
  min-width:   0;
  flex:        1;
}

.te-pc-author {
  font-size:      13px;
  color:          #3E494A;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  flex-shrink:    0;
}

.te-pc-sep {
  font-size:   12px;
  color:       var(--pc-muted);
  flex-shrink: 0;
}

.te-pc-cat {
  font-size:     12px;
  color:         var(--pc-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  min-width:     0;
}

/* Share icon */
.te-pc-share {
  background:  none;
  border:      none;
  padding:     4px;
  cursor:      pointer;
  color:       #006670;
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  transition:  color 0.15s;
  line-height: 0;
}
.te-pc-share:hover { color: var(--pc-dark); }

/* ================================================
   LIGHTBOX OVERLAY
   ================================================ */
.te-pc-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.88);
  z-index:         99999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  animation:       tePcFadeIn 0.18s ease;
}
@keyframes tePcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.te-pc-overlay-inner {
  position:      relative;
  width:         100%;
  max-width:     860px;
  aspect-ratio:  16 / 9;
  background:    #000;
  border-radius: var(--pc-radius);
  overflow:      hidden;
  box-shadow:    0 28px 72px rgba(0,0,0,0.6);
}
.te-pc-overlay-inner iframe,
.te-pc-overlay-inner video,
.te-pc-overlay-inner audio {
  width:   100%;
  height:  100%;
  border:  none;
  display: block;
}
.te-pc-overlay-inner.is-audio {
  aspect-ratio: unset;
  height:       80px;
  background:   #1A2C33;
  display:      flex;
  align-items:  center;
  padding:      0 16px;
}
.te-pc-overlay-inner.is-audio audio { height: 48px; }

.te-pc-overlay-close {
  position:    absolute;
  top:         -38px;
  right:       0;
  background:  none;
  border:      none;
  color:       #fff;
  font-size:   26px;
  cursor:      pointer;
  opacity:     0.75;
  transition:  opacity 0.15s;
  line-height: 1;
}
.te-pc-overlay-close:hover { opacity: 1; }

/* ================================================
   TOAST
   ================================================ */
#te-pc-toast {
  position:      fixed;
  bottom:        24px;
  left:          50%;
  transform:     translateX(-50%);
  background:    rgba(0,0,0,0.82);
  color:         #fff;
  padding:       8px 18px;
  border-radius: 20px;
  font-size:     13px;
  z-index:       999999;
  pointer-events: none;
  opacity:       0;
  transition:    opacity 0.2s;
  font-family:   var(--pc-font);
  white-space:   nowrap;
}

/* ================================================
   GRID HELPER
   ================================================ */
.te-podcast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
@media (max-width: 600px) {
  .te-podcast-grid { grid-template-columns: 1fr; }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 480px) {
  .te-pc-title { font-size: 15px; }
  .te-pc-meta  { padding: 11px 12px 12px; }
}