/* ============================================
   ALANT NATUR ERLEBEN - Blog Artikel Template
   Design: Silke Jacobi (Blog_Artikel.pdf)

   Nur Styling für Code-Elemente (Shortcodes).
   Profilbild + Newsletter CTA → Divi visuell.
   ============================================ */

/* --- 1. Zurück-Link --- */

.alant-zurueck-link {
    display: inline-block;
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--alant-braun, #7C6C13);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.alant-zurueck-link:hover {
    color: var(--alant-gruen-dunkel, #657C30);
}

/* --- 2. Post Title + Meta --- */

/* Meta-Zeile: "Datum | Autorin" — Divi Post Title Modul
   HTML: <p class="et_pb_title_meta_container">by <span class="author vcard">…</span> | <span class="published">…</span></p>
   Fix: "by" verstecken, Reihenfolge umkehren zu "Datum | Autorin" */

.single-post p.et_pb_title_meta_container {
    font-size: 0 !important;        /* versteckt "by" und "|" Text-Nodes */
    display: flex;
    flex-direction: row-reverse;     /* Datum zuerst, dann Autorin */
    justify-content: flex-end;
    align-items: baseline;
    gap: 0;
    padding-bottom: 0.5em;
}

/* Font-Size auf den sichtbaren Elementen wiederherstellen */
.single-post p.et_pb_title_meta_container .author.vcard,
.single-post p.et_pb_title_meta_container .author.vcard a,
.single-post p.et_pb_title_meta_container .published {
    font-size: 14px !important;
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    color: var(--alant-braun, #7C6C13) !important;
    text-decoration: none;
}

/* " | " Separator zwischen Datum und Autorin */
.single-post p.et_pb_title_meta_container .published::after {
    content: " \00a0|\00a0 ";
    font-size: 14px;
}

/* --- 2b. Post Content: Innere Divi-Section Padding entfernen ---
   Divi wickelt Gutenberg-Content in eine eigene Section mit Preset-Padding.
   Für Blog-Artikel soll der Text direkt oben anschließen. */

.single-post .et_pb_post_content .et_pb_section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* --- 3. Blog-Illustration (ACF Shortcode) --- */

.alant-blog-illustration {
    text-align: center;
    margin: 2.5rem auto 0;
    padding: 0;
    max-width: 480px;
    position: relative;
    z-index: 2;
}

.alant-blog-illustration img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* --- 4. "Noch weiterlesen?" Section --- */

.alant-related-post {
    padding: 2.5rem 0 3rem;
}

.alant-related-heading {
    font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    font-weight: 400;
    font-size: clamp(20px, 0.71vw + 17px, 26px);
    letter-spacing: 0;
    color: var(--alant-dunkelbraun, #322C0A);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.alant-related-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.alant-related-inner {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    max-height: 220px;
    overflow: hidden;
}

.alant-related-image {
    flex: 0 0 250px;
    max-width: 250px;
}

.alant-related-image img,
.alant-related-thumb {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

.alant-related-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: var(--alant-beige, #E4E0CD);
}

.alant-related-content {
    flex: 1;
}

.alant-related-title {
    font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    font-weight: 400;
    font-size: clamp(18px, 0.48vw + 16px, 22px);
    color: var(--alant-dunkelbraun, #322C0A);
    margin: 0;
    line-height: 1.3;
}

.alant-related-meta {
    display: block;
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 14px;
    color: var(--alant-braun, #7C6C13);
    margin-bottom: 0.25rem;
}

.alant-related-excerpt {
    font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    font-size: clamp(14px, 0.2vw + 13px, 16px);
    line-height: 1.6;
    color: var(--alant-dunkelbraun, #322C0A);
    margin-bottom: 0.25rem;
}

.alant-related-more {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 15px;
    color: var(--alant-braun, #7C6C13);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.alant-related-link:hover .alant-related-more {
    color: var(--alant-gruen-dunkel, #657C30);
}

.alant-related-link:hover .alant-related-title {
    color: var(--alant-gruen-dunkel, #657C30);
}


/* ============================================
   BLOG ÜBERSICHT (Listing Page)
   Voraussetzung: Divi Blog-Modul → Number of Columns = 1

   Jede Post-Karte wird per CSS Grid horizontal:
   Bild links (280px), Text rechts.
   ============================================ */

/* --- 6. Post-Karte: Horizontales Grid-Layout --- */

.et_grid_module > .et_pb_post {
    display: grid !important;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0 1.5rem;
    align-items: start;
    /* Card-Styling entfernen */
    border: none !important;
    border-bottom: 2px dotted var(--alant-salbeigruen, #B2BD9A) !important;
    background: transparent !important;
    padding: 0 0 1.25rem 0 !important;
    margin-bottom: 1.25rem !important;
}

.et_grid_module > .et_pb_post:last-child {
    border-bottom: none !important;
}

/* Bild: Spalte 1, über alle Zeilen */
.et_grid_module > .et_pb_post > .et_pb_image_container {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: 0 !important;
}

.et_grid_module > .et_pb_post .entry-featured-image-url img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    border-radius: 0;
}

/* Overlay-Hover ausblenden */
.et_grid_module > .et_pb_post .et_overlay {
    display: none;
}

/* Titel: Spalte 2, Zeile 1 */
.et_grid_module > .et_pb_post > .entry-title {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    font-weight: 700;
    font-size: clamp(18px, 0.48vw + 16px, 22px) !important;
    line-height: 1.3;
    color: var(--alant-dunkelbraun, #322C0A);
    margin: 0 0 0.2rem;
    padding: 0;
}

.et_grid_module > .et_pb_post > .entry-title a {
    color: inherit;
    text-decoration: none;
}

.et_grid_module > .et_pb_post > .entry-title a:hover {
    color: var(--alant-gruen-dunkel, #657C30);
}

/* --- 7. Meta: Datum | Autorin --- */

.et_grid_module > .et_pb_post > .post-meta {
    grid-column: 2;
    grid-row: 2;
    font-size: 0 !important;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0;
    margin-bottom: 0.5rem;
}

.et_grid_module > .et_pb_post > .post-meta .author.vcard,
.et_grid_module > .et_pb_post > .post-meta .author.vcard a,
.et_grid_module > .et_pb_post > .post-meta .published {
    font-size: 14px !important;
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    color: var(--alant-braun, #7C6C13) !important;
    text-decoration: none;
}

.et_grid_module > .et_pb_post > .post-meta .published::after {
    content: " \00a0|\00a0 ";
    font-size: 14px;
}

/* Excerpt: Spalte 2, Zeile 3
   Font-Größen werden in Divi gesetzt (Body Text Size, Line Height). */
.et_grid_module > .et_pb_post > .post-content {
    grid-column: 2;
    grid-row: 3;
}

/* "mehr lesen" Link */
.et_grid_module > .et_pb_post a.more-link {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-size: 15px;
    color: var(--alant-braun, #7C6C13);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.et_grid_module > .et_pb_post a.more-link:hover {
    color: var(--alant-gruen-dunkel, #657C30);
}

/* --- 8. Responsive (Blog-Übersicht) --- */

@media (max-width: 980px) {
    .et_grid_module > .et_pb_post {
        grid-template-columns: 220px 1fr;
    }
}

@media (max-width: 767px) {
    .et_grid_module > .et_pb_post {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
        gap: 1rem 0;
        padding-bottom: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .et_grid_module > .et_pb_post > .et_pb_image_container {
        grid-row: auto;
    }

    .et_grid_module > .et_pb_post > .entry-title,
    .et_grid_module > .et_pb_post > .post-meta,
    .et_grid_module > .et_pb_post > .post-content {
        grid-column: 1;
        grid-row: auto;
    }
}

/* --- 5. Responsive (Blog-Artikel) --- */

@media (max-width: 980px) {
    .alant-related-image {
        flex: 0 0 160px;
        max-width: 160px;
    }
}

@media (max-width: 767px) {
    .alant-related-inner {
        flex-direction: column;
    }

    .alant-related-image {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .alant-related-image img,
    .alant-related-thumb {
        aspect-ratio: 16 / 9;
        width: 100%;
    }
}