/**
 * Archive — paginated posts grid + Figma-styled pagination.
 *
 * Grid: 2 × 6 = 12 cards, full width of the archive main column.
 * Cards reuse hm-card-md (article-card.css), scaled up via aspect-ratio
 * on the media area so the wider cells get proportionally taller images.
 *
 * Pagination: Figma node 516:22431.
 *   - 36×29 white pill arrow buttons, gap 8
 *   - Number group: white pill, gap 30, px 12, py 6, border-radius 100
 *   - Active number: #404040; inactive: #000000; Pompei Block FS Light 14/21
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Grid container
   ========================================================================== */

.hm-archive-grid-wrap {
	margin-top: 22px;
	scroll-margin-top: var(--hm-header-height, 90px); /* leaves room under sticky header on scroll */
	position: relative;
}

.hm-archive-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

/* Skip layout/paint of off-screen cards. With infinite scroll the grid can
   accumulate hundreds of cards; content-visibility: auto lets the browser
   skip rendering work for any card scrolled out of view, keeping scrolling
   smooth and memory low. The intrinsic-size hint reserves space so the
   scrollbar doesn't jump as cards come in/out of the render path. */
.hm-archive-grid > .hm-card-md {
	content-visibility: auto;
	contain-intrinsic-size: auto 420px;
}

/* Spacing between the featured hero (page 1 only) and the grid below.
   On pages 2+ the .hm-featured isn't rendered, so this rule is a no-op. */
.hm-archive-grid-wrap > .hm-featured + .hm-archive-grid {
	margin-top: 22px;
}

.hm-archive-grid > .hm-card-md .hm-card-md__media {
	height: 200px;
}

/* ──────────────────────────────────────────────────────────────────────
   Sponsored-cell layout fix.

   After the ad server runs, the DOM looks like:
     .hm-card-md--sponsored-ad (flex column, our card)
       └─ <ins class="ins-zone">           ← ad-server wrapper
            ├─ .hm-card-md__media          ← ad's image area
            └─ .hm-card-md__content        ← ad's badge / title / meta

   The <ins> sits between the flex parent (.hm-card-md) and the flex
   children (__media + __content), breaking the flex parent-child
   relationship that .hm-card-md__content { flex: 1 } depends on. With
   `display: contents`, <ins> becomes layout-transparent — the card
   directly parents __media and __content, and the layout matches the
   home-grid case 1:1. Widely supported (Chrome 65+, Firefox 37+, Safari
   12+).
   ────────────────────────────────────────────────────────────────────── */
.hm-archive-grid > .hm-card-md--sponsored-ad > ins {
	display: contents;
}

/* ==========================================================================
   In-grid sponsored-content cells (zone 161298, ins-zone) — one after every
   3 posts. The ad server (code.min.js) replaces each <ins> with a full
   article-shaped sponsored card whose markup mirrors the regular hm-card-md
   structure (image + category + before-title + title + excerpt + meta).
   No overrides here — the sponsored card uses the SAME base .hm-card-md
   styling as a real post card, so the ad server's image/text/badge slots
   land exactly where they would on the home grid.
   ========================================================================== */

/* ==========================================================================
   Infinite-scroll sentinel
   --------------------------------------------------------------------------
   Last child of .hm-archive-grid. IntersectionObserver (archive-posts-grid.js)
   watches it; when it nears the viewport, the next page is fetched and the
   new cards are inserted before this element.

   Spans the full row so it doesn't compete for a grid cell with real cards.
   Skeleton state shows a subtle shimmer while a batch is loading.
   ========================================================================== */
.hm-archive-grid__sentinel {
	grid-column: 1 / -1;
	min-height: 1px;
	margin-top: 8px;
}

.hm-archive-grid__sentinel--loading::after {
	content: '';
	display: block;
	height: 160px;
	border-radius: 12px;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.04) 0%,
		rgba(0, 0, 0, 0.08) 50%,
		rgba(0, 0, 0, 0.04) 100%
	);
	background-size: 200% 100%;
	/* Cap iterations so paint loop stops if JS never removes the skeleton class. */
	animation: hm-archive-skeleton-shimmer 1.4s ease-in-out 13;
}

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

@media (prefers-reduced-motion: reduce) {
	.hm-archive-grid__skeleton-card::after {
		animation: none;
	}
}

/* ==========================================================================
   Pagination — matches Figma node 516:22431 exactly
   --------------------------------------------------------------------------
   Hidden when JS is active (infinite scroll takes over). Stays in DOM for
   SEO crawlers and as a no-JS fallback — search engines still see real
   /page/N/ links to crawl deep archives.
   ========================================================================== */

.hm-archive-grid-wrap--js-active .hm-archive-pagination {
	display: none;
}

.hm-archive-pagination {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 30px;
	padding-block: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

/* Arrow buttons (« ‹ › ») — 36×29 white pill */
.hm-archive-pagination__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 29px;
	border-radius: 14.5px;
	background-color: #ffffff;
	transition: background-color var(--hm-transition-fast), opacity var(--hm-transition-fast);
	text-decoration: none;
}

.hm-archive-pagination__btn:hover {
	background-color: #f3f3f3;
}

.hm-archive-pagination__btn svg {
	display: block;
	width: 36px;
	height: 29px;
}

/* In RTL, the SVG chevrons are drawn pointing LEFT. Flip ONLY the right-
   side arrows (« first / ‹ prev — visually on the right end in RTL) so
   they point right toward "back / lower pages". The left-side arrows
   (› next / » last) keep their natural left orientation, which represents
   "forward / higher pages" in RTL reading flow. */
[dir="rtl"] .hm-archive-pagination__btn--first svg,
[dir="rtl"] .hm-archive-pagination__btn--prev svg {
	transform: scaleX(-1);
}

/* Number group — single white pill containing all visible page numbers */
.hm-archive-pagination__numbers {
	display: inline-flex;
	align-items: center;
	gap: 30px;
	background-color: #ffffff;
	border-radius: 100px;
	padding: 6px 12px;
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 14px;
	line-height: 21px;
	white-space: nowrap;
}

/* Inactive page number */
.hm-archive-pagination__num {
	color: #000000;
	text-decoration: none;
	transition: opacity var(--hm-transition-fast);
}

.hm-archive-pagination__num:hover {
	opacity: 0.7;
	color: #000000;
}

/* Active page — accent-red rounded pill with white text. */
.hm-archive-pagination__num--active {
	background-color: var(--hm-color-accent);
	color: #ffffff;
	border-radius: 100px;
	padding: 2px 10px;
	pointer-events: none;
}

.hm-archive-pagination__num--active:hover {
	color: #ffffff;
}

/* Items outside the 4-page mobile window are visible on desktop and
   hidden on small viewports — see the mobile media query below. */

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
	.hm-archive-grid {
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.hm-archive-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Mobile cards use horizontal layout (set in article-card.css) — much
	   shorter than desktop. Smaller intrinsic-size hint keeps off-screen
	   space reservation accurate. */
	.hm-archive-grid > .hm-card-md {
		contain-intrinsic-size: auto 200px;
	}

	/* Mobile: only the 4-page window is visible. */
	.hm-archive-pagination__num--mobile-hidden {
		display: none;
	}

	/* Pagination — slightly tighter on mobile */
	.hm-archive-pagination__numbers {
		gap: 18px;
		padding: 6px 10px;
	}
}

@media (max-width: 480px) {
	.hm-archive-pagination__numbers {
		gap: 12px;
	}
}