/**
 * === Section 05 Patient Journey — Card-on-Canvas với Stepper + Tips ===
 *
 * Mô tả: Section 05 dùng card-on-canvas, bên trong có stepper quy trình
 *        và 2 tips cards ngang phía dưới.
 *
 * Flow:
 *   1. .section-05-journey — scoping class cho card wrapper
 *   2. .patient-journey__process — stepper block trên
 *   3. .patient-journey__divider — visual separator
 *   4. .patient-journey__tips-row — 2 cards ngang
 *   5. .journey-tip-card — individual tip card styling
 */

.section-05-journey {
	position: relative;
}

.patient-journey__divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 40px 0;
}

/* Tips 2-col row */
.patient-journey__tips-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 16px;
}

.journey-tip-card {
	background: var(--color-surface-warm);
	border-radius: var(--radius-xl);
	padding: 24px;
	border: 1px solid var(--color-border);
}

.journey-tip-card__title {
	font: var(--weight-semibold) var(--text-h4) / var(--lh-heading) var(--font-primary);
	color: var(--color-ink-strong);
	margin: 0 0 16px;
}

.journey-tip-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.journey-tip-card__list li {
	font: var(--weight-regular) var(--text-body) / var(--lh-body) var(--font-primary);
	color: var(--color-ink-default);
	padding-left: 20px;
	position: relative;
}

.journey-tip-card__list li::before {
	content: "•";
	position: absolute;
	left: 6px;
	color: var(--color-brand-primary);
	font-weight: var(--weight-bold);
}

.journey-tip-card__cta {
	display: inline-block;
}

/* Support card variant */
.journey-tip-card--support {
	background: var(--color-brand-soft);
	border-color: transparent;
}

.journey-tip-card--support .journey-tip-card__title {
	color: var(--color-brand-primary);
}

@media (max-width: 767px) {
	.patient-journey__tips-row {
		grid-template-columns: 1fr;
	}
}