@use "variables" as *;

// ===========================================================================
// 店舗一覧 (archive-store.php) — stacked rows, each a whole-card link:
// photo (left) + 店名 (green) + bordered info table + 詳細 pill. The table cells
// use #bbb borders (not the brand green); only the 電話 value is green-emphasised.
// SP collapses to image-on-top, body-below.
// ===========================================================================

$store-border: #bbb;

.store-list {
	border-bottom: 1px dashed $color-rule;
}

.store-item {
	border-top: 1px dashed $color-rule;
}

// The card is NOT a single link (so the 電話 number stays tappable on mobile) —
// only the image, title and 詳細 button link out.
.store-card {
	display: flex;
	align-items: flex-start;
	gap: rem(40);
	padding-block: rem(30);
	color: $color-text;

	@include sp {
		flex-direction: column;
		gap: rem(16);
	}
}

.store-card__img {
	display: block;
	flex: 0 0 rem(300);
	width: rem(300);
	overflow: hidden;
	border-radius: $radius-sm;

	img {
		display: block;
		width: 100%;
		aspect-ratio: 300 / 169;
		object-fit: cover;
		transition: transform 0.4s ease, opacity 0.3s;
	}

	&:hover img {
		transform: scale(1.05);
		opacity: 0.9;
	}

	@include sp {
		flex: 0 0 auto;
		width: 100%;
	}
}

.store-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.store-card__title {
	margin-bottom: rem(14);
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(16);
	line-height: 1.75;
	color: $color-green;

	a {
		color: inherit;

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

.store-card__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.store-card__label,
.store-card__value {
	border: 1px solid $store-border;
	padding-block: rem(15);
	font-size: rem(16);
	line-height: 1.75;
	vertical-align: middle;

	@include sp {
		padding-block: rem(12);
		font-size: rem(13);
	}
}

.store-card__label {
	width: rem(100);
	font-weight: 400;
	text-align: center;
	color: $color-text;
	white-space: nowrap;

	@include sp {
		width: rem(86);
	}
}

.store-card__value {
	padding-inline: rem(30);
	color: $color-text;

	@include sp {
		padding-inline: rem(16);
	}
}

.store-card__zip,
.store-card__addr {
	display: block;
}

.store-card__value--tel {
	font-weight: 600;
	font-size: rem(22);
	color: $color-green;

	a {
		color: inherit;

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

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

.store-card__btn {
	margin-top: rem(30);

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

.store-empty {
	text-align: center;
}

// ===========================================================================
// 店舗詳細 (single-store.php): 店名 → 写真 + リード文 → 情報テーブル + マップ →
// スタッフ一覧 → 戻る.
// ===========================================================================

// Section heading (店名 / スタッフ) — green serif with a dashed underline.
// A heading may carry a right-aligned action pill (e.g. スタッフ → 出勤スケジュール).
.store-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: rem(12) rem(20);
	padding-bottom: rem(20);
	border-bottom: 1px dashed $color-rule;
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(28);
	line-height: 1.3;
	color: $color-green;

	@include sp {
		padding-bottom: rem(14);
		font-size: rem(22);
	}
}

.store-heading__action {
	align-self: center;
}

// --- 写真 + リード文 -------------------------------------------------------
.store-single__intro {
	display: flex;
	align-items: flex-start;
	gap: rem(40);
	margin-top: rem(40);

	@include sp {
		flex-direction: column;
		gap: rem(20);
		margin-top: rem(24);
	}
}

.store-single__photo {
	flex: 0 0 rem(492);
	width: rem(492);
	margin: 0;
	border-radius: $radius-sm;
	overflow: hidden;

	img {
		display: block;
		width: 100%;
		aspect-ratio: 492 / 277;
		object-fit: cover;
	}

	@include sp {
		flex: 0 0 auto;
		width: 100%;
	}
}

.store-single__lead {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 2;
}

// --- 情報テーブル + Google マップ ------------------------------------------
.store-single__info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: rem(40);
	margin-top: rem(60);

	// No map → keep the table at roughly its design width, left-aligned
	// (don't stretch a 4-row table across the full column).
	&--no-map {
		grid-template-columns: minmax(0, rem(560));
	}

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

.store-single__map {
	aspect-ratio: 492 / 260;
	overflow: hidden;

	iframe {
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
	}
}

// --- スタッフ一覧 ----------------------------------------------------------
.store-staff {
	margin-top: rem(80);

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

.store-staff__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: rem(60) rem(40);
	margin-top: rem(40);

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

.store-staff__item {
	display: flex; // let the card fill the (grid-equalized) row height
}

.staff-card {
	display: flex;
	align-items: stretch; // body stretches to the photo height → btn can sit at its bottom
	gap: rem(20);
	width: 100%;

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

.staff-card__photo {
	// Fluid width (≈ the design's 203/492 ratio) so it scales with the card
	// instead of a fixed px; the image keeps a fixed aspect ratio + cover.
	flex: 0 0 40%;
	width: 40%;
	align-self: flex-start; // keep the photo at its aspect ratio (don't stretch)
	margin: 0;
	border-radius: rem(10);
	overflow: hidden;

	img {
		display: block;
		width: 100%;
		aspect-ratio: 203 / 300;
		object-fit: cover;
	}
}

.staff-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.staff-card__name {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: rem(4);
	font-family: $font-serif;
	font-weight: 700;
	color: $color-green;
}

.staff-card__name-ja {
	font-size: rem(24);
	line-height: 1.2;

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

.staff-card__name-ruby {
	font-size: rem(14);
}

.staff-card__credentials {
	margin-top: rem(16);
	font-size: rem(16);
	line-height: 2;
	color: $color-text;

	@include sp {
		font-size: rem(14);
		line-height: 1.9;
	}
}

.staff-card__btn {
	margin-top: auto; // pin to the bottom of the card body
	align-self: flex-start; // keep the pill at its natural width (don't stretch)
}