/**
 * Guides index (/guides/).
 *
 * Scoped to .cw-rd--guides and loaded only on that route, so nothing here can
 * reach another page. Follows price-index.css: page CSS ships with the plugin
 * rather than the theme so the page is one reviewable change in one repo, and a
 * theme deploy can never leave it unstyled.
 *
 * The shared page furniture (crumb, hero band, rail cards) is styled in the
 * theme, but its selector lists name each page modifier explicitly — .cw-rd--
 * resources, --suggestions, --login — so a new modifier inherits nothing. Those
 * rules are therefore restated here against the theme's own custom properties,
 * with literal fallbacks, so a palette change in the theme still carries
 * through rather than being frozen at today's values.
 */

.cw-rd--guides {
	overflow-x: clip;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */

.cw-rd--guides .cw-comm-crumb {
	max-width: var(--cw-maxw, 1160px);
	margin: 0 auto;
	padding: 20px 0 0;
	font-size: 13px;
	color: var(--cw-ink-3, #7a7264);
	display: flex;
	gap: 8px;
	align-items: center;
}

.cw-rd--guides .cw-comm-crumb a {
	color: var(--cw-ink-3, #7a7264);
}

.cw-rd--guides .cw-comm-crumb .cur {
	color: var(--cw-ink-2, #4c463c);
	font-weight: 600;
}

/* ── Hero band (full-bleed) ─────────────────────────────────────────────── */

.cw-rd--guides .cw-comm-bleed {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	padding-left: 24px;
	padding-right: 24px;
	margin-top: 16px;
}

.cw-rd--guides .cw-comm-hero {
	position: relative;
	background: var(--cw-surface, #fff);
	border-top: 1px solid var(--cw-line, #e8e1d6);
	border-bottom: 1px solid var(--cw-line, #e8e1d6);
}

.cw-rd--guides .cw-comm-hero:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cw-claret, #7c1626), var(--cw-gold, #9a7420));
}

.cw-rd--guides .cw-comm-hero-in {
	max-width: var(--cw-maxw, 1160px);
	margin: 0 auto;
	padding: 48px 0 32px;
}

.cw-rd--guides .cw-comm-hero .cw-eyebrow {
	margin-bottom: 13px;
	letter-spacing: .08em;
}

.cw-rd--guides .cw-comm-h1 {
	font-family: var(--cw-f-display, Georgia, serif);
	font-weight: 600;
	color: var(--cw-ink, #1a1712);
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1.06;
	letter-spacing: -.01em;
	margin: 0;
	max-width: 20ch;
}

.cw-rd--guides .cw-comm-lede {
	color: var(--cw-ink-2, #4c463c);
	font-size: clamp(16px, 1.9vw, 18.5px);
	line-height: 1.6;
	margin: 16px 0 0;
	max-width: 60ch;
}

/* ── Layout + rail cards ────────────────────────────────────────────────── */

.cw-rd--guides .cw-comm-layout {
	padding-top: 40px;
}

.cw-rd--guides .cw-card {
	background: var(--cw-surface, #fff);
	border: 1px solid var(--cw-line, #e8e1d6);
	border-radius: var(--cw-radius, 14px);
	box-shadow: var(--cw-shadow-sm, 0 1px 2px rgba(26, 23, 18, .05));
	padding: 24px;
}

.cw-rd--guides .cw-rail-head {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cw-ink-3, #7a7264);
	margin-bottom: 16px;
}

.cw-rd--guides .cw-howlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.cw-rd--guides .cw-howlist li {
	display: flex;
	gap: 11px;
	font-size: 13.5px;
	color: var(--cw-ink-2, #4c463c);
	line-height: 1.5;
}

.cw-rd--guides .cw-guides-sell {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--cw-ink-2, #4c463c);
}

.cw-rd--guides .cw-comm-empty {
	color: var(--cw-ink-3, #7a7264);
	text-align: center;
	padding: 48px 16px;
	font-size: 15px;
}

/* ── The guide cards ────────────────────────────────────────────────────── */

.cw-rd--guides .cw-guides-list {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.cw-rd--guides .cw-guides-list li {
	margin: 0;
	display: flex;
}

.cw-rd--guides .cw-guide {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
	padding: 20px 22px;
	background: var(--cw-surface, #fff);
	border: 1px solid var(--cw-line, #e8e1d6);
	border-radius: var(--cw-radius, 14px);
	box-shadow: var(--cw-shadow-sm, 0 1px 2px rgba(26, 23, 18, .05));
	color: inherit;
	text-decoration: none;
}

.cw-rd--guides .cw-guide:hover {
	border-color: var(--cw-claret, #7c1626);
	text-decoration: none;
}

.cw-rd--guides .cw-guide-eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cw-claret, #7c1626);
}

.cw-rd--guides .cw-guide-title {
	font-family: var(--cw-f-display, Georgia, serif);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	color: var(--cw-ink, #1a1712);
}

.cw-rd--guides .cw-guide-blurb {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--cw-ink-2, #4c463c);
}

/* Pushed to the foot of the card so a short blurb and a long one still line
   their counts up across a row. */
.cw-rd--guides .cw-guide-meta {
	margin-top: auto;
	padding-top: 10px;
	font-size: 12.5px;
	color: var(--cw-ink-3, #7a7264);
}

/* ── Closing prose ──────────────────────────────────────────────────────── */

.cw-rd--guides .cw-guides-sec {
	margin: 0 0 2.75rem;
}

.cw-rd--guides .cw-guides-sec h2 {
	margin: 0 0 .5rem;
}

.cw-rd--guides .cw-guides-sec p {
	color: var(--cw-ink-2, #4c463c);
	line-height: 1.65;
	margin: 0 0 1rem;
}

@media (max-width: 880px) {

	.cw-rd--guides .cw-comm-hero-in {
		padding: 36px 0 26px;
	}

	.cw-rd--guides .cw-guides-list {
		grid-template-columns: 1fr;
	}
}