/*
 * 対談・インタビューの2カラム。トップとTikTok Shop支援ページで共用する。
 * 出力は ripples_interview_layout()（inc/home-parts.php）。
 */

.interview-layout {
	display: grid;
	grid-template-columns: 640px minmax(0, 760px);
	gap: 40px;
	margin-top: 60px;
}

.interview-feature .card-media {
	width: 100%;
	aspect-ratio: 8 / 5;
}

.interview-feature__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.interview-feature__body {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 24px;
	margin-top: 24px;
}

.interview-feature__avatar {
	width: 120px;
	height: 120px;
	object-fit: cover;
}

.interview-feature h3,
.interview-row h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.interview-feature__body p,
.interview-row__body > p:not(.article-card__tags) {
	margin: 8px 0 0;
	font-size: 14px;
}

.interview-row {
	padding-bottom: 24px;
	border-bottom: 1px solid rgb(255 255 255 / 30%);
}

.interview-row + .interview-row {
	padding-top: 24px;
}

/* 最後の1件の下には罫線を引かない（Figma 56:4240 / トップも同じ）。 */
.interview-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.interview-row a {
	display: grid;
	grid-template-columns: 296px minmax(0, 1fr);
	gap: 24px;
}

.interview-row .card-media {
	width: 296px;
	height: 185px;
}

.interview-row .card-media > img,
.interview-row .card-media > span {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.interview-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 899px) {
	.interview-layout {
		gap: 0;
		margin-top: 60px;
	}

	.interview-feature .card-media {
		aspect-ratio: 8 / 5;
	}

	.interview-feature__body {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 16px;
		margin-top: 20px;
	}

	.interview-feature__avatar {
		width: 64px;
		height: 64px;
	}

	.interview-feature h3,
	.interview-row h3 {
		font-size: 14px;
	}

	.interview-feature__body p,
	.interview-row__body > p:not(.article-card__tags) {
		font-size: 12px;
	}

	.interview-list {
		margin-top: 60px;
	}

	.interview-row {
		padding-bottom: 24px;
	}

	.interview-row a {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 12px;
	}

	.interview-row .card-media {
		width: 120px;
		height: 75px;
	}

	.interview-row__body > p:not(.article-card__tags) {
		margin-top: 0;
		order: -1;
	}

	.interview-row__body {
		display: flex;
		flex-direction: column;
	}
}