@use "variables" as *;

// ===========================================================================
// Reusable components
// ===========================================================================

// ---------------------------------------------------------------------------
// .deco-bg — common background pattern: bg colour + brand flower marks bleeding
// off the top-left and bottom-right corners. Reused across sections.
// ---------------------------------------------------------------------------
.deco-bg {
	position: relative;
	background-color: var(--deco-bg, #{rgba($color-bg-tint, 0.9)});
	overflow: hidden;

	&::before,
	&::after {
		content: "";
		position: absolute;
		width: rem(346);
		height: rem(319);
		background: url("../img/common/deco-flower.webp") no-repeat center / contain;
		pointer-events: none;
		z-index: 0;

		@include sp {
			width: rem(150);
			height: rem(138);
		}
	}

	&::before {
		top: rem(-60);
		left: rem(-60);

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

	&::after {
		right: rem(-60);
		bottom: rem(-60);

		@include sp {
			right: rem(-40);
			bottom: rem(-40);
		}
	}

	// keep content above the deco marks
	> * {
		position: relative;
		z-index: 1;
	}
}

// ---------------------------------------------------------------------------
// .btn-link — large pill button (icon / JP+EN label / arrow).
// White bg + green border by default; hover inverts to green bg + white,
// with a transition. Colours driven by --bg / --fg so children invert too.
// ---------------------------------------------------------------------------
.btn-link {
	@include hover-invert;

	display: flex;
	align-items: center;
	gap: rem(20);
	height: rem(100);
	padding: 0 rem(30) 0 rem(40);
	border: 2px solid $color-green;
	border-radius: rem(20);

	@include sp {
		height: rem(76);
		gap: rem(12);
		padding: 0 rem(20);
	}
}

.btn-link__icon {
	flex-shrink: 0;
	width: rem(40);
	height: rem(40);
	background-color: var(--fg);
	-webkit-mask: var(--icon) no-repeat center / contain;
	mask: var(--icon) no-repeat center / contain;
	transition: background-color 0.3s;

	@include sp {
		width: rem(32);
		height: rem(32);
	}
}

.btn-link__label {
	display: flex;
	align-items: baseline;
	gap: rem(12);
}

.btn-link__ja {
	font-family: $font-serif;
	font-weight: 700;
	font-size: fz(20, 28); // clamp 20 -> 28px
	line-height: 1;
}

.btn-link__en {
	font-family: $font-serif;
	font-weight: 700;
	font-size: fz(13, 16); // clamp 13 -> 16px
	line-height: 1;
}

.btn-link__arrow {
	@include circle-arrow($bg: var(--fg), $fg: var(--bg));
	margin-left: auto;
}

// ---------------------------------------------------------------------------
// .info-block — image + heading/buttons row + description (About / Flow etc.)
// ---------------------------------------------------------------------------
.info-block__img {
	aspect-ratio: 600 / 350;
	border-radius: rem(20);
	overflow: hidden;

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

.info-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: rem(16);
	margin-top: rem(20);
}

.info-block__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);
	}
}

.info-block__btns {
	display: flex;
	flex-shrink: 0;
	gap: rem(10);
}

.info-block__btn {
	display: inline-flex;
	align-items: center;
	padding: rem(5) rem(20);
	background: $color-green;
	border-radius: $radius-pill;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(14);
	line-height: 1.2;
	color: $color-white;
	transition: opacity 0.2s;

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

.info-block__desc {
	margin-top: rem(16);
	font-family: $font-sans;
	font-size: rem(16);
	line-height: 1.75;
	color: $color-text;
}

// ---------------------------------------------------------------------------
// .pill-btn — small green pill (e.g. 詳細 / 店舗一覧). --outline for use on
// dark/photo backgrounds (white border, fills white on hover via parent).
// ---------------------------------------------------------------------------
.pill-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: rem(100);
	padding: rem(5) rem(20);
	background: $color-green;
	border: 1px solid $color-green;
	border-radius: $radius-pill;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(14);
	line-height: 1.2;
	color: $color-white;
	transition: background-color 0.3s, color 0.3s, opacity 0.3s;

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

.pill-btn--outline {
	background: transparent;
	border-color: $color-white;
	color: $color-white;
}

// ---------------------------------------------------------------------------
// .sec-head — common centered section heading (JP / short line / EN).
// ---------------------------------------------------------------------------
.sec-head {
	text-align: center;
}

.sec-head__ja {
	position: relative;
	padding-bottom: 0.8em;
	margin-bottom: 0.7em;
	font-family: $font-serif;
	font-weight: 700;
	font-size: fz(24, 28); // SP a bit bigger
	color: $color-green;
	line-height: 1.3;

	&::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: rem(100);
		height: 1px;
		background: $color-green;
	}
}

.sec-head__en {
	display: block;
	font-family: $font-serif;
	font-weight: 700;
	font-size: fz(13, 16); // clamp
	color: $color-green;
	line-height: 1;
	text-transform: uppercase;
}

// ---------------------------------------------------------------------------
// .page-head — full-bleed green title band for lower pages (EN over JP).
// Reused via template-parts/page-head.php. Sits directly under the fixed
// header (body already has padding-top for it).
// ---------------------------------------------------------------------------
.page-head {
	background: rgba($color-green, 0.9);
	color: $color-white;
}

.page-head__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: rem(16); // a little air below the EN line
	min-height: rem(130);
	margin-block: 0; // reset h1 block margins; keep .inner-box margin-inline:auto (centring)
	color: $color-white; // override base h1 green
	text-align: center;

	@include sp {
		min-height: rem(90);
		gap: rem(10);
	}
}

.page-head__en {
	font-family: $font-serif;
	font-weight: 700;
	font-size: fz(24, 30); // clamp 24 -> 30px
	line-height: 1;
}

.page-head__ja {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(16);
	line-height: 1;

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

// ---------------------------------------------------------------------------
// Front page — guide section (2 info-blocks + 2 link buttons on .deco-bg)
// ---------------------------------------------------------------------------
.front-guide__links {
	margin-top: rem(40);

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

// ---------------------------------------------------------------------------
// .contact-tab — gold お問合わせ contact button (Figma「固定」), site-wide.
// PC: side tab pinned to the right edge, vertically centred, flush right
//     (only the left corners rounded), icon over text.
// SP: full-width bar fixed to the bottom of the screen ($contact-tab-sp-h
//     tall), icon and text in a row. The footer credit gets a matching
//     padding-bottom so the bar never covers it (see _footer.scss).
// ---------------------------------------------------------------------------
$contact-tab-sp-h: rem(48); // SP bottom-bar height (kept in sync in _footer.scss)

.contact-tab {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: $z-header - 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: rem(8);
	width: rem(90);
	padding: rem(16) rem(10);
	background: $color-gold;
	border-radius: rem(10) 0 0 rem(10);
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.3s;

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

	@include sp {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		transform: none;

		flex-direction: row;
		justify-content: center;
		gap: rem(10);
		width: 100%;
		height: $contact-tab-sp-h;
		padding: 0 rem(16);
		border-radius: 0;
	}
}

.contact-tab__icon {
	width: rem(40);
	height: rem(30);
	background-color: #fff;
	-webkit-mask: url("../img/common/icon-mail.svg") no-repeat center / contain;
	mask: url("../img/common/icon-mail.svg") no-repeat center / contain;

	@include sp {
		width: rem(30);
		height: rem(22);
	}
}

.contact-tab__ja {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(14);
	line-height: 1.2;

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

.contact-tab__en {
	font-size: rem(10);
	line-height: 1;
	text-transform: uppercase;

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