/* categories — everything category-flavoured on the journal:
   1. .categories-nav — sticky soft-black filter row on the posts index
      (measured from the reference sub-navigation bar)
   2. .categories__* — inline "Posted in: …" list inside post-meta
   3. .post-cards — journal card grid (image / kicker / serif title /
      excerpt / date), measured from the reference cards component. */

/* --------------------------------------------------- category filter row */

.categories-nav {
	background-color: var(--color-soft-black);
	border-top: 1px solid var(--color-gray-900);
	min-width: 0;
	padding: 15px;
	position: sticky;
	top: var(--header-height);
	z-index: calc(var(--header-z-index) - 1);
}

@media screen and (min-width: 768px) {
	.categories-nav { padding: 13px 15px; }
}

.categories-nav__row {
	display: flex;
	margin: 0 -15px;
	-ms-overflow-style: none;
	overflow: auto;
	position: relative;
	scrollbar-width: none;
	white-space: nowrap;
}

.categories-nav__row::-webkit-scrollbar { display: none; }

.categories-nav__row a:first-of-type { margin: 0; padding-left: 15px; }
.categories-nav__row a:last-of-type { padding-right: 15px; }
.categories-nav__row a + a { margin-left: 40px; }

@media screen and (min-width: 768px) {
	.categories-nav__row {
		align-items: center;
		justify-content: center;
		margin-right: 0;
	}
}

.categories-nav__link {
	color: var(--color-soft-white);
	text-decoration: none;
	text-transform: uppercase;
	transition-duration: var(--transition-time);
	transition-property: color;
	transition-timing-function: var(--transition-easing);
}

.categories-nav__link--active,
.categories-nav__link:hover { color: var(--color-gray-600); }

.categories-nav__link--active:hover { color: var(--color-soft-white); }

/* --------------------------------------------- inline "Posted in …" list */

.categories__wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-width: 220px;
}

@media screen and (min-width: 768px) {
	.categories__wrapper { justify-content: normal; }
}

.categories__label {
	font-style: italic;
	margin: 0 12px 0 0;
	position: relative;
}

.categories__label::after {
	bottom: 0;
	content: ":";
	position: absolute;
	right: -5px;
	top: 0;
}

.categories__category {
	display: flex;
	position: relative;
}

.categories__category::after { content: ","; }

.categories__category,
.categories__category:hover {
	color: var(--color-soft-black);
	margin: 0 4px 0 0;
	text-decoration: underline;
	transition-duration: var(--transition-time);
	transition-property: all;
	transition-timing-function: var(--transition-easing);
}

.categories__category:hover { text-decoration: none; }

.categories__category:last-of-type { margin: 0; }
.categories__category:last-of-type::after { content: ""; }

/* ------------------------------------------------------ journal post cards */

.post-cards .section__description a { text-decoration: none; }
.post-cards .section__description { margin-bottom: var(--typography-spacing); }

.post-cards__card {
	background-color: transparent;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.post-cards__card[hidden] { display: none; }

.post-cards__card-link { display: block; text-decoration: none; }

.post-cards__image {
	aspect-ratio: 625 / 400;
	display: block;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.post-cards__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.post-cards__content {
	--typography-spacing: 1em;
	align-items: center;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 15px;
	text-align: center;
}

@media screen and (min-width: 768px) {
	.post-cards__content { padding: 20px var(--grid-col-gutter) var(--grid-col-gutter); }
}

.post-cards__kicker {
	color: var(--color-gray-800);
	margin-bottom: 8px;
}

.post-cards__title { margin-bottom: 0.4em; }

.post-cards__title-link {
	color: var(--color-soft-black);
	text-decoration: none;
}

.post-cards__title-link:hover { text-decoration: underline; }

.post-cards__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
	margin-bottom: 10px;
}

.post-cards__excerpt { margin-bottom: 1em; }

.post-cards__link-wrap { margin-top: auto; }

.post-cards__link {
	align-items: center;
	color: var(--color-burgundy-2);
	display: inline-flex;
	text-decoration: none;
	transition-duration: var(--transition-time);
	transition-property: all;
	transition-timing-function: var(--transition-easing);
}

.post-cards__link:hover { text-decoration: underline; }

.post-cards__link svg { margin-left: 5px; }

/* --------------------------------------- journal category card sliders
   .cards — measured from the reference journal index category sections:
   scroll-snap slider (2.5-up desktop / peek mobile) or static three-column
   variant (Discovery Series), with arrows + bullets on a .slider-nav row. */

.cards { display: block; }

.cards__track { display: block; }

.cards__slides {
	display: flex;
	gap: var(--grid-col-gutter);
	-ms-overflow-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.cards__slides::-webkit-scrollbar { display: none; }

.cards__slide {
	display: flex;
	flex: 0 0 72.9166%;
	min-width: 0;
	scroll-snap-align: start;
}

@media screen and (min-width: 1024px) {
	.cards--carousel-desktop .cards__slide { flex-basis: 38.25%; }
}

/* Static variant (no carousel classes): stacked mobile, three columns desktop. */
.cards:not(.cards--carousel-mobile) .cards__slides {
	flex-direction: column;
	overflow-x: visible;
}

.cards:not(.cards--carousel-mobile) .cards__slide { flex-basis: auto; }

@media screen and (min-width: 1024px) {
	.cards:not(.cards--carousel-desktop) .cards__slides { flex-direction: row; }
	.cards:not(.cards--carousel-desktop) .cards__slide {
		flex: 1 1 0;
		min-width: 0;
	}
}

.cards__card {
	background-color: transparent;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
}

.cards__card-link { display: block; text-decoration: none; }

.cards__image {
	aspect-ratio: 625 / 400;
	display: block;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.cards--video .cards__image { aspect-ratio: 625 / 380; }

.cards__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.cards__content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 15px;
	text-align: center;
}

@media screen and (min-width: 768px) {
	.cards__content { padding: 20px var(--grid-col-gutter) var(--grid-col-gutter); }
}

/* Titles use the h4 scale; wide cards step up to the h3 scale on desktop. */
@media screen and (min-width: 1024px) {
	.cards:not(.cards--three-columns) .cards__title { font-size: calc(1.4vw + 20.4px); }
}

@media screen and (min-width: 1400px) {
	.cards:not(.cards--three-columns) .cards__title { font-size: 40px; }
}

/* Three-column category sliders keep the h4 scale (26px desktop); overrides
   the unscoped .cards__title desktop step-up so titles match the reference. */
@media screen and (min-width: 1024px) {
	.cards--three-columns .cards__title { font-size: calc(0.7vw + 16.2px); }
}

@media screen and (min-width: 1400px) {
	.cards--three-columns .cards__title { font-size: 26px; }
}

.cards__title-link {
	color: var(--color-soft-black);
	text-decoration: none;
}

.cards__title-link:hover { text-decoration: underline; }

.cards__time {
	align-items: center;
	display: flex;
	gap: 7px;
	justify-content: center;
	margin-bottom: 10px;
}

.cards__link-wrap { margin-top: auto; }

.cards__link {
	align-items: center;
	color: var(--color-burgundy-2);
	display: inline-flex;
	text-decoration: none;
	transition-duration: var(--transition-time);
	transition-property: all;
	transition-timing-function: var(--transition-easing);
}

.cards__link:hover { text-decoration: underline; }

.cards__link svg { margin-left: 5px; }

/* ------------------------------------------------- slider arrows + bullets */

.slider-nav {
	align-items: center;
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-top: 20px;
}

.slider-nav__arrow-button {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--color-gray-500);
	border-radius: 50%;
	color: var(--color-soft-black);
	cursor: pointer;
	display: none;
	height: 46px;
	justify-content: center;
	padding: 0;
	transition-duration: var(--transition-time);
	transition-property: all;
	transition-timing-function: var(--transition-easing);
	user-select: none;
	width: 46px;
}

@media screen and (min-width: 1024px) {
	.slider-nav__arrow-button { display: inline-flex; }
}

@media (hover: hover) {
	.slider-nav__arrow-button:hover { background-color: #17191b1a; }
}

.slider-nav__arrow-button:disabled {
	cursor: auto;
	opacity: 0.3;
	pointer-events: none;
}

.slider-nav__arrow-button svg { scale: 0.8; }

.slider-nav__arrow-button--right svg { transform: rotate(180deg); }

.slider-nav__bullets {
	align-items: center;
	display: flex;
	gap: 16px;
}

.slider-nav__bullet {
	background-color: var(--color-gray-500);
	border: none;
	border-radius: 20px;
	cursor: pointer;
	font-size: 0;
	height: 10px;
	line-height: 1;
	padding: 0;
	transition-duration: var(--transition-time);
	transition-property: all;
	transition-timing-function: var(--transition-easing);
	width: 10px;
}

.slider-nav__bullet[aria-current="true"] { background-color: var(--color-soft-black); }