/* Cocktailgids — tools pages (variant A redesign, 2026).
   Loaded only on /tools.php. Index view reuses .cg-listpage from chrome.css;
   detail view defines its own .cg-tool scope. */

.cg-tool { font-family: var(--cg-font-ui); color: var(--cg-ink); }
.cg-tool * { box-sizing: border-box; }
.cg-tool a { color: inherit; }
.cg-tool em.cg-em-pink {
	font-style: italic; color: var(--cg-pink);
	font-family: var(--cg-font-display);
}
.cg-tool .cg-eyebrow {
	font-family: var(--cg-font-mono); font-size: 11px;
	color: var(--cg-green-text); letter-spacing: 0.14em;
	text-transform: uppercase; margin-bottom: 8px;
	font-weight: 500; display: block;
}

/* ─── Hero ───────────────────────────────────────────────────── */
.cg-tool-hero {
	display: grid; grid-template-columns: 1fr; gap: 32px;
	padding: clamp(20px, 4vw, 40px) 0 clamp(28px, 4vw, 44px);
	align-items: start;
}
@media (min-width: 900px) {
	.cg-tool-hero { grid-template-columns: 1.3fr 1fr; gap: 48px; }
}
.cg-tool-title {
	font-family: var(--cg-font-display); font-weight: 400;
	font-size: clamp(36px, 6vw, 64px); line-height: 1.02;
	letter-spacing: -0.02em; margin: 0 0 14px;
	color: var(--cg-ink);
}
.cg-tool-price {
	display: inline-flex; align-items: baseline; gap: 6px;
	font-family: var(--cg-font-mono); font-size: 13px;
	color: var(--cg-ink-50); letter-spacing: 0.04em;
	text-transform: uppercase; margin: 4px 0 18px;
}
.cg-tool-price strong {
	font-family: var(--cg-font-display); font-size: 22px;
	color: var(--cg-pink); font-weight: 400; letter-spacing: 0;
	text-transform: none;
}
.cg-tool-cta-row {
	display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
	margin: 4px 0 24px;
}
.cg-tool-cta-row .cg-tool-buy-logo {
	height: 16px; width: auto; display: inline-block;
	background: var(--cg-paper); border-radius: 3px; padding: 2px 4px;
}
.cg-tool-desc {
	color: var(--cg-ink-70); line-height: 1.65; font-size: 15px;
	margin-top: 4px; max-width: 560px;
}
.cg-tool-imgwrap {
	width: 100%; max-width: 360px;
	margin-left: auto; margin-right: auto;
	display: flex; align-items: center; justify-content: center;
	background: var(--cg-paper);
	border: 1px solid var(--cg-ink-08);
	border-radius: 12px;
	padding: clamp(20px, 4vw, 40px);
	aspect-ratio: 1 / 1;
}
.cg-tool-imgwrap img {
	display: block;
	max-width: 100%; max-height: 100%;
	width: auto; height: auto;
	object-fit: contain;
}

/* ─── Sections ───────────────────────────────────────────────── */
.cg-tool-section {
	padding-top: clamp(36px, 5vw, 56px);
	margin-top: clamp(36px, 5vw, 56px);
	border-top: 1px solid var(--cg-ink-08);
}
.cg-tool-section h2 {
	font-family: var(--cg-font-display); font-weight: 400;
	font-size: clamp(26px, 3.5vw, 36px);
	letter-spacing: -0.015em; line-height: 1.1;
	margin: 0 0 16px;
}