/* AH Learn Hub: courses (tall) | community (tall, navy, featured, in the middle) | books over resources.
   Every card opens with its branded 16:9 picture, like the store's product cards. */

.ah-lh {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas: "courses community books" "courses community resources";
	gap: 24px;
	align-items: stretch;
}
.ah-lh .ah-lh__card--courses { grid-area: courses; }
.ah-lh .ah-lh__card--community { grid-area: community; }
.ah-lh .ah-lh__card--books { grid-area: books; }
.ah-lh .ah-lh__card--resources { grid-area: resources; }

.ah-lh .ah-lh__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--ah-card-line);
	border-radius: var(--ah-r-card);
	background: var(--ah-card, #fff);
	box-shadow: var(--ah-shadow);
	transition: transform .5s var(--ah-ease), box-shadow .5s var(--ah-ease), border-color .3s;
}
.ah-lh .ah-lh__card:hover { transform: translateY(-4px); border-color: var(--ah-tint-line); box-shadow: var(--ah-shadow-hi); }
.ah-lh .ah-lh__pic { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ah-navy); }
.ah-lh .ah-lh__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.1s var(--ah-ease); }
.ah-lh .ah-lh__card:hover .ah-lh__img { transform: scale(1.04); }
.ah-lh .ah-lh__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.ah-lh .ah-lh__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ah-lh .ah-lh__kicker { padding: 3px 12px; border: 1px solid var(--ah-tint-line); border-radius: 999px; background: var(--ah-tint); font-size: .78rem; font-weight: 700; line-height: 1.6; color: var(--ah-ink-gold); }
.ah-lh .ah-lh__badge { padding: 3px 10px; border-radius: 999px; background: rgba(91, 192, 138, .18); font-size: .74rem; font-weight: 700; line-height: 1.6; color: #8FE0B3; }
.ah-lh .ah-lh__title { margin: 0; font-family: var(--ah-f-display); font-size: 1.22rem; font-weight: 700; line-height: 1.45; color: var(--ah-navy); }
.ah-lh .ah-lh__text { margin: 0; font-size: .95rem; line-height: 1.8; color: var(--ah-muted); }
.ah-lh .ah-lh__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 8px; }
.ah-lh .ah-lh__more { display: inline-flex; align-items: center; gap: 6px; font-size: .94rem; font-weight: 700; color: var(--ah-ink-gold); text-decoration: none; }
.ah-lh .ah-lh__more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ah-lh .ah-lh__more:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; }
.ah-lh .ah-lh__more .ah-btn__arr { width: 15px; height: 15px; transition: transform .3s var(--ah-ease); }
.ah-lh .ah-lh__card:hover .ah-lh__more .ah-btn__arr { transform: translateX(-4px); }
[dir="ltr"] .ah-lh .ah-lh__card:hover .ah-lh__more .ah-btn__arr { transform: translateX(4px); }

/* courses: the site's courses with their state */
.ah-lh .ah-lh__courses { display: grid; gap: 2px; margin: 4px 0 6px; padding: 0; list-style: none; }
.ah-lh .ah-lh__courses li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ah-card-line); font-size: .9rem; line-height: 1.55; }
.ah-lh .ah-lh__courses li:first-child { border-top: 0; }
.ah-lh .ah-lh__cname { min-width: 0; color: var(--ah-ink); font-weight: 600; }
.ah-lh .ah-lh__cname a { position: relative; z-index: 2; color: inherit; text-decoration: none; }
.ah-lh .ah-lh__cname a:hover { color: var(--ah-ink-gold); }
.ah-lh .ah-lh__cstate { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--ah-sand); font-size: .76rem; font-weight: 700; color: var(--ah-soft); white-space: nowrap; }
.ah-lh .ah-lh__courses li.is-open .ah-lh__cstate { background: var(--ah-navy); color: var(--ah-gold-hi); }
.ah-lh .ah-lh__go.ah-btn { position: relative; z-index: 2; }

/* the community: navy, raised, gold rim */
.ah-lh .ah-lh__card--community {
	border-color: rgba(232, 201, 136, .35);
	background:
		radial-gradient(80% 60% at 50% 100%, rgba(197, 165, 114, .16), transparent 70%),
		linear-gradient(170deg, var(--ah-navy), var(--ah-deep));
	box-shadow: 0 34px 70px -30px rgba(9, 18, 42, .7), 0 0 0 1px rgba(232, 201, 136, .12);
	transform: translateY(-10px);
}
.ah-lh .ah-lh__card--community:hover { transform: translateY(-14px); border-color: rgba(232, 201, 136, .55); }
.ah-lh .ah-lh__card--community .ah-lh__body { gap: 12px; padding: 24px 26px 28px; }
.ah-lh .ah-lh__card--community .ah-lh__kicker { border-color: rgba(232, 201, 136, .35); background: rgba(232, 201, 136, .12); color: var(--ah-gold-hi); }
.ah-lh .ah-lh__card--community .ah-lh__title { font-size: 1.5rem; color: #fff; }
.ah-lh .ah-lh__card--community .ah-lh__text { color: var(--ah-on-navy-muted); }
.ah-lh .ah-lh__points { display: grid; gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }
.ah-lh .ah-lh__points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .94rem; line-height: 1.65; color: var(--ah-on-navy); }
.ah-lh .ah-lh__points svg { display: grid; place-items: center; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: rgba(232, 201, 136, .16); color: var(--ah-gold-hi); box-sizing: border-box; }
.ah-lh .ah-lh__login { position: relative; z-index: 2; font-size: .92rem; font-weight: 700; color: var(--ah-gold-hi); text-decoration: underline; text-underline-offset: 5px; }
.ah-lh .ah-lh__login:hover { color: #fff; }

/* ---------- screens ---------- */
@media (max-width: 1200px) {
	.ah-lh { gap: 18px; }
	.ah-lh .ah-lh__body { padding: 18px 18px 20px; }
}
@media (max-width: 1024px) {
	.ah-lh {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas: "courses books" "community community" "resources resources";
	}
	.ah-lh .ah-lh__card--community { transform: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ah-lh .ah-lh__card--community:hover { transform: translateY(-4px); }
	.ah-lh .ah-lh__card--community .ah-lh__pic { aspect-ratio: auto; min-height: 100%; }
	.ah-lh .ah-lh__card--resources { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
	.ah-lh .ah-lh__card--resources .ah-lh__pic { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 767px) {
	.ah-lh { grid-template-columns: minmax(0, 1fr); grid-template-areas: "courses" "community" "books" "resources"; gap: 18px; }
	.ah-lh .ah-lh__card--community,
	.ah-lh .ah-lh__card--resources { display: flex; }
	.ah-lh .ah-lh__card--community .ah-lh__pic,
	.ah-lh .ah-lh__card--resources .ah-lh__pic { aspect-ratio: 16 / 9; min-height: 0; }
	.ah-lh .ah-lh__card--community .ah-lh__title { font-size: 1.3rem; }
	.ah-lh .ah-lh__go.ah-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.ah-lh .ah-lh__card,
	.ah-lh .ah-lh__img { transition: none; }
	.ah-lh .ah-lh__card:hover,
	.ah-lh .ah-lh__card--community:hover { transform: none; }
	.ah-lh .ah-lh__card:hover .ah-lh__img { transform: none; }
}