/*
 * トップのプロジェクトカード。タイトル行数が違うと青字・概要・タグの
 * 開始位置が横に揃わない。本文を 4 行の grid にし、欠けた要素も行を残す。
 * トラックの min は各要素の font-size × line-height 1.5 × 行数。
 * SP の縦並びでは余白が増えるだけなので PC だけ。
 */
@media screen and (min-width: 769px) {
	.index_page .project_card_block__body {
		display: grid;
		grid-template-areas:
			"title"
			"partner"
			"excerpt"
			"tags";
		grid-template-rows:
			minmax(81px, auto)
			minmax(36px, auto)
			minmax(117px, auto)
			auto;
		align-items: start;
	}

	.index_page .project_card_block__title {
		grid-area: title;
		min-height: 4.5em;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.index_page .project_card_block__partner {
		grid-area: partner;
		min-height: 3em;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.index_page .project_card_block__excerpt {
		grid-area: excerpt;
		min-height: 9em;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;
		overflow: hidden;
	}

	.index_page .project_card_block__tags {
		grid-area: tags;
	}
}

/*
 * プロジェクト一覧（日英 /projects/ /en/projects/ とカテゴリ絞り込み）。
 * 3 列の親グリッドに subgrid を通し、同行カードの
 * タイトル / 青字 / 概要 / カテゴリ開始位置を揃える。
 * 親の row-gap がサブ行にも入るので、カード間余白は margin-bottom に移す。
 * SP の縦並びでは余白が増えるだけなので PC だけ。
 */
@supports (grid-template-rows: subgrid) {
	@media screen and (min-width: 769px) {
		.case_page .case_block__lists {
			row-gap: 0;
		}

		.case_page .c-card_block {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 5;
			margin-bottom: 34px;
		}

		.case_page .c-card_block > a {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 5;
		}

		.case_page .c-card_block__item-content {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: 2 / span 4;
			align-items: start;
		}
	}
}