/*
 * Freshwave 2026 – Insights Widget Component
 * Embeddable 5-post section: 1 featured card (left half) + 2×2 smaller cards (right half).
 * JS-filtered; no pagination.
 */

/* =========================================================================
   Outer wrapper
   ========================================================================= */
.insights-widget {
	box-sizing: border-box;
}

/* =========================================================================
   Filter bar
   ========================================================================= */
.insights-widget__filter-bar {
	display: flex;
	align-items: center;
	padding: 0 0 32px;
}

.insights-widget__filter-tabs {
	display: flex;
	align-items: center;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.insights-widget__filter-tabs::-webkit-scrollbar { display: none; }

.insights-widget__filter-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	font-family: var(--wp--preset--font-family--body, fieldwork, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--neutral-dark, #444);
	background: none;
	border: none;
	border-bottom: 4px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
}

.insights-widget__filter-tab.is-active {
	color: var(--wp--preset--color--neutral-darker, #222);
	border-bottom-color: var(--wp--preset--color--neutral-darker, #222);
}

.insights-widget__filter-tab:hover {
	color: var(--wp--preset--color--neutral-darker, #222);
}

/* =========================================================================
   Grid wrapper
   ========================================================================= */
.insights-widget__grid-wrapper {
	width: 100%;
	transition: opacity 0.2s;
}

.insights-widget__grid-wrapper.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.insights-widget__grid-wrapper .wp-block-query {
	width: 100%;
}

/* =========================================================================
   5-card layout:
     col 1–2 / rows 1–2  → featured card
     col 3,  row 1       → card 2
     col 4,  row 1       → card 3
     col 3,  row 2       → card 4
     col 4,  row 2       → card 5
   ========================================================================= */
.insights-widget .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 24px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.insights-widget .wp-block-post-template > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Featured: spans left two columns across both rows */
.insights-widget .wp-block-post-template > li:first-child {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.insights-widget .wp-block-post-template > li:nth-child(2) { grid-column: 3; grid-row: 1; }
.insights-widget .wp-block-post-template > li:nth-child(3) { grid-column: 4; grid-row: 1; }
.insights-widget .wp-block-post-template > li:nth-child(4) { grid-column: 3; grid-row: 2; }
.insights-widget .wp-block-post-template > li:nth-child(5) { grid-column: 4; grid-row: 2; }

/* =========================================================================
   Card-size overrides (builds on shared ni-card rules in insights-archive.css)
   ========================================================================= */

/* Featured card fills its tall cell */
.insights-widget .wp-block-post-template > li:first-child .ni-card {
	height: 100%;
}

/* Featured image: taller aspect ratio so it fills the 2-row cell */
.insights-widget .wp-block-post-template > li:first-child .ni-card .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
}

/* Featured card title: H4 */
.insights-widget .wp-block-post-template > li:first-child .ni-card__title {
	font-size: var(--wp--preset--font-size--h4, 2rem) !important;
}

/* Small card titles: H5 */
.insights-widget .wp-block-post-template > li:not(:first-child) .ni-card__title {
	font-size: var(--wp--preset--font-size--h5, 1.5rem) !important;
}

/* Small-card images: standard 3:2 */
.insights-widget .wp-block-post-template > li:not(:first-child) .ni-card .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
}

/* =========================================================================
   Responsive – Tablet (≤ 1024px)
   ========================================================================= */
@media (max-width: 1024px) {
	.insights-widget .wp-block-post-template {
		grid-template-columns: 1fr 1fr;
	}

	/* Featured spans full width on tablet */
	.insights-widget .wp-block-post-template > li:first-child {
		grid-column: 1 / 3;
		grid-row: 1;
	}

	.insights-widget .wp-block-post-template > li:nth-child(2) { grid-column: 1; grid-row: 2; }
	.insights-widget .wp-block-post-template > li:nth-child(3) { grid-column: 2; grid-row: 2; }
	.insights-widget .wp-block-post-template > li:nth-child(4) { grid-column: 1; grid-row: 3; }
	.insights-widget .wp-block-post-template > li:nth-child(5) { grid-column: 2; grid-row: 3; }

	/* Reset tall featured image */
	.insights-widget .wp-block-post-template > li:first-child .ni-card .wp-block-post-featured-image img {
		aspect-ratio: 16 / 9;
	}
}

/* =========================================================================
   Responsive – Mobile (≤ 640px)
   ========================================================================= */
@media (max-width: 640px) {
	.insights-widget .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.insights-widget .wp-block-post-template > li:first-child,
	.insights-widget .wp-block-post-template > li:nth-child(2),
	.insights-widget .wp-block-post-template > li:nth-child(3),
	.insights-widget .wp-block-post-template > li:nth-child(4),
	.insights-widget .wp-block-post-template > li:nth-child(5) {
		grid-column: 1;
		grid-row: auto;
	}
}