/*
 * Deals frontend CSS — slot frame + sticky-bottom.
 *
 * Slots are aspect-ratio-locked on the wrapper so oversized creative
 * uploads can't blow the layout. The `<img>` itself fills the wrapper via
 * absolute positioning + object-fit: cover. Same approach used across the
 * Warren theme for category cards / heroes.
 *
 * No external dependencies; ships under the per-site cloaked handle but
 * the class names are intentionally common (`pr-deal-slot` etc.) so the
 * stylesheet stays a single shared file. Site-level cloaking sits on the
 * script/style handle name, not on every class.
 */

.pr-deal-slot {
	position: relative;
	display: block;
	width: 100%;
	margin: 24px auto;
	border-radius: 12px;
	overflow: hidden;
	background: #0c1018;
	max-width: 100%;
}

.pr-deal-slot__pip {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	font-size: 10px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
	background: rgba(0, 0, 0, .55);
	padding: 3px 8px;
	border-radius: 999px;
	pointer-events: none;
}

.pr-deal-slot__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.pr-deal-slot__media {
	position: relative;
	display: block;
	overflow: hidden;
}

.pr-deal-slot__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}

/* Per-slot aspect ratios — wrapper carries the box, image fills it. */
.pr-deal-slot--pit-wall           .pr-deal-slot__media { aspect-ratio: 4 / 5; }
.pr-deal-slot--story-lead         .pr-deal-slot__media { aspect-ratio: 6 / 1; }
.pr-deal-slot--inline-insert      .pr-deal-slot__media { aspect-ratio: 16 / 9; max-width: 480px; margin-inline: auto; }
.pr-deal-slot--swiper-card        .pr-deal-slot__media { aspect-ratio: 4 / 5; }
.pr-deal-slot--section-banner     .pr-deal-slot__media { aspect-ratio: 6 / 1; }
.pr-deal-slot--dashboard-greeting .pr-deal-slot__media { aspect-ratio: 5 / 1; }
.pr-deal-slot--sticky-bottom      .pr-deal-slot__media { aspect-ratio: 8 / 1; }

/* Sticky-bottom wrap — pinned to viewport bottom, dismissible. */
.pr-deal-sticky-bottom-wrap {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 12px;
	z-index: 9000;
	width: min(1200px, calc(100% - 24px));
	box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
	border-radius: 12px;
	overflow: hidden;
	background: #0c1018;
}

.pr-deal-sticky-bottom-wrap .pr-deal-slot {
	margin: 0;
	border-radius: 0;
}

.pr-deal-sticky-bottom__close {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 3;
	width: 24px;
	height: 24px;
	line-height: 22px;
	font-size: 16px;
	color: #fff;
	background: rgba(0, 0, 0, .55);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
}

.pr-deal-sticky-bottom__close:hover {
	background: rgba(0, 0, 0, .8);
}

/* Hidden state — set by JS once dismissed (session-persistent). */
.pr-deal-sticky-bottom-wrap[hidden],
.pr-deal-sticky-bottom-wrap.is-dismissed { display: none; }