/* Learning Hub page — /learning/. Additive layer on home.css.
   3-lens umbrella: Path · Subject · Mode.
   Layout: principles → triangle intro → 3 full lens sections → closing CTA. */

.aryf-lh {
	--lh-card-bg: rgba(255, 255, 255, 0.04);
	--lh-card-border: rgba(255, 255, 255, 0.10);
	--lh-card-radius: 18px;
}

/* Smooth in-page anchoring from triangle vertices → lens sections.
   scroll-margin keeps the anchored heading clear of the sticky header. */
html { scroll-behavior: smooth; }
.aryf-lh [id] { scroll-margin-top: 90px; }

/* ---------- Hero with triangle ---------- */
.aryf-lh-hero .aryf-home-hero__inner {
	padding-bottom: 1.2rem;
}
.aryf-lh-hero__philolink {
	margin: 1.2rem 0 0;
	text-align: center;
}
.aryf-lh-hero__philolink a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: #cfd6e0;
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	padding-bottom: 2px;
	transition: color 180ms ease, border-color 180ms ease;
}
.aryf-lh-hero__philolink a:hover,
.aryf-lh-hero__philolink a:focus-visible {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.6);
}
.aryf-lh-hero__philolink svg {
	transition: transform 180ms ease;
}
.aryf-lh-hero__philolink a:hover svg,
.aryf-lh-hero__philolink a:focus-visible svg {
	transform: translateY(2px);
}

/* ---------- Principles strip ---------- */
.aryf-lh-pringrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.aryf-lh-principle {
	background: var(--lh-card-bg);
	border: 1px solid var(--lh-card-border);
	border-radius: 14px;
	padding: 1.3rem 1.25rem 1.2rem;
	transition: background 200ms ease, border-color 200ms ease;
}
.aryf-lh-principle:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
}
.aryf-lh-principle__h {
	color: #fff;
	font-size: 1.02rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}
.aryf-lh-principle__p {
	color: #c5cdd8;
	font-size: 0.93rem;
	line-height: 1.55;
	margin: 0;
}

/* ---------- Triangle visualization (lives inside the hero) ---------- */
.aryf-lh-triangle {
	max-width: 520px;
	margin: 1.2rem auto 0;
	color: rgba(255, 255, 255, 0.42); /* drives the dashed connector lines */
}
.aryf-lh-triangle svg {
	display: block;
	width: 100%;
	height: auto;
}
.aryf-lh-tri__vertex circle {
	stroke-width: 1.6;
	fill: rgba(255, 255, 255, 0.04);
	transition: fill 220ms ease, stroke 220ms ease, transform 220ms ease;
}
.aryf-lh-tri__vertex:hover circle,
.aryf-lh-tri__vertex:focus-visible circle {
	fill: rgba(255, 255, 255, 0.08);
}
.aryf-lh-tri__vertex { cursor: pointer; outline: none; }
.aryf-lh-tri__vertex--blue   circle { stroke: var(--c-blue); }
.aryf-lh-tri__vertex--teal   circle { stroke: var(--c-teal); }
.aryf-lh-tri__vertex--purple circle { stroke: var(--c-purple); }
.aryf-lh-tri__vertex--blue   .aryf-lh-tri__label { fill: var(--c-blue); }
.aryf-lh-tri__vertex--teal   .aryf-lh-tri__label { fill: var(--c-teal); }
.aryf-lh-tri__vertex--purple .aryf-lh-tri__label { fill: var(--c-purple); }
.aryf-lh-tri__label {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.aryf-lh-tri__sub {
	font-size: 13px;
	fill: #d6dde6;
	letter-spacing: 0.04em;
}

/* ---------- Per-axis full sections ---------- */
.aryf-lh-lens-sec {
	position: relative;
}
.aryf-lh-lens-sec__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 3.2rem;
	align-items: center;
}
.aryf-lh-lens-sec--reverse .aryf-lh-lens-sec__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.aryf-lh-lens-sec--reverse .aryf-lh-lens-sec__text {
	order: 2;
}
.aryf-lh-lens-sec--reverse .aryf-lh-lens-sec__visual {
	order: 1;
}

/* Per-accent text color on the eyebrow */
.aryf-lh-lens-sec--blue   .aryf-home-eyebrow { color: var(--c-blue); }
.aryf-lh-lens-sec--teal   .aryf-home-eyebrow { color: var(--c-teal); }
.aryf-lh-lens-sec--purple .aryf-home-eyebrow { color: var(--c-purple); }

.aryf-lh-lens-sec__text .aryf-home-h2 {
	margin-top: 0.4rem;
	margin-bottom: 1rem;
	font-size: 2.05rem;
	line-height: 1.18;
}
.aryf-lh-lens-sec__text .aryf-home-p {
	color: #c9d1de;
	margin-bottom: 0.95rem;
	font-size: 1rem;
	line-height: 1.65;
}
.aryf-lh-lens-sec__text .aryf-home-p strong {
	color: #ffffff;
	font-weight: 600;
}
.aryf-lh-lens-sec__cta {
	margin-top: 0.8rem;
}

/* Subtle inter-section divider (very thin gradient line) */
.aryf-lh-lens-sec + .aryf-lh-lens-sec::before {
	content: "";
	display: block;
	max-width: 1180px;
	margin: 0 auto 1rem;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.10) 50%,
		rgba(255, 255, 255, 0) 100%);
}

/* ---------- Visual previews per lens ---------- */

/* Lens 1 (Path) — 3-step stageline */
.aryf-lh-stageline {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.aryf-lh-stageline__item {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1rem 1.2rem;
	background: var(--lh-card-bg);
	border: 1px solid var(--lh-card-border);
	border-left-width: 3px;
	border-radius: 12px;
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
}
.aryf-lh-lens-sec--blue .aryf-lh-stageline__item   { border-left-color: var(--c-blue); }
.aryf-lh-stageline__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--c-blue) 22%, transparent);
	color: var(--c-blue);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.aryf-lh-stageline__label {
	flex: 1;
}

/* Lens 2 (Subject) — 6-tile subject grid */
.aryf-lh-subjectgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.aryf-lh-subjectgrid__item {
	padding: 0.95rem 1rem;
	background: var(--lh-card-bg);
	border: 1px solid var(--lh-card-border);
	border-radius: 12px;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 500;
	text-align: center;
	transition: background 200ms ease, border-color 200ms ease;
}
.aryf-lh-lens-sec--teal .aryf-lh-subjectgrid__item:hover {
	background: color-mix(in srgb, var(--c-teal) 10%, transparent);
	border-color: color-mix(in srgb, var(--c-teal) 32%, transparent);
}

/* Lens 3 (Mode) — 2-card free vs cohort pair */
.aryf-lh-modepair {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.9rem;
}
.aryf-lh-modecard {
	padding: 1.3rem 1.25rem 1.25rem;
	background: var(--lh-card-bg);
	border: 1px solid var(--lh-card-border);
	border-radius: 14px;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.aryf-lh-modecard--free {
	border-top: 3px solid var(--c-teal);
}
.aryf-lh-modecard--cohort {
	border-top: 3px solid var(--c-purple);
}
.aryf-lh-modecard__h {
	color: #fff;
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}
.aryf-lh-modecard__p {
	color: #c5cdd8;
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
}

/* ---------- Trailing single CTA under philosophy ---------- */
.aryf-lh-tail {
	margin-top: 2.4rem;
	text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.aryf-lh-pringrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.aryf-lh-lens-sec__inner,
	.aryf-lh-lens-sec--reverse .aryf-lh-lens-sec__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	/* On mobile, text first, visual after — even for the reversed section */
	.aryf-lh-lens-sec--reverse .aryf-lh-lens-sec__text   { order: 1; }
	.aryf-lh-lens-sec--reverse .aryf-lh-lens-sec__visual { order: 2; }
	.aryf-lh-lens-sec__text .aryf-home-h2 {
		font-size: 1.7rem;
	}
}
@media (max-width: 600px) {
	.aryf-lh-pringrid {
		grid-template-columns: 1fr;
		gap: 0.8rem;
	}
	.aryf-lh-modepair {
		grid-template-columns: 1fr;
	}
	.aryf-lh-cta__ctas {
		flex-direction: column;
		gap: 0.7rem;
	}
	/* Triangle: make text inside circles legible on smaller widths */
	.aryf-lh-tri__label { font-size: 26px; }
	.aryf-lh-tri__sub   { font-size: 15px; }
}