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

/* ─── Index view: rows with "add to my bar" plus button ────────── */
.cg-listpage-items.cg-drank-items li {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 0;
}
.cg-listpage-items.cg-drank-items .cg-drank-add {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	color: var(--cg-green-text);
	border-radius: 99px;
	transition: transform .15s, background .15s;
	text-decoration: none;
	flex-shrink: 0;
}
.cg-listpage-items.cg-drank-items .cg-drank-add:hover {
	transform: scale(1.15);
	background: var(--cg-green-soft);
}
.cg-listpage-items.cg-drank-items a.cg-drank-name {
	flex: 1; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Detail view ────────────────────────────────────────────── */
.cg-drank { font-family: var(--cg-font-ui); color: var(--cg-ink); }
.cg-drank * { box-sizing: border-box; }
.cg-drank a { color: inherit; }
.cg-drank em.cg-em-pink {
	font-style: italic; color: var(--cg-pink);
	font-family: var(--cg-font-display);
}
.cg-drank .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;
}

.cg-drank-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-drank-hero { grid-template-columns: 1.3fr 1fr; gap: 48px; }
}
.cg-drank-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-drank-cta-row {
	display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
	margin: 10px 0 24px;
}
.cg-drank-desc {
	color: var(--cg-ink-70); line-height: 1.65; font-size: 15px;
	margin-top: 20px; max-width: 560px;
}
.cg-drank-desc p:first-child { margin-top: 0; }
.cg-drank-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.1;
}
.cg-drank-imgwrap img {
	display: block;
	max-width: 100%; max-height: 100%;
	width: auto; height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* ─── Sections ───────────────────────────────────────────────── */
.cg-drank-section {
	padding-top: clamp(36px, 5vw, 56px);
	margin-top: clamp(36px, 5vw, 56px);
	border-top: 1px solid var(--cg-ink-08);
}
.cg-drank-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 8px;
}
.cg-drank-section-sub {
	font-size: 14px; color: var(--cg-ink-70);
	margin: 0 0 20px;
}
.cg-drank-empty {
	color: var(--cg-ink-70); font-size: 15px; line-height: 1.6;
}
.cg-drank-section .cg-link {
	margin-top: 18px;
}