/* Mobile responsive fixes for podcast guest images */
@media (max-width: 767px) {
  /* Adjust episodes grid layout */
  .episodes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    margin: 20px auto !important;
    padding: 0 15px !important;
    max-width: 100% !important;
  }
  
  /* Adjust dual guest episodes for mobile - make them single column */
  .episode-card:has(.dual-guest-images) {
    grid-column: span 1 !important;
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
  }
  
  /* Fix dual guest image container */
  .episode-image-container:has(.dual-guest-images) {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }
  
  /* Stack dual guest images for mobile */
  .dual-guest-images {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 150px !important;
    height: 150px !important;
    gap: 0 !important;
  }
  
  /* Make first guest image take full space */
  .episode-image-container .guest-image-left,
  .episode-card .episode-image-container .guest-image-left {
    width: 150px !important;
    height: 150px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
  }
  
  /* Hide second guest image on mobile to avoid confusion */
  .episode-image-container .guest-image-right,
  .episode-card .episode-image-container .guest-image-right {
    display: none !important;
  }
  
  /* For smallest screens, go to single column */
  @media (max-width: 480px) {
    .episodes-grid {
      grid-template-columns: repeat(1, 1fr) !important;
      justify-items: center !important;
    }
    
    .episode-card {
      width: 180px !important;
      height: 180px !important;
    }
    
    .episode-image-container {
      width: 180px !important;
      height: 180px !important;
    }
    
    .episode-image-container img {
      width: 180px !important;
      height: 180px !important;
    }
  }
}

/* Fix for Episode 14 with dual guests having inconsistent sizing */
.episode-card[data-episode="14"] .dual-guest-images {
  display: flex !important;
  gap: 30px !important;
}

.episode-card[data-episode="14"] .guest-image-left,
.episode-card[data-episode="14"] .guest-image-right {
  width: 150px !important;
  height: 150px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 767px) {
  .episode-card[data-episode="14"] .guest-image-left {
    display: block !important;
  }
  
  .episode-card[data-episode="14"] .guest-image-right {
    display: none !important;
  }
}