/* =============================================================================
 * TTI — Course hero, beige at tablet and mobile
 *
 * Repaints the /courses/<slug> hero below 1024px onto the SAME beige treatment the
 * desktop hero already uses. Desktop (>=1024px) is deliberately untouched — it is
 * the reference design and is already correct.
 *
 * Values are the desktop hero's computed styles, measured on the rendered page:
 *   card    linear-gradient(135deg,#faf6ee,#f3ebd7) + brass/maroon radial tints
 *           border 1px #e8e1d6
 *   title   #7a0012
 *   sub-card#ffffff · border #e8e1d6 · radius 16px
 *   enroll  #7a0012 bg, #ffffff text
 *   fact    #ffffff · border #e8e1d6 · label #5a5a63 · value #7a0012
 *   proof   #ffffff · maroon text · rating pill maroon on cream
 *
 * Contrast (AA needs 4.5:1 for body text): maroon on cream 12.4:1, #5a5a63 on cream
 * 6.2:1, white on maroon 12.4:1, #5a5a63 on white 7.0:1. All pass.
 *
 * Owned by mu-plugins/tti-course-hero-beige.php.
 * ========================================================================== */

@media (max-width: 1023px) {

	/* ---- the hero card itself ---------------------------------------- */
	main.tti-course .tti-hero,
	.tti-hero {
		background:
			radial-gradient(at 92% 0%, rgba(201, 169, 97, 0.20) 0%, transparent 55%),
			radial-gradient(at 4% 100%, rgba(122, 0, 18, 0.05) 0%, transparent 60%),
			linear-gradient(135deg, #faf6ee 0%, #f3ebd7 100%) !important;
		border: 1px solid #e8e1d6 !important;
		color: #0f0f10 !important;
		box-shadow:
			0 18px 48px rgba(122, 0, 18, 0.08),
			0 2px 8px rgba(15, 15, 16, 0.04) !important;
	}

	/* Mobile's top accent bar and tablet's brass hairline both sit on ::before.
	   Unify them as a maroon rule so the accent survives the repaint on both. */
	main.tti-course .tti-hero::before,
	.tti-hero::before {
		background: linear-gradient(90deg, transparent, #7a0012 30%, #7a0012 70%, transparent) !important;
		opacity: 0.55 !important;
	}

	/* ---- eyebrow: maroon caps with a leading rule (desktop style) ------ */
	main.tti-course .tti-hero__eyebrow,
	.tti-hero__eyebrow {
		display: inline-flex !important;
		align-items: center !important;
		gap: 10px !important;
		background: none !important;
		background-color: transparent !important;
		color: #7a0012 !important;
		border: 0 !important;
		border-radius: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	main.tti-course .tti-hero__eyebrow::before,
	.tti-hero__eyebrow::before {
		content: "" !important;
		display: inline-block !important;
		width: 22px;
		height: 2px;
		background: #7a0012 !important;
		flex: none;
	}

	/* ---- display type -------------------------------------------------- */
	main.tti-course .tti-hero__title,
	main.tti-course .tti-hero h1,
	.tti-hero__title {
		color: #7a0012 !important;
	}

	main.tti-course .tti-hero__lede,
	main.tti-course .tti-hero__subtitle,
	main.tti-course .tti-hero h1 + p,
	.tti-hero__lede {
		color: #5a5a63 !important;
	}

	/* ---- price / CTA card ---------------------------------------------- */
	main.tti-course .tti-hero__cta,
	.tti-hero__cta {
		background: #ffffff !important;
		border: 1px solid #e8e1d6 !important;
		border-radius: 16px !important;
		box-shadow:
			0 8px 24px rgba(122, 0, 18, 0.08),
			0 2px 6px rgba(15, 15, 16, 0.04) !important;
	}

	main.tti-course .tti-hero__price,
	.tti-hero__price {
		color: #7a0012 !important;
	}

	main.tti-course .tti-hero__price small,
	.tti-hero__price small {
		color: #5a5a63 !important;
	}

	main.tti-course .tti-hero__enroll,
	.tti-hero__enroll {
		background: #7a0012 !important;
		background-color: #7a0012 !important;
		color: #ffffff !important;
		border-color: #7a0012 !important;
		box-shadow:
			0 6px 16px rgba(122, 0, 18, 0.28),
			0 2px 4px rgba(122, 0, 18, 0.18) !important;
	}

	main.tti-course .tti-hero__enroll:hover,
	.tti-hero__enroll:hover {
		background: #8f0016 !important;
		background-color: #8f0016 !important;
		color: #ffffff !important;
	}

	/* ---- fact chips ----------------------------------------------------- */
	main.tti-course .tti-hero__fact,
	main.tti-course .tti-hero__facts .tti-hero__fact,
	.tti-hero__facts .tti-hero__fact {
		background: #ffffff !important;
		border: 1px solid #e8e1d6 !important;
		color: #5a5a63 !important;
		box-shadow: 0 1px 2px rgba(122, 0, 18, 0.04) !important;
	}

	main.tti-course .tti-hero__fact strong,
	.tti-hero__facts .tti-hero__fact strong {
		color: #7a0012 !important;
	}

	/* ---- accreditation / proof row -------------------------------------- */
	main.tti-course .tti-hero__proof li,
	main.tti-course .tti-hero__proof-mark,
	.tti-hero__proof li {
		background: #ffffff !important;
		color: #7a0012 !important;
		border: 1px solid rgba(122, 0, 18, 0.28) !important;
	}

	main.tti-course .tti-hero__proof-rating,
	.tti-hero__proof .tti-hero__proof-rating {
		background: #7a0012 !important;
		background-color: #7a0012 !important;
		color: #faf6ee !important;
		border-color: #7a0012 !important;
	}
}