/* ==========================================================================
   ANSL Content Blocker
   BEM · :where() for zero specificity · ACSS variables with fallbacks
   Logical properties used throughout for writing-mode compatibility.
   ========================================================================== */

/* ── Root ─────────────────────────────────────────────────────────────────── */
/*
 * When an aspect-ratio is set on the root via Bricks' native control, the
 * overlay needs to stretch to fill it. We use a grid with a single cell so
 * the overlay (and later the revealed content) occupies the full area without
 * absolute positioning.
 *
 * When no aspect-ratio is set the root has no intrinsic size, so it simply
 * grows to the natural height of the overlay content.
 *
 * Note: the overlay occupies grid-column 1 / grid-row 1. Once JS removes
 * the overlay after consent, the revealed content flows normally in the grid.
 */
:where(.ansl-content-blocker) {
	display: grid;
	inline-size: 100%;
}

/* ── Overlay ──────────────────────────────────────────────────────────────── */
:where(.ansl-content-blocker__overlay) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-s, 1.25rem);
	padding: var(--space-m, 1.875rem);

	background-color: var(--neutral-ultra-light, #f0f0f0);
	border: 1px solid var(--neutral-light, #e0e0e0);
	border-radius: var(--radius, 5px);

	/* Fills the grid cell so it covers the full root when aspect-ratio is set */
	grid-column: 1;
	grid-row: 1;
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */

/* SVG icon — sized via logical inline-size / block-size */
:where(.ansl-content-blocker__overlay > svg) {
	inline-size: 2em;
	block-size: 2em;
}

/* Font icon — sized via font-size */
:where(.ansl-content-blocker__overlay > i) {
	font-size: 2em;
	line-height: 1;
}

/* ── Heading ──────────────────────────────────────────────────────────────── */
:where(.ansl-content-blocker__heading) {
	margin: 0;
	font-size: var(--text-m, 1rem);
	font-weight: 600;
	color: var(--neutral-ultra-dark, #111);
	text-align: center;
}

/* ── Text ─────────────────────────────────────────────────────────────────── */
:where(.ansl-content-blocker__text) {
	margin: 0;
	font-size: var(--text-s, 0.875rem);
	color: var(--neutral-semi-dark, #555);
	text-align: center;
}

/* ── Actions row ──────────────────────────────────────────────────────────── */
:where(.ansl-content-blocker__actions) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs, 0.8333rem);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
/*
 * Base button resets + ACSS btn variable system.
 * The btn--primary class (output in PHP) provides the actual color values.
 * Per-instance overrides come from Bricks controls targeting
 * .ansl-content-blocker__btn directly.
 */
:where(.ansl-content-blocker__btn) {
	/* Layout */
	display: var(--btn-display, inline-flex);
	justify-content: var(--btn-justify-content, center);
	align-items: var(--btn-align-items, center);
	text-align: var(--btn-text-align, center);
	inline-size: var(--btn-width, max-content);
	min-inline-size: var(--btn-min-width, 8.75rem);

	/* Spacing */
	padding-block: var(--btn-padding-block, 0.5em);
	padding-inline: var(--btn-padding-inline, 1.25em);

	/* Typography */
	font-family: var(--btn-font-family, inherit);
	font-size: var(--btn-font-size, var(--text-m, 1rem));
	font-weight: var(--btn-font-weight, 400);
	font-style: var(--btn-font-style, normal);
	line-height: var(--btn-line-height, 1);
	letter-spacing: var(--btn-letter-spacing, 0);
	text-transform: var(--btn-text-transform, none);
	text-decoration: var(--btn-text-decoration, none);

	/* Border */
	border-width: var(--btn-border-width, 1.5px);
	border-style: var(--btn-border-style, solid);
	border-radius: var(--btn-border-radius, var(--radius, 5px));

	/* Transition */
	transition: var(--btn-transition, var(--transition, 0.2s ease));

	cursor: pointer;
}

:where(.ansl-content-blocker__btn:hover) {
	text-decoration: var(--btn-text-decoration-hover, none);
}