@import "./style.css";

.p-story {
	@media (width < 768px) {
		--inline-content-space: calc(40 * var(--rem));
	}
}

.p-story__lead {
	margin-block-start: calc(80 * var(--rem));
}

.p-story__cards {
	margin-block-start: calc(80 * var(--rem));
}

:where(.p-page-lead) {
	margin-inline: auto;
	inline-size: max-content;
	& p {
		--clamp-min: 14;
		--clamp-max: 16;
		line-height: 2.6;
		text-align: center;
	}
}

.p-cards {
	display: block grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: calc(48 * var(--rem)) calc(20 * var(--rem));
	@media (width >=768px) {
		gap: calc(104 * var(--rem)) calc(40 * var(--rem));
	}
	@media (width >= 992px) {
		grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	}
}

.p-card {
	align-content: start;
	display: block grid;
	container: card-container / inline-size;
	flex-shrink: 0;
	row-gap: calc(20 * var(--rem));
}

.p-card__img-wrapper {
	aspect-ratio: 340/400;
	inline-size: 100%;
	overflow: hidden;
	position: relative;
}

.p-card__img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

.p-card__caption {
	display: grid;
	grid-auto-flow: column;
	position: absolute;
	right: 0;
	top: 0;
	writing-mode: vertical-rl;
	text-orientation: upright;
	.label {
		--clamp-min: 15;
		--clamp-max: 18;
		align-items: center;
		background-color: var(--color-black01);
		color: var(--color-white);
		display: grid;
		line-height: 1;
		padding: 0.8em 0.53em;
	}
	.text {
		--clamp-min: 14;
		--clamp-max: 15;
		align-items: center;
		background-color: color-mix(in srgb, var(--color-white) 70%, transparent);
		color: var(--color-black01);
		display: grid;
		line-height: 1.2;
		padding: 0.8em 0.53em;
	}
}

.p-card__body {
	display: block grid;
	grid-template-rows: auto calc(16 * var(--rem)) auto auto;
	grid-template-areas:
		"text"
		"."
		"status"
		"name";
}

.p-card__text {
	--clamp-min: 18;
	--clamp-max: 20;
	font-weight: 500;
	grid-area: text;
	line-height: 1.8;
}

.p-card__status {
	--clamp-min: 10;
	--clamp-max: 12;
	color: var(--color-black02);
	grid-area: status;
	line-height: 1.6;
}

.p-card__name {
	--clamp-min: 16;
	--clamp-max: 18;
	color: var(--color-black02);
	grid-area: name;
}