.topic-page__section-nav {
	padding-block: var(--space-4);
	background: var(--color-background-section-muted);
	border-top: 1px solid var(--color-border-subtle);
}

.topic-page__section-nav .container {
	display: block;
}

.topic-page__section-nav .eyebrow {
	margin: 0 0 var(--space-label-to-heading);
	white-space: nowrap;
}

.topic-page__section-nav ul {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border-subtle);
	border-bottom: 1px solid var(--color-border-subtle);
	list-style: none;
}

.topic-page__section-nav li {
	min-width: 0;
	border-left: 1px solid var(--color-border-subtle);
}

.topic-page__section-nav li:first-child {
	border-left: 0;
}

.topic-page__section-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	color: var(--color-off-black);
	font-weight: var(--font-weight-bold);
}

.topic-page__section-link-icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--color-brand-accent);
	transition: transform var(--transition-fast);
}

.topic-page__section-link-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

html.has-hover-input .topic-page__section-link:hover {
	color: var(--color-brand-accent-hover);
}

html.has-hover-input .topic-page__section-link:hover .topic-page__section-link-icon,
.topic-page__section-link:focus-visible .topic-page__section-link-icon {
	transform: translateX(var(--space-1));
}

.topic-page__section-link:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

.topic-section {
	background: var(--color-background-section);
	border-top: 1px solid var(--color-border-subtle);
	scroll-margin-top: var(--space-7);
}

.topic-section:nth-of-type(even) {
	background: var(--color-background-section-muted);
}

.topic-section > .container > :is(.topic-link-list, .topic-paginated-content, .camps-gallery__grid) {
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border-subtle);
}

.topic-section__card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-layout-md);
}

.topic-paginated-content {
	scroll-margin-top: calc(var(--site-header-height) + var(--space-4));
}

.topic-section--photos {
	background-color: var(--color-white);
}

.topic-section--photos .camps-gallery__grid {
	margin-top: 0;
}

.topic-link-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.topic-link-list li {
	border-top: 1px solid var(--color-border-subtle);
}

.topic-link-list li:last-child {
	border-bottom: 1px solid var(--color-border-subtle);
}

.topic-link-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-block: var(--space-5);
	color: var(--color-off-black);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-5);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
}

.topic-link-list a > span:last-child {
	display: flex;
	color: var(--color-brand-accent);
	transition: transform var(--transition-fast);
}

html.has-hover-input .topic-link-list a:hover {
	color: var(--color-brand-accent-hover);
}

html.has-hover-input .topic-link-list a:hover > span:last-child,
.topic-link-list a:focus-visible > span:last-child {
	transform: translateX(var(--space-1));
}

.topic-link-list a:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

@media (max-width: 62rem) {
	.topic-section__card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.topic-page__section-nav ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-bottom: 0;
	}

	.topic-page__section-nav li,
	.topic-page__section-nav li:first-child {
		border-right: 0;
		border-bottom: 1px solid var(--color-border-subtle);
		border-left: 0;
	}

	.topic-page__section-nav li:nth-child(even) {
		border-left: 1px solid var(--color-border-subtle);
	}
}

@media (max-width: 36rem) {
	.topic-page__section-nav .container,
	.topic-section__card-grid {
		grid-template-columns: 1fr;
	}

	.topic-page__section-nav ul {
		grid-template-columns: 1fr;
	}

	.topic-page__section-nav li:nth-child(even) {
		border-left: 0;
	}

	.topic-page__section-nav .container {
		gap: var(--space-3);
	}

	.topic-page__section-nav .eyebrow {
		margin-top: 0;
	}

	.topic-section--videos .camp-videos__grid,
	.topic-section--articles .topic-section__card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}

	.topic-section--videos .camp-videos__card-body {
		padding: var(--space-3);
	}

	.topic-section--videos .camp-videos__meta {
		margin-bottom: var(--space-2);
		font-size: var(--font-size-body-xs);
		line-height: var(--line-height-tight);
	}

	.topic-section--videos .camp-videos__meta-separator,
	.topic-section--videos .camp-videos__meta-category {
		display: none;
	}

	.topic-section--videos .camp-videos__card-title {
		display: -webkit-box;
		height: 3.3em;
		margin: 0;
		overflow: hidden;
		font-size: var(--font-size-heading-5);
		line-height: 1.1;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.topic-section--videos .camp-videos__play {
		width: 3rem;
		height: 3rem;
	}

	.topic-section--videos .camp-videos__play svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.topic-section--videos .camp-videos__watch-button {
		width: auto;
		min-height: 0;
		margin-top: var(--space-3);
		padding: 0;
		color: var(--color-muted);
		background: transparent;
		border: 0;
		border-radius: 0;
		font-size: var(--font-size-body-sm);
		transform: none;
	}

	html.has-hover-input .topic-section--videos .camp-videos__click-target:hover .camp-videos__watch-button {
		color: var(--color-black);
		background: transparent;
		border-color: transparent;
		transform: none;
	}

}

@media (prefers-reduced-motion: reduce) {
	.topic-page__section-link-icon {
		transition: none;
	}
}