/**
 * CLM Ad Manager — frontend styles
 * Mobile-first. Baseline 375px. Never blocks primary CTA/bottom nav.
 * Relies on CSS custom properties from clm-tokens.css when present, with
 * safe fallbacks so this file also works standalone.
 */

:root {
	--clm-ad-primary: var(--clm-primary, #01696f);
	--clm-ad-text: var(--clm-text, #28251d);
	--clm-ad-text-muted: var(--clm-text-muted, #7a7974);
	--clm-ad-surface: var(--clm-surface, #f9f8f5);
	--clm-ad-radius: var(--clm-radius, 12px);
	--clm-ad-touch-min: var(--clm-touch-min, 44px);
	--clm-ad-bottom-nav-height: 56px;
	--clm-ad-gap-above-nav: 20px;
}

/* ---------------------------------------------------------------------
   Base ad container
--------------------------------------------------------------------- */

.clm-ad {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
	background: var(--clm-ad-surface);
	border-radius: var(--clm-ad-radius);
	overflow: hidden;
	box-sizing: border-box;
}

.clm-ad * {
	box-sizing: border-box;
}

.clm-ad__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.clm-ad__media {
	display: block;
	width: 100%;
	height: auto;
}

.clm-ad__picture {
	display: block;
	line-height: 0;
}

.clm-ad__disclosure {
	position: absolute;
	top: 6px;
	left: 8px;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: rgba( 0, 0, 0, 0.55 );
	padding: 2px 6px;
	border-radius: 4px;
	pointer-events: none;
}

.clm-ad__content {
	padding: 12px 16px 16px;
}

.clm-ad__headline {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--clm-ad-text);
}

.clm-ad__subhead {
	margin: 0 0 10px;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--clm-ad-text-muted);
}

.clm-ad__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--clm-ad-touch-min);
	padding: 0 20px;
	background: var(--clm-ad-primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Banner ad — full width on mobile, contained on desktop
--------------------------------------------------------------------- */

.clm-ad--banner-static,
.clm-ad--banner-video {
	width: 100%;
}

.clm-ad--banner-static .clm-ad__content,
.clm-ad--banner-video .clm-ad__content {
	position: absolute;
	inset: auto 0 0 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.72 ) 0%, rgba( 0, 0, 0, 0.35 ) 60%, transparent 100% );
	padding: 20px 16px 16px;
}

.clm-ad--banner-static .clm-ad__headline,
.clm-ad--banner-video .clm-ad__headline {
	color: #fff;
}

.clm-ad--banner-static .clm-ad__subhead,
.clm-ad--banner-video .clm-ad__subhead {
	color: rgba( 255, 255, 255, 0.85 );
}

@media ( min-width: 768px ) {
	.clm-ad--banner-static,
	.clm-ad--banner-video {
		max-width: 1200px;
	}
}

/* ---------------------------------------------------------------------
   Video ads — autoplay muted loop playsinline (attrs set in PHP render)
--------------------------------------------------------------------- */

.clm-ad__video {
	aspect-ratio: 4 / 1;
	object-fit: cover;
	background: #000;
}

@media ( max-width: 767px ) {
	.clm-ad__video {
		aspect-ratio: 16 / 9;
	}
}

/* ---------------------------------------------------------------------
   Native card ad
--------------------------------------------------------------------- */

.clm-ad--native-card {
	border: 1px solid rgba( 0, 0, 0, 0.08 );
}

.clm-ad--native-card .clm-ad__image {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ---------------------------------------------------------------------
   CTA button block ad — text-first, minimal chrome
--------------------------------------------------------------------- */

.clm-ad--cta-button {
	padding: 16px;
	text-align: center;
	background: var(--clm-ad-surface);
	border: 1px dashed rgba( 1, 105, 111, 0.35 );
}

.clm-ad--cta-button .clm-ad__cta {
	width: 100%;
}

/* ---------------------------------------------------------------------
   Sidebar square ad
--------------------------------------------------------------------- */

.clm-ad--sidebar-square {
	max-width: 320px;
}

.clm-ad--sidebar-square .clm-ad__image {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ---------------------------------------------------------------------
   Sticky bottom bar (mobile only) — never blocks the primary CTA / the
   site's own mobile bottom nav. Sits above bottom nav with a min 20px gap.
--------------------------------------------------------------------- */

.clm-ad--sticky-bottom-mobile {
	position: fixed;
	left: 8px;
	right: 8px;
	bottom: calc( var(--clm-ad-bottom-nav-height) + var(--clm-ad-gap-above-nav) );
	z-index: 60;
	display: flex;
	align-items: center;
	max-width: 480px;
	margin: 0 auto;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.18 );
	border-radius: var(--clm-ad-radius);
	animation: clm-ad-slide-up 0.3s ease-out;
}

.clm-ad--sticky-bottom-mobile .clm-ad__link {
	display: flex;
	align-items: center;
	width: 100%;
}

.clm-ad--sticky-bottom-mobile .clm-ad__picture,
.clm-ad--sticky-bottom-mobile .clm-ad__image {
	width: 88px;
	height: 88px;
	flex: 0 0 88px;
	object-fit: cover;
}

.clm-ad--sticky-bottom-mobile .clm-ad__content {
	position: static;
	background: none;
	padding: 8px 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.clm-ad--sticky-bottom-mobile .clm-ad__headline {
	color: var(--clm-ad-text);
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.clm-ad--sticky-bottom-mobile .clm-ad__subhead {
	display: none;
}

.clm-ad--sticky-bottom-mobile .clm-ad__cta {
	min-height: 36px;
	padding: 0 14px;
	font-size: 0.8125rem;
}

/* 44px minimum close target, per WCAG/touch-target requirement. */
.clm-ad__close {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--clm-ad-touch-min);
	height: var(--clm-ad-touch-min);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, 0.9 );
	border: none;
	border-radius: 0 var(--clm-ad-radius) 0 var(--clm-ad-radius);
	font-size: 20px;
	line-height: 1;
	color: var(--clm-ad-text);
	cursor: pointer;
	z-index: 2;
}

.clm-ad__close:hover,
.clm-ad__close:focus-visible {
	background: #fff;
}

/* Hide the sticky mobile bar entirely on desktop. */
@media ( min-width: 1024px ) {
	.clm-ad--sticky-bottom-mobile {
		display: none;
	}
}

/* When JS adds this class (user tapped close), remove from flow. */
.clm-ad--dismissed {
	display: none !important;
}

@keyframes clm-ad-slide-up {
	from {
		transform: translateY( 100% );
		opacity: 0;
	}
	to {
		transform: translateY( 0 );
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------
   Inline ad wrappers (inline-mid, inline-bottom, county/city/neighborhood
   inline, classified-inline) — full width mobile, centered/contained desktop.
--------------------------------------------------------------------- */

.clm-ad--inline-mid,
.clm-ad--inline-bottom,
.clm-ad--county-inline,
.clm-ad--city-inline,
.clm-ad--neighborhood-inline,
.clm-ad--classified-inline {
	margin-block: 24px;
}

@media ( min-width: 768px ) {
	.clm-ad--inline-mid,
	.clm-ad--inline-bottom,
	.clm-ad--county-inline,
	.clm-ad--city-inline,
	.clm-ad--neighborhood-inline,
	.clm-ad--classified-inline {
		max-width: 900px;
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------------
   Reduced motion preference
--------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.clm-ad--sticky-bottom-mobile {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
   Print — never print ads
--------------------------------------------------------------------- */

@media print {
	.clm-ad {
		display: none !important;
	}
}