/**
 * Category posts section — homepage.
 *
 * Figma layout (1325px, RTL):
 *   Header:  dots + title + underline + category-link button
 *   Subcats: pill links
 *   Content: [sidebar 320px RIGHT] [center 655px] [ad 320px LEFT]
 *   Bottom:  wide banner in white rounded container
 *
 * Cards use hm-card-md (article-card.css) and hm-vod-card (vod-list.css).
 * Section-specific overrides (orange accent, border-radius) below.
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Section Wrapper
   ========================================================================== */

.hm-catposts {
	margin-top: var(--hm-space-section);
	content-visibility: auto;
	contain-intrinsic-size: auto 800px;
}

/* ==========================================================================
   Header — dots + title + line + button
   Figma: flex row, gap 15px, items-end (bottom-aligned)
   ========================================================================== */

.hm-catposts__header {
	display: flex;
	align-items: flex-end; /* line + button align to bottom of title */
	gap: 15px;
	margin-bottom: 15px;
}

/* Single orange dot (before title in RTL = first in DOM = rightmost) */
.hm-catposts__dot {
	flex-shrink: 0;
	align-self: center; /* stays vertically centered with the title */
}

/* Category title — Black 32px */
.hm-catposts__title {
	font-family: var(--hm-font-primary);
	font-size: 32px;
	font-weight: 900;
	line-height: 1;
	color: var(--hm-color-primary);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Underline — stretches between title and button, sits at baseline */
.hm-catposts__line {
	flex: 1;
	min-width: 0;
	border-bottom: 0.6px solid var(--hm-color-primary);
	opacity: 0.25;
	margin-bottom: 4px; /* align with title text baseline */
}

/* Category page link button — orange pill */
.hm-catposts__link-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 5px 25px;
	background-color: var(--hm-catposts-accent);
	border-radius: 6px;
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 16px;
	line-height: 22px;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity var(--hm-transition-fast);
}

.hm-catposts__link-btn:hover {
	opacity: 0.85;
	color: #ffffff;
}

/* Desktop: show text, hide icon */
.hm-catposts__link-btn-icon {
	display: none;
}

/* ==========================================================================
   Sub-categories — pill links
   Figma: flex row, gap 15px, items-center
   Inactive: border 1px solid #212121, opacity 50%, rounded 6px
   Active:   bg orange, white text
   ========================================================================== */

.hm-catposts__subcats {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-bottom: 15px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	cursor: grab;
}

.hm-catposts__subcats::-webkit-scrollbar {
	display: none;
}

.hm-catposts__subcats.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.hm-catposts__subcat {
	display: inline-flex;
	align-items: center;
	padding: 5px 23px;
	border: 1px solid var(--hm-color-primary);
	border-radius: 6px;
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 16px;
	line-height: 22px;
	color: var(--hm-color-primary);
	/* a11y: 0.5 gave ~3.1:1 (fails WCAG AA). 0.65 → ~4.9:1 on #F3F3F3 bg,
	   keeps the muted look. Hover/active still reset to opacity:1. */
	opacity: 0.65;
	text-decoration: none;
	white-space: nowrap;
	transition: all var(--hm-transition-fast);
}

.hm-catposts__subcat:hover {
	background-color: var(--hm-catposts-accent);
	color: #ffffff;
	border-color: var(--hm-catposts-accent);
	opacity: 1;
}

/* Active state — use on category archive pages */
.hm-catposts__subcat--active {
	background-color: var(--hm-catposts-accent);
	color: #ffffff;
	border-color: var(--hm-catposts-accent);
	opacity: 1;
}

/* ==========================================================================
   Content — 3-column layout
   RTL: [sidebar RIGHT] [center] [ad LEFT]
   Figma: flex row, gap 15px, items-start, 1325px wide
   ========================================================================== */

.hm-catposts__content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 15px;
}

/* ---------- RIGHT column: sidebar with small cards + banner ---------- */

.hm-catposts__sidebar {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 320px;
}

/* Sidebar banner (320×100) */
.hm-catposts__sidebar-banner {
	width: 320px;
	height: 100px;
	border-radius: 16px;
	overflow: hidden;
}

.hm-catposts__sidebar-banner .aso-zone,
.hm-catposts__sidebar-banner .hm-ad-lazy {
	display: block;
	width: 100%;
	min-height: 100px;
}

/* ---------- CENTER column: large cards + small cards ---------- */

.hm-catposts__center {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Top row: 2 large hm-card-md cards — equal width */
.hm-catposts__center-top {
	display: flex;
	gap: 15px;
}

.hm-catposts__center-top .hm-card-md {
	flex: 1;
	min-width: 0;
}

/* Bottom row: 2 small horizontal cards side by side */
.hm-catposts__center-bottom {
	display: flex;
	gap: 15px;
}

/* Cards in center-bottom should fill equally */
.hm-catposts__center-bottom .hm-vod-card {
	flex: 1;
	min-width: 0;
}

/* ---------- LEFT column: sticky ad banner ---------- */

.hm-catposts__ad-left {
	width: 320px;
	height: 250px;
	flex-shrink: 0;
	position: sticky;
	top: 100px;
	border-radius: 16px;
	overflow: hidden;
}

.hm-catposts__ad-left .aso-zone,
.hm-catposts__ad-left .hm-ad-lazy {
	display: block;
	width: 100%;
	min-height: 250px;
}

/* ==========================================================================
   Bottom Banner — white rounded container with centered ad
   Figma: white bg, rounded 20px, padding 21px 100px
   ========================================================================== */

.hm-catposts__bottom-ad {
	margin-top: 15px;
	background-color: var(--hm-color-bg-alt);
	border-radius: var(--hm-radius-xl);
	padding: 21px 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hm-catposts__bottom-ad .aso-zone,
.hm-catposts__bottom-ad .hm-ad-lazy {
	display: block;
	width: 100%;
	max-width: 1140px;
	min-height: 100px;
}

/* ==========================================================================
   Section-specific overrides — orange accent instead of red
   ========================================================================== */

/* Large card badge: section accent color */
.hm-catposts .hm-card-md__badge {
	color: var(--hm-catposts-accent);
	border-inline-start-color: var(--hm-catposts-accent);
}

/* Sponsored ad slot: takes same flex space as hm-card-md in center-top */
.hm-catposts__sponsored-slot {
	flex: 1;
	min-width: 0;
	width: 0;
}

/* Promoted card dots: inherit section accent via currentColor */
.hm-catposts .hm-card-md--promoted .hm-card-md__promoted-dot circle,
.hm-catposts .hm-card-md--promoted .hm-card-md__category-dot ellipse {
	fill: var(--hm-catposts-accent);
}

/* Small horizontal card badge: orange */
.hm-catposts .hm-vod-card--light .hm-vod-card__badge {
	border-inline-start-color: var(--hm-catposts-accent);
	color: var(--hm-catposts-accent);
}

/* Small card border-radius: 16px (Figma) instead of 8px (vod default) */
.hm-catposts .hm-vod-card {
	border-radius: 16px;
}

.hm-catposts .hm-vod-card__media {
	border-start-start-radius: 16px;
	border-end-start-radius: 16px;
}

/* Small card meta: 12px (Figma) instead of 10px (vod default) */
.hm-catposts .hm-vod-card__meta {
	font-size: 12px;
}

/* Category badge dot: orange instead of red */
.hm-catposts .hm-card-md__category-dot ellipse,
.hm-catposts .hm-featured__category-dot ellipse {
	fill: var(--hm-catposts-accent);
}

/* Small card promoted badge — on image top-right */
.hm-catposts .hm-vod-card__promoted {
	position: absolute;
	top: 4px;
	inset-inline-start: 4px; /* physical RIGHT in RTL = top-right of image */
	padding: 0 4px;
	background-color: rgba(255, 255, 255, 0.35);
	border-radius: 100px;
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 8px;
	line-height: 13px;
	color: var(--hm-color-primary);
	text-align: center;
	white-space: nowrap;
	z-index: 2;
}

/* ==========================================================================
   Responsive — Tablet (768px – 1349px)
   ========================================================================== */

@media (max-width: 1349px) {
	/* Stack content vertically */
	.hm-catposts__content {
		flex-wrap: wrap;
	}

	/* Center takes full width */
	.hm-catposts__center {
		width: 100%;
		order: -1; /* large cards appear first on tablet */
	}

	.hm-catposts__center-top .hm-card-md {
		min-width: 280px;
	}

	/* Sidebar becomes horizontal row */
	.hm-catposts__sidebar {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.hm-catposts__sidebar .hm-vod-card {
		flex: 1;
		min-width: 280px;
	}

	.hm-catposts__sidebar-banner {
		flex: 1;
		min-width: 280px;
	}

	/* Ad below content */
	.hm-catposts__ad-left {
		position: static;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
	}

	.hm-catposts__ad-left .aso-zone,
	.hm-catposts__ad-left .hm-ad-lazy {
		width: 320px;
		min-height: 250px;
	}

	/* Bottom banner less horizontal padding */
	.hm-catposts__bottom-ad {
		padding: 21px 40px;
	}
}

/* ==========================================================================
   Responsive — Mobile (<768px)
   ========================================================================== */

@media (max-width: 767px) {
	.hm-catposts {
		margin-top: var(--hm-space-2xl);
		overflow: hidden; /* prevent horizontal scroll from subcats */
		padding-inline: 10px; /* side margins on mobile */
	}

	/* ---- Header ---- */
	.hm-catposts__title {
		font-size: 32px;
	}

	/* Button: show chevron icon, hide text */
	.hm-catposts__link-btn {
		padding: 5px 10px;
	}

	.hm-catposts__link-btn-text {
		display: none;
	}

	.hm-catposts__link-btn-icon {
		display: block;
	}

	/* Sub-categories: tighter gap */
	.hm-catposts__subcats {
		gap: 10px;
	}

	/* ---- Content: single column, center first ---- */
	.hm-catposts__content {
		flex-direction: column;
		gap: 15px;
	}

	/* Center appears first (above sidebar) */
	.hm-catposts__center {
		width: 100%;
		order: -1;
	}

	/* Stack center-top vertically: featured full-width, sponsored slot below */
	.hm-catposts__center-top {
		flex-direction: column;
	}

	/* Hide second large card on mobile — but NOT the ad inside sponsored-slot */
	.hm-catposts__center-top > .hm-card-md:not(.hm-catposts__featured-card) {
		display: none;
	}

	/* Sponsored slot: full width on mobile */
	.hm-catposts__sponsored-slot {
		width: 100%;
	}

	.hm-catposts__center-bottom {
		display: none;
	}

	/* ---- Featured card: force vertical (desktop-style) on mobile ---- */
	.hm-catposts__featured-card.hm-card-md {
		flex-direction: column;
		height: auto;
		padding-bottom: 16px;
		background-color: var(--hm-color-bg-alt);
		border-radius: var(--hm-radius-xl);
	}

	.hm-catposts__featured-card .hm-card-md__media {
		width: 100%;
		height: auto;
		aspect-ratio: 2 / 1;
		border-radius: 0;
		border-start-start-radius: var(--hm-radius-xl);
		border-start-end-radius: var(--hm-radius-xl);
	}

	.hm-catposts__featured-card .hm-card-md__content {
		padding: 0 13px;
		gap: 7px;
	}

	.hm-catposts__featured-card .hm-card-md__title {
		font-size: 20px;
		line-height: 20px;
	}

	.hm-catposts__featured-card .hm-card-md__excerpt {
		display: -webkit-box;
	}

	/* ---- Sidebar: full width, stacked ---- */
	.hm-catposts__sidebar {
		width: 100%;
		flex-direction: column;
	}

	/* Small cards match hm-card-md mobile proportions */
	.hm-catposts .hm-vod-card {
		width: 100%;
		height: 110px;
		border-radius: 10px;
	}

	.hm-catposts .hm-vod-card__media {
		width: 130px;
		height: 110px;
		border-radius: 0;                         /* no rounding — image touches card edge */
		border-start-start-radius: 10px;          /* only round the card's outer corners */
		border-end-start-radius: 10px;
		overflow: hidden;
	}

	.hm-catposts .hm-vod-card__media img,
	.hm-catposts .hm-vod-card__img {
		width: 100% !important;
		height: 100% !important;
		max-width: none;                          /* override global img reset */
		object-fit: cover;
		display: block;
	}

	.hm-catposts .hm-vod-card__content {
		padding-block: 8px; /* top+bottom spacing inside card */
	}

	.hm-catposts .hm-vod-card__title {
		font-size: 17px;
		line-height: 21px;
	}

	.hm-catposts .hm-vod-card__meta {
		font-size: 13px;
	}

	/* Sidebar banner: push to end (below all cards) + centered */
	.hm-catposts__sidebar-banner {
		order: 99;
		width: 320px;
		max-width: 100%;
		align-self: center;
	}

	/* ---- Hide banners not needed on mobile ---- */
	.hm-catposts__bottom-ad {
		display: none;
	}
}