/*
 * tsk-v2 / download.css
 *
 * 資料ダウンロード（/download/ 一覧・カテゴリー・詳細）専用。
 * 該当ページだけで読み込む（inc/download.php）。クラス名は .download-* に限定する。
 *
 * 【方針】
 *   - 表紙画像を主役にした「レポート一覧」。カードは白面＋細い罫線のみ。
 *     大きな影・大きな角丸・意味のないアイコン・グラデーションは使わない。
 *   - 配色は既存トークン（濃紺 / 白 / ブランドブルー）。ブロンズは
 *     詳細ページの小ラベル 1 か所だけに使う。
 *   - 既存部品（.page-header / .breadcrumb / .cta / .check-list / .link-arrow /
 *     .entry-content / .form-page / .pagination / .archive-empty）を再利用し、
 *     ここでは資料ページ固有のレイアウトだけを定義する。
 */

/* ==========================================================================
   器
   ========================================================================== */

.download-wrap {
	width: 100%;
	max-width: var(--w-main);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-bottom: var(--sp-2xl);
}

/* ==========================================================================
   カテゴリー絞り込み（一覧・カテゴリー）
   ========================================================================== */

.download-filter {
	margin-bottom: var(--sp-lg);
	border-bottom: 1px solid var(--line);
}

.download-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--sp-md);
	margin: 0;
}

.download-filter__link {
	display: inline-block;
	padding: var(--sp-2xs) 0 var(--sp-xs);
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--ink-500);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.download-filter__link:hover,
.download-filter__link:focus-visible {
	color: var(--accent-500);
}

.download-filter__link[aria-current="page"] {
	color: var(--color-brand);
	border-bottom-color: var(--color-brand);
}

.download-filter__all {
	margin-bottom: var(--sp-lg);
}

/* ==========================================================================
   一覧
   ========================================================================== */

.download-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-xl) var(--sp-lg);
	margin: 0;
}

@media (min-width: 700px) {

	.download-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1060px) {

	.download-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.download-card {
	min-width: 0;
}

.download-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/*
 * 表紙の枠。A4 縦・スライド横のどちらの表紙でも収まるよう 4:3 の枠に contain で置き、
 * 「紙の資料が並んでいる」見え方にする。枠は白面＋細い罫線のみ。
 */
.download-card__cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 枠の高さは列幅（aspect-ratio）ではなく高さそのもので決める。
	 *
	 * 以前は aspect-ratio: 3 / 4 で枠を作っていたが、枠幅に比例して伸びるため
	 * 1280px の 3 列で表紙が 401px、1059px の 2 列では 584px まで育ち、
	 * 一覧なのに「表紙だけ見えてタイトルが画面外」になっていた。
	 *
	 * 一覧では表紙は"どの資料か分かるサムネイル"でよいので、列数ごとに
	 * 高さの上下限を決める。表紙は object-fit: contain のままなので、
	 * A4 縦でもスライド横でも切れない（左右または上下に余白が出るだけ）。
	 * 詳細ページ（.download-hero__media）は従来どおり大きく見せる。
	 */
	height: clamp(280px, 80vw, 340px);
	padding: var(--sp-sm);
	background-color: var(--paper-200);
	border: 1px solid var(--line);
	border-radius: var(--r-xs);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

/* 2 列（.download-list と同じ分岐） */
@media (min-width: 700px) {

	.download-card__cover {
		height: clamp(260px, 30vw, 300px);
	}
}

/* 3 列（.download-list と同じ分岐） */
@media (min-width: 1060px) {

	.download-card__cover {
		height: clamp(260px, 22vw, 300px);
	}
}

.download-card__link:hover .download-card__cover,
.download-card__link:focus-visible .download-card__cover {
	border-color: var(--color-brand);
}

.download-card__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: var(--shadow-sm);
}

/* 表紙画像が無い資料：資料名を組んだ無地の表紙 */
.download-card__blank {
	display: flex;
	align-items: flex-end;
	/* 表紙が無い資料でも A4 縦の紙面に見えるよう、枠内で同じ比率を保つ。 */
	aspect-ratio: 1 / 1.414;
	width: auto;
	max-width: 100%;
	height: 100%;
	padding: var(--sp-sm);
	background-color: var(--paper-000);
	border: 1px solid var(--line-strong);
	border-top: 4px solid var(--color-brand);
	box-shadow: var(--shadow-sm);
}

.download-card__blank-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	color: var(--color-brand);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: var(--lh-snug);
}

.download-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: var(--sp-sm);
}

.download-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3xs) var(--sp-xs);
	margin-bottom: var(--sp-2xs);
	font-size: var(--fs-2xs);
}

.download-card__category {
	color: var(--accent-500);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
}

.download-card__date {
	font-family: var(--font-num);
	color: var(--ink-500);
	letter-spacing: var(--ls-wide);
}

.download-card__title {
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
	color: var(--color-brand);
	transition: color 0.2s ease;
}

.download-card__link:hover .download-card__title,
.download-card__link:focus-visible .download-card__title {
	color: var(--accent-500);
}

.download-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin-top: var(--sp-2xs);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--color-text-muted);
}

.download-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2xs);
	margin-top: auto;
	padding-top: var(--sp-sm);
	color: var(--accent-500);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.download-card__more::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.download-card__link:hover .download-card__more::after,
.download-card__link:focus-visible .download-card__more::after {
	transform: rotate(-45deg) translate(2px, 2px);
}

/* ==========================================================================
   詳細：ヘッダー
   ========================================================================== */

.download-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-lg);
	width: 100%;
	max-width: var(--w-main);
	margin-inline: auto;
	padding: var(--sp-lg) var(--gutter) var(--sp-xl);
}

/* SP の順序：見出し・概要 → 表紙 → CTA */
.download-hero__head {
	order: 1;
	min-width: 0;
}

.download-hero__media {
	order: 2;
	min-width: 0;
}

.download-hero__action {
	order: 3;
	min-width: 0;
}

@media (min-width: 768px) {

	.download-hero {
		grid-template-columns: minmax(200px, 34%) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--sp-xl);
		row-gap: var(--sp-lg);
		padding-top: var(--sp-xl);
		padding-bottom: var(--sp-2xl);
	}

	.download-hero__media {
		grid-column: 1;
		grid-row: 1 / span 2;
		order: 0;
	}

	.download-hero__head {
		grid-column: 2;
		grid-row: 1;
	}

	.download-hero__action {
		grid-column: 2;
		grid-row: 2;
	}

	.download-hero--no-media {
		grid-template-columns: minmax(0, 1fr);
	}

	.download-hero--no-media .download-hero__head,
	.download-hero--no-media .download-hero__action {
		grid-column: 1;
	}

	.download-hero--no-media .download-hero__action {
		grid-row: 2;
	}
}

/* ブロンズはこの小ラベル 1 か所だけ */
.download-hero__label {
	margin-bottom: var(--sp-2xs);
	color: var(--bronze-600);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
}

.download-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2xs) var(--sp-sm);
	margin-bottom: var(--sp-sm);
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.download-hero__category {
	padding: 0.15em var(--sp-2xs);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-xs);
	color: var(--ink-500);
	text-decoration: none;
}

a.download-hero__category:hover,
a.download-hero__category:focus-visible {
	border-color: var(--accent-500);
	color: var(--accent-500);
}

.download-hero__date {
	font-family: var(--font-num);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
}

/* h1 は .page-title（layout.css）の指定を継承。下線の短い罫だけ page-header に揃える */
.download-hero__title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-top: var(--sp-md);
	background-color: var(--accent-500);
}

.download-hero__lead {
	margin-top: var(--sp-md);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--ink-700);
}

/* 表紙 */
.download-hero__media {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.download-hero__img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

/* この資料で分かること */
.download-hero__points {
	padding: var(--sp-md);
	background-color: var(--paper-000);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}

.download-hero__points-title {
	margin-bottom: var(--sp-xs);
	font-size: var(--fs-base);
	color: var(--color-brand);
}

.download-hero__points-list {
	font-size: var(--fs-sm);
}

/* 上部 CTA */
.download-hero__cta-wrap {
	margin-top: var(--sp-md);
}

.download-hero__points + .download-hero__cta-wrap {
	margin-top: var(--sp-lg);
}

.download-hero__cta {
	width: 100%;
}

@media (min-width: 500px) {

	.download-hero__cta {
		width: auto;
		min-width: 20rem;
	}
}

.download-hero__note {
	margin-top: var(--sp-2xs);
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.download-hero__file {
	margin-right: var(--sp-2xs);
	font-family: var(--font-num);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
}

/* ==========================================================================
   詳細：本文
   ========================================================================== */

.download-body {
	padding-top: var(--sp-lg);
	padding-bottom: var(--sp-xl);
}

/* ==========================================================================
   詳細：ダウンロードフォーム
   ========================================================================== */

.download-form {
	margin-top: var(--sp-lg);
	padding: var(--sp-xl) 0;
	background-color: var(--paper-200);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {

	.download-form {
		padding: var(--sp-2xl) 0;
	}
}

.download-form__title {
	font-size: var(--fs-lg);
	color: var(--color-brand);
}

.download-form__lead {
	margin-top: var(--sp-sm);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--ink-700);
}

.download-form__target {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-3xs) var(--sp-sm);
	margin-top: var(--sp-md);
	padding: var(--sp-xs) var(--sp-sm);
	background-color: var(--paper-000);
	border-left: 3px solid var(--color-brand);
	font-size: var(--fs-sm);
}

.download-form__target-label {
	color: var(--ink-500);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
}

.download-form__target-title {
	color: var(--color-brand);
	font-weight: 700;
}

/* CF7 のフォーム本体は .form-page（components.css）の指定を再利用する */
.download-form__body {
	margin-top: var(--sp-xs);
}

.download-form__body .form-page .wpcf7-form p:first-child {
	margin-top: 0;
}

/* 送信成功後に JS が表示する導線 */
.download-form__result {
	margin-top: var(--sp-lg);
	padding: var(--sp-md);
	background-color: var(--paper-000);
	border: 1px solid var(--line-strong);
	border-left: 3px solid var(--accent-500);
	border-radius: var(--r-sm);
}

.download-form__result[hidden] {
	display: none;
}

.download-form__result:focus {
	outline: 2px solid var(--accent-500);
	outline-offset: 2px;
}

.download-form__result-lead {
	margin-bottom: var(--sp-sm);
	font-size: var(--fs-base);
	color: var(--ink-700);
}

.download-form__result-link {
	max-width: 100%;
	white-space: normal;
	text-align: left;
}

/* ==========================================================================
   詳細：一覧へ戻る
   ========================================================================== */

.download-single .entry-back {
	margin-top: var(--sp-lg);
	margin-bottom: var(--sp-2xl);
}