/* ==========================================================================
   pages-media.css — メディア系ページ（原稿 12 /media/・13 /media/business/・14 /media/life/）。
   （template-parts/pages/media*.php・parts/media-posts.php・parts/media-listing.php）
   ========================================================================== */

/* ---- 01・02 入口（テキスト＋画像を2段） ---- */
.ep-media-entry .ep-media-text + .ep-media-text {
	margin-top: var(--ep-space-2xl);
}

/* ---- 04 テーマから探す（企業・事業者向け／地域情報向け） ---- */
.ep-media-group + .ep-media-group {
	margin-top: var(--ep-space-xl);
}

.ep-media-group__title {
	display: flex;
	align-items: center;
	gap: var(--ep-space-xs);
	margin-bottom: var(--ep-space-m);
	font-size: var(--ep-fs-lg);
	font-weight: var(--ep-weight-medium);
	line-height: 1.4;
}

.ep-media-group__title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ep-color-line);
}

/* カテゴリカード（リンクがある時だけ矢印とホバー） */
.ep-media-themes .ep-card--plain,
.ep-media-categories .ep-card--plain {
	transition: border-color var(--ep-duration-fast);
}

.ep-media-themes .ep-card--linked:hover,
.ep-media-categories .ep-card--linked:hover {
	border-color: var(--ep-color-accent);
}

.ep-media-themes .ep-card--linked .ep-card__title,
.ep-media-categories .ep-card--linked .ep-card__title {
	padding-right: var(--ep-space-l);
}

.ep-media-themes .ep-card--linked .ep-card__title::after,
.ep-media-categories .ep-card--linked .ep-card__title::after {
	content: "→";
	position: absolute;
	top: var(--ep-space-l);
	right: 30px;
	color: var(--ep-color-accent);
	font-family: var(--ep-font-latin);
	transition: transform var(--ep-duration-fast) var(--ep-ease);
}

.ep-media-themes .ep-card--linked:hover .ep-card__title::after,
.ep-media-categories .ep-card--linked:hover .ep-card__title::after {
	transform: translateX(4px);
}

.ep-media-themes .ep-card__title,
.ep-media-categories .ep-card__title {
	font-weight: var(--ep-weight-medium);
}

.ep-media-themes .ep-card__text,
.ep-media-categories .ep-card__text {
	margin-top: var(--ep-space-2xs);
	color: var(--ep-color-ink-sub);
}

/* ---- 記事の並び（parts/media-posts.php） ---- */
.ep-media-posts--stack {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ep-space-l) 36px;
}

/* 原稿の［記事タイトル］（投稿が無い時の枠） */
.ep-media-ph__media {
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: var(--ep-space-s);
	border: 1px dashed var(--ep-color-line-strong);
	border-radius: var(--ep-radius-l);
	background: var(--ep-color-bg);
}

.ep-media-ph__title {
	display: block;
	color: var(--ep-color-ink-sub);
	font-size: var(--ep-fs-sm);
	line-height: 1.6;
}

/* 原稿の［注目記事を表示］［記事一覧を表示］ */
.ep-media-slot {
	padding: var(--ep-space-xl) var(--ep-space-s);
	border: 1px dashed var(--ep-color-line-strong);
	border-radius: var(--ep-radius-l);
	background: var(--ep-color-bg);
	color: var(--ep-color-ink-sub);
	font-size: var(--ep-fs-sm);
	text-align: center;
}

.ep-media-list .ep-actions {
	margin-top: var(--ep-space-xl);
}

@media (max-width: 1023px) {
	.ep-media-posts--stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ep-space-l) 24px;
	}
}

@media (max-width: 767px) {
	.ep-media-entry .ep-media-text + .ep-media-text {
		margin-top: var(--ep-space-xl);
	}
	.ep-media-posts--stack {
		grid-template-columns: minmax(0, 1fr);
	}
	.ep-media-slot {
		padding-block: var(--ep-space-l);
	}
}

/* 01・02・14 の関連メディアのボタンは文言が長いので幅を文言に合わせる（121型の 300px を最小に） */
.ep-media-entry .ep-button--primary,
.ep-media-related .ep-button--primary {
	width: auto;
	min-width: 300px;
}

/* 06 関連メディア（写真帯）がフッターの写真と接しないよう下に余白 */
.ep-media-band {
	margin-bottom: var(--ep-space-section);
}

/* 注目の記事は淡色の面の上なので、アイキャッチ無しの淡色面を白にして形を見せる */
.ep-media-featured .ep-post-card__media {
	background: var(--ep-color-bg);
}