@use "variables" as *;

// ===========================================================================
// 薬膳レシピ archive (archive-recipe.php). 3-col card grid; each card an
// independent-height link: dish photo (white box, faint green border) +
// subtitle catch + green title row with a circle arrow + a thin rule +
// 調理時間. Content column = --narrow (1024). No taxonomy / no pager.
// ===========================================================================
.recipe-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: rem(80) rem(40); // design: 80 row / 40 column
	align-items: start; // cards size to their own content (no row stretch)

	@include tab {
		grid-template-columns: repeat(2, 1fr);
		gap: rem(60) rem(30);
	}

	@include sp {
		grid-template-columns: 1fr;
		gap: rem(40);
	}
}

// whole card is one link; hover fades it (data-anim lives on .recipe-item)
.recipe-card {
	display: flex;
	flex-direction: column;
	transition: opacity 0.3s;

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

// dish photo — cover-filled on a white card with a faint green border
.recipe-card__img {
	margin: 0; // figure UA default margin off — next element owns the gap
	aspect-ratio: 315 / 177;
	background: $color-white;
	border: 1px solid rgba($color-green, 0.2);
	border-radius: rem(10);
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

// subtitle catch above the title
.recipe-card__sub {
	margin-top: rem(20);
	font-size: rem(14);
	line-height: 1.7;
	color: $color-text;
}

// title + arrow row
.recipe-card__head {
	display: flex;
	align-items: center;
	gap: rem(12);
	margin-top: rem(8);
}

.recipe-card__title {
	flex: 1;
	min-width: 0;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(16);
	line-height: 1.6;
	color: $color-green;
}

// green circle + white right-triangle (CSS — no glyph)
.recipe-card__arrow {
	@include circle-arrow($bg: $color-green, $fg: $color-white);
}

// 調理時間 — thin rule above, then the label/value line
.recipe-card__time {
	margin-top: rem(16);
	padding-top: rem(16);
	border-top: 1px solid $color-line;
	font-size: rem(14);
	line-height: 1.7;
	color: $color-text;
}

.recipe-card__time-sep {
	margin-inline: rem(12);
}

.recipe-empty {
	padding-block: rem(24);
	color: $color-text;
}

// ===========================================================================
// 薬膳レシピ single (single-recipe.php). All ACF: heading (subtitle + title),
// hero (image | 紹介文), 材料 list, 作り方 ordered list, 戻る. Column = --narrow.
// ===========================================================================
.recipe-single__head {
	padding-bottom: rem(20);
	border-bottom: 1px dashed $color-rule; // design: dashed rule under the title
}

.recipe-single__title {
	font-family: $font-sans;
	font-weight: 600;
	font-size: rem(20);
	line-height: 1.8;
	color: $color-green;
}

// catch prefix on the heading — same colour, sits inline before the title
.recipe-single__sub {
	margin-right: rem(8);
}

// hero: dish image | 紹介文
.recipe-single__hero {
	display: grid;
	grid-template-columns: rem(492) 1fr;
	gap: rem(40);
	margin-top: rem(60);

	@include sp {
		grid-template-columns: 1fr;
		gap: rem(24);
		margin-top: rem(40);
	}
}

.recipe-single__img {
	margin: 0; // figure UA default margin off
	aspect-ratio: 492 / 277;
	background: $color-white;
	border: 1px solid rgba($color-green, 0.2);
	border-radius: rem(10);
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.recipe-single__intro {
	font-size: rem(16);
	line-height: 1.75;
	color: $color-text;

	p {
		margin-bottom: 1em;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

// shared section spacing (材料 / 作り方)
.recipe-section {
	margin-top: rem(60);

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

// green section heading with a thin dashed underline
.recipe-heading {
	padding-bottom: rem(16);
	border-bottom: 1px dashed $color-rule;
	font-family: $font-sans;
	font-weight: 600;
	font-size: rem(20);
	line-height: 1.6;
	color: $color-green;
}

.recipe-heading__note {
	font-size: rem(14);
}

// 材料 — name ： amount rows, thin rule under each
.recipe-ingredients__row {
	display: grid;
	grid-template-columns: minmax(0, rem(280)) auto 1fr;
	gap: rem(12);
	align-items: baseline;
	padding-block: rem(14);
	border-bottom: 1px dashed $color-rule;
	font-size: rem(16);
	line-height: 1.6;
	color: $color-text;

	@include sp {
		grid-template-columns: minmax(0, rem(140)) auto 1fr;
		gap: rem(8);
	}
}

.recipe-ingredients__sep {
	color: $color-text;
}

// 作り方 — PC: 工程写真 stacked in a left column, numbered 手順 in a right column.
// SP: steps text on top, then 工程写真 below in a 2-col grid.
.recipe-steps__body {
	margin-top: rem(30);

	&.has-imgs {
		display: grid;
		grid-template-columns: rem(300) 1fr;
		gap: rem(40);
		align-items: start;

		@include sp {
			grid-template-columns: 1fr;
			gap: rem(24);
		}
	}
}

.recipe-steps__imgs {
	display: flex;
	flex-direction: column;
	gap: rem(20);

	@include sp {
		order: 2; // images drop below the steps text on SP
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: rem(16);
	}
}

.recipe-step__img {
	margin: 0; // figure UA default margin off
	aspect-ratio: 300 / 169;
	border-radius: rem(10);
	overflow: hidden;

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

// numbered steps — no dividers; plain black "1." marker (fw 400)
.recipe-steps__list {
	counter-reset: recipe-step;

	@include sp {
		order: 1; // steps text first on SP (images drop below)
	}

	font-size: rem(16);
	line-height: 1.75;
	color: $color-text;
}

.recipe-step {
	position: relative;
	padding-left: rem(28);

	&::before {
		counter-increment: recipe-step;
		content: counter(recipe-step) ".";
		position: absolute;
		left: 0;
		font-weight: 400;
		color: $color-text;
	}

	& + & {
		margin-top: 1em;
	}
}

// 戻る — dashed rule then the green pill (design: line above the button)
.recipe-single__foot {
	margin-top: rem(40);
	padding-top: rem(40);
	border-top: 1px dashed $color-rule; // design: dashed rule above the 戻る button
}