/* ============================================================
   Components — buttons, eyebrows, cards, chips, section shells.
   ============================================================ */

/* ---- Section shells ---- */
.section {
	position: relative;
	z-index: 2;
	padding: var(--section-pad-y) var(--section-pad-x);
	background: var(--bg-1);
}

.section--panel {
	background: var(--bg-2);
	border-top: 1px solid var(--divider);
}

.section--cta {
	background: var(--bg-3);
	border-top: 1px solid var(--divider);
}

.section__inner {
	max-width: var(--content-max);
	margin: 0 auto;
}

.section__inner--narrow {
	max-width: var(--content-narrow);
}

.section__inner--prose {
	max-width: var(--content-prose);
}

.section__head {
	text-align: center;
	margin-bottom: 72px;
}

.section__head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	text-align: left;
	margin-bottom: 56px;
	gap: 24px;
	flex-wrap: wrap;
}

.section__head--tight {
	margin-bottom: 56px;
}

/* ---- Eyebrow ---- */
.eyebrow {
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--red-soft);
	font-weight: 600;
	margin-bottom: 16px;
}

/* ---- Headings ---- */
.h2 {
	font-size: var(--h2);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0;
}

.h2--lg {
	font-size: var(--h2-lg);
}

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 60px;
	padding: 0 40px;
	border-radius: var(--radius-pill);
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border: none;
	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn--white {
	background: #fff;
	color: #111;
	box-shadow: var(--btn-shadow);
}

.btn--white:hover {
	background: #eee;
	color: #111;
}

.btn--red {
	background: var(--red);
	color: #fff;
}

.btn--red:hover {
	background: var(--red-hover);
	color: #fff;
}

.btn--outline {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn--outline:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.btn--sm {
	height: 52px;
	padding: 0 28px;
	font-size: 15px;
}

.btn--xs {
	height: 42px;
	padding: 0 20px;
	font-size: 14px;
}

/* ---- Cards ---- */
.card {
	background: var(--card-fill);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-card);
	transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.card--gradient {
	background: var(--card-gradient);
}

.card--lift:hover {
	border-color: var(--card-border-hover);
	transform: translateY(-6px);
}

.card--glow:hover {
	border-color: var(--card-border-hover);
}

/* ---- Chips / pill tags ---- */
.chip {
	display: inline-block;
	font-size: 12px;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: var(--chip-bg);
	color: var(--red-soft);
	font-weight: 600;
}

.chip--muted {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-2);
}

/* ---- Icon tile ---- */
.icon-tile {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-tile);
	background: var(--chip-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--text-1);
}

/* ---- Check chip (checklist rows) ---- */
.check-chip {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--chip-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--red-soft);
	font-size: 16px;
	font-weight: 700;
}

/* ---- Media placeholder (until real photography lands) ---- */
.media-ph {
	background: linear-gradient(135deg, rgba(200, 16, 46, 0.22), rgba(10, 5, 6, 0.5));
}

.avatar-ph {
	background: linear-gradient(135deg, rgba(200, 16, 46, 0.35), rgba(255, 255, 255, 0.06));
}