/**
 * Featured Article — large hero card with image slider, title, excerpt, meta.
 *
 * Used on the homepage (top of the main column) and on category archives
 * (below the top banner, showing the latest post in the current category).
 *
 * The shimmer animation + banner-base styles also live here so they are
 * available wherever this component is loaded.
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Skeleton Shimmer Animation
   ========================================================================== */

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

/*
 * Cap shimmer iterations: at 1.5s × 12 iterations = 18s, comfortably longer
 * than the 3s JS fallback window for ad-system completion. Beyond that the
 * paint loop stops, sparing CPU when an ad never loads at all (adblock,
 * blocked third-party network, etc.) — without this cap the shimmer could
 * paint forever in the background.
 */
.hm-featured__banner--loading,
.hm-featured__card--skeleton,
.hm-featured__card--skeleton * {
	animation-iteration-count: 12;
}

/* Honor user "reduced motion" preference — disables shimmer entirely. */
@media (prefers-reduced-motion: reduce) {
	.hm-featured__banner--loading,
	.hm-featured__card--skeleton,
	.hm-featured__card--skeleton * {
		animation: none !important;
	}
}

/* ==========================================================================
   Featured Article Section
   ========================================================================== */

.hm-featured {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: center;
	width: 100%;
}

/* ---------- Banner Ad ---------- */

.hm-featured__banner {
	width: 100%;
	max-width: 970px;
	min-height: 100px;
	position: relative;
}

.hm-featured__banner--loading {
	min-height: 250px;
	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 infinite;
}

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

/* Desktop / Mobile banner visibility */
.hm-featured__banner--mobile {
	display: none;
}

@media (max-width: 767px) {
	.hm-featured__banner--desktop {
		display: none;
	}

	.hm-featured__banner--mobile {
		display: block;
		max-width: 320px;
	}

	.hm-featured__banner--mobile.hm-featured__banner--loading {
		min-height: 100px;
	}
}

/* ---------- Featured Card ---------- */

.hm-featured__card {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	height: 500px;
	padding-inline-end: 24px;
	background-color: var(--hm-color-primary);
	border-radius: var(--hm-radius-xl);
	overflow: hidden;
	position: relative;
}

/* Stretched card link — covers entire card surface */

.hm-featured__card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Lift interactive children above the overlay */
.hm-featured__slider-bar,
.hm-featured__category {
	position: relative;
	z-index: 2;
}

/* ---------- Media / Slider Area ---------- */

.hm-featured__media {
	flex-shrink: 0;
	width: 644px;
	height: 100%;
	border-start-start-radius: var(--hm-radius-xl);
	border-end-start-radius: var(--hm-radius-xl);
	overflow: hidden;
	position: relative;
	background-color: #2a2a2a;
}

/* ---------- Slider ---------- */

.hm-featured__slider {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.hm-featured__slider-track {
	display: flex;
	height: 100%;
	transform: translateX(calc(var(--hm-slide, 0) * 100%));
	transition: transform var(--hm-transition-slow);
}

.hm-featured__slide {
	flex: 0 0 100%;
	min-width: 100%;
	height: 100%;
	position: relative;
}

.hm-featured__slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Slider Indicators */

.hm-featured__slider-indicators {
	position: absolute;
	top: 25px;
	inset-inline-start: 26px;
	inset-inline-end: 26px;
	display: flex;
	gap: 5px;
	height: 4px;
	z-index: 2;
}

.hm-featured__slider-bar {
	flex: 1;
	height: 3.58px;
	background-color: rgba(255, 255, 255, 0.44);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--hm-transition-fast);
}

.hm-featured__slider-bar:first-child {
	border-start-start-radius: 100px;
	border-end-start-radius: 100px;
}

.hm-featured__slider-bar:last-child {
	border-start-end-radius: 100px;
	border-end-end-radius: 100px;
}

.hm-featured__slider-bar.is-active {
	background-color: #ffffff;
}

/* ---------- Category Badge (mobile only) ---------- */

.hm-featured__category {
	display: none; /* Hidden on desktop */
	position: absolute;
	bottom: -1px;
	inset-inline-end: 0; /* LEFT in RTL */
	width: 130px;
	height: 34.542px;
	color: var(--hm-color-text-inverse);
	text-decoration: none;
	z-index: 2;
}

.hm-featured__category:hover {
	color: var(--hm-color-text-inverse);
}

/* Dark background shape with circular cutout */
.hm-featured__category-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Red dot inside the cutout */
.hm-featured__category-dot {
	position: absolute;
	width: 12px;
	height: 12.54px;
	top: 0.5px;
	left: 118.05px;
}

/* Category name text */
.hm-featured__category-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 13px;
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 16px;
	line-height: 29px;
	white-space: nowrap;
}

/* ---------- Text Content Area ---------- */

.hm-featured__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start; /* RIGHT in RTL */
	height: 100%;
	padding-block: 47px;
	min-width: 0;
}

/* Before-title badge — generic version uses the global accent (matches the
   homepage hero `hm-featured` which must stay עגום-כהה per design). The
   .hm-featured--archive variant overrides to use the queried category's
   color, so the archive featured card matches the category accent. */

.hm-featured__badge {
	display: inline-block;
	border-inline-start: 1px solid var(--hm-color-accent);
	padding: 6px 16px;
	border-start-end-radius: var(--hm-radius-md);
	border-end-end-radius: var(--hm-radius-md);
	color: var(--hm-color-accent);
	font-family: var(--hm-font-primary);
	font-weight: 700;
	font-size: 16px;
	line-height: 22.115px;
	text-align: start;
	white-space: nowrap;
}

/* Archive variant: dot + badge follow the queried category color. */
.hm-featured--archive .hm-featured__category-dot ellipse {
	fill: var(--hm-cat-color, var(--hm-color-accent));
}

.hm-featured--archive .hm-featured__badge {
	border-inline-start-color: var(--hm-cat-color, var(--hm-color-accent));
	color: var(--hm-cat-color, var(--hm-color-accent));
}

/* Title + Excerpt block */

.hm-featured__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start; /* RIGHT in RTL */
	width: 100%;
}

.hm-featured__title {
	width: 100%;
	font-family: var(--hm-font-primary);
	font-weight: 900;
	font-size: 50px;
	line-height: 48px;
	color: var(--hm-color-text-inverse);
	text-align: start;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hm-featured__title a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--hm-transition-fast);
}

.hm-featured__title a:hover {
	opacity: 0.85;
	color: inherit;
}

.hm-featured__excerpt {
	max-width: 271px;
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 16px;
	line-height: 22.115px;
	color: var(--hm-color-text-inverse);
	text-align: start;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* Meta row */

.hm-featured__meta {
	display: flex;
	gap: 14px;
	align-items: center;
}

.hm-featured__meta-item {
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 14px;
	line-height: normal;
	color: var(--hm-color-text-inverse);
	opacity: 0.5;
	white-space: nowrap;
}

.hm-featured__comments {
	display: flex;
	gap: 3px;
	align-items: center;
}

.hm-featured__comment-icon {
	color: var(--hm-color-text-inverse);
	opacity: 0.5;
	flex-shrink: 0;
}

.hm-featured__sep {
	width: 1px;
	height: 15px;
	background-color: rgba(255, 255, 255, 0.5);
	flex-shrink: 0;
}

/* ==========================================================================
   Full Skeleton Fallback (no post data)
   ========================================================================== */

.hm-featured__card--skeleton {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	height: 500px;
	padding-inline-end: 24px;
	background-color: var(--hm-color-primary);
	border-radius: var(--hm-radius-xl);
	overflow: hidden;
}

.hm-featured__card--skeleton .hm-featured__media {
	background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
	background-size: 200% 100%;
	animation: hm-shimmer 1.5s ease-in-out infinite;
}

.hm-featured__skeleton-image {
	width: 100%;
	height: 100%;
}

.hm-featured__badge--skeleton {
	width: 140px;
	height: 35px;
	border-color: transparent;
	background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
	background-size: 200% 100%;
	animation: hm-shimmer 1.5s ease-in-out infinite;
	border-radius: var(--hm-radius-md);
}

.hm-featured__skeleton-line {
	height: 16px;
	border-radius: var(--hm-radius-sm);
	background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
	background-size: 200% 100%;
	animation: hm-shimmer 1.5s ease-in-out infinite;
	width: 100%;
}

.hm-featured__skeleton-line--title {
	height: 48px;
	margin-block-end: 6px;
}

.hm-featured__skeleton-line--excerpt {
	height: 14px;
	margin-block-end: 4px;
}

.hm-featured__skeleton-line--short {
	width: 60%;
}

.hm-featured__skeleton-meta {
	width: 200px;
	height: 14px;
	border-radius: var(--hm-radius-sm);
	background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
	background-size: 200% 100%;
	animation: hm-shimmer 1.5s ease-in-out infinite;
}

/* ==========================================================================
   Responsive — Mobile (max-width: 767px)
   Matches Figma mobile frame: 420px × ~401px
   ========================================================================== */

@media (max-width: 767px) {
	.hm-featured {
		gap: 16px;
	}

	/* Card: vertical layout, image on top */
	.hm-featured__card {
		flex-direction: column;
		height: auto;
		padding-inline-end: 0;
		gap: 13px;
		padding-block-end: 21px;
	}

	/* Image: full width, 210px tall, rounded top corners only */
	.hm-featured__media {
		width: 100%;
		height: 210px;
		border-start-start-radius: var(--hm-radius-xl);
		border-start-end-radius: var(--hm-radius-xl);
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}

	/* Slider indicators: smaller inset */
	.hm-featured__slider-indicators {
		top: 13px;
		inset-inline-start: 18px;
		inset-inline-end: 18px;
	}

	/* Show category badge on mobile */
	.hm-featured__category {
		display: flex;
	}

	/* Text content: adjusted padding, no space-between */
	.hm-featured__content {
		padding-block: 0;
		padding-inline: 13px;
		gap: 9px;
		justify-content: flex-start;
		height: auto;
	}

	/* Badge: thinner border, letter-spacing */
	.hm-featured__badge {
		border-inline-start-width: 0.656px;
		padding: 4px 17px;
		letter-spacing: 0.96px;
		line-height: 29px;
	}

	/* Title: Bold 700 (not Black 900), 32px */
	.hm-featured__title {
		font-weight: 700;
		font-size: 32px;
		line-height: 30px;
	}

	/* Excerpt: full width, line-height 22px */
	.hm-featured__excerpt {
		max-width: 100%;
		line-height: 22px;
	}

	/* Title + excerpt gap */
	.hm-featured__text {
		gap: 5px;
	}

	/* Hide meta row on mobile */
	.hm-featured__meta {
		display: none;
	}

	/* Skeleton fallback */
	.hm-featured__card--skeleton {
		flex-direction: column;
		height: auto;
		padding-inline-end: 0;
		padding-block-end: 21px;
	}

	.hm-featured__card--skeleton .hm-featured__media {
		width: 100%;
		height: 210px;
		border-start-start-radius: var(--hm-radius-xl);
		border-start-end-radius: var(--hm-radius-xl);
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}

	.hm-featured__card--skeleton .hm-featured__content {
		padding-block: 0;
		padding-inline: 13px;
	}

	.hm-featured__skeleton-meta {
		display: none;
	}
}

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

@media (min-width: 768px) and (max-width: 1023px) {
	.hm-featured__card {
		height: 400px;
	}

	.hm-featured__media {
		width: 50%;
	}

	.hm-featured__content {
		padding-block: 32px;
	}

	.hm-featured__title {
		font-size: 40px;
		line-height: 40px;
	}

	.hm-featured__excerpt {
		max-width: 100%;
		font-size: 15px;
	}
}

/* ==========================================================================
   Responsive — Small Desktop (1024px–1349px)
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1349px) {
	.hm-featured__card {
		height: 450px;
	}

	.hm-featured__media {
		width: 58%;
	}

	.hm-featured__title {
		font-size: 48px;
		line-height: 46px;
	}
}

/* Desktop scale-to-fit (see components.css): restore the desktop hero
   proportions, overriding the 768-1023 and 1024-1349 tiers above, so the
   scaled-down page matches a wide screen exactly. */
html.hm-fit-desktop .hm-featured__card {
	height: 500px;
}

html.hm-fit-desktop .hm-featured__media {
	width: 644px;
}

html.hm-fit-desktop .hm-featured__title {
	font-size: 50px;
	line-height: 48px;
}