/**
 * Sidebar posts list — flat list of cards + interspersed ad banners.
 *
 * Shared between:
 *  - Single post page (latest posts)
 *  - Category archive page (random posts from the last 2 days)
 *
 * Sticky to viewport, trimmed by JS to fit the available height.
 *
 * @package Hamechadesh
 */

.hm-single-sidebar-posts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: sticky;
	/* Stick BELOW the sticky header so the first card isn't covered.
	   --hm-header-height is set by navbar.js; 90px is a sensible fallback. */
	top: calc(var(--hm-header-height, 90px) + 10px);
}

.hm-single-sidebar-posts__card[hidden],
.hm-single-sidebar-posts__banner[hidden] {
	display: none;
}

/* Banner spacing within the post list */
.hm-single-sidebar-posts .hm-sidebar-banner {
	margin-top: 0;
}

/* ==========================================================================
   Banner Shimmer — loading skeleton for ad banners.
   The ad script (code.min.js) replaces the <ins class="aso-zone"> with the
   real ad; the JS observer then strips the --loading class.
   ========================================================================== */

@keyframes hm-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* Banner wrappers are sized to the EXACT ad-creative dimensions and clip
   any oversized content. This guarantees the rendered banner height
   matches the trim-to-fit JS calculation (data-banner-height) so the
   banner never overlaps the posts below it. */
.hm-single-columns__sidebar .hm-featured__banner {
	width: 100%;
	height: 100px;          /* default: 320×100 banners */
	overflow: hidden;
	position: relative;
}

/* 300×250 ("tall") variant — applied to BOTH loading skeleton and the
   loaded ad. Higher specificity than the base rule above. */
.hm-single-columns__sidebar .hm-featured__banner.hm-single-sidebar-posts__banner--tall {
	height: 250px;
}

/* Loading-state shimmer — the height is inherited from the rules above.
 * Iteration cap ≈ 18 s so a wedged ad-script can't keep the paint loop
 * spinning forever. JS removes the .--loading class within ~3 s normally. */
.hm-single-columns__sidebar .hm-featured__banner--loading {
	border-radius: var(--hm-radius-md);
	background: linear-gradient(90deg, #e0e0e0 25%, #efefef 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	animation: hm-shimmer 1.5s ease-in-out 12;
}

.hm-single-columns__sidebar .hm-featured__banner--loading > * {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hm-single-columns__sidebar .hm-featured__banner--loading {
		animation: none;
	}
}