@layer components {
	.klt-story-collection__items,
	.klt-story-collection__primary,
	.klt-story-collection__secondary {
		display: grid;
		gap: var(--klt-space-m);
	}

	.klt-story-collection--rows .klt-story-collection__items,
	.klt-story-collection--journal .klt-story-collection__items,
	.klt-story-collection--feature .klt-story-collection__items,
	.klt-story-collection--hero .klt-story-collection__items,
	.klt-story-collection--text-list .klt-story-collection__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.klt-story-collection__folio {
		display: flex;
		align-items: center;
	}

	/*
	 * Hero is an opening layout, not a large card. Its media fills at least the
	 * first viewport and its content remains in the same spatial layer. Min-height
	 * deliberately allows long titles and excerpts to grow without clipping.
	 */
	.klt-story-collection--hero,
	.klt-story-collection--hero .klt-story-collection__items,
	.klt-story-collection--hero .klt-story-card {
		min-block-size: 100vh;
		min-block-size: 100svh;
	}

	.klt-story-collection--hero .klt-story-card {
		position: relative;
		isolation: isolate;
	}

	.klt-story-collection--hero .klt-story-card__media {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	.klt-story-collection--hero .klt-story-card__image {
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	.klt-story-collection--hero .klt-story-card::after {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--klt-hero-shade, linear-gradient(to top, rgb(0 0 0 / 78%), rgb(0 0 0 / 8%) 72%));
		content: "";
		pointer-events: none;
	}

	.klt-story-collection--hero .klt-story-card--title-on-media .klt-story-card__body {
		align-self: end;
		max-inline-size: var(--klt-hero-content-measure, 68rem);
		padding: var(--klt-hero-content-padding, clamp(1.25rem, 5vw, 5rem));
		background: transparent;
		color: var(--klt-hero-text, #fff);
	}

	:root[data-klt-js="enabled"] :is(.klt-story-collection--feature, .klt-story-collection--hero)[data-klt-carousel-overlay] .klt-story-collection__items {
		display: grid;
	}

	:root[data-klt-js="enabled"] :is(.klt-story-collection--feature, .klt-story-collection--hero)[data-klt-carousel-overlay] [data-klt-feature-slide] {
		visibility: hidden;
		z-index: 0;
		grid-area: 1 / 1;
		opacity: 0;
		pointer-events: none;
	}

	:root[data-klt-js="enabled"] :is(.klt-story-collection--feature, .klt-story-collection--hero)[data-klt-carousel-overlay] [data-klt-feature-slide].is-active {
		visibility: visible;
		z-index: 1;
		opacity: 1;
		pointer-events: auto;
	}

	:is(.klt-story-collection--feature, .klt-story-collection--hero)[data-klt-transitioning] [data-klt-feature-slide].is-entering {
		z-index: 2;
	}

	.klt-story-collection__feature-navigation,
	.klt-story-collection__feature-status,
	.klt-story-collection__feature-controls {
		display: flex;
		align-items: center;
	}

	.klt-story-collection__feature-navigation {
		gap: var(--klt-space-m);
		justify-content: space-between;
	}

	.klt-story-collection__feature-status {
		flex: 1;
		gap: var(--klt-space-s);
	}

	.klt-story-collection__feature-count {
		flex: 0 0 auto;
	}

	.klt-story-collection__feature-progress {
		position: relative;
		display: block;
		width: 100%;
		height: 0.25rem;
		overflow: hidden;
	}

	.klt-story-collection__feature-progress-value {
		display: block;
		width: var(--klt-feature-progress, 0%);
		height: 100%;
		transition: width 190ms ease-out;
	}

	.klt-story-collection__feature-controls {
		flex: 0 0 auto;
		gap: var(--klt-space-xs);
	}

	.klt-story-collection__feature-controls .klt-button {
		display: grid;
		place-items: center;
		line-height: 1;
	}

	.klt-story-collection__feature-control-icon {
		display: block;
		width: 1rem;
		height: 1rem;
		background: currentcolor;
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
	}

	.klt-story-collection__feature-control-icon--previous {
		-webkit-mask-image: url("../../svg/ui/move-left.svg");
		mask-image: url("../../svg/ui/move-left.svg");
	}

	.klt-story-collection__feature-control-icon--next {
		-webkit-mask-image: url("../../svg/ui/move-right.svg");
		mask-image: url("../../svg/ui/move-right.svg");
	}

	.klt-story-collection--grid .klt-story-collection__items {
		grid-template-columns: repeat(var(--klt-collection-columns, 3), minmax(0, 1fr));
	}

	.klt-story-collection--split-feed .klt-story-collection__items {
		grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
	}

	.klt-story-collection--split-grid:not([data-klt-carousel]) .klt-story-collection__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.klt-story-collection--split-grid:not([data-klt-carousel]) .klt-story-collection__items > .klt-story-card:first-child {
		grid-column: 1 / -1;
	}

	.klt-story-collection--carousel .klt-story-collection__items {
		grid-auto-columns: minmax(min(20rem, 82vw), 1fr);
		grid-auto-flow: column;
		overflow-x: auto;
		scroll-snap-type: inline mandatory;
	}

	.klt-story-collection--carousel .klt-story-card {
		scroll-snap-align: start;
	}

	.klt-story-collection__controls {
		display: flex;
		gap: var(--klt-space-xs);
		justify-content: flex-end;
		margin-block-end: var(--klt-space-s);
	}

	@media (max-width: 60rem) {
		.klt-story-collection--grid .klt-story-collection__items,
		.klt-story-collection--split-feed .klt-story-collection__items,
		.klt-story-collection--split-grid:not([data-klt-carousel]) .klt-story-collection__items {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.klt-story-collection__feature-progress-value {
			transition: none;
		}
	}
}