/*
 * トップページ・サービス詳細・課題詳細・業種詳細で共有する画像付きヒーロー。
 *
 * HTML/PHPは template-parts/common/image-hero.php、見た目はこのファイルで一元管理する。
 * PC・タブレットは2カラム、スマホは画像を背景レイヤーとして使い、
 * パンくず（下層のみ）・見出し・説明・CTAをグラデーション上に重ねる。
 */

.c-image-hero {
	padding: 76px 0 72px;
	background: var(--color-background);
	border-bottom: 1px solid var(--color-border);
}

.c-image-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(400px, 0.82fr);
	align-items: center;
	gap: 64px;
}

.c-image-hero--with-breadcrumb .c-image-hero__grid {
	padding-top: 38px;
}

.c-image-hero__content {
	min-width: 0;
	max-width: 700px;
}

.c-image-hero h1 {
	max-width: 700px;
	margin: 0;
	font-weight: 500;
}

.c-image-hero__lead {
	max-width: 680px;
	margin: 28px 0 0;
	color: var(--color-text);
	line-height: 2;
}

/* ボタン自体の並び・幅は button-system.css の .c-button-group に委ねる。 */
.c-image-hero__actions {
	margin: 32px 0 0;
}

.c-image-hero__visual {
	min-width: 0;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	background: var(--color-background-subtle);
	border-radius: var(--radius-md);
}

.c-image-hero__visual img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 1080px) {
	.c-image-hero__grid {
		grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
		gap: 48px;
	}
}

@media (max-width: 960px) {
	.c-image-hero {
		padding: 58px 0 60px;
	}

	.c-image-hero__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.c-image-hero--with-breadcrumb .c-image-hero__grid {
		padding-top: 28px;
	}

	.c-image-hero__content,
	.c-image-hero h1,
	.c-image-hero__lead,
	.c-image-hero__visual {
		max-width: 720px;
	}

	.c-image-hero__visual {
		width: 100%;
	}
}

@media (max-width: 600px) {
	/*
	 * ヘッダー（68px）を除いた1画面をヒーローの基準高さにする。
	 * 内容が多い端末では自然に高さを伸ばしつつ、CTAまでファーストビューに
	 * 収まりやすい位置へ本文を中央付近にまとめる。
	 */
	.c-image-hero {
		padding: 0;
		overflow-x: clip;
		border-bottom: 0;
	}

	/*
	 * スマホではヒーロー自体を画面幅100%で扱う。
	 * l-container の左右余白を calc と負のmarginで相殺しない。
	 */
	.c-image-hero__container {
		position: relative;
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	.c-image-hero__grid,
	.c-image-hero--with-breadcrumb .c-image-hero__grid {
		position: relative;
		display: block;
		width: 100%;
		min-height: calc(100svh - 68px);
		padding: 0;
		margin: 0;
		overflow: hidden;
		isolation: isolate;
		background: var(--color-primary-deepest);
	}

	.c-image-hero__grid::after {
		position: absolute;
		inset: 0;
		z-index: 1;
		content: "";
		background: linear-gradient(
			to bottom,
			color-mix(in srgb, var(--color-primary-deepest) 30%, transparent) 0%,
			color-mix(in srgb, var(--color-primary-deepest) 42%, transparent) 24%,
			color-mix(in srgb, var(--color-primary-deepest) 68%, transparent) 46%,
			color-mix(in srgb, var(--color-primary-deepest) 90%, transparent) 72%,
			color-mix(in srgb, var(--color-primary-deepest) 97%, transparent) 100%
		);
		pointer-events: none;
	}

	.c-image-hero__content {
		position: relative;
		z-index: 2;
		display: flex;
		min-height: inherit;
		max-width: none;
		flex-direction: column;
		justify-content: center;
		padding: 24px;
		color: var(--color-text-inverse);
	}

	/* 下層ページではパンくずも背景画像上に含め、本文と同じ左右余白に揃える。 */
	.c-image-hero__breadcrumb {
		position: absolute;
		top: 18px;
		left: 0;
		z-index: 3;
		width: 100%;
		padding-inline: 24px;
		margin: 0;
		text-shadow: 0 1px 12px color-mix(in srgb, var(--color-primary-deepest) 55%, transparent);
	}

	.c-image-hero__breadcrumb .c-breadcrumb ol {
		padding: 0;
		margin: 0;
		color: var(--color-text-inverse-soft);
	}

	.c-image-hero__breadcrumb .c-breadcrumb a {
		color: var(--color-text-inverse);
	}

	.c-image-hero__breadcrumb .c-breadcrumb li + li::before {
		color: var(--color-text-inverse-muted);
	}

	.c-image-hero__visual {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		margin: 0;
		border-radius: 0;
	}

	.c-image-hero__visual img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: center;
	}

	main .c-image-hero h1 {
		max-width: none;
		color: var(--color-text-inverse);
		line-height: 1.4;
		text-shadow: 0 2px 18px color-mix(in srgb, var(--color-primary-deepest) 55%, transparent);
	}

	/* PC用の意図的な改行はスマホでは外し、画面幅に合わせて自然に折り返す。 */
	.c-image-hero h1 br {
		display: none;
	}

	.c-image-hero__lead {
		max-width: none;
		margin-top: 16px;
		color: var(--color-text-inverse);
		line-height: 1.7;
		text-shadow: 0 1px 14px color-mix(in srgb, var(--color-primary-deepest) 45%, transparent);
	}

	.c-image-hero__actions {
		gap: 8px;
		margin-top: 20px;
	}
}