/* Explain: Custom component styles for cards and audio player in literary portfolio. - */
/* Custom component refinements for the Author Portfolio */

.card {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Audio Player Customization (Subtle tweaks to default controls) */
audio {
    border-radius: 999px;
    outline: none;
}
audio::-webkit-media-controls-panel {
    background-color: #f1f5f9; /* Slate 100 */
}
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button {
    background-color: var(--accent-color);
    border-radius: 50%;
}

/* Timeline Customizations */
.timeline-middle {
    z-index: 10;
}

@media (max-width: 767px) {
    .timeline.max-md\:timeline-compact .timeline-start, 
    .timeline.max-md\:timeline-compact .timeline-end {
        margin-bottom: 3rem;
    }
}