/**
 * H24 Banner Ads - Slot-Integration Styles
 *
 * Dynamische 3-zu-4-Spalter-Logik für das USP-Grid
 * und Platzierung in Branchen-Grid, Kategorieseiten und Ratgeber.
 */

/* =============================================================================
   1. USP-GRID: Dynamisch 3-Spalter → 4-Spalter (wenn Banner aktiv)
   =============================================================================

   LOGIK:
   - Ohne Banner: .usp-grid bleibt 3-Spalter (bestehendes CSS greift)
   - Mit Banner:  .usp-grid--with-ad wird 4-Spalter auf Desktop
   - Mobile:      Banner steht ÜBER den 3 USP-Boxen (order: -1)
   - Tablet:      2x2 Grid, Banner oben links
   ============================================================================= */

/* --- Desktop (> 1024px): 4-Spalter --- */
@media (min-width: 1025px) {
    .usp-grid--with-ad {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1.5rem;
        align-items: stretch;
    }

    /* Banner-Slot als 4. Spalte (rechts) */
    .usp-grid--with-ad .usp-item--ad {
        order: 4;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Die 3 USP-Items behalten ihre Reihenfolge */
    .usp-grid--with-ad .usp-item:not(.usp-item--ad):nth-child(2) { order: 1; }
    .usp-grid--with-ad .usp-item:not(.usp-item--ad):nth-child(3) { order: 2; }
    .usp-grid--with-ad .usp-item:not(.usp-item--ad):nth-child(4) { order: 3; }
}

/* --- Tablet (768px - 1024px): 2x2 Grid --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .usp-grid--with-ad {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem;
    }

    /* Banner oben links */
    .usp-grid--with-ad .usp-item--ad {
        order: -1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Mobile (< 768px): Banner ÜBER den 3 Boxen --- */
@media (max-width: 767px) {
    .usp-grid--with-ad {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
    }

    /* Banner ganz oben (order: -1) */
    .usp-grid--with-ad .usp-item--ad {
        order: -1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    /* USP-Items darunter */
    .usp-grid--with-ad .usp-item:not(.usp-item--ad) {
        order: 1;
    }
}

/* Banner-Slot innerhalb des USP-Grids: Adframe anpassen */
.usp-item--ad .h24-ad-slot {
    margin: 0;
    width: 300px;
    max-width: 100%;
}

.usp-item--ad .h24-ad-container {
    margin: 0;
    padding: 0;
}


/* =============================================================================
   2. BRANCHEN-GRID: Banner als Karte im Grid
   =============================================================================
   Das Banner wird als .branche-card--ad in das bestehende Grid eingefügt.
   Es verhält sich wie eine normale Branche-Card, zeigt aber den Adframe.
   ============================================================================= */

.branche-card--ad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.branche-card--ad .h24-ad-slot {
    margin: 0;
}

.branche-card--ad .h24-ad-container {
    margin: 0;
    padding: 0;
}


/* =============================================================================
   3. STANDALONE AD-SECTION (zwischen Sektionen)
   =============================================================================
   Für Banner-Slots die als eigene Section zwischen Content-Blöcken stehen
   (z.B. zwischen Ratgeber-Slider und CTA, oder nach dem Hero auf Kategorieseiten).
   ============================================================================= */

.h24-ad-section {
    padding: 2rem 0;
    text-align: center;
}

.h24-ad-section .h24-ad-container {
    display: flex;
    justify-content: center;
}

.h24-ad-section .h24-ad-slot {
    margin: 0 auto;
}


/* =============================================================================
   4. KATEGORIESEITEN: Banner zwischen Eintrags-Sektionen
   ============================================================================= */

/* Banner zwischen Premium- und Standard-Einträgen */
.dienstleister-section .h24-ad-section {
    padding: 1.5rem 0;
    margin: 1rem 0;
}

/* Banner innerhalb des Standard-Grids */
.standard-grid .dienstleister-card--ad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.standard-grid .dienstleister-card--ad .h24-ad-slot {
    margin: 0;
}

.standard-grid .dienstleister-card--ad .h24-ad-container {
    margin: 0;
    padding: 0;
}


/* =============================================================================
   5. RATGEBER-ARTIKEL: Inline-Banner im Content
   ============================================================================= */

/* Inline-Banner zwischen Absätzen */
.entry-content .h24-ad-container.h24-ad-inline {
    margin: 2.5rem auto;
    text-align: center;
}

/* Banner vor den Related Posts */
.entry-footer .h24-ad-section {
    padding: 2rem 0 1rem 0;
    border-top: 1px solid #eee;
    margin-top: 2rem;
}


/* =============================================================================
   6. RATGEBER-KATEGORIE: Banner im Artikel-Grid
   ============================================================================= */

.ratgeber-artikel-grid .ratgeber-artikel-card--ad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.ratgeber-artikel-grid .ratgeber-artikel-card--ad .h24-ad-slot {
    margin: 0;
}