/* BRALE Consent-Platzhalter, Figma "Placeholders & Social Images" (7055:43) */

/* ---------- shared ---------- */
.bcp-yt { --bcp-paper: #f9f7f5; font-family: inherit; }
.bcp-yt * { box-sizing: border-box; }
.bcp-yt p { margin: 0; }
.bcp-yt a:not(.bcp-btn) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bcp-yt svg { display: block; flex: none; }

.bcp-yt button { all: unset; box-sizing: border-box; cursor: pointer; }
.bcp-yt .bcp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 16px 32px; border-radius: 2px; border: 1px solid transparent;
	font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center;
	transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 200ms ease, border-color 200ms ease;
}
.bcp-yt .bcp-btn:active { transform: scale(.97); }
.bcp-yt .bcp-btn:focus-visible, .bcp-yt .bcp-yt__play:focus-visible, .bcp-check input:focus-visible { outline: 2px solid var(--bcp-a); outline-offset: 3px; }
.bcp-yt .bcp-btn--p { background: var(--bcp-a); color: var(--bcp-on); }
.bcp-yt .bcp-btn--p:hover { background: color-mix(in srgb, var(--bcp-a) 88%, #151211); }
.bcp-yt .bcp-btn--s { border-color: rgba(249, 247, 245, .6); color: var(--bcp-paper); background: transparent; }
.bcp-yt .bcp-btn--s:hover { background: rgba(249, 247, 245, .08); border-color: var(--bcp-paper); }
.bcp-yt .bcp-btn--s svg { width: 16px; height: 16px; }

/* ---------- YouTube ---------- */
.bcp-host { position: relative; }
/* .brale-yt is also styled by the brale-youtube mu-plugin (printed later), hence the doubled class */
.bcp-yt.brale-yt { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; color: var(--bcp-paper); background: #1f1b1a; border-radius: inherit; text-align: left; cursor: default; }
.bcp-yt.brale-yt::before, .bcp-yt.brale-yt::after { content: none; display: none; }

.bcp-yt__media { position: absolute; inset: 0; background: #1f1b1a center / cover no-repeat; }
.bcp-yt__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(21, 18, 17, .2) 0%, rgba(21, 18, 17, .35) 30%, rgba(21, 18, 17, .82) 55%, rgba(21, 18, 17, .94) 72%, rgba(21, 18, 17, .97) 100%); }
.bcp-yt .bcp-yt__play {
	position: absolute; left: 50%; top: 42%; z-index: 2; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%;
	background: var(--bcp-a); box-shadow: 0 8px 24px rgba(21, 18, 17, .35);
	transition: transform 200ms cubic-bezier(.23, 1, .32, 1);
}
.bcp-yt .bcp-yt__play::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -6px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--bcp-on); }
@media (hover: hover) { .bcp-yt .bcp-yt__play:hover { transform: scale(1.06); } }
.bcp-yt .bcp-yt__play:active { transform: scale(.97); }

.bcp-yt__panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 48px; }
.bcp-eyebrow { font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--bcp-eye); }
.bcp-yt__title { font-size: 24px; font-weight: 800; line-height: 1.25; }
.bcp-yt__text { max-width: 560px; font-size: 14px; line-height: 1.5; color: rgba(249, 247, 245, .85); }
.bcp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bcp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: rgba(249, 247, 245, .85); cursor: pointer; }
.bcp-check input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex: none; border: 1.5px solid rgba(249, 247, 245, .7); border-radius: 2px; background: transparent; cursor: pointer; display: grid; place-content: center; }
.bcp-check input:checked { background: var(--bcp-a); border-color: var(--bcp-a); }
.bcp-check input:checked::before { content: ""; width: 8px; height: 4px; margin-top: -2px; border: solid var(--bcp-on); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* consent given: poster with play button only */
.bcp-yt--ok .bcp-yt__panel { display: none; }
.bcp-yt--ok .bcp-yt__media::after { background: rgba(21, 18, 17, .15); }
.bcp-yt.bcp-yt--ok .bcp-yt__play { top: 50%; }

/* both texts exist; the box size picks one */
.bcp-yt .bcp-short { display: none; }

/* medium box (tiles, tablets): no eyebrow or play circle, short text, compact buttons */
.bcp-yt--m .bcp-yt__media::after { background: linear-gradient(180deg, rgba(21, 18, 17, .3) 0%, rgba(21, 18, 17, .78) 38%, rgba(21, 18, 17, .94) 62%, rgba(21, 18, 17, .97) 100%); }
.bcp-yt--m:not(.bcp-yt--ok) .bcp-yt__play, .bcp-yt--m .bcp-eyebrow { display: none; }
.bcp-yt--m .bcp-yt__panel { gap: 12px; padding: 24px 28px; }
.bcp-yt--m .bcp-yt__title { font-size: 20px; }
.bcp-yt--m .bcp-long { display: none; }
.bcp-yt--m .bcp-short { display: block; }
.bcp-yt--m .bcp-actions { gap: 8px; }
.bcp-yt.bcp-yt--m .bcp-btn { min-height: 40px; padding: 11px 20px; font-size: 12px; }

/* small box (phones): one-line buttons, YouTube link as icon only */
.bcp-yt--s .bcp-yt__panel { gap: 8px; padding: 14px 16px 16px; }
.bcp-yt--s .bcp-yt__title { font-size: 16px; line-height: 1.2; }
.bcp-yt--s .bcp-yt__text, .bcp-yt--s .bcp-check { font-size: 12px; line-height: 1.35; }
.bcp-yt--s .bcp-actions { flex-wrap: nowrap; align-self: stretch; }
.bcp-yt.bcp-yt--s .bcp-btn { min-height: 36px; padding: 9px 14px; font-size: 11px; letter-spacing: .04em; }
.bcp-yt--s .bcp-btn--p { flex: 1; }
.bcp-yt.bcp-yt--s .bcp-btn--s { width: 36px; padding: 0; }
.bcp-yt--s .bcp-btn--s span { display: none; }
.bcp-yt--s .bcp-check input { width: 14px; height: 14px; }
.bcp-yt.bcp-yt--s .bcp-yt__play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.bcp-yt.bcp-yt--s .bcp-yt__play::before { margin: -8px 0 0 -4px; border-width: 8px 0 8px 13px; }

/* very small box: title and buttons only */
.bcp-yt--xs .bcp-yt__text, .bcp-yt--xs .bcp-check { display: none; }

@media (prefers-reduced-motion: reduce) {
	.bcp-yt .bcp-btn, .bcp-yt .bcp-yt__play { transition: none; }
}