/* =========================================================================
   Boyle Built — Resource Family shared components (Phase I2)

   Three components shared by the Resource family:
     - Buying Guide's "What's Inside" icon grid and benefits-list +
       download-panel combo (Phase I2).
     - The Principles Row (centred heading + divided icon row), built for
       Planning Checklist (Phase I3) and reused for Financial Resources
       (Phase I5) — see the ".resource-principles-row" section below.

   Both were measured directly against pixel coordinates in the actual
   Buying Guide Figma screenshot (PmKYD86EAlc1bZBDF5dSGK, node 122:6,
   1060x1484), not estimated by eye:
     - icon-grid section: y=462–713 (251px tall); intro column x=46–286
       (240px); six bordered card boxes x=286–1022 (~123px each) with
       small gaps, not a shared-divider grid.
     - benefits/download section: y=714–987 (273px tall); light column
       x=0–369 (34.8%); dark column x=369–1060 (65.2%).
   Desktop CSS below scales those ratios up proportionally rather than
   copying the raw 1060px-frame numbers verbatim.

   All six "What's Inside" icons are hand-built line art redrawn from
   close (10x zoom) crops of the Figma screenshot, not Figma exports —
   the frame is a flattened image with no extractable vector layers. Each
   SVG hardcodes stroke="#4B5B3E" (var(--color-primary-green)) directly
   rather than using currentColor: these icons render via <img src="">
   (resource-icon-item.php), and an externally-loaded SVG image doesn't
   inherit the host page's CSS `color`, so currentColor would otherwise
   resolve to black — the same reason every pre-existing icon in this
   theme (arrow-right.svg, badge-check.svg, etc.) bakes its colour in
   rather than relying on currentColor + a CSS `color` rule.
   ========================================================================= */

/* -------------------------------------------------------------------------
   What's Inside the Guide — icon grid
   ------------------------------------------------------------------------- */

.resource-icon-grid {
	background-color: var(--color-bg);
}

.resource-icon-grid__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px var(--space-section-h);
}

.resource-icon-grid__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Individually bordered, rounded cards — confirmed by the Figma
   screenshot (each of the six topics sits in its own rounded box, not a
   borderless row divided by shared lines). */
.resource-icon-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-card);
}

.resource-icon-item__icon {
	width: 36px;
	height: 36px;
	color: var(--color-primary-green);
}

/* Figma renders the card title in the display (serif) font, matching
   every other heading in this theme — the body/sans font used here
   before this fix was a mismatch. */
.resource-icon-item__title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 17px;
}

.resource-icon-item__description {
	margin: 0;
	color: var(--color-body-muted);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Why a Buying Guide? + Get Your Free Copy (one section, two columns)
   ------------------------------------------------------------------------- */

.resource-benefits {
	display: flex;
	flex-direction: column;
}

.resource-benefits__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px var(--space-section-h);
}

/* Sampled directly from the Figma frame — a warm beige distinctly darker
   than the site's base --color-bg, evidenced only here so far (kept as a
   local value rather than a new global token until a second Resource
   page confirms it's reused). */
.resource-benefits__col--light {
	background-color: #eae7e2;
	color: var(--color-ink);
}

/* The real panel is a wood-table photo behind the guide cover, resampled
   from the design-reference comparison screenshots at a warm near-black
   (~#1c1a17–#211e19), NOT the site's green-tinted dark-section token.
   The photo itself isn't reusable as a flat background without
   duplicating the mockup's own baked-in "Get Your Free Copy" text (see
   the Phase I2 report), so this is a flat colour sampled to match
   instead. */
.resource-benefits__col--dark {
	background-color: #1e1b17;
	color: var(--color-text-light);
}

.resource-benefits__heading,
.resource-benefits__download-heading {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.25;
}

.resource-benefits__accent {
	background-color: var(--color-gold);
	height: 2px;
	width: 32px;
}

.resource-benefits__text {
	margin: 0;
	color: var(--color-body-muted);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
}

.resource-benefits__download-text {
	margin: 0;
	color: var(--color-text-muted-lt1);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
}

.resource-benefits__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.resource-benefits__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
}

.resource-benefits__item-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-gold);
}

/* The guide cover reads as tall/prominent in Figma — nearly the full
   height of the dark panel, not a small floating square — so this
   stretches to the column's full height (align-self:stretch on the
   dark column, set below) with object-fit:cover doing the crop. */
.resource-benefits__cover-wrapper {
	width: 220px;
	flex-shrink: 0;
}

.resource-benefits__cover {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
	border-radius: var(--radius-card);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}

.resource-benefits__download {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.resource-benefits__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.resource-benefits__actions .btn {
	width: 100%;
}

/* -------------------------------------------------------------------------
   Principles Row — centred heading + a plain, vertically-divided row of
   icon/title/description items (no card borders). Built for Planning
   Checklist's "Great Buildings Start with Good Planning" (Phase I3) and
   reused unchanged, with different content, for Financial Resources'
   "Understand the Big Picture" (Phase I5) — proven on two pages, so it
   lives here rather than in either page's own stylesheet.
   ------------------------------------------------------------------------- */

.resource-principles-row {
	background-color: var(--color-bg);
}

.resource-principles-row__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 48px var(--space-section-h);
}

.resource-principles-row__list {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 960px;
}

.resource-principles-row__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-border-light);
}

.resource-principles-row__item:last-child {
	border-bottom: none;
}

.resource-principles-row__icon {
	width: 36px;
	height: 36px;
}

.resource-principles-row__title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16px;
}

.resource-principles-row__description {
	margin: 0;
	color: var(--color-body-muted);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
	max-width: 220px;
}

/* -------------------------------------------------------------------------
   Tablet (601–1024px)
   ------------------------------------------------------------------------- */

@media (min-width: 601px) {
	.resource-icon-grid__list {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.resource-icon-item {
		flex: 0 0 calc(50% - 6px);
	}

	.resource-benefits__col--dark {
		flex-direction: row;
		align-items: stretch;
		gap: 24px;
	}

	.resource-benefits__download {
		flex: 1;
		justify-content: center;
	}

	/* Figma shows the download/hard-copy actions stacked (not
	   side-by-side) at every width — unlike the generic action-group
	   row-wrap used elsewhere, this component keeps a column layout from
	   tablet up too, just switching from full-width to content-width
	   buttons. */
	.resource-benefits__actions .btn {
		width: auto;
		align-self: flex-start;
	}

	.resource-principles-row__list {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.resource-principles-row__item {
		flex: 0 0 50%;
		border-bottom: 1px solid var(--color-border-light);
	}
}

/* -------------------------------------------------------------------------
   Desktop (1025px+)
   ------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.resource-icon-grid__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
		padding-top: 44px;
		padding-bottom: 44px;
	}

	/* Measured intro-column share of the Figma row: 240/980 ≈ 24.5% of
	   the content width. */
	.resource-icon-grid__inner > .section-heading {
		flex: 0 0 25%;
	}

	.resource-icon-grid__list {
		flex: 1;
		flex-wrap: nowrap;
		gap: 16px;
	}

	.resource-icon-item {
		flex: 1;
	}

	.resource-benefits {
		flex-direction: row;
	}

	.resource-benefits__col {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Figma splits this section roughly 1/3 light-benefits column to 2/3
	   dark cover+download column (measured 34.8% / 65.2%), not an even
	   50/50. */
	.resource-benefits__col--light {
		flex: 0 0 35%;
	}

	.resource-benefits__col--dark {
		flex: 1;
		gap: 32px;
	}

	.resource-benefits__cover-wrapper {
		width: 240px;
	}

	.resource-principles-row__list {
		flex-wrap: nowrap;
	}

	.resource-principles-row__item {
		flex: 1;
		border-bottom: none;
		border-left: 1px solid var(--color-border-light);
		padding: 0 16px;
	}

	.resource-principles-row__item:first-child {
		border-left: none;
		padding-left: 0;
	}

	.resource-principles-row__item:last-child {
		padding-right: 0;
	}
}

/* -------------------------------------------------------------------------
   "--no-dividers" modifier (Phase I9) — same icon/title/description row,
   no border at any breakpoint. Placed last so it wins over the base/
   tablet/desktop border rules above at equal selector specificity,
   regardless of which media query they were declared in.
   ------------------------------------------------------------------------- */

.resource-principles-row--no-dividers .resource-principles-row__item,
.resource-principles-row--no-dividers .resource-principles-row__item:last-child {
	border: none;
	padding: 0;
}

@media (min-width: 601px) {
	.resource-principles-row--no-dividers .resource-principles-row__item {
		border: none;
	}
}

@media (min-width: 1025px) {
	.resource-principles-row--no-dividers .resource-principles-row__item,
	.resource-principles-row--no-dividers .resource-principles-row__item:first-child,
	.resource-principles-row--no-dividers .resource-principles-row__item:last-child {
		border: none;
		padding: 0 16px;
	}
}