/**
 * Homepage styles.
 *
 * Note: .hm-featured* rules + @keyframes hm-shimmer were extracted to
 * assets/css/components/featured-article.css so the component can be
 * reused on category archives.
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Homepage Two-Column Layout
   ========================================================================== */

.hm-home-columns {
	/* Shared layout dimensions, referenced by every tier below so the
	   breakpoints stay in sync:
	     --hm-home-main-w : the fixed main column at full desktop (>=1350).
	     --hm-home-aside-w: the sidebar width. Equals calc(1350 - 990 - 20) = 340px,
	                        i.e. the 320px sidebar ad creative + breathing room.
	                        This is the hard floor that set the 1350 breakpoint. */
	--hm-home-main-w: 990px;
	--hm-home-aside-w: 340px;
	display: flex;
	gap: 20px;
	margin-top: 15px;
}

.hm-home-columns__main {
	width: var(--hm-home-main-w);
	flex-shrink: 0;
	min-width: 0;
}

.hm-home-columns__sidebar {
	flex: 1;
	min-width: 0;
}

/* Full desktop (>=1350): fixed 990px main + sidebar absolutely positioned
   beside it so the sidebar's height tracks the main column. */
@media (min-width: 1350px) {
	.hm-home-columns {
		position: relative;
	}

	.hm-home-columns__sidebar {
		position: absolute;
		top: 0;
		bottom: 0;
		inset-inline-start: calc(var(--hm-home-main-w) + 20px);
		width: calc(100% - var(--hm-home-main-w) - 20px);
		display: flex;
		flex-direction: column;
	}
}

/* Small desktop / large tablet (1024–1349): KEEP the two columns side by
   side, but let the main column reflow fluidly while the sidebar stays
   pinned to the 340px banner width. This is exactly the band a 14"@150%
   laptop (~1280px effective CSS width) lands in. Without this tier the page
   collapsed to a single stacked column (looking like mobile) while the
   desktop UA still loaded desktop banners — the reported hybrid. Main's
   inner components (featured article, secondary grid) are already fluid and
   carry their own 1024–1349 rules, so they reflow cleanly at the narrower
   main width. At 1349px main resolves to ~957px and at 1350px it snaps to
   the fixed 990px — a seamless transition. */
@media (min-width: 1024px) and (max-width: 1349px) {
	.hm-home-columns {
		flex-direction: row;
		align-items: flex-start;
		padding-inline: 16px;
	}

	.hm-home-columns__main {
		width: auto;
		flex: 1 1 0;
		min-width: 0;
	}

	.hm-home-columns__sidebar {
		flex: 0 0 var(--hm-home-aside-w);
		width: var(--hm-home-aside-w);
		max-width: var(--hm-home-aside-w);
	}
}

/* Tablet / mobile (<=1023): single stacked column — below this width the
   990px main + 340px sidebar can no longer sit side by side. */
@media (max-width: 1023px) {
	.hm-home-columns {
		flex-direction: column;
		padding-inline: 16px;
	}

	.hm-home-columns__main {
		width: 100%;
	}

	.hm-home-columns__sidebar {
		width: 100%;
	}
}

/* Desktop scale-to-fit (see components.css): force the full desktop
   two-column layout regardless of viewport, overriding the responsive tiers
   above — the page renders identically to a wide screen and the CSS zoom set
   by header.php shrinks it to fit. Mirrors the @media (min-width:1350) block.
   .hm-home-columns is also .hm-container, so it is forced to 1350px width by
   the global rule, which makes the sidebar calc resolve to 340px. */
html.hm-fit-desktop .hm-home-columns {
	position: relative;
	flex-direction: row;
	align-items: stretch;
	padding-inline: 0;
}

html.hm-fit-desktop .hm-home-columns__main {
	width: var(--hm-home-main-w);
	flex: 0 0 var(--hm-home-main-w);
	min-width: 0;
}

html.hm-fit-desktop .hm-home-columns__sidebar {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: calc(var(--hm-home-main-w) + 20px);
	width: calc(100% - var(--hm-home-main-w) - 20px);
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   Responsive — Mobile (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {
	/* Match header/footer side padding on mobile */
	.hm-home-columns {
		padding-inline: 10px;
	}
}