/*
 * Awareness That Heals — library.css
 *
 * Styles for the Teachings & Practices landing(s) — the two custom page
 * templates (page-teachings-and-practices = Design A faceted,
 * page-library-rows = Design B module rows) and the patterns they compose
 * (library-hero, library-ways-in). Loaded on those templates only, AFTER
 * home.css (which it reuses for .ath-hero / .ath-eyebrow / .ath-on-dark /
 * .ath-feature) and theme.css.
 *
 * This file carries only what those don't: the hero stats row, the 4-up
 * "ways in" cards, and the teaching-card visuals shared by the
 * ath/library-browse grid and the ath/module-index rows (markup from
 * ath-core's Cards renderer; the blocks' own style.css handle their
 * controls + module layouts). Scoped to .ath-lib-* / .ath-hero__stat*.
 */

/* =========================================================
 * Hero — stats row (extends home.css .ath-hero)
 * ========================================================= */

.ath-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2.4rem;
	margin-top: 2.2rem;
}

.ath-hero__stat b {
	display: block;
	font-family: var(--wp--preset--font-family--heading-serif);
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 1;
	color: #fff;
}

.ath-hero__stat span {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-soft);
}

/* =========================================================
 * Ways in — 4-up cards (library-ways-in.php)
 * ========================================================= */

.ath-lib-ways {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
}

@media (max-width: 900px) {
	.ath-lib-ways { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.ath-lib-ways { grid-template-columns: 1fr; }
}

.ath-lib-way {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
	padding: 1.4rem 1.3rem 1.5rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--teal-faint);
	border-radius: var(--ath-radius-lg);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(19, 50, 63, 0.04), 0 8px 24px rgba(19, 50, 63, 0.05);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.ath-lib-way:hover,
.ath-lib-way:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(19, 50, 63, 0.06), 0 16px 36px rgba(19, 50, 63, 0.09);
}

.ath-lib-way__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--ath-radius-md);
	background: linear-gradient(135deg, var(--wp--preset--color--teal-mid), var(--wp--preset--color--deep-teal));
	color: #fff;
	margin-bottom: 0.2rem;
}

.ath-lib-way__icon svg {
	width: 24px;
	height: 24px;
}

.ath-lib-way__eyebrow {
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-mid);
}

.ath-lib-way__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading-serif);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--wp--preset--color--deep-teal);
}

.ath-lib-way__copy {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--wp--preset--color--teal-muted);
}

/* =========================================================
 * Teaching card visuals — shared by ath/library-browse grid
 * + ath/module-index rows (markup: ath-core Cards renderer).
 * Builds on theme.css .ath-card.
 * ========================================================= */

.ath-lib-card {
	margin-block-end: 0;
}

.ath-lib-card__media {
	position: relative;
	display: flex;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--teal-faint);
}

.ath-lib-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder when a teaching has no featured image — tonal teal field
 * carrying the content-type glyph (brand media-gradient language). */
.ath-lib-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(150deg, var(--wp--preset--color--teal-mid), var(--wp--preset--color--deep-teal));
	color: rgba(255, 255, 255, 0.92);
}

.ath-lib-card__placeholder svg {
	width: 40px;
	height: 40px;
}

/* Corner type badge (Watch / Listen / Read / Guide) */
.ath-lib-card__type {
	position: absolute;
	left: 0.6rem;
	bottom: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.32rem;
	padding: 0.26rem 0.6rem;
	border-radius: var(--ath-radius-pill);
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--deep-teal);
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ath-lib-card__type svg {
	width: 13px;
	height: 13px;
}

.ath-lib-card__pills {
	margin-top: 0.15rem;
}

/* =========================================================
 * Pills + chips — the global pill styling (theme.css) is
 * scoped to .ath-pills.wp-block-post-terms; the browse chips
 * and card pills aren't post-terms blocks, so give them the
 * same flex-wrap + pill treatment here. Also kills the default
 * link underline these <a>s would otherwise inherit.
 * ========================================================= */

.ath-lib-chips,
.ath-lib-card__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.ath-chip,
.ath-lib-card__pills a {
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	line-height: 1;
	background: var(--wp--preset--color--teal-pale);
	color: var(--wp--preset--color--deep-teal);
	padding: 0.375rem 0.8rem;
	border-radius: var(--ath-radius-pill);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.ath-chip:hover,
.ath-chip:focus-visible,
.ath-lib-card__pills a:hover,
.ath-lib-card__pills a:focus-visible {
	background: var(--wp--preset--color--deep-teal);
	color: var(--wp--preset--color--teal-pale);
}

/* Selected facet chip — persistent inverted state (set by view.js). */
.ath-chip.is-active {
	background: var(--wp--preset--color--deep-teal);
	color: var(--wp--preset--color--teal-pale);
}

/* Design B — emotion accent rail keyed to --ath-card-accent (PROVISIONAL
 * palette; see ath-core src/Library/Emotions.php). */
.ath-lib-card--accent .ath-lib-card__media {
	box-shadow: inset 0 -4px 0 0 var(--ath-card-accent, var(--wp--preset--color--teal-soft));
}

.ath-lib-card--accent .ath-lib-card__type {
	color: var(--ath-card-accent, var(--wp--preset--color--deep-teal));
}

@media (prefers-reduced-motion: reduce) {
	.ath-lib-way { transition: none; }
}