/* =============================================================================
 * csc-resources — Custom Fabrication and the Resource Center, side by side
 *
 * Measured from prototype 26f20fb8 v10, section 11, at 1440:
 *
 *   ground   #FFFFFF, band 1200, padding 56 top and bottom
 *   grid     2 columns, 696px 440px, gap 64 (696 + 64 + 440 = 1200)
 *   left     eyebrow, 24/700 heading with one slab word, 15/400 body at ~480,
 *            a 696 x 262 image frame, then the link
 *   right    eyebrow + hub link on one row, 24/700 heading, three chart rows
 *            separated by hairlines at padding 20 0, then the Studio box
 *
 * Tablet and below the two columns stack, fabrication first. The artboard
 * draws this section at 1440 only, so the stacked order is a decision rather
 * than a measurement: the left column is the argument and the right is the
 * supporting material, so the argument goes first.
 *
 * Padding, gaps, the grid and the hairlines are not Elementor controls — a
 * value exposed as a control belongs to the instance from the moment the
 * widget is placed. CLAUDE.md §2.10.
 * ========================================================================== */

.csc-resources__ground {
	background: #FFFFFF;
}

/* Gutter outside the band, never on it — HP-048 #2. */
.csc-resources__pad {
	padding-inline: var(--csc-gutter);
}

.csc-resources__band {
	display: grid;
	grid-template-columns: 696fr 440fr;
	gap: var(--csc-space-12) 64px;
	align-items: start;
	max-width: var(--csc-band);
	margin-inline: auto;
	padding-block: var(--csc-section-y);
}

/* --- Left: custom fabrication, then the Studio box -------------------------- */

.csc-resources__main {
	display: flex;
	flex-direction: column;
	gap: var(--csc-space-8);
	min-width: 0;
}

.csc-resources__fab {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--csc-space-4);
}

.csc-resources__heading {
	margin: 0;
	font-size: var(--csc-fs-h3);
	font-weight: 700;
	line-height: 1.25;
	color: var(--csc-ink);
	text-wrap: balance;
}

/* The slab face, spent once in this section and nowhere else in it. Inline so
 * it sits on the heading's own baseline rather than shifting the line box. */
.csc-resources__slab {
	font-family: var(--csc-font-slab);
	font-weight: 400;
}

/* As wide as the photo under it (Kristin, 22 Oct; it was 52ch, 438px of the
 * 696px column). Where the column takes the full width, below 1025px, about
 * 80 characters a line keeps it readable. */
.csc-resources__body {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: var(--csc-lh-body);
	color: var(--csc-ink-2);
	text-wrap: pretty;
}

/* The frame is a hairline, not a card: no radius beyond the system's 2px and
 * no shadow, so a photograph sits in the page rather than floating above it.
 * aspect-ratio holds the 696 x 262 proportion while the column is fluid, so a
 * late image cannot change the section's height. */
.csc-resources__figure {
	margin: 0;
	width: 100%;
	border: var(--csc-hairline);
	border-radius: var(--csc-radius);
	overflow: hidden;
}

.csc-resources__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 696 / 262;
	object-fit: cover;
	max-width: 100%;
}

.csc-resources__more {
	font-size: var(--csc-fs-ui);
	font-weight: 700;
	line-height: 1.3;
	color: var(--csc-link);
	text-decoration: none;
	transition: color 120ms ease;
}

.csc-resources__more:hover {
	color: var(--csc-blue-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Right: the Resource Center ------------------------------------------ */

.csc-resources__aside {
	display: flex;
	flex-direction: column;
	gap: var(--csc-space-6);
}

.csc-resources__rc {
	display: flex;
	flex-direction: column;
	gap: var(--csc-space-3);
}

.csc-resources__rc-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--csc-space-4);
}

.csc-resources__hub {
	font-size: var(--csc-fs-copy);
	font-weight: 700;
	color: var(--csc-link);
	text-decoration: none;
	transition: color 120ms ease;
}

.csc-resources__hub:hover {
	color: var(--csc-blue-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.csc-resources__rc-heading {
	margin: 0;
	font-size: var(--csc-fs-h3);
	font-weight: 700;
	line-height: 1.25;
	color: var(--csc-ink);
	text-wrap: balance;
}

/* Rows separated by rules rather than boxed as cards. Three files in a list is
 * a list; three files in three bordered boxes is three competing objects. */
.csc-resources__charts {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--csc-hairline);
}

.csc-resources__chart {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-block: var(--csc-space-5);
	border-bottom: var(--csc-hairline);
}

/* --csc-ink-3, not the artboard's #98A4B5. That value measured 2.53:1 on white
 * and is deliberately absent from the token sheet — this is the same
 * substitution the field hints got, at 5.44:1. Specs §7.1. */
.csc-resources__tag {
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--csc-ink-3);
}

.csc-resources__chart-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--csc-link);
	text-decoration: none;
	transition: color 120ms ease;
}

.csc-resources__chart-title:hover {
	color: var(--csc-blue-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.csc-resources__chart-body {
	font-size: var(--csc-fs-copy);
	line-height: var(--csc-lh-body);
	color: var(--csc-ink-3);
	text-wrap: pretty;
}

/* --- The Studio box ------------------------------------------------------- */

.csc-resources__studio {
	display: flex;
	flex-direction: column;
	gap: var(--csc-space-2);
	padding: var(--csc-space-5);
	background: var(--csc-bg);
	border: var(--csc-hairline);
	border-radius: var(--csc-radius);
}

.csc-resources__studio-eyebrow {
	font-family: var(--csc-font-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: var(--csc-ls-eyebrow);
	text-transform: uppercase;
	color: var(--csc-link);
}

.csc-resources__studio-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--csc-ink);
}

.csc-resources__studio-body {
	margin: 0;
	font-size: 13.5px;
	line-height: var(--csc-lh-body);
	color: var(--csc-ink-2);
	text-wrap: pretty;
}

.csc-resources__studio-link {
	align-self: flex-start;
	margin-top: var(--csc-space-1);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--csc-link);
	text-decoration: none;
	transition: color 120ms ease;
}

.csc-resources__studio-link:hover {
	color: var(--csc-blue-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.csc-resources__body {
		max-width: 80ch;
	}

	.csc-resources__band {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--csc-space-12);
	}
}

@media (max-width: 767px) {
	.csc-resources__chart { padding-block: var(--csc-space-4); }
	.csc-resources__studio { padding: var(--csc-space-4); }
}