/**
 * Full-width child navigation cards shared by Category, Course, Canto, and
 * Chapter bp_study pages (Courses/Cantos/Chapters/Sessions sections).
 */

.study-breadcrumbs {
	margin-bottom: var(--bp-space-sm);
	font-family: var(--bp-font-ui);
	font-size: 0.8rem;
}

.study-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--bp-color-muted);
}

.study-breadcrumbs__item {
	display: flex;
	align-items: center;
}

.study-breadcrumbs__item:not(:last-child)::after {
	content: "\203A";
	margin: 0 0.4em;
	color: var(--bp-color-border);
}

.study-breadcrumbs__link {
	color: var(--bp-color-muted);
	text-decoration: none;
}

.study-breadcrumbs__link:hover {
	color: var(--bp-color-accent);
	text-decoration: underline;
}

.study-breadcrumbs__link:focus-visible {
	outline: 2px solid var(--bp-color-leaf);
	outline-offset: 2px;
}

.study-breadcrumbs__item [aria-current="page"] {
	color: var(--bp-color-text);
}

.study-child-list {
	display: grid;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--bp-color-border);
	list-style: none;
}

.study-child-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bp-space-md);
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--bp-color-border);
	color: var(--bp-color-text);
	text-decoration: none;
}

.study-child-list__link:hover {
	background: var(--bp-color-subtle);
}

.study-child-list__link:focus-visible {
	outline: 2px solid var(--bp-color-leaf);
	outline-offset: 2px;
}

.study-child-list__titles {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.study-child-list__title {
	font-size: clamp(1.1rem, 2vw, 1.3rem);
}

.study-child-list__devanagari {
	color: var(--bp-color-muted);
	font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.study-child-list__arrow {
	flex-shrink: 0;
	color: var(--bp-color-muted);
	font-family: var(--bp-font-ui);
	font-size: 1.1rem;
	transition: transform 0.15s ease;
}

.study-child-list__link:hover .study-child-list__arrow,
.study-child-list__link:focus-visible .study-child-list__arrow {
	color: var(--bp-color-accent);
	transform: translateX(0.2rem);
}

@media (max-width: 30rem) {
	.study-child-list__link {
		padding: 1rem 1.1rem;
	}
}