/* =========================================================
   Resources page — extracted from the prototype's inline <style>.
   Loaded only on the page using the Resources template.
   ========================================================= */

.res-intro { max-width: 720px; }
.res-intro p { font-size: 1.1rem; color: var(--ink-soft); }

.res-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 8px;
}
@media (max-width: 980px) { .res-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .res-grid { grid-template-columns: 1fr; } }

.res-card {
	background: white;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
}
.res-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--accent, var(--orange-deep));
}
.res-card.c-orange { --accent: var(--orange-deep); }
.res-card.c-blue   { --accent: var(--blue); }
.res-card.c-teal   { --accent: #2E7B74; }

.res-icon {
	width: 56px; height: 56px;
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	background: var(--accent-soft, #FCE9DD);
	color: var(--accent);
	flex-shrink: 0;
}
.res-card.c-orange .res-icon { background: #FCE9DD; }
.res-card.c-blue   .res-icon { background: #DCEAF3; }
.res-card.c-teal   .res-icon { background: #D9F0ED; }
.res-icon svg { width: 28px; height: 28px; }

.res-card h3 {
	font-family: var(--f-display);
	font-size: 1.4rem;
	margin: 0;
	color: var(--ink);
}
.res-card p {
	color: var(--ink-soft);
	font-size: 0.97rem;
	line-height: 1.55;
	margin: 0;
	flex-grow: 1;
}
.res-meta {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
}
.res-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-soft); opacity: 0.5; }

.res-download {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	background: var(--accent);
	color: white;
	border: none;
	border-radius: 12px;
	font-weight: 700;
	font-family: var(--f-body);
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease;
	align-self: flex-start;
}
.res-download:hover { transform: translateY(-1px); filter: brightness(0.95); text-decoration: none; }
.res-download.disabled {
	background: #EFE9E0;
	color: #9A8A77;
	cursor: not-allowed;
	pointer-events: none;
}
.res-download svg { width: 16px; height: 16px; }

.res-help {
	margin-top: 56px;
	background: var(--cream-deep, #F8EFE2);
	border-radius: var(--radius-lg);
	padding: 36px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.res-help h3 { font-family: var(--f-display); margin: 0 0 6px; font-size: 1.4rem; }
.res-help p { color: var(--ink-soft); margin: 0; max-width: 460px; }