/**
 * Tommy Shutter Podcasts Web Interface - Card Layout CSS
 * File: /podcasts/css/podcasts_cards.css
 * Version: 20250422.1343 // Transparency & Artwork Cursor Included (Full File)
 * Date: 04-22-2025
 */

/* Set body background to transparent */
body {
  font-family: sans-serif;
  /* background-color: #1c1917; /* stone-900 - REMOVED */
  background-color: transparent; /* Make body background see-through */
  color: #e7e5e4; /* stone-200 - Keeping text color */
  line-height: 1.6;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
}

#podcast-container.bg-stone-800{background: 0}

a {
  color: #f59e0b; /* amber-500 */
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Sort controls styling might need adjustment depending on the parent site's background */
#sort-controls {
  /* Using RGBA for semi-transparent background */
  background-color: rgba(41, 37, 36, 0.6); /* stone-800 at 60% opacity */
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Slightly more visible border */
}

#sort-select {
  background-color: rgba(41, 37, 36, 0.8); /* stone-800 at 80% opacity */
  color: #e7e5e4; /* stone-200 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}



/* --- Episode Card Layout --- */



#episode-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
  padding-top: 1rem;
}




.podcast-card {
  /* background-color: #292524; /* stone-800 - REPLACED */
  /* Use RGBA for background transparency (stone-800 at 40% opacity) */
  background-color: rgba(41, 37, 36, 0.4);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2); /* Slightly stronger border for visibility */
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Added background-color transition */
}

.podcast-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    /* Optionally make hover slightly less transparent */
    background-color: rgba(41, 37, 36, 0.55);
}

.card-artwork {
  width: 100%;
  padding-top: 100%; /* Square aspect ratio */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Make border less prominent if background is transparent */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer; /* Indicate artwork is clickable */
  transition: filter 0.2s ease-in-out; /* Optional: add subtle hover effect */
}

/* Optional: Add a subtle visual feedback on artwork hover */
.card-artwork:hover {
    filter: brightness(1.1);
}

.card-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Text color remains solid */
  color: #e7e5e4; /* Ensure text color is explicitly set */
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #f59e0b; /* amber-500 */
  margin: 0 0 0.3rem 0;
  line-height: 1.3;
}

.card-meta {
  font-size: 0.75rem;
  color: #a8a29e; /* stone-400 */
  margin-bottom: 0.75rem;
  display: flex; /* Use flex for inline separators */
  flex-wrap: wrap; /* Allow wrapping */
  gap: 0.25rem 0.5rem; /* Row and column gap */
}
.card-meta .separator { color: #78716c; } /* Style separators within meta */

.card-description-snippet,
.card-description-full {
  font-size: 0.875rem;
  color: #d6d3d1; /* stone-300 */
  line-height: 1.5;
  margin-bottom: 0.5rem;
  word-wrap: break-word;
}
.card-description-snippet { max-height: 4.5em; overflow: hidden; }
.card-description-full.hidden { display: none; }
.card-description-snippet.hidden { display: none; } /* Hide snippet when full is shown */

.card-description-full {
    max-height: 200px; overflow-y: auto; scrollbar-width: thin;
    /* Use RGBA for scrollbar track for better blending */
    scrollbar-color: #57534e rgba(41, 37, 36, 0.4);
}
.card-description-full::-webkit-scrollbar { width: 8px; }
.card-description-full::-webkit-scrollbar-track { background: rgba(41, 37, 36, 0.4); border-radius: 4px; } /* Semi-transparent track */
.card-description-full::-webkit-scrollbar-thumb { background-color: #57534e; border-radius: 4px; border: 2px solid rgba(41, 37, 36, 0.4); } /* Solid thumb, transparent border */

.card-read-more {
  color: #f59e0b; font-size: 0.8rem; cursor: pointer; background: none;
  border: none; padding: 0; font-weight: 500; margin-top: auto;
  align-self: flex-start; /* Align to left */
}
.card-read-more:hover { text-decoration: underline; }

/* Player Styling */
.card-player-container {
  margin-top: 1rem; padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* Slightly stronger border */
}

.card-player {
  width: 100%; height: 40px;
  /* Use RGBA for player background as well */
  background-color: rgba(28, 25, 23, 0.6); /* stone-900 at 60% opacity */
  border-radius: 4px;
}
/* Basic attempt to style controls - results vary by browser */
.card-player::-webkit-media-controls-panel { background-color: rgba(41, 37, 36, 0.8); border-radius: 4px; } /* stone-800 at 80% */
.card-player::-webkit-media-controls-play-button {}
.card-player::-webkit-media-controls-current-time-display,
.card-player::-webkit-media-controls-time-remaining-display { color: #e7e5e4; font-size: 0.8rem; text-shadow: none; }
.card-player::-webkit-media-controls-volume-slider {}

/* Pagination styling - maybe make buttons slightly less opaque */
#pagination { margin-top: 2rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.page-number {
   min-width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center;
   background-color: rgba(41, 37, 36, 0.7); /* More opaque */
   border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.25rem; cursor: pointer;
   transition: all 0.2s ease; font-size: 0.875rem; padding: 0 0.5rem; color: #e7e5e4;
}
.page-number.active { background-color: #f59e0b; color: #1c1917; font-weight: bold; border-color: #f59e0b; }
.page-number:hover:not(.active) { background-color: rgba(245, 158, 11, 0.3); border-color: rgba(245, 158, 11, 0.5); }
#prev-page, #next-page {
   background-color: rgba(41, 37, 36, 0.7); color: #e7e5e4; border: 1px solid rgba(255, 255, 255, 0.2);
   padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s ease; font-size: 0.875rem;
}
#prev-page:hover, #next-page:hover { background-color: rgba(41, 37, 36, 0.9); }
#prev-page:disabled, #next-page:disabled { opacity: 0.6; cursor: not-allowed; background-color: rgba(41, 37, 36, 0.5); }

/* Loading and error states */
#loading-message, #error-message {
   text-align: center; padding: 2rem; font-style: italic; grid-column: 1 / -1;
   /* Make text color solid for readability */
   color: #d6d3d1; /* stone-300 */
}
#error-message {
   color: #ef4444; /* red-500 */
   background-color: rgba(239, 68, 68, 0.2); /* Slightly more opaque error background */
   border-radius: 0.5rem; border: 1px solid rgba(239, 68, 68, 0.4);
}

/* --- Responsive Adjustments --- */

@media (min-width: 768px) { #episode-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .card-title { font-size: 1rem; } }

@media (min-width: 1024px) { #episode-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .card-title { font-size: 1rem; } }

@media (max-width: 640px) { .container { padding: 10px; } 
#podcast-container { padding: 1rem; } #episode-list { grid-template-columns: 1fr; gap: 1rem; } 
#sort-controls { flex-direction: column; align-items: stretch; } 
#sort-controls label { margin-bottom: 0.5rem; } 
#sort-select { width: 100%; } .card-title { font-size: 1.05rem; } .card-description-snippet, .card-description-full { font-size: 0.85rem; } .card-player { height: 35px; } #pagination { justify-content: space-between; } #page-numbers { display: none; } }

/* Focus Styles */
*:focus { outline: none; }
select:focus-visible, button:focus-visible, a:focus-visible, audio:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3); border-radius: 2px; }

/* Playing state indicator */
.podcast-card.playing { /* Example: Slightly less transparent when playing */ background-color: rgba(41, 37, 36, 0.6); }

/* Folder filter styling (if used) */
.folder-filter { background-color: rgba(41, 37, 36, 0.6); padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.2); }
.folder-filter select { background-color: rgba(41, 37, 36, 0.8); color: #e7e5e4; border: 1px solid rgba(255, 255, 255, 0.3); padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 0.875rem; }

/* =============================================== */
/* === CSS for Social Icons (in podcasts_cards.css) === */
/* =============================================== */

.podcast-socials {
    display: flex;        /* Align icons horizontally */
    align-items: center;  /* Vertically center icons */
    gap: 10px;            /* Space between icons */
    margin-top: 16px;     /* Space above the icon row */
    flex-wrap: wrap;      /* Allow icons to wrap */
    min-height: 50px;     /* Ensure container has height */
}

.podcast-socials a.social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; line-height: 0; border-radius: 4px;
    transition: opacity 0.2s ease-in-out, transform 0.15s ease-out;
    /* Set background for debugging image transparency/loading */
    /* background-color: rgba(255, 255, 255, 0.1); */
}

.podcast-socials img.social-logo-img {
    /* Width/Height set inline via JS */
    object-fit: contain; vertical-align: middle;
    border-radius: 3px; /* Optional */
    /* Add a check for visibility */
    /* border: 1px solid red; */ /* Add temporarily to see image bounds */
}

.podcast-socials a.social-icon:hover {
    opacity: 0.75; transform: scale(1.05);
}

.social-error-placeholder { /* Style for placeholder text on image error */
    display: inline-block; padding: 2px 4px; font-size: 10px; color: #ef4444;
    border: 1px solid #ef4444; border-radius: 3px; font-family: monospace;
    line-height: 1; margin-left: 2px; vertical-align: middle;
    background-color: rgba(239, 68, 68, 0.1);
}

.podcast-socials.social-error { /* Style for config path error message */
    color: #f87171; font-size: 10px; font-style: italic; border: 1px dashed #f87171;
    padding: 4px 6px; border-radius: 4px; gap: 0; margin-top: 16px; display: inline-block;
}