/**
 * Placeholders - Frontend and Editor Styles
 */

.placeholder-ad {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ccc;
	box-sizing: border-box;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
	margin: 20px auto;
	position: relative;
	overflow: hidden;
}

.placeholder-ad-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.placeholder-ad-label {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.placeholder-ad-dimensions {
	font-size: 14px;
	opacity: 0.7;
	font-weight: 400;
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {

	.placeholder-ad {
		max-width: 100%;
	}
}

/* Specific adjustments for tall ads */
.placeholder-ad-wide-skyscraper,
.placeholder-ad-half-page,
.placeholder-ad-vertical-rectangle,
.placeholder-ad-portrait {
	margin: 20px 0;
}

/* Specific adjustments for small ads */
.placeholder-ad-small-square,
.placeholder-ad-small-rectangle,
.placeholder-ad-mobile-banner {
	border-width: 1px;
}

.placeholder-ad-small-square .placeholder-ad-label,
.placeholder-ad-small-rectangle .placeholder-ad-label,
.placeholder-ad-mobile-banner .placeholder-ad-label {
	font-size: 12px;
}

.placeholder-ad-small-square .placeholder-ad-dimensions,
.placeholder-ad-small-rectangle .placeholder-ad-dimensions,
.placeholder-ad-mobile-banner .placeholder-ad-dimensions {
	font-size: 10px;
}

/* Responsive Size Mapping (Google Ad Manager style) */
.placeholder-ad-responsive-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto;
}

.placeholder-ad-responsive-container .placeholder-ad {
	display: none; /* Hide all by default */
}

/* Desktop (> 1024px) - Always show desktop size on large screens */
@media (min-width: 1025px) {

	.placeholder-ad-responsive-container .placeholder-ad-size-desktop {
		display: flex;
	}
}

/* Tablet (768px - 1024px) - Show tablet size, or desktop as fallback */
@media (min-width: 768px) and (max-width: 1024px) {

	.placeholder-ad-responsive-container .placeholder-ad-size-tablet {
		display: flex;
	}

	/* Show desktop size if no tablet size is provided */
	.placeholder-ad-responsive-container .placeholder-ad-size-desktop {
		display: flex;
	}

	/* Hide desktop if tablet exists (higher specificity via extra class) */
	.placeholder-ad-responsive-container .placeholder-ad-size-tablet ~ .placeholder-ad-size-desktop {
		display: none;
	}
}

/* Mobile (< 768px) - Show mobile size, or desktop as fallback */
@media (max-width: 767px) {

	.placeholder-ad-responsive-container .placeholder-ad-size-mobile {
		display: flex;
	}

	/* Show desktop size if no mobile size is provided */
	.placeholder-ad-responsive-container .placeholder-ad-size-desktop {
		display: flex;
	}

	/* Hide desktop if mobile exists */
	.placeholder-ad-responsive-container .placeholder-ad-size-mobile ~ .placeholder-ad-size-desktop,
	.placeholder-ad-responsive-container .placeholder-ad-size-mobile ~ .placeholder-ad-size-tablet {
		display: none;
	}
}