@use "variables" as *;

// ===========================================================================
// 出版物 (page-books.php) — Publications.
// 2-column list of books, each cell = cover image | (title / 著者・出版 /
// description / 外部リンクbutton). Book covers vary in aspect ratio, so images
// use object-fit:contain anchored to the top inside a fixed 2:3 frame (never
// cropped). Dashed rules above each cell (per-column, like the Figma).
// Content column = .inner-box--narrow (1024 design column).
// ===========================================================================

.book-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: rem(40);

	@include sp {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}

.book-item {
	display: grid;
	grid-template-columns: 38fr 62fr; // image column scales fluidly with the cell
	gap: rem(30);
	align-items: start;
	padding-block: rem(40);
	border-top: 1px dashed $color-rule;

	@include sp {
		gap: rem(20);
		padding-block: rem(30);
	}
}

// Left column: cover image with the 外部リンク button stacked beneath it.
.book-item__media {
	display: flex;
	flex-direction: column;
}

// Cover photo: fixed 2:3 frame, contain + top so varied ratios aren't cropped.
.book-item__img {
	aspect-ratio: 203 / 300;

	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: top center;
	}
}

.book-item__title {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(18);
	line-height: 1.6;
	color: $color-green;

	@include sp {
		font-size: rem(16);
	}
}

// 著者 ／ 出版 — label ： value rows.
.book-item__meta {
	margin-top: rem(16);
	font-family: $font-sans;
	font-size: rem(14);
	line-height: 2;
	color: $color-text;

	@include sp {
		margin-top: rem(12);
	}
}

.book-item__meta-row {
	display: flex;

	dt {
		flex-shrink: 0;

		&::after {
			content: "：";
		}
	}

	dd {
		margin: 0; // reset UA default margin-left
	}
}

.book-item__desc {
	margin-top: rem(16);
	font-family: $font-sans;
	font-size: rem(14);
	line-height: 2;
	color: $color-text;

	p + p {
		margin-top: 1em;
	}
}

// Sits under the cover, spanning the image column width.
.book-item__link {
	display: flex;
	width: 100%;
	min-width: 0;
	margin-top: rem(15);
}

.book-empty {
	text-align: center;
	font-size: rem(16);
	color: $color-text;
}

// Full-width dashed rule, then the 戻る pill (left-aligned, like the Figma).
.book-back {
	margin-top: rem(60);
	padding-top: rem(40);
	border-top: 1px dashed $color-rule;

	@include sp {
		margin-top: rem(40);
		padding-top: rem(30);
	}
}