/**
 * News-flash archive — card.
 *
 * Renders a single card in the news-flash archive list. Two visual modes:
 *   - news-flash items (no CTA)
 *   - regular posts (with "לכתבה המלאה" CTA button at bottom-left)
 *
 * Layout: outer flex row, items bottom-aligned; content column flex:1 on the
 * right (RTL inline-start), CTA on the left (RTL inline-end); author group
 * absolutely positioned at the top-left corner.
 *
 * @package Hamechadesh
 */

/* ===================================================================== */
/* Main column — flush layout (matches the news-flash archive look)      */
/* ===================================================================== */

/*
 * Override the default 70px inline padding from single-columns.css so the
 * news-flash cards extend to the column edges. Mirrors the same override
 * that archive.css applies on the news-flash post-type archive; declared
 * here too so single-news-flash.php gets the same layout without having
 * to enqueue the full hm-page-archive stylesheet (which also pulls in
 * featured-article.css that isn't used here).
 */
.hm-single-columns__main {
	padding: 0;
}

/* Top banner — center within the main column. */
.hm-single-columns__main > .hm-featured__banner {
	margin-inline: auto;
}

/* ===================================================================== */
/* List wrapper                                                          */
/* ===================================================================== */

.hm-nf-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 15px;
}

/* ===================================================================== */
/* Card                                                                  */
/* ===================================================================== */

.hm-nf-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 21px;
	padding: 14px;
	background-color: #ffffff;
	border: 0.5px solid rgba(33, 33, 33, 0.25);
	border-radius: 10px;
}

/* ===================================================================== */
/* Author group (absolute, top-left in RTL = top + inline-end)          */
/* ===================================================================== */

.hm-nf-card__author {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	display: flex;
	align-items: center;
	gap: 3px;
	max-width: calc(100% - 28px);
}

.hm-nf-card__author-name {
	font-family: var(--hm-font-primary, "Pompei Block FS", sans-serif);
	font-weight: 300;
	font-size: 10px;
	line-height: 18px;
	color: #212121;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-skip-ink: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

a.hm-nf-card__author-name {
	color: #212121;
}

a.hm-nf-card__author-name:hover {
	color: #FF173E;
}

.hm-nf-card__author-icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	color: #212121;
}

/* ===================================================================== */
/* Content column (rightmost in RTL)                                     */
/* ===================================================================== */

.hm-nf-card__content {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: flex-start = right */
	gap: 3px;
	padding: 10px;
}

/* Date / time row */
.hm-nf-card__meta {
	display: flex;
	align-items: center;
	gap: 5px;
}

.hm-nf-card__dot {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
}

.hm-nf-card__meta-text {
	margin: 0;
	font-family: var(--hm-font-primary, "Pompei Block FS", sans-serif);
	font-weight: 300;
	font-size: 10px;
	line-height: 18px;
	color: #FF173E;
	white-space: nowrap;
}

.hm-nf-card__meta-sep {
	display: inline-block;
	margin: 0 4px;
}

.hm-nf-card__meta-text time {
	font-variant-numeric: tabular-nums;
}

/* Title / body */
.hm-nf-card__title {
	margin: 0;
	font-family: var(--hm-font-primary, "Pompei Block FS", sans-serif);
	font-weight: 300;
	font-size: 16px;
	line-height: 21px;
	color: #191730;
	unicode-bidi: isolate;
	text-align: start;
}

.hm-nf-card__title a {
	color: inherit;
	text-decoration: none;
}

.hm-nf-card__title a:hover {
	color: #FF173E;
}

/* ===================================================================== */
/* CTA button (leftmost in RTL — regular posts only)                     */
/* ===================================================================== */

.hm-nf-card__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 25px;
	background-color: #ffffff;
	border: 1px solid #FF173E;
	border-radius: 6px;
	color: #FF173E;
	text-decoration: none;
	font-family: var(--hm-font-primary, "Pompei Block FS", sans-serif);
	font-weight: 300;
	font-size: 16px;
	line-height: 22px;
	white-space: nowrap;
	transition: background-color 200ms ease, color 200ms ease;
}

.hm-nf-card__cta:hover,
.hm-nf-card__cta:focus-visible {
	background-color: #FF173E;
	color: #ffffff;
}

.hm-nf-card__cta-arrow {
	flex-shrink: 0;
	width: 8px;
	height: 12px;
}

/* ===================================================================== */
/* Featured modifier — current post on single news-flash page             */
/* ===================================================================== */

/*
 * Used on single-news-flash.php for the post being viewed. Same card
 * structure, but larger title + optional body content and an optional
 * inline image from the news-flash `image` ACF field. Padding/gap are
 * scaled up so the featured card visually anchors the top of the column.
 */
.hm-nf-card--featured {
	padding: 22px;
	gap: 22px;
}

.hm-nf-card--featured .hm-nf-card__content {
	gap: 12px;
	padding: 10px 10px 6px;
	/* Stretch children to the full column width so the meta-bar's
	   space-between layout (info on right, actions on left) works and
	   the body / media also span the card. */
	align-items: stretch;
}

.hm-nf-card--featured .hm-nf-card__title {
	font-size: 28px;
	line-height: 36px;
	font-weight: 700; /* Bold — overrides the base 300 (Light) */
}

/* Meta-bar lives inside the featured card, not at full single-post scale.
   Reset the large vertical margins it sets for the standalone single-post
   layout so it sits snugly between title and body. */
.hm-nf-card--featured .hm-meta-bar {
	margin-block: 0;
}

.hm-nf-card--featured .hm-nf-card__body {
	margin: 0;
	font-family: var(--hm-font-primary, "Pompei Block FS", sans-serif);
	font-weight: 300;
	font-size: 18px;
	line-height: 28px;
	color: #212121;
	unicode-bidi: isolate;
	text-align: start;
}

.hm-nf-card--featured .hm-nf-card__body > :first-child {
	margin-top: 0;
}

.hm-nf-card--featured .hm-nf-card__body > :last-child {
	margin-bottom: 0;
}

.hm-nf-card--featured .hm-nf-card__media {
	margin-top: 6px;
	border-radius: 8px;
	overflow: hidden;
	max-width: 100%;
}

.hm-nf-card--featured .hm-nf-card__media img,
.hm-nf-card--featured .hm-nf-card__media video {
	display: block;
	width: 100%;
	height: auto;
}

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

@media (max-width: 767px) {
	.hm-nf-card {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 12px;
	}

	.hm-nf-card__author {
		top: 12px;
		inset-inline-end: 12px;
	}

	.hm-nf-card__content {
		gap: 10px;
		padding: 0px;
	}

	.hm-nf-card__title {
		font-size: 15px;
		line-height: 20px;
	}

	.hm-nf-card__cta {
		align-self: flex-end; /* RTL: flex-end = left, matches desktop position */
		padding: 5px 20px;
		font-size: 14px;
		line-height: 20px;
	}

	.hm-nf-card--featured {
		padding: 16px;
		gap: 14px;
	}

	.hm-nf-card--featured .hm-nf-card__content {
		gap: 10px;
		padding: 0;
	}

	.hm-nf-card--featured .hm-nf-card__title {
		font-size: 22px;
		line-height: 30px;
	}

	.hm-nf-card--featured .hm-nf-card__body {
		font-size: 16px;
		line-height: 25px;
	}
}

/* ===================================================================== */
/* Infinite scroll — sentinel + loader                                   */
/* ===================================================================== */

.hm-nf-sentinel {
	width: 100%;
	height: 1px;
	pointer-events: none;
}

.hm-nf-loader {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 24px 0;
}

.hm-nf-loader[hidden] {
	display: none;
}

.hm-nf-loader__dot {
	width: 8px;
	height: 8px;
	background-color: var(--hm-color-breaking, #FF173E);
	border-radius: 50%;
	opacity: 0.4;
	/* Cap iterations so the loader stops bouncing if the JS never fires. */
	animation: hm-nf-loader-pulse 1s ease-in-out 18;
}

@media (prefers-reduced-motion: reduce) {
	.hm-nf-loader__dot {
		animation: none;
	}
}

.hm-nf-loader__dot:nth-child(2) {
	animation-delay: 0.15s;
}

.hm-nf-loader__dot:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes hm-nf-loader-pulse {
	0%, 80%, 100% {
		opacity: 0.4;
		transform: scale(0.85);
	}
	40% {
		opacity: 1;
		transform: scale(1);
	}
}