/**
 * Whimsical Promo — the shape of the box.
 *
 * This file owns only what every style must agree on: where a promo sits, how it
 * reveals and dismisses, the close button's hit area, and the focus ring. It sets
 * no colour, no type, no radius, no ornament — that is a style's job.
 *
 * A style's CSS is scoped to `#whim-promo-<id>`, so it outranks everything here by
 * construction (1-0-0 beats 0-2-0). Nothing in this file needs to mirror a style's
 * specificity, and a style never needs `!important` to win. That is the whole point
 * of the split: see Styles::scope().
 *
 * Two rules hold the reveal together and belong here rather than in a style, because
 * a style that forgot them would leave promos permanently invisible:
 *
 *   .whim-promo .whim-promo__card       { opacity: 0 }
 *   .whim-promo.is-revealed …__card     { opacity: 1 }
 *
 * Styles add transforms on top of that; they do not have to restate the fade.
 */

.whim-promo-slot {
	display: block;
}

.whim-promo {
	/* Above the theme's bottom adhesion ad (z-index 2147483637), which would
	   otherwise punch through an exit-intent modal's backdrop. */
	--whim-z: 2147483638;
}

.whim-promo[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------- card */

.whim-promo .whim-promo__card {
	/* inline-size containment means the card cannot size to its own contents, so
	   the width has to come from outside — required for the container queries a
	   style may use, and for not collapsing as a flex item in the modal. */
	container-type: inline-size;
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: var(--whim-max-width, 42rem);
	position: relative;
}

.whim-promo .whim-promo__body {
	position: relative;
}

/* -------------------------------------------------------------- reveal gate */

.whim-promo .whim-promo__card {
	opacity: 0;
	transition: opacity var(--whim-duration, 520ms) var(--whim-ease, ease);
}

.whim-promo.is-revealed .whim-promo__card {
	opacity: 1;
}

/* -------------------------------------------------------------- exit intent */

.whim-promo--exit-intent {
	inset-block-end: 0;
	inset-inline: 0;
	position: fixed;
	z-index: var(--whim-z);
}

.whim-promo--slide-down {
	inset-block: 0 auto;
}

.whim-promo--slide-up {
	/* Clear the theme's bottom ad rail when it reserves space. */
	inset-block-end: var(--bottom-ad-container-height, 0px);
}

.whim-promo--modal {
	align-items: center;
	display: none;
	inset: 0;
	justify-content: center;
	padding: clamp(0.75rem, 4vw, 1.5rem);
}

.whim-promo--modal:not([hidden]) {
	display: flex;
}

.whim-promo--modal .whim-promo__card {
	margin: 0;
	max-block-size: calc(100dvh - 3rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 1;
}

/* A neutral scrim so no style can ship a modal without one. Styles restyle it. */
.whim-promo__backdrop {
	background: rgba(14, 14, 12, 0.6);
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity var(--whim-duration, 520ms) var(--whim-ease, ease);
}

.whim-promo--modal.is-revealed .whim-promo__backdrop {
	opacity: 1;
}

body.whim-has-modal {
	overflow: hidden;
}

/* ------------------------------------------------------------ close control */

/* Position and hit area only — 44×44 is an accessibility floor, not a look. */
.whim-promo .whim-promo__close {
	appearance: none;
	block-size: 2.75rem;
	border: 0;
	box-sizing: border-box;
	cursor: pointer;
	inline-size: 2.75rem;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	margin: 0;
	max-inline-size: none;
	min-block-size: 2.75rem;
	min-inline-size: 2.75rem;
	padding: 0;
	position: absolute;
	z-index: 2;
}

/* ---------------------------------------------------------------- focus ring */

/* A visible ring even if a style forgets one. */
.whim-promo :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

/* The card takes focus when a modal opens so Enter is not armed on a control the
   reader has not read yet. It is the dialog, not a control, and the role announces
   it — so no ring here; the ring belongs on whatever the first Tab reaches. */
.whim-promo .whim-promo__card:focus,
.whim-promo .whim-promo__card:focus-visible {
	outline: none;
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.whim-promo .whim-promo__card,
	.whim-promo__backdrop {
		transition-duration: 200ms;
	}
}