@use "variables" as *;

// ===========================================================================
// Front page — Health Check / Symptoms (TOP-specific)
//   div.inner > .inner-box > section.front-check + section.front-symptom
//   separated by a dashed divider.
// ===========================================================================
.front-check + .front-symptom {
	margin-top: rem(60);
	padding-top: rem(60);
	border-top: 1px dashed $color-rule; // dashed divider between the two

	@include sp {
		margin-top: rem(40);
		padding-top: rem(40);
	}
}

// Button grids: auto-fit + minmax so columns drop gracefully with width.
// min() caps the track min at 100% to avoid overflow on very small screens.
.check-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); // 3 -> 2 -> 1
	gap: rem(40);

	@include sp {
		gap: rem(20);
	}
}

.symptom-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); // 4 -> 3 -> 2 -> 1
	gap: rem(20);
}

// ---------------------------------------------------------------------------
// .check-btn — green filled, white icon + label, white circle / green arrow
// ---------------------------------------------------------------------------
.check-btn {
	display: flex;
	align-items: center;
	gap: rem(16);
	height: rem(100);
	padding: 0 rem(20);
	background: $color-green;
	border-radius: rem(10);
	color: $color-white;
	transition: opacity 0.2s;

	&:hover {
		opacity: 0.8;
		text-decoration: none;
	}
}

.check-btn__icon {
	flex-shrink: 0;
	width: rem(50);
	height: rem(50);
	object-fit: contain;
}

.check-btn__label {
	flex: 1;
	font-family: $font-serif;
	font-weight: 700;
	font-size: fz(20, 28);
	line-height: 1.2;
}

.check-btn__arrow {
	@include circle-arrow($bg: $color-white, $fg: $color-green);
}

// ---------------------------------------------------------------------------
// .symptom-btn — white, green border, photo thumb left, green circle / white arrow
// ---------------------------------------------------------------------------
.symptom-btn {
	display: flex;
	align-items: center;
	gap: rem(12);
	height: rem(100);
	padding-right: rem(16);
	overflow: hidden;
	background: $color-white;
	border: 1px solid $color-green;
	border-radius: rem(10);
	color: $color-green;
	transition: opacity 0.2s;

	&:hover {
		opacity: 0.8;
		text-decoration: none;
	}
}

.symptom-btn__thumb {
	flex-shrink: 0;
	align-self: stretch;
	width: rem(90);
	margin: rem(5) 0 rem(5) rem(5); // ~5px gap from the button edges
	border-radius: rem(6);
	object-fit: cover;
}

.symptom-btn__label {
	flex: 1;
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(18);
	line-height: 1.3;

	@include sp {
		font-size: rem(16);
	}
}

.symptom-btn__arrow {
	@include circle-arrow($bg: $color-green, $fg: $color-white);
}

// ===========================================================================
// Front page — Products / Services grid (漢方薬 〜 出版物) (TOP-specific)
//   3 homogeneous rows: photo cards / overlay cards / link bars.
// ===========================================================================
.front-products {
	background: $color-bg-tint;
}

.product-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: rem(40); // column gap

	& + & {
		margin-top: rem(80); // space between rows
	}

	@include sp {
		gap: rem(20);

		& + & {
			margin-top: rem(40);
		}
	}
}

// --- row 1: photo card (whole card is the hover area; image zoom + fade) ---
.pcard {
	display: block;
	color: $color-text;

	&:hover {
		text-decoration: none;
	}
}

.pcard__img {
	display: block;
	aspect-ratio: 387 / 228;
	border-radius: rem(10);
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s ease, opacity 0.4s ease;
	}
}

.pcard:hover .pcard__img img {
	transform: scale(1.06);
	opacity: 0.85;
}

.pcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: rem(12);
	margin-top: rem(16);
	transition: opacity 0.4s ease;
}

.pcard:hover .pcard__head {
	opacity: 0.7; // title + 詳細 fade on hover too
}

.pcard__title {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(24);
	color: $color-green;
	line-height: 1.3;

	@include sp {
		font-size: rem(20);
	}
}

// --- row 2: overlay card (green 70% overlay; image zoom; 詳細 fills on hover) ---
.pcard--overlay {
	position: relative;
	display: block;
	aspect-ratio: 387 / 160;
	border-radius: rem(10);
	overflow: hidden;

	&:hover {
		text-decoration: none;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(#006933, 0.7); // brand green 70% overlay
	}
}

.pcard--overlay__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.pcard--overlay:hover .pcard--overlay__img {
	transform: scale(1.06);
}

.pcard--overlay__body {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: rem(12);
	padding: rem(20);
}

.pcard--overlay .pcard__title {
	color: $color-white;
}

.pcard--overlay:hover .pill-btn--outline {
	background: $color-white;
	color: $color-green;
}

// --- row 3: link bar ---
.pbar {
	@include hover-invert;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: rem(60);
	border: 1px solid $color-green;
	border-radius: rem(40);
}

.pbar__label {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(18);
}

.pbar__arrow {
	@include circle-arrow($bg: var(--fg), $fg: var(--bg));
	position: absolute;
	right: rem(15);
	top: 50%;
	transform: translateY(-50%);
}

// ===========================================================================
// Banner marquee (TOP only) — 2 rows, infinite linear scroll, opposite ways.
// Full-bleed (no .inner). Tracks hold 2 copies; translateX(-50%) loops seamless.
// ===========================================================================
.banner-marquee {
	overflow: hidden;
}

.banner-row {
	overflow: hidden;

	& + & {
		margin-top: rem(20);
	}

	&:hover .banner-row__track {
		animation-play-state: paused;
	}
}

.banner-row__track {
	display: flex;
	width: max-content;
	animation: banner-scroll 40s linear infinite;
}

.banner-row--reverse .banner-row__track {
	animation-direction: reverse;
}

@keyframes banner-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.banner-row__track {
		animation: none;
	}
}

.banner {
	flex-shrink: 0;
	width: rem(256);
	margin-right: rem(20);

	img {
		display: block;
		width: 100%;
		height: auto;
	}
}