/**
 * WCP Ad Zone — Frontend styles
 * Used by wcp/ad-zone block and wcp_render_ad_zone() helper.
 */

.wcp-ad-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 24px auto;
	max-width: 100%;
}

.wcp-ad-zone .wcp-ad-label {
	display: block;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #A8A096;
	text-align: center;
}

.wcp-ad-zone__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
}

.wcp-ad-zone__link {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	text-decoration: none;
	transition: opacity 0.18s ease;
}
.wcp-ad-zone__link:hover {
	opacity: 0.92;
}

.wcp-ad-zone__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	border-radius: 4px;
	object-fit: contain;
}

/* Editor preview placeholder. */
.wcp-ad-zone--editor-preview {
	border: 2px dashed #C9C2B5;
	background: #F9F7F4;
	padding: 24px;
	border-radius: 6px;
}
.wcp-ad-zone__placeholder {
	font-family: 'Bodoni Moda', Georgia, serif;
	color: #2B2725;
	text-align: center;
}
.wcp-ad-zone__placeholder small {
	font-family: 'Crimson Text', Georgia, serif;
	font-style: italic;
	color: #6E665D;
}

/* Mobile sticky variant */
.wcp-ad-zone--mobile_sticky {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	margin: 0;
	padding: 6px 8px 8px;
	background: rgba(249, 247, 244, 0.96);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-top: 1px solid rgba(196, 165, 82, 0.4);
	box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
	display: none;
}
.wcp-ad-zone--mobile_sticky .wcp-ad-label {
	font-size: 9px;
}
.wcp-ad-zone--mobile_sticky .wcp-ad-zone__img {
	max-height: 50px;
	width: auto;
}
@media (max-width: 1023px) {
	.wcp-ad-zone--mobile_sticky {
		display: flex;
	}
	body.wcp-has-mobile-sticky-ad {
		padding-bottom: 70px;
	}
}

/* ----- Per-zone size constraints -------------------------------------- */
/* Each zone clamps the image to the IAB intended display size. The image
   scales down proportionally to fit within max-width × max-height, even if
   the uploaded source is huge (@2x or @3x retina exports). */

/* Header leaderboard 728x90 */
.wcp-ad-zone--header_leaderboard .wcp-ad-zone__inner,
.wcp-ad-zone--header_leaderboard .wcp-ad-zone__link,
.wcp-ad-zone--footer_leaderboard .wcp-ad-zone__inner,
.wcp-ad-zone--footer_leaderboard .wcp-ad-zone__link {
	max-width: 728px;
}
.wcp-ad-zone--header_leaderboard .wcp-ad-zone__img,
.wcp-ad-zone--footer_leaderboard .wcp-ad-zone__img {
	max-width: 728px;
	max-height: 90px;
}

/* Mobile sticky 320x50 — img sized inside the fixed sticky bar */
.wcp-ad-zone--mobile_sticky .wcp-ad-zone__img {
	max-width: 320px;
	max-height: 50px;
}

/* Sidebar half page 300x600 */
.wcp-ad-zone--sidebar_halfpage .wcp-ad-zone__inner,
.wcp-ad-zone--sidebar_halfpage .wcp-ad-zone__link {
	max-width: 300px;
}
.wcp-ad-zone--sidebar_halfpage .wcp-ad-zone__img {
	max-width: 300px;
	max-height: 600px;
}

/* Sidebar rectangle 300x250 (compact sidebar slot used under Most Popular) */
.wcp-ad-zone--sidebar_rectangle .wcp-ad-zone__inner,
.wcp-ad-zone--sidebar_rectangle .wcp-ad-zone__link {
	max-width: 300px;
}
.wcp-ad-zone--sidebar_rectangle .wcp-ad-zone__img {
	max-width: 300px;
	max-height: 250px;
}

/* In-content rectangle 300x250 (Medium Rectangle, IAB MREC) */
.wcp-ad-zone--in_content_rectangle .wcp-ad-zone__inner,
.wcp-ad-zone--in_content_rectangle .wcp-ad-zone__link {
	max-width: 300px;
}
.wcp-ad-zone--in_content_rectangle .wcp-ad-zone__img {
	max-width: 300px;
	max-height: 250px;
}