/**
 * Site promo block — inline free-claim promo surface (home / library / series).
 *
 * Rendered hidden; promo-block.js reveals per user state. BEM: .promo-block.
 * Accent color arrives via --kd-promo-block-accent (campaign config).
 */

/* Outer: keeps .global--width's gutter padding so the visual box below
   aligns with neighboring content edges instead of the full column width. */
.promo-block {
	margin: 2rem auto;
}

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

/* Restore hidden-attribute semantics inside the block: site-wide display
   rules (e.g. flow-root/-webkit-box on paragraphs, flex on CTAs) otherwise
   beat the UA's [hidden] { display: none } and dead states stay visible. */
.promo-block [hidden] {
	display: none !important;
}

/* Inner: the visual box — border, background, and the promo's own padding. */
.promo-block__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 2rem;
	background: var(--color-background-2);
	border: 2px solid var(--color-line);
	overflow: hidden;
}

.promo-block__cover {
	flex: 0 0 auto;
	width: 8.5rem;
	margin: 0;
}

.promo-block__cover img {
	display: block;
	width: 100%;
	height: auto;
}

.promo-block__cover-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	background: var(--kd-promo-block-accent, var(--color-navy));
	opacity: 0.15;
}

.promo-block__content {
	flex: 1 1 auto;
	min-width: 0;
}

.promo-block__badge {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.25rem 0.625rem;
	font-family: "Maax Medium", sans-serif;
	font-weight: 400;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-white);
	background: var(--kd-promo-block-accent, var(--color-navy));
}

.promo-block__heading {
	margin: 0 0 0.5rem;
	font-family: "Maax Bold", sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--color-text);
}

.promo-block__body {
	max-width: 44rem;
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-text-2);
}

.promo-block__status {
	margin: 0 0 1rem;
	font-family: "Maax Medium", sans-serif;
	font-weight: 400;
	font-size: 0.9375rem;
	color: var(--color-text);
}

.promo-block__status[data-tone="error"] {
	color: var(--color-red);
}

.promo-block__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.promo-block__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-family: "Maax Medium", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	color: var(--color-white);
	background: var(--color-black);
	border: 1px solid var(--color-black);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

/* Anchor CTAs (Read now / Sign in): out-specialize the theme's global
   a:visited { color: currentColor } (elements.css), which otherwise turns
   visited links black-on-black inside the filled button. */
.promo-block a.promo-block__cta,
.promo-block a.promo-block__cta:link,
.promo-block a.promo-block__cta:visited {
	color: var(--color-white);
}

.promo-block__cta:hover,
.promo-block__cta:focus-visible,
.promo-block a.promo-block__cta:hover,
.promo-block a.promo-block__cta:focus-visible {
	opacity: 0.8;
	color: var(--color-white);
}

.promo-block__cta:disabled {
	opacity: 0.5;
	cursor: default;
}

.promo-block__dismiss {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	color: var(--color-text-2);
	background: none;
	border: none;
	cursor: pointer;
}

.promo-block__dismiss:hover,
.promo-block__dismiss:focus-visible {
	color: var(--color-text);
}

@media (max-width: 640px) {

	.promo-block__inner {
		gap: 1.25rem;
		padding: 1.25rem;
	}

	.promo-block__cover {
		width: 5.5rem;
	}

	.promo-block__heading {
		font-size: 1.25rem;
	}

	.promo-block__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.promo-block__cta {
		width: 100%;
	}
}