/* Structure only.
 *
 * Colour, type, border, shadow and decorative treatment were stripped when
 * this became the blank starter. The design comes from the build's own
 * Figma / Claude Design work, not from here.
 *
 * Spacing and sizing are exposed as --fw-<selector>-<property> tokens that
 * default to 0, so the starter asserts nothing and the design layer sets
 * them. Everything left is layout mechanics the block needs to function.
 */

/* ---------------------------------------------------------------------------
 * Block: framework/news-list — post grid + tab filters + infinite load.
 * Self-contained card look matching the Latest News block (scoped under
 * .fw-news-list so it never collides with the homepage .fw-news-card styles).
 * ------------------------------------------------------------------------- */

.fw-news-list {
	padding: var(--fw-section-py, 48px) 20px;
}
.fw-news-list__inner {
	max-width: var(--fw-news-list-inner-max-width, 0);
	margin: var(--fw-news-list-inner-margin, 0);
}

/* ---- Tab filters ---------------------------------------------------------- */
.fw-news-list__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fw-news-list-tabs-gap, 0);
	margin: var(--fw-news-list-tabs-margin, 0);
}
.fw-news-list__tab {
	padding: var(--fw-news-list-tab-padding, 0);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ---- Grid ----------------------------------------------------------------- */
.fw-news-list__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fw-news-list-grid-gap, 0);
}

/* ---- Card (same format as Latest News) ------------------------------------ */
.fw-news-list__card {
	position: relative;
}
.fw-news-list__image {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.fw-news-list__image img,
.fw-news-list__image-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.fw-news-list__card:hover .fw-news-list__image img {
	transform: scale(1.08);
}
.fw-news-list__meta {
	display: flex;
	align-items: center;
	gap: var(--fw-news-list-meta-gap, 0);
	margin-top: var(--fw-news-list-meta-margin-top, 0);
}
.fw-news-list__badge {
	padding: var(--fw-news-list-badge-padding, 0);
}
.fw-news-list__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fw-news-list-head-gap, 0);
	margin-top: var(--fw-news-list-head-margin-top, 0);
}
.fw-news-list__title {
	margin: 0;
	flex: 1;
}
.fw-news-list__title a {
	transition: color 0.25s ease;
}
.fw-news-list__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--fw-news-list-arrow-width, 0);
	height: var(--fw-news-list-arrow-height, 0);
	flex-shrink: 0;
	transition: background 0.25s ease, border-color 0.25s ease;
}
.fw-news-list__arrow svg path {
	transition: stroke 0.25s ease;
}

/* ---- Empty + loading ------------------------------------------------------ */
.fw-news-list__empty {
	text-align: center;
	margin: var(--fw-news-list-empty-margin, 0);
}
.fw-news-list__sentinel {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: var(--fw-news-list-sentinel-min-height, 0);
	margin-top: var(--fw-news-list-sentinel-margin-top, 0);
}
.fw-news-list__spinner {
	width: var(--fw-news-list-spinner-width, 0);
	height: var(--fw-news-list-spinner-height, 0);
	animation: fw-news-spin 0.8s linear infinite;
}
@keyframes fw-news-spin {
	to {
	transform: rotate(360deg);
}
}

@media (max-width: 900px) {
	.fw-news-list__grid {
	grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
	.fw-news-list__grid {
	grid-template-columns: 1fr;
}
}