/*
 * ads.css — containers and sizes for AdSense units (see inc/ads.php)
 *
 * Display units use Google's "exact size per screen width" method: the <ins>
 * has no data-ad-format, and these rules set its size. Space is reserved up
 * front, so nothing on the page jumps when an ad loads.
 *
 * @package Swatching
 */

.sw-ad {
	clear: both;
	width: 100%;
	margin: 40px auto;
	text-align: center;
}

.sw-ad__label {
	display: block;
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7c8090;
	margin-bottom: 8px;
}

.sw-ad__slot { display: flex; justify-content: center; }

/* ---------- Sizes ---------- */

/* Banner: 300×250 on phones and small tablets, 728×90 once there's room */
.sw-ins--banner { display: inline-block; width: 300px; height: 250px; }
.sw-ad--banner .sw-ad__slot { min-height: 250px; }

@media (min-width: 840px) {
	.sw-ins--banner { width: 728px; height: 90px; }
	.sw-ad--banner .sw-ad__slot { min-height: 90px; }
}

/* Slim banner: 320×100 on phones (sits above a tool or game), 728×90 once there's room */
.sw-ins--banner-slim { display: inline-block; width: 320px; height: 100px; }
.sw-ad--banner-slim .sw-ad__slot { min-height: 100px; }

@media (min-width: 840px) {
	.sw-ins--banner-slim { width: 728px; height: 90px; }
	.sw-ad--banner-slim .sw-ad__slot { min-height: 90px; }
}

/* Rectangle: 300×250 everywhere */
.sw-ins--rect { display: inline-block; width: 300px; height: 250px; }
.sw-ad--rect .sw-ad__slot { min-height: 250px; }

/* In-article: fluid; Google sizes it to the column */
.sw-ad--in-article .sw-ad__slot { display: block; min-height: 200px; }

/* When Google has no ad to show, collapse the slot and its label instead of
   leaving an empty box (Google sets data-ad-status="unfilled" on the <ins>). */
.sw-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* ---------- Admin-only placeholder ---------- */

.sw-ad__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 728px;
	min-height: inherit;
	padding: 16px;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	font-family: 'Figtree', system-ui, sans-serif;
	font-size: 0.85rem;
	color: #7c8090;
}

.sw-ad--rect .sw-ad__placeholder { max-width: 300px; }

/* ---------- Learn post sidebar ---------- */

/* Wrapper column: the ad sits on top and scrolls away; the TOC below stays sticky. */
.kb-side {
	align-self: stretch;
	min-width: 0;
}

.kb-side .sw-ad { margin: 0 0 1.5rem; }

/* On phones the sidebar drops below the article — hide the ad there so it
   doesn't stack on top of the end-of-article ad. Hidden units aren't requested. */
@media (max-width: 900px) {
	.kb-side .sw-ad { display: none; }
}

/* Very small phones (under 360px): a 300- or 320px-wide ad doesn't fit inside the
   page's side padding, so let the ad use the full screen width. */
@media (max-width: 359px) {
	.sw-ad {
		width: calc(100% + 32px);
		margin-left: -16px !important;
		margin-right: -16px !important;
	}
}

@media (max-width: 600px) {
	.sw-ad { margin: 32px auto; }
}