/**
 * サービス紹介（Service）セクション（.service）
 * カード本体のスタイルは assets/css/card.css（共通コンポーネント）を参照。
 * ここではグリッド（カードの並び）のみを定義する。
 */

.service {
	background-color: var(--color-navy);
}

/* 背景がネイビーになるため、見出し（刷毛アイコン含む。currentColor で連動）のみ白にする */
.service .section-heading {
	color: #ffffff;
}

.service__inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* モバイル: 1カラム */
.service__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

/*
 * デスクトップ: auto-fit + minmax によりカード数が増減しても自動で折り返す。
 * 1280px コンテナ内では概ね4列になるよう minmax の下限値を調整している。
 */
@media (min-width: 769px) {
	.service__grid {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 24px;
	}
}