/* ════════════════════════════════════════════════════════════════════
   css/icms-guides.css — the /guides/ pages (2026-10-31).
   Builds on the .icms-marketing-page scope in css/icms-modern.css and
   its tokens; everything here is under .icms-guide so no other page is
   touched. No <table> — css/responsive.css force-sizes td/th sitewide.
   ════════════════════════════════════════════════════════════════════ */

.icms-guide { max-width: 780px; }

.icms-guide-crumbs {
	font-size: 13px;
	color: var(--ink-400);
	margin: 0 0 var(--sp-4);
}
.icms-guide-crumbs a { color: var(--ink-500); text-decoration: none; }
.icms-guide-crumbs a:hover { color: var(--ink-900); text-decoration: underline; }
.icms-guide-crumbs span[aria-hidden] { margin: 0 6px; }

/* The direct answer — what a snippet or an AI answer quotes. */
.icms-guide-answer {
	background: var(--gold-50);
	border: 1px solid var(--gold-200);
	border-left: 4px solid var(--gold-500);
	border-radius: var(--radius);
	padding: var(--sp-4) var(--sp-5);
	margin: 0 0 var(--sp-5);
}
.icms-guide-answer p { margin: 0; color: var(--ink-800); }
.icms-guide-answer .icms-guide-answer__k {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-700);
	margin-bottom: 6px;
}

/* "Make it with InteligentCMS" */
.icms-guide-make {
	margin: var(--sp-7) 0 0;
	padding: var(--sp-5);
	background: #0f172a;
	border-radius: 14px;
	color: #e2e8f0;
}
.icms-guide-make h2 { color: #ffffff; margin-top: 0; }
.icms-guide-make ol { margin: 0 0 var(--sp-4); }
.icms-guide-make li { color: #cbd5e1; }
.icms-guide-make__cta { display: flex; flex-wrap: wrap; gap: 10px; }

.icms-marketing-page .icms-guide-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--gold-500);
	color: #0f172a;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
}
.icms-marketing-page .icms-guide-btn:hover { background: #fcd34d; color: #0f172a; }
.icms-marketing-page .icms-guide-btn--ghost {
	background: transparent;
	color: #ffffff;
	border: 1px solid #475569;
}
.icms-marketing-page .icms-guide-btn--ghost:hover { background: #1e293b; color: #ffffff; }

/* FAQ — native <details>, works with no JavaScript and is crawlable. */
.icms-guide-faq details {
	border: 1px solid var(--ink-100, #e2e8f0);
	border-radius: var(--radius);
	padding: 0 var(--sp-4);
	margin: 0 0 10px;
	background: #ffffff;
}
.icms-guide-faq summary {
	cursor: pointer;
	padding: 14px 0;
	font-weight: 700;
	color: var(--ink-900);
	list-style: none;
}
.icms-guide-faq summary::-webkit-details-marker { display: none; }
.icms-guide-faq summary::after { content: "+"; float: right; color: var(--gold-700); font-weight: 800; }
.icms-guide-faq details[open] summary::after { content: "\2212"; }
.icms-guide-faq details p { margin: 0 0 14px; }

/* Guide cards — hub list and "Related guides". div + grid, never a table. */
.icms-guide-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
	margin: var(--sp-4) 0 0;
}
.icms-marketing-page .icms-guide-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--sp-4);
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #ffffff;
	text-decoration: none;
	color: inherit;
	transition: border-color .2s, box-shadow .2s;
}
.icms-marketing-page .icms-guide-card:hover { border-color: var(--gold-500); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.icms-guide-card__tag {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold-700);
	background: var(--gold-50);
	border-radius: 999px;
	padding: 3px 9px;
}
.icms-guide-card__t { font-weight: 800; color: var(--ink-900); line-height: 1.3; }
.icms-guide-card__s { font-size: 14px; color: var(--ink-500); line-height: 1.5; }
.icms-guide-cards--small { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

@media (max-width: 520px) {
	.icms-guide-make { padding: var(--sp-4); }
	.icms-guide-cards { grid-template-columns: 1fr; }
}