/*
 * Field Intel — series panels on the index, and the kicker and rail on a single report.
 *
 * The index listing itself uses the theme's own card grid, so it needs nothing here. Every rule below
 * is scoped under a fi- class, so nothing can reach the theme, Reg Watch or any other plugin. Colours
 * are MyAgLife's own greens, the same ones Reg Watch measured from the live site.
 */

.fi-series,
.fi-wrap,
.fi-kicker {
	--fi-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--fi-green: #176B3A;
	--fi-link: #529046;
	--fi-ink: #343942;
	--fi-muted: #6E7681;
	--fi-line: #dde5db;
}

.fi-series *,
.fi-wrap * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * The two series, above the listing
 * ------------------------------------------------------------------ */

.fi-series {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	padding-bottom: 0;
}

.fi-series-card {
	border: 1px solid var(--fi-line);
	border-left: 3px solid var(--fi-green);
	border-radius: 8px;
	background: #fff;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fi-series-card .eyebrow {
	margin: 0;
}

.fi-series-card h2 {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.2;
}

.fi-series-card p {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--fi-ink);
}

.fi-series-card .text-link {
	margin-top: auto;
	padding-top: 4px;
}

@media (max-width: 700px) {
	.fi-series {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * The report post
 * ------------------------------------------------------------------ */

/* Names the section under the date and routes back to the index. Small on purpose, like Reg Watch's. */
.fi-kicker {
	margin: 0 0 15px;
	font-family: var(--fi-sans);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.4;
	display: flex;
	flex-wrap: wrap;
	gap: 0 9px;
}

.fi-kicker a {
	color: var(--fi-link);
}

.fi-kicker a:hover {
	color: var(--fi-green);
}

.fi-kicker-sep {
	color: var(--fi-muted);
}

/* ------------------------------------------------------------------ *
 * The rail
 * ------------------------------------------------------------------ */

.fi-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 42px;
	align-items: start;
}

.fi-main {
	min-width: 0;
}

.fi-rail {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	font-family: var(--fi-sans);
}

.fi-rail-h {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fi-muted);
}

.fi-rail-card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	border-left: 2px solid var(--fi-line);
	padding: 1px 0 1px 13px;
	transition: border-left-color .15s ease;
}

.fi-rail-card:hover {
	border-left-color: var(--fi-green);
}

.fi-rail-mini {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fi-link);
}

.fi-rail-t {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--fi-ink);
	text-wrap: balance;
}

.fi-rail-card:hover .fi-rail-t {
	color: var(--fi-green);
}

.fi-date {
	font-size: 12.5px;
	color: var(--fi-muted);
	font-variant-numeric: tabular-nums;
}

.fi-rail-all {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--fi-link);
	margin-top: 2px;
}

/* On a phone the rail becomes the "more reports" strip under the article. */
@media (max-width: 900px) {
	.fi-wrap {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.fi-rail {
		border-top: 1px solid var(--fi-line);
		padding-top: 24px;
	}
}

/* The theme underlines links in post content. Card-like links here do not need it. Specificity, not
   !important, and only inside our own containers. */
.fi-wrap .fi-rail-card,
.fi-wrap .fi-rail-all,
.fi-kicker a {
	text-decoration: none;
}

.fi-wrap .fi-rail-all:hover,
.fi-kicker a:hover {
	text-decoration: underline;
}

.fi-kicker a:focus-visible,
.fi-wrap a:focus-visible,
.fi-series a:focus-visible {
	outline: 2px solid var(--fi-green);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.fi-rail-card {
		transition: none;
	}
}