/**
 * Consent-Embeds — Placeholder-Styling für Click-to-Load-Einbettungen.
 *
 * Nutzt ausschließlich CSS-Custom-Property-Tokens aus global.css / Customizer.
 * Mindesthöhe orientiert sich am typischen Google-Maps-Embed-Height (450px).
 *
 * @package WPBlogsAndPages
 * @since 2.11.0
 */

.bap-consent-map {
    margin: var(--spacing-6) 0;
    border-radius: var(--radius-lg);
    background: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-200);
    overflow: hidden;
}

.bap-consent-map__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-3);
    padding: var(--spacing-8) var(--spacing-6);
    min-height: 300px;
}

.bap-consent-map__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-family: var(--font-sans);
    color: var(--color-neutral-800);
}

.bap-consent-map__notice {
    margin: 0;
    max-width: 520px;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-neutral-700);
}

.bap-consent-map__notice a {
    color: var(--color-primary);
    text-decoration: underline;
}

.bap-consent-map__button {
    display: inline-block;
    margin-top: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-primary-foreground);
    background: var(--color-primary);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-default);
}

.bap-consent-map__button:hover,
.bap-consent-map__button:focus-visible {
    filter: brightness(1.1);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bap-consent-map__fallback {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
}

.bap-consent-map__fallback a {
    color: var(--color-neutral-700);
    text-decoration: underline;
}

/* Aktiver Zustand: iframe wird nach Klick hier eingefügt. */
.bap-consent-map--loaded {
    padding: 0;
    min-height: 0;
    background: transparent;
    border: 0;
}

.bap-consent-map--loaded .bap-consent-map__placeholder {
    display: none;
}

.bap-consent-map iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
    border-radius: var(--radius-lg);
}

/*
 * Videos und andere Einbettungen (EPIC-214 Teil 2, TH-05).
 * Seitenverhältnis kommt als Custom Property vom iframe (width/height),
 * Standard 16:9. Wächst mit dem Text, wenn die Fläche zu klein ist.
 */
.bap-consent-embed {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: var(--bap-embed-ratio, 16 / 9);
    margin: var(--spacing-6) 0;
    /* Kein overflow: hidden, sonst wächst die Fläche nicht mit dem Text (schmale Bildschirme). */
    border-radius: var(--radius-lg);
    background: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-200);
    color: var(--color-neutral-800);
}

/* Core reserviert die Fläche per ::before (Spezifität 0,3,1); der Platzhalter bringt sie selbst mit. */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:has(> .bap-consent-embed)::before,
.wp-block-embed__wrapper:has(> .bap-consent-embed)::before {
    display: none;
}

/*
 * Nach dem Klick gilt wieder die Fläche von Core. Die Klasse setzt das JS;
 * WebKit wertet :has() nach dem Austausch nicht immer neu aus (gemessen
 * 13.10.2026, Tastatur-Aktivierung bei 390 px: Wrapper blieb 0 px hoch).
 */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper.bap-consent-embed-done::before,
.wp-block-embed__wrapper.bap-consent-embed-done::before {
    display: block;
}

.wp-block-embed__wrapper > .bap-consent-embed {
    margin: 0;
}

/* Doppelte Klasse schlägt .blog-content img (Abstand, height: auto) aus blog-article.css. */
.bap-consent-embed .bap-consent-embed__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    border-radius: inherit;
}

.bap-consent-embed__overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    max-width: 560px;
    padding: var(--spacing-6) var(--spacing-4);
    text-align: center;
}

.bap-consent-embed--has-thumb,
.bap-consent-embed--has-thumb .bap-consent-embed__title,
.bap-consent-embed--has-thumb .bap-consent-embed__notice,
.bap-consent-embed--has-thumb .bap-consent-embed__fallback {
    color: var(--color-base-white);
}

.bap-consent-embed--has-thumb .bap-consent-embed__overlay {
    max-width: none;
    width: 100%;
    min-height: 100%;
    justify-content: center;
    border-radius: inherit;
    background: var(--color-overlay-black-60);
}

.bap-consent-embed__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.bap-consent-embed__notice,
.bap-consent-embed__fallback {
    margin: 0;
    max-width: 520px;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* Drei Klassen: Inhaltsregeln wie .blog-content a:not(...) setzen sonst ihre Linkfarbe. */
.bap-consent-embed .bap-consent-embed__overlay .bap-consent-embed__notice a,
.bap-consent-embed .bap-consent-embed__overlay .bap-consent-embed__fallback a {
    color: inherit;
    text-decoration: underline;
}

.bap-consent-embed__button {
    min-height: var(--size-touch-target);
    padding: var(--spacing-3) var(--spacing-6);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-foreground);
    background: var(--color-primary);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.bap-consent-embed--has-thumb .bap-consent-embed__button {
    border: 1px solid var(--color-overlay-white-60);
}

.bap-consent-embed__button:hover {
    filter: brightness(1.1);
}

.bap-consent-embed__button:focus-visible {
    outline: 2px solid var(--color-base-white);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-primary);
}

@media (max-width: 480px) {
    .bap-consent-embed__overlay {
        padding: var(--spacing-4) var(--spacing-3);
    }

    .bap-consent-embed__title {
        font-size: var(--font-size-base);
    }

    .bap-consent-embed__notice,
    .bap-consent-embed__fallback {
        font-size: var(--font-size-xs);
    }
}

/* Nach dem Klick: Wrapper ohne eigene Gestalt, das Original bestimmt die Größe. */
.bap-consent-embed-loaded:focus {
    outline: none;
}