/*
 * Clique Blocks — shared design tokens + base classes.
 * Self-contained so blocks render identically under any theme + in the editor.
 * Source of truth: assets/source/clique-homepage-mockup.min.css (:root + shared).
 */
:root {
	--paper: #F5F1EC;
	--paper-2: #EDE7DD;
	--paper-3: #E1D9CA;
	--ink: #1A1915;
	--ink-soft: #3A3933;
	--ink-muted: #6F6C63;
	--oxblood: #8A2A1E;
	--oxblood-dk: #6B1E14;
	--laurel: #5C6B3C;
	--gold: #B0894A;
	--line: #C9C1AE;
	--r-pill: 999px;
	--r-card: 12px;
	--r-btn: 8px;
	--f-display: 'Fraunces', 'Times New Roman', serif;
	--f-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
	--f-mono: 'JetBrains Mono', ui-monospace, monospace;
	--container: 1280px;
}

/* Scope base styling to our blocks so we never fight the theme's globals. */
.clique-section { font-family: var(--f-body); color: var(--ink-soft); }
.clique-section img { max-width: 100%; display: block; }
.clique-section a { color: inherit; text-decoration: none; }

.clique-section .container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
	position: relative;
	z-index: 2;
}

.clique-section .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--f-mono);
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 28px;
}
.clique-section .eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--oxblood);
}

/* Buttons */
.clique-section .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	font-family: var(--f-body);
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--r-btn);
	transition: transform .15s, background .2s, box-shadow .2s;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}
.clique-section .btn-primary { background: var(--oxblood); color: var(--paper); }
.clique-section .btn-primary:hover { background: var(--oxblood-dk); transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(138,42,30,.4); }
.clique-section .btn-ink { background: var(--ink); color: var(--paper); }
.clique-section .btn-paper { background: var(--paper); color: var(--ink); }
.clique-section .btn-lg { padding: 16px 28px; font-size: 14px; }
.clique-section .btn .arrow { transition: transform .2s; letter-spacing: 0; }
.clique-section .btn:hover .arrow { transform: translateX(3px); }

/* Section head (shared by fit / leaks / etc.) */
.clique-section .section-head {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 64px;
	margin-bottom: 72px;
	align-items: end;
}
.clique-section .section-head h2 {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(38px, 4.4vw, 58px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--ink);
	max-width: 720px;
}
.clique-section .section-head h2 em { font-style: italic; color: var(--oxblood); }
.clique-section .section-head p {
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 540px;
}

@media (max-width: 1024px) {
	.clique-section .section-head { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
	.clique-section .container { padding: 0 20px; }
}