/**
 * SIB Institutional Newsfeed v2 — base + module + hero styles.
 *
 * Design-variable contract (per-instance overrides injected by PHP as a
 * scoped <style> block targeting the .sibnf-i-{hash} class):
 *
 *   --sibnf-card-bg          Card background
 *   --sibnf-title-color      Post title
 *   --sibnf-meta-color       Date / meta text
 *   --sibnf-excerpt-color    Excerpt text
 *   --sibnf-btn-bg           Read More background
 *   --sibnf-btn-text         Read More text
 *   --sibnf-btn-hover-bg     Read More hover background
 *   --sibnf-btn-hover-text   Read More hover text
 *
 * Every variable falls back to a The7-inherited value, so when a picker is
 * left empty the theme's Theme Options continue to drive the design.
 */

.sibnf {
	/* Theme-inherited defaults; instance style blocks override these. */
	--sibnf-accent: var(--the7-accent-color, var(--wp--preset--color--primary, #1f5aa8));
	--sibnf-gap: var(--the7-content-boxes-gap, 28px);
	--sibnf-radius: var(--the7-elements-border-radius, 8px);
	--sibnf-card-bg: var(--the7-content-boxes-bg, #fff);
	--sibnf-title-color: inherit;
	--sibnf-meta-color: var(--sibnf-accent);
	--sibnf-excerpt-color: inherit;
	--sibnf-btn-bg: transparent;
	--sibnf-btn-text: var(--sibnf-accent);
	--sibnf-btn-hover-bg: var(--sibnf-accent);
	--sibnf-btn-hover-text: #fff;

	margin: 0 0 var(--sibnf-gap);
}

/* ------------------------------------------------------------------ Grids */

.sibnf-grid {
	display: grid;
	gap: var(--sibnf-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.sibnf-cols-2, .sibnf-cols-3, .sibnf-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.sibnf-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sibnf-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Masonry (Module 7) — CSS columns keep it dependency-free. */
.sibnf-masonry { column-gap: var(--sibnf-gap); }
.sibnf-masonry .sibnf-card {
	break-inside: avoid;
	margin-bottom: var(--sibnf-gap);
}
@media (min-width: 600px) { .sibnf-mcols-2, .sibnf-mcols-3, .sibnf-mcols-4 { column-count: 2; } }
@media (min-width: 992px) {
	.sibnf-mcols-3 { column-count: 3; }
	.sibnf-mcols-4 { column-count: 4; }
}

/* Vertical lists (Modules 2, 3, 8, 11) */
.sibnf-vlist {
	display: flex;
	flex-direction: column;
	gap: calc(var(--sibnf-gap) * 0.75);
}

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

.sibnf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--sibnf-card-bg);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--sibnf-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sibnf-card:hover,
.sibnf-card:focus-within {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.sibnf-card, .sibnf-card:hover, .sibnf-card:focus-within {
		transform: none;
		transition: none;
	}
}

/* Media placements */
.sibnf-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; flex: none; }
.sibnf-card__media .sibnf-img,
.sibnf-card__bg .sibnf-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.sibnf-card:hover .sibnf-img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .sibnf-card:hover .sibnf-img { transform: none; } }

/* Left / right horizontal cards */
.sibnf-card--media-left, .sibnf-card--media-right { flex-direction: row; }
.sibnf-card--media-right { flex-direction: row-reverse; }
.sibnf-card--media-left .sibnf-card__media,
.sibnf-card--media-right .sibnf-card__media {
	flex: 0 0 38%;
	aspect-ratio: auto;
	min-height: 100%;
}
@media (max-width: 599px) {
	.sibnf-card--media-left, .sibnf-card--media-right { flex-direction: column; }
	.sibnf-card--media-left .sibnf-card__media,
	.sibnf-card--media-right .sibnf-card__media { flex: none; aspect-ratio: 16 / 9; }
}

/* Overlay cards — image behind, scrim, light text */
.sibnf-card--media-overlay { justify-content: flex-end; min-height: 300px; }
.sibnf-card__bg { position: absolute; inset: 0; background: #2b3440; }
.sibnf-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.72) 100%);
}
.sibnf-card--media-overlay .sibnf-card__body { position: relative; z-index: 1; }
.sibnf-card--media-overlay,
.sibnf-card--media-overlay .sibnf-card__title a,
.sibnf-card--media-overlay .sibnf-card__excerpt {
	color: #fff;
}
.sibnf-card--media-overlay { --sibnf-title-color: #fff; --sibnf-excerpt-color: rgba(255,255,255,0.85); --sibnf-meta-color: rgba(255,255,255,0.85); --sibnf-btn-text: #fff; }

/* Sizes */
.sibnf-card--sm .sibnf-card__body { padding: calc(var(--sibnf-gap) * 0.45); gap: 0.3em; }
.sibnf-card--sm .sibnf-card__title { font-size: 0.95em; }
.sibnf-card--sm .sibnf-card__excerpt, .sibnf-card--sm .sibnf-btn { display: none; }
.sibnf-card--sm.sibnf-card--media-left .sibnf-card__media { flex-basis: 30%; }
.sibnf-card--lg .sibnf-card__title { font-size: 1.45em; }
.sibnf-card--xl { min-height: 380px; }
.sibnf-card--xl .sibnf-card__title { font-size: 1.8em; line-height: 1.25; }
@media (max-width: 599px) { .sibnf-card--xl .sibnf-card__title { font-size: 1.35em; } }

/* Body */
.sibnf-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55em;
	padding: calc(var(--sibnf-gap) * 0.75);
}

.sibnf-card__num {
	font-size: 1.9em;
	font-weight: 700;
	line-height: 1;
	color: var(--sibnf-accent);
	opacity: 0.35;
}

.sibnf-card__badge {
	display: inline-block;
	padding: 0.2em 0.75em;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--sibnf-accent);
	border-radius: 999px;
}
.sibnf-card__badge:hover { color: #fff; filter: brightness(1.1); }

.sibnf-card__date {
	font-size: 0.8em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sibnf-meta-color);
}

.sibnf-card__title { margin: 0; font-size: 1.1em; line-height: 1.35; color: var(--sibnf-title-color); }
.sibnf-card__title a { color: inherit; text-decoration: none; }
.sibnf-card__title a:hover, .sibnf-card__title a:focus { color: var(--sibnf-accent); }
.sibnf-card--media-overlay .sibnf-card__title a:hover { color: #fff; text-decoration: underline; }

.sibnf-card__excerpt { margin: 0; font-size: 0.95em; color: var(--sibnf-excerpt-color); opacity: 0.85; }

/* Read More button — fully variable-driven */
.sibnf-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: auto;
	padding: 0.45em 1em;
	font-size: 0.88em;
	font-weight: 600;
	text-decoration: none;
	color: var(--sibnf-btn-text);
	background: var(--sibnf-btn-bg);
	border: 1px solid currentColor;
	border-radius: var(--sibnf-radius);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sibnf-btn:hover, .sibnf-btn:focus {
	color: var(--sibnf-btn-hover-text);
	background: var(--sibnf-btn-hover-bg);
	border-color: var(--sibnf-btn-hover-bg);
}
.sibnf-btn:focus-visible { outline: 2px solid var(--sibnf-accent); outline-offset: 3px; }
.sibnf-btn__arrow { transition: transform 0.2s ease; }
.sibnf-btn:hover .sibnf-btn__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .sibnf-btn:hover .sibnf-btn__arrow { transform: none; } }

/* ------------------------------------------------ Module-specific shells */

/* Module 6 feature */
.sibnf-feature { margin-bottom: var(--sibnf-gap); }

/* Module 10 timeline */
.sibnf-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sibnf-gap);
	padding-left: 2em;
}
.sibnf-timeline::before {
	content: "";
	position: absolute;
	top: 0.5em;
	bottom: 0.5em;
	left: 0.5em;
	width: 2px;
	background: rgba(0, 0, 0, 0.12);
}
.sibnf-timeline__item { position: relative; }
.sibnf-timeline__dot {
	position: absolute;
	top: 1.4em;
	left: -1.94em;
	width: 0.9em;
	height: 0.9em;
	border-radius: 50%;
	background: var(--sibnf-accent);
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px var(--sibnf-accent);
}

/* Module 11 numbered rows */
.sibnf-vlist--numbered .sibnf-card { flex-direction: row; align-items: center; }
.sibnf-vlist--numbered .sibnf-card__body { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.5em 1em; }

/* Module 12 / Hero 4 split */
.sibnf-split { display: grid; gap: var(--sibnf-gap); grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.sibnf-split { grid-template-columns: 3fr 2fr; align-items: stretch; }
	.sibnf-split--hero { grid-template-columns: 2fr 1fr; }
	.sibnf-split__main .sibnf-card { height: 100%; }
}

/* ------------------------------------------------------ Hero shells */

.sibnf-group-hero .sibnf-card--xl { min-height: 420px; }
.sibnf-hero-sub { margin-top: var(--sibnf-gap); }

.sibnf-hero-half .sibnf-card--media-left .sibnf-card__media,
.sibnf-hero-half .sibnf-card--media-right .sibnf-card__media { flex-basis: 50%; }

.sibnf-hero-half--editorial .sibnf-card { border: none; box-shadow: none; background: transparent; }
.sibnf-hero-half--editorial .sibnf-card__title { font-size: 2.2em; }
@media (max-width: 599px) { .sibnf-hero-half--editorial .sibnf-card__title { font-size: 1.4em; } }

.sibnf-hero-center { text-align: center; }
.sibnf-hero-center .sibnf-card { align-items: center; border: none; box-shadow: none; background: transparent; }
.sibnf-hero-center .sibnf-card__body { align-items: center; max-width: 46em; }

.sibnf-hero-gradient .sibnf-card__scrim {
	background: linear-gradient(135deg, color-mix(in srgb, var(--sibnf-accent) 82%, transparent) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.sibnf-hero-metabar .sibnf-card__body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em 1.2em;
	border-top: 3px solid var(--sibnf-accent);
}
.sibnf-hero-metabar .sibnf-card__title { flex: 1 1 100%; }

.sibnf-hero-boxed { max-width: 860px; margin-inline: auto; }
.sibnf-hero-boxed .sibnf-card__body { padding: calc(var(--sibnf-gap) * 1.25); }

/* Hero 9 mosaic */
.sibnf-mosaic { display: grid; gap: calc(var(--sibnf-gap) * 0.5); grid-template-columns: repeat(2, 1fr); }
.sibnf-mosaic__hero { grid-column: 1 / -1; }
.sibnf-mosaic__tile .sibnf-card { min-height: 180px; }
.sibnf-mosaic__tile .sibnf-card--sm .sibnf-card__title { display: block; }
@media (min-width: 900px) {
	.sibnf-mosaic { grid-template-columns: repeat(4, 1fr); }
	.sibnf-mosaic__hero { grid-column: 1 / 3; grid-row: 1 / 3; }
	.sibnf-mosaic__hero .sibnf-card { height: 100%; }
}

.sibnf-empty { padding: 1em 0; font-style: italic; opacity: 0.75; }