/**
 * Komorebi Hero (inc/elementor/widgets/hero.php), Figma "V1 Hero" (Home 18:6345): the photo
 * under the ink overlay, the caption top right and the vertical brand mark, the copy at the
 * bottom and, on Home, the "M16 Quick booking bar" (a card on phones).
 */

.km-hero {
	display: flex;
	flex-direction: column;
	min-height: var(--km-hero-h, 920px);
	background: var(--km-c-ink);
	color: var(--km-hero-text, var(--km-c-paper));
	overflow: hidden;
}

.km-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--km-c-ink);
}

.km-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--km-hero-overlay, transparent);
	opacity: var(--km-hero-overlay-o, 0);
	pointer-events: none;
}

.km-hero .km-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.km-hero .km-hero__img--phone {
	display: none;
}

.km-hero__stage {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* Desktop: the caption on its own line (right), the brand mark 6 under it (left). */
.km-hero__top {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	row-gap: 6px;
}

.km-hero .km-hero__caption {
	grid-column: 1 / -1;
	justify-self: end;
	color: inherit;
	text-align: right;
}

/* 木漏れ日: Shippori Mincho 40/120, one character per line, centred. */
.km-hero .km-hero__mark {
	grid-column: 1;
	color: inherit;
	font-family: var(--km-serif);
	font-size: 40px;
	line-height: 1.2;
	text-align: center;
}

/* The copy sits at the bottom (Figma: 760 wide), indented on some pages. */
.km-hero__copy {
	max-width: calc(760px + var(--km-hero-indent, 0px));
	margin-top: auto;
	padding-left: var(--km-hero-indent, 0px);
	color: inherit;
}

.km-hero .km-hero__eyebrow {
	margin-bottom: 16px;
	color: inherit;
}

.km-hero .km-hero__title {
	color: inherit;
}

.km-hero__body {
	max-width: 600px;
	margin-top: 20px;
}

.km-hero .km-hero__text {
	color: inherit;
}

/* "See the menu": a 44 high hit area 8 under the text. */
.km-hero .km-hero__link {
	margin-top: 8px;
	color: inherit;
}

/* ------------------------------------------------------------------ */
/* M16 Quick booking bar: paper, rule at 40%, radius 12, 98 high       */
/* ------------------------------------------------------------------ */

.km-qbar {
	display: flex;
	align-items: center;
	margin-top: 48px;
	padding: 12px 12px 12px 4px;
	border: 1px solid rgb(82 98 86 / 0.4);
	border-radius: var(--km-radius-card);
	background: var(--km-c-paper);
	color: var(--km-c-ink);
}

.km-qbar__fields {
	display: flex;
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-qbar__item {
	flex: 1 1 0;
	min-width: 0;
}

/* Fields 2 and 3: a rule at 35% on the left. */
.km-qbar__item + .km-qbar__item .km-qbar__field {
	border-left: 1px solid rgb(82 98 86 / 0.35);
}

.km-qbar__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 72px;
	padding: 12px 16px 12px 20px;
	color: inherit;
	text-decoration: none;
}

.km-qbar .km-qbar__label {
	color: var(--km-c-muted);
}

.km-qbar__value {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	line-height: 1.5;
}

.km-qbar__text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.km-qbar__icon {
	flex: none;
}

.km-qbar .km-qbar__action {
	flex: none;
}

/* ------------------------------------------------------------------ */
/* Tablet (834)                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.km-hero {
		min-height: var(--km-hero-h, 720px);
	}

	/* The brand mark (32, 16 down) and the caption share the first row. */
	.km-hero__top {
		align-items: start;
	}

	.km-hero .km-hero__caption {
		grid-column: 2;
		grid-row: 1;
	}

	.km-hero .km-hero__mark {
		grid-row: 1;
		padding-top: 16px;
		font-size: 32px;
	}

	.km-hero__copy {
		max-width: 640px;
	}

	/* Fields sized by their text, the button 21 either side of its label. */
	.km-qbar {
		margin-top: 32px;
		padding: 12px 16px;
		gap: 8px;
	}

	.km-qbar__item {
		flex: 1 1 auto;
	}

	.km-qbar .km-qbar__action {
		min-width: 0;
		padding: 0 21px;
	}
}

/* ------------------------------------------------------------------ */
/* Phone (390)                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.km-hero {
		min-height: var(--km-hero-h, 600px);
	}

	.km-hero .km-hero__img--wide {
		display: none;
	}

	.km-hero .km-hero__img--phone {
		display: block;
	}

	.km-hero .km-hero__mark {
		padding-top: 0;
		font-size: 28px;
	}

	.km-hero .km-hero__link {
		font-size: 15px;
	}

	/* The card: fields stacked between rules, the button full width; free height is shared
	   above the copy and above the card, as in Figma. */
	.km-qbar {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		margin-top: auto;
		padding: 16px;
	}

	.km-qbar__fields {
		flex-direction: column;
		gap: 8px;
	}

	.km-qbar__item + .km-qbar__item {
		padding-top: 8px;
		border-top: 1px solid rgb(82 98 86 / 0.35);
	}

	.km-qbar__item + .km-qbar__item .km-qbar__field {
		border-left: 0;
	}

	.km-qbar .km-qbar__action {
		width: 100%;
	}
}