/*
 * ChapChap: reserve space for AdSense units (CLS fix)
 * =====================================================================
 * The page source shows an <ins class="adsbygoogle" data-ad-format="link"
 * data-full-width-responsive="true"> block with no width/height and no
 * container height reserved. AdSense's own script decides that unit's
 * actual height only after it loads and picks an ad to show -- until
 * then the browser renders it at 0 height, then everything below it
 * jumps down the moment the ad appears. That's exactly the shape of
 * shift PageSpeed's Cumulative Layout Shift metric penalizes, and
 * responsive AdSense units are the single most common cause of it
 * sitewide, not just on ChapChap.
 *
 * This can only be an approximation -- the real fix is a fixed-size ad
 * unit (Google's own recommendation for avoiding CLS), which is an
 * AdSense dashboard setting, not something a theme can control. This
 * reserves a reasonable minimum height so the page doesn't start at
 * zero and jump the full ad height in one go; it narrows the shift, it
 * doesn't guarantee eliminating it if the ad ends up taller than this.
 */
.adsbygoogle,
ins.adsbygoogle {
	min-height: 100px;
	display: block;
}
@media (min-width: 768px) {
	.adsbygoogle,
	ins.adsbygoogle {
		min-height: 120px;
	}
}

/*
 * ROUND 33: the dominant CLS culprit, confirmed directly from
 * PageSpeed's own "Layout shift culprits" breakdown -- the site logo
 * (alt="ChapChap Market"), used as a fallback thumbnail wherever an ad
 * has no photo of its own, has no width/height or aspect-ratio
 * reserved. On the All Ads page that one image alone accounted for
 * 0.259 of the page's 0.363 total CLS -- roughly 71% of the entire
 * problem on that page came from this single unsized image.
 * Some instances of it DO carry width="626" height="399" attributes
 * (visible in the single-ad-page report) and were still flagged --
 * likely because something else on the page (a parent-theme
 * responsive-image rule) strips the effect of those attributes at
 * render time. Setting aspect-ratio directly in CSS reserves the
 * space regardless of whether the HTML attributes are honored,
 * closing that gap either way. Matched by alt text rather than class,
 * since its class ("img-responsive") is too generic/widely-reused
 * elsewhere on the site to safely target on its own.
 */
/*
 * ROUND 33 UPDATE: the real fix now lives in the parent theme --
 * templates/nav-bar.php and templates/top-bar.php were patched to
 * output real width/height attributes on the logo (via a new cached
 * classiera_logo_dimensions_attr() helper in the parent's
 * functions.php), which is the correct fix and doesn't depend on the
 * site name staying "ChapChap Market" forever. This CSS rule stays in
 * as a safety net -- if the parent theme ever gets updated/reset and
 * loses that patch, the page still won't regress on this specific
 * issue, since aspect-ratio here reserves the same space independent
 * of whatever HTML attributes are or aren't present.
 */
img[alt="ChapChap Market"] {
	aspect-ratio: 626 / 399;
	width: 100%;
	height: auto;
}