/* ==========================================================================
   p-voice : お客様の声ページ
   ========================================================================== */

/* ==========================================================================
   ページタイトル（「お客様からのお声」「VOICE」）との余白

   見た目自体は共通コンポーネント（assets/css/heading.css の c-page-title）を
   そのまま使用。ここではページ固有のレイアウト（下の一覧との余白）のみ定義する。
   ========================================================================== */

.p-voice-container .c-page-title {
	margin-bottom: 48px;
}

/* 一覧の下、フッター上CTA（お問い合わせ）との間の余白
   ※ SWELL側の `.l-mainContent__inner > :last-child { margin-bottom: 0 !important; }`
     によって .p-voice（.l-mainContent__inner の最後の子要素）の margin-bottom は
     無効化されてしまうため、直後に続く CTA セクション側の margin-top で余白を作る。 */
.p-voice-container + .c-cta {
	margin-top: 64px;
}

/* ==========================================================================
   会社名見出し（青背景＋白文字）は共通クラス c-heading-bgBlue（components.css）を
   そのまま使用しているため、ここでの見た目の再定義はなし。
   .p-voice__name はページ固有のフック用クラス（今のところ追加スタイルなし）。
   ========================================================================== */

/* ==========================================================================
   各社の声カードの余白（本文 → 次の会社名見出し の間隔）
   ========================================================================== */

.p-voice__item + .p-voice__item {
	margin-top: 48px;
}

/* ==========================================================================
   投稿が1件もない場合の案内文
   ========================================================================== */

.p-voice__empty {
	text-align: center;
	padding: 48px 20px;
	color: #666;
}

/* ==========================================================================
   写真エリア（写真1・写真2を横並びで表示）
   ========================================================================== */

.p-voice__thumbs {
	display: flex;
	gap: 16px;
}

.p-voice__thumb {
	flex: 1;
	aspect-ratio: 4 / 3; /* 写真の比率を固定（原稿画像の縦横に依存しない） */
	overflow: hidden;
}

/* 写真が1枚だけの場合：2枚の時と同じ幅のまま、中央寄せで表示する */
.p-voice__thumbs.-single {
	justify-content: center;
}

.p-voice__thumbs.-single .p-voice__thumb {
	flex: none;
	width: calc(50% - 8px); /* gap:16px の半分を差し引いた、2枚表示時と同じ幅 */
}

.p-voice__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* コンテナの比率に合わせて中央基準でトリミング */
}

/* 写真と本文の余白／行間
   line-height は SWELL標準の本文（.post_content）と同じ 1.8 に合わせている */
.p-voice__text {
	margin-top: 24px;
	line-height: 1.8;
}

@media screen and (max-width: 768px) {

	.p-voice__thumbs {
		flex-direction: column;
	}

	/* 縦積みレイアウトでは、2枚の時も1枚の時も同じ幅（100%）になる */
	.p-voice__thumbs.-single .p-voice__thumb {
		width: 100%;
	}

}