/**
 * Audio Post Fields – Frontend Default Styles
 *
 * ──────────────────────────────────────────────────────────────────────────────
 * VERWENDUNG
 * ──────────────────────────────────────────────────────────────────────────────
 * Diese Datei wird automatisch auf allen Audio-Beiträgen geladen.
 * Sie liefert ein funktionales Basis-Layout, das du im Theme jederzeit
 * mit denselben Klassen überschreiben kannst.
 *
 * VERFÜGBARE KLASSEN
 * ──────────────────────────────────────────────────────────────────────────────
 *  .apf-platform-links          – die <ul>-Liste aller Plattform-Links
 *  .apf-platform-link           – einzelnes <li>
 *  .apf-platform-link--spotify  – plattformspezifische Klasse (slug)
 *  .apf-platform-link--apple-podcasts
 *  .apf-platform-link--google-podcasts
 *  .apf-platform-link--amazon
 *  .apf-platform-link--deezer
 *  .apf-platform-link--pocketcasts
 *  .apf-platform-link a         – der eigentliche Link
 *  .apf-platform-icon           – das Icon-Bild
 *  .apf-platform-label          – der Plattformname als Text
 *  .apf-duration                – Dauer-Ausgabe (falls du sie selbst einsetzt)
 * ──────────────────────────────────────────────────────────────────────────────
 */

/* ── Wrapper-Liste ─────────────────────────────────────────────────────────── */
#left-area ul.apf-platform-links,
.apf-platform-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    list-style: none;
    margin: 0;
    padding: 0;

    list-style: none;
}

/* ── Einzelner Listeneintrag ───────────────────────────────────────────────── */
.apf-platform-link {
    margin: 0;
    padding: 0;
}

/* ── Link ──────────────────────────────────────────────────────────────────── */
.apf-platform-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.apf-platform-link a:hover,
.apf-platform-link a:focus-visible {
    background-color: #ebebeb;
    border-color: #bbb;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
    outline: none;
    text-decoration: none;
}

/* ── Icon ──────────────────────────────────────────────────────────────────── */
.apf-platform-icon {
    display: block;
    flex-shrink: 0;
    height: 2rem;
    width: 2rem;
    object-fit: contain;
}

/* ── Plattformname ─────────────────────────────────────────────────────────── */
.apf-platform-label {
    white-space: nowrap;
}

/* ── Plattformspezifische Akzentfarben ─────────────────────────────────────── *
 * Auskommentiert – bei Bedarf aktivieren oder im Theme überschreiben.         */

/*
.apf-platform-link--spotify a         { background-color: #1DB954; border-color: #1DB954; color: #fff; }
.apf-platform-link--spotify a:hover   { background-color: #17a449; border-color: #17a449; }

.apf-platform-link--apple-podcasts a       { background-color: #832BC1; border-color: #832BC1; color: #fff; }
.apf-platform-link--apple-podcasts a:hover { background-color: #6e24a3; border-color: #6e24a3; }

.apf-platform-link--google-podcasts a       { background-color: #4285F4; border-color: #4285F4; color: #fff; }
.apf-platform-link--google-podcasts a:hover { background-color: #3070d4; border-color: #3070d4; }

.apf-platform-link--amazon a       { background-color: #232F3E; border-color: #232F3E; color: #FF9900; }
.apf-platform-link--amazon a:hover { background-color: #1a2330; border-color: #1a2330; }

.apf-platform-link--deezer a       { background-color: #A238FF; border-color: #A238FF; color: #fff; }
.apf-platform-link--deezer a:hover { background-color: #8f2ee6; border-color: #8f2ee6; }

.apf-platform-link--pocketcasts a       { background-color: #F43E37; border-color: #F43E37; color: #fff; }
.apf-platform-link--pocketcasts a:hover { background-color: #d93530; border-color: #d93530; }
*/

/* ── Dauer-Ausgabe ─────────────────────────────────────────────────────────── */
.apf-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #666;
}

/* ── Übersicht [podcast_overview] ──────────────────────────────────────────── */
.apf-overview-item {
    margin: 0 0 2.5rem;
    padding: 0 0 2rem;
    border-bottom: 1px solid #ddd;
}

.apf-overview-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.apf-overview-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

.apf-overview-title {
    margin: 0;
    padding: 0;
}

.apf-overview-title a {
    color: inherit;
    text-decoration: none;
}

.apf-overview-title a:hover,
.apf-overview-title a:focus-visible {
    text-decoration: underline;
}

.apf-overview-duration {
    white-space: nowrap;
}

.apf-overview-body {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.apf-overview-image {
    flex: 0 0 25%;
    max-width: 15rem;
    margin: 0;
}

.apf-overview-image a {
    display: block;
}

.apf-overview-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

.apf-overview-main {
    flex: 1 1 0;
    min-width: 0;
}

.apf-overview-content {
    margin-bottom: 1rem;
}

/* Unterhalb 40rem: Bild über dem Text */
@media (max-width: 40rem) {
    .apf-overview-body {
        flex-direction: column;
    }

    .apf-overview-image {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
    }
}

/* ── Responsive: unterhalb 30rem als Spalte stapeln ───────────────────────── */
@media (max-width: 30rem) {
    .apf-platform-links {
        flex-direction: column;
    }

    .apf-platform-link a {
        width: 100%;
        justify-content: flex-start;
    }
}