/* Style your podcast section */
.podcast-header {
  display: flex;
  align-items: center; /* Vertically align content */
  padding: 20px;
  width: 100%;
  max-width: 1024px;
}

.podcast-header img {
  border-radius: 10%;
  width: 50%;
  height: auto;
}

.podcast-info {
  margin-right: 20px; /* Space between info and image */
}

.episode-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
  gap: 20px;
}

.episode {
  display: flex; /* Use flexbox to arrange image and audio */
  flex-direction: column; /* Stack image below description */
  align-items: flex-start; /* Align items to the left */
  border: 1px solid #ffb300;
  padding: 15px;
  border-radius: 5px;
  background-color: #101010; /* Match the background color of your website */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.episode:hover {
  transform: translateY(-5px);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.episode img {
  width: 100%; /* Image fills the container width */
  height: 80px; /* Maintain the original height */
  border-radius: 10px; /* Rounded corners */
  margin-right: 20px; /* Add space between image and audio */
  object-fit: cover; /* Ensure image covers the entire area */
  margin-bottom: 15px; /* Add space below the image */
}

/* Audio Control Styling */
audio {
  width: 100%; /* Make the audio player take up full width */
  border-radius: 5px; /* Add rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  margin-bottom: 15px; /* Add some space below the player */
  background-color: #fff; /* Match the background color of your website */
}

/* Customize Controls for All Browsers */
audio::-webkit-media-controls-panel {
  background-color: #f0f0f0; /* Set the background color of the control panel */
  color: #333; /* Set the text color of the controls */
}

audio::-webkit-media-controls-play-button {
  background-color: #ffb300; /* Set the play button background color */
  color: #fff; /* Set the play button text color */
}

audio::-webkit-media-controls-volume-slider {
  background-color: #ddd; /* Set the volume slider background color */
}

audio::-webkit-media-controls-volume-slider-thumb {
  background-color: #ffb300; /* Set the volume slider thumb color */
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-duration-display {
  color: #333; /* Set the time display text color */
}

/* Firefox Styling */
audio::-moz-range-track {
  background-color: #ddd; /* Set the volume slider background color */
}

audio::-moz-range-thumb {
  background-color: #ffb300; /* Set the volume slider thumb color */
}

/* Responsive Styling (Optional) */
@media (max-width: 768px) {
  audio {
    width: 100%; /* Make the audio player take up full width on smaller screens */
  }
}

/* Mobile Styling */
@media (max-width: 768px) {
  .podcast-header {
    flex-direction: column; /* Stack elements vertically on mobile */
  }

  .podcast-header img {
    width: 100%; /* Image takes full width on mobile */
    height: auto;
    margin-top: 20px; /* Add space between title/description and image */
  }

  .podcast-info {
    text-align: center; /* Center the title and description */
  }

  .episode {
    flex-direction: column; /* Stack elements vertically on mobile */
  }

  .episode img {
    margin-bottom: 15px; /* Add space between image and audio */
  }
}