/* ==========================================================================
   Tree of Life — Conditions CPT — Frontend Styles
   ==========================================================================
   Uses the theme's CSS custom properties (variables.css) so every colour,
   font, and spacing value stays in sync with the main design system.

   BEM naming convention matches the theme's component library.
   Mobile-first responsive breakpoints: 640px / 768px / 1024px.
   ========================================================================== */

/* ------------------------------------------------------------------
   INTRO SECTION (definition + featured image)
   ------------------------------------------------------------------ */
.condition-intro .two-col__description {
	font-size: var(--fs-md, 1.8rem);
	line-height: var(--lh-relaxed, 1.7);
	color: var(--color-text-muted, #6B6D64);
}

.condition-intro .two-col__description p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   UNDERSTANDING SECTION
   ------------------------------------------------------------------ */
.condition-understanding__content {
	max-width: 80rem;
	margin-inline: auto;
	font-size: var(--fs-md, 1.8rem);
	line-height: var(--lh-relaxed, 1.7);
	color: var(--color-text-dark, #090908);
}

.condition-understanding__content h3 {
	margin-top: var(--space-2xl, 4.8rem);
	margin-bottom: var(--space-md, 1.6rem);
}

.condition-understanding__content p + p {
	margin-top: var(--space-md, 1.6rem);
}

/* ------------------------------------------------------------------
   COMMON CAUSES — Card Grid
   ------------------------------------------------------------------ */
.condition-causes__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl, 3.2rem);
}

@media (min-width: 640px) {
	.condition-causes__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.condition-causes__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Individual cause card */
.cause-card {
	background: var(--color-white, #fff);
	border-radius: var(--border-radius-lg, 16px);
	padding: var(--space-xl, 3.2rem) var(--space-lg, 2.4rem);
	text-align: center;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	transition: box-shadow var(--transition-base, 0.3s ease),
	            transform var(--transition-base, 0.3s ease);
}

.cause-card:hover {
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.10));
	transform: translateY(-2px);
}

.cause-card__icon {
	width: 6.4rem;
	height: 6.4rem;
	margin: 0 auto var(--space-md, 1.6rem);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cause-card__icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cause-card__icon--default {
	color: var(--color-sage, #9AA17B);
}

.cause-card__title {
	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: var(--fs-lg, 2.0rem);
	font-weight: var(--fw-semibold, 600);
	margin-bottom: var(--space-sm, 0.8rem);
	color: var(--color-text-dark, #090908);
}

.cause-card__description {
	font-size: var(--fs-sm, 1.4rem);
	line-height: var(--lh-relaxed, 1.7);
	color: var(--color-text-muted, #6B6D64);
	margin: 0;
}

/* ------------------------------------------------------------------
   TREATMENTS — 3-Column Grid
   ------------------------------------------------------------------ */
.condition-treatments__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl, 3.2rem);
}

@media (min-width: 768px) {
	.condition-treatments__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.condition-treatments__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Individual treatment card */
.treatment-card {
	background: var(--color-background-warm, #EAECE4);
	border-radius: var(--border-radius-lg, 16px);
	padding: var(--space-xl, 3.2rem);
}

.treatment-card__number {
	display: inline-block;
	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: var(--fs-3xl, 4.0rem);
	font-weight: var(--fw-bold, 700);
	color: var(--color-sage, #9AA17B);
	line-height: 1;
	margin-bottom: var(--space-md, 1.6rem);
}

.treatment-card__title {
	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: var(--fs-xl, 2.4rem);
	font-weight: var(--fw-semibold, 600);
	margin-bottom: var(--space-sm, 0.8rem);
	color: var(--color-text-dark, #090908);
}

.treatment-card__description {
	font-size: var(--fs-sm, 1.4rem);
	line-height: var(--lh-relaxed, 1.7);
	color: var(--color-text-muted, #6B6D64);
	margin: 0;
}

/* ------------------------------------------------------------------
   SECTION ACTIONS — extra breathing room above buttons
   ------------------------------------------------------------------ */
.condition-single .two-col__actions {
	margin-top: var(--space-xl, 3.2rem);
}

/* ------------------------------------------------------------------
   CTA SECTION — centered actions on dark scheme
   ------------------------------------------------------------------ */
.condition-cta .two-col__actions--center {
	display: flex;
	justify-content: center;
	margin-top: var(--space-xl, 3.2rem);
}

/* ------------------------------------------------------------------
   RELATED CONDITIONS — 3-column card grid
   ------------------------------------------------------------------ */
.condition-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl, 3.2rem);
}

@media (min-width: 768px) {
	.condition-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.condition-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.condition-related__grid .condition-card {
	text-decoration: none;
	color: inherit;
	background: var(--color-white, #fff);
	border-radius: var(--border-radius-lg, 16px);
	overflow: hidden;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	transition: box-shadow var(--transition-base, 0.3s ease),
	            transform var(--transition-base, 0.3s ease);
}

.condition-related__grid .condition-card:hover {
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.10));
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------
   ARCHIVE — Conditions grouped grid
   ------------------------------------------------------------------ */
.condition-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl, 3.2rem);
}

@media (min-width: 640px) {
	.condition-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.condition-archive__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.condition-archive__grid .condition-card {
	text-decoration: none;
	color: inherit;
	background: var(--color-white, #fff);
	border-radius: var(--border-radius-lg, 16px);
	overflow: hidden;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	transition: box-shadow var(--transition-base, 0.3s ease),
	            transform var(--transition-base, 0.3s ease);
}

.condition-archive__grid .condition-card:hover {
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.10));
	transform: translateY(-2px);
}