/* ==========================================================================
   Individual ingredient page (/ingredients/{slug}/) — only enqueued here.
   ========================================================================== */

.lcbm-ingredient-detail-breadcrumbs {
	max-width: var(--lcbm-container-width);
	margin-inline: auto;
	padding-inline: var(--lcbm-space-sm);
}

.lcbm-ingredient-detail-hero { background: var(--lcbm-color-bg-light); padding-block: var(--lcbm-space-lg); }
.lcbm-ingredient-detail-hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lcbm-space-lg);
	align-items: center;
}
@media (min-width: 700px) { .lcbm-ingredient-detail-hero-inner { grid-template-columns: 1fr 420px; } }

.lcbm-ingredient-detail-hero-content h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.5rem; }
.lcbm-ingredient-detail-hero-benefit { font-size: 1.1rem; color: var(--lcbm-color-text-muted); max-width: 42ch; }

.lcbm-ingredient-detail-hero-media,
.lcbm-ingredient-detail-hero-placeholder {
	aspect-ratio: 4 / 3;
	border-radius: var(--lcbm-radius-lg);
	overflow: hidden;
	box-shadow: var(--lcbm-shadow-md);
}
.lcbm-ingredient-detail-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.lcbm-ingredient-detail-hero-placeholder { background: radial-gradient(circle at 30% 30%, var(--lcbm-color-secondary), var(--lcbm-color-primary) 70%); }

.lcbm-ingredient-detail-body {
	max-width: var(--lcbm-container-width);
	padding-block: var(--lcbm-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--lcbm-space-xl);
}

/* Paragraph-only sections (What Is X, X in Haircare, How to Use, the
   extra narrative sections) keep a readable line length even though the
   page itself is now full width — long unbroken lines of prose are hard
   to read, unlike the hair-types grid, comparison table and product grid
   below, which are meant to spread across the full width. */
.lcbm-ingredient-detail-prose { max-width: 760px; }

.lcbm-ingredient-detail-section h2 { margin-bottom: 0.75rem; }
.lcbm-ingredient-detail-section > p { color: var(--lcbm-color-text-muted); }

.lcbm-ingredient-detail-hairtypes {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lcbm-space-sm);
}
@media (min-width: 600px) { .lcbm-ingredient-detail-hairtypes { grid-template-columns: repeat(2, 1fr); } }
.lcbm-ingredient-detail-hairtype {
	background: var(--lcbm-color-bg-light);
	border-radius: var(--lcbm-radius-md);
	padding: var(--lcbm-space-sm) var(--lcbm-space-md);
}
.lcbm-ingredient-detail-hairtype h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.lcbm-ingredient-detail-hairtype p { color: var(--lcbm-color-text-muted); font-size: 0.9rem; margin: 0; }

.lcbm-ingredient-detail-table-wrap { overflow-x: auto; }
.lcbm-ingredient-detail-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.lcbm-ingredient-detail-table th,
.lcbm-ingredient-detail-table td {
	text-align: left;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--lcbm-color-border);
}
.lcbm-ingredient-detail-table thead th {
	font-family: var(--lcbm-font-heading);
	font-weight: 700;
	background: var(--lcbm-color-bg-light);
}
.lcbm-ingredient-detail-table tbody th { font-weight: 700; color: var(--lcbm-color-primary); white-space: nowrap; }
.lcbm-ingredient-detail-table tbody tr:hover { background: var(--lcbm-color-bg-light); }

.lcbm-ingredient-detail-related { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.lcbm-ingredient-detail-related-link {
	padding: 0.6rem 1.2rem;
	border-radius: var(--lcbm-radius-pill);
	border: 1px solid var(--lcbm-color-border);
	font-weight: 600;
	font-size: 0.9rem;
}
.lcbm-ingredient-detail-related-link:hover { border-color: var(--lcbm-color-primary); color: var(--lcbm-color-primary); }