/**
 * Common reusable component styles.
 *
 * Loaded globally on all pages via theme/inc/components.php.
 * Add new shared component blocks below this header, separated by
 * comment banners.
 */

/* --------------------------------------------------
 * Design tokens
 *
 * All project-wide CSS custom properties live here per
 * .claude/rules/css-design-tokens.md. Section CSS files
 * should consume tokens via var(--as-*) and must not add
 * their own :root blocks.
 * -------------------------------------------------- */

:root {
	/* Layout */
	--as-gutter:                 20px;
	--as-header-height:          60px;
	--as-scroll-breathing:       20px;

	/* Colors — Brand */
	--as-color-navy:             #0a152f; /* Header base navy, body text */
	--as-color-navy-deep:        #00053b; /* Footer bg, journal text */
	--as-color-navy-border:      #35385f; /* Footer dividers */

	/* Colors — Neutrals */
	--as-color-white:            #ffffff;
	--as-color-black:            #000000;
	--as-color-gray-900:         #333333;
	--as-color-gray-800:         #484848; /* feature card disclaimer note */
	--as-color-gray-700:         #555555;
	--as-color-gray-600:         #646464;
	--as-color-gray-500:         #6d7980; /* rooms tags */
	--as-color-gray-300:         #cccccc;
	--as-color-gray-100:         #efefef;

	/* Colors — Surfaces (light blues) */
	--as-color-surface-blue-50:  #b7d7e3; /* amenities bg */
	--as-color-surface-blue-100: #e0e9ee; /* header bg, accommodation page bg, slideout divider */
	--as-color-surface-blue-200: #d0dde5; /* slideout PC bg, journal bg, index bg */
	--as-color-surface-blue-300: #c8d5de; /* slideout mobile bg */

	/* Colors — Overlay */
	--as-color-overlay-dark:     rgba(0, 0, 0, 0.4);

	/* Font Families — all ", serif" fallback unless otherwise noted */
	--as-font-ja-serif:          "Ten Mincho", serif;
	--as-font-ja-serif-alt:      "Shippori Mincho", serif;
	--as-font-ja-old-mincho:     "Zen Old Mincho", var(--as-font-ja-serif);
	--as-font-ja-kosaotome:      "KOSaotomeKinryoM";
	--as-font-en-serif:          "Venetian301-DmBTRegular", serif;
	--as-font-en-serif-italic:   "Venetian301-DmBTItalic", serif;
	--as-font-display:           "DomaineDisp-Regular", serif;
	--as-font-display-alt:       "BeausiteFit-Light";

	/* Page Hero heading font — per-language overrides set this at html[lang="xx"] */
	--as-page-hero-heading-font: var(--as-font-ja-serif);

	/* Font Sizes */
	--as-font-size-xs:           12px;
	--as-font-size-sm:           13px;
	--as-font-size-base:         14px;
	--as-font-size-md:           15px;
	--as-font-size-lg:           16px;
	--as-font-size-xl:           18px;
	--as-font-size-2xl:          20px;
	--as-font-size-3xl:          22px;
	--as-font-size-4xl:          23px;
	--as-font-size-5xl:          24px;
	--as-font-size-6xl:          25px;
	--as-font-size-7xl:          26px;
	--as-font-size-8xl:          28px;
	--as-font-size-9xl:          32px;
	--as-font-size-10xl:         40px;
	--as-font-size-11xl:         48px;

	/* Font Weights */
	--as-font-weight-regular:    400;
	--as-font-weight-medium:     500;

	/* Line Heights */
	--as-line-height-none:       1;
	--as-line-height-tight:      1.2;
	--as-line-height-tight-plus: 1.4; /* amenities heading */
	--as-line-height-snug:       1.5;
	--as-line-height-normal:     1.6; /* feature-card heading */
	--as-line-height-relaxed:    1.7;
	--as-line-height-loose:      1.75; /* rooms, index */
	--as-line-height-extra-loose: 1.8;
	--as-line-height-dense:      1.9; /* rooms capacity */
	--as-line-height-double:     2;   /* intro body, feature text */

	/* Letter Spacing */
	--as-letter-spacing-xs:      0.05em;
	--as-letter-spacing-sm:      0.08em;
	--as-letter-spacing-md:      0.15em;
	--as-letter-spacing-lg:      0.2em;
	--as-letter-spacing-xl:      0.35em;

	/* Interaction */
	--as-hover-opacity:          0.8;

	@media (min-width: 769px) {
		--as-header-height:      80px;
	}
}

/* --------------------------------------------------
 * Button
 * -------------------------------------------------- */

.as-button {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 15px 15px 17px;
	background-color: var(--as-color-navy);
	border-radius: 80px;
	color: var(--as-color-white);
	font-family: var(--as-font-ja-serif);
	font-size: var(--as-font-size-lg);
	font-style: normal;
	font-weight: var(--as-font-weight-regular);
	line-height: var(--as-line-height-none);
	letter-spacing: var(--as-letter-spacing-sm);
	text-align: center;
	text-decoration: none;
}

@media (hover: hover) {
	.as-button:hover {
		opacity: var(--as-hover-opacity);
		color: var(--as-color-white);
	}
}

/* --------------------------------------------------
 * Section heading
 * -------------------------------------------------- */

.as-section-heading {
	margin: 0;
	color: var(--as-color-navy);
	text-align: center;
	font-family: var(--as-font-ja-serif);
	font-size: var(--as-font-size-7xl);
	font-style: normal;
	font-weight: var(--as-font-weight-regular);
	line-height: normal;
	letter-spacing: var(--as-letter-spacing-sm);
	text-transform: uppercase;
}

/* --------------------------------------------------
 * Feature block
 * -------------------------------------------------- */

.as-feature {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: calc(300 / 330 * 100vw);
	margin-right: auto;
	margin-left: 0;
	font-family: var(--as-font-ja-serif);
	color: var(--as-color-navy);
	padding-inline: var(--as-gutter);

	@media (min-width: 769px) {
		flex-direction: row;
		align-items: center;
		justify-content: start;
		gap: 30px;
		max-width: 100%;
		width: 100%;
		padding-inline: 0;
	}
}

.as-feature--right {
	margin-right: 0;
	margin-left: auto;

	@media (min-width: 769px) {
		flex-direction: row-reverse;
		justify-content: end;
	}
}

.as-feature__image {
	margin: 0;

	@media (min-width: 769px) {
		width: 750px;
		min-width: 0;
	}
}

.as-feature__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 300 / 399;
	object-fit: cover;

	@media (min-width: 769px) {
		aspect-ratio: 750 / 422;
	}
}

.as-feature__body {
	display: flex;
	flex-direction: column;
	gap: 28px;

	@media (min-width: 769px) {
		width: 380px;
		gap: 33px;
		padding-inline: var(--as-gutter);
	}
}

.as-feature__heading {
	margin: 0;
	font-family: var(--as-font-ja-serif);
	font-size: var(--as-font-size-5xl);
	font-weight: var(--as-font-weight-regular);
	line-height: normal;
	letter-spacing: var(--as-letter-spacing-lg);
	color: var(--as-color-navy);

	@media (min-width: 769px) {
		font-size: var(--as-font-size-7xl);
	}
}

.as-feature__text {
	margin: 0;
	font-size: var(--as-font-size-base);
	font-weight: var(--as-font-weight-regular);
	line-height: var(--as-line-height-double);
	letter-spacing: var(--as-letter-spacing-sm);
	text-align: justify;
	color: inherit;
}

.as-feature__link {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	color: inherit;
	font-size: var(--as-font-size-base);
	letter-spacing: var(--as-letter-spacing-sm);
	text-decoration: none;
	line-height: 16px;
}

.as-feature__link-arrow {
	display: inline-flex;
	align-items: center;
	width: 44.327px;
	height: 32px;
}

.as-feature__link-arrow svg {
	width: 100%;
	height: 100%;
}

@media (hover: hover) {
	.as-feature__link:hover {
		opacity: var(--as-hover-opacity);
		color: inherit;
	}
}

/* --------------------------------------------------
 * Feature block — card variant (accommodation facilities)
 *
 * Differences from default variant:
 *  - Mobile: heading appears above image (DOM order), image is landscape
 *  - Desktop: CSS grid places image on one side, heading+body on the other
 *  - Desktop column-gap 50px, row-gap (heading↔body) 19px (Figma spec)
 *  - No link element
 * -------------------------------------------------- */

.as-feature--card {
	width: auto;
	margin: 0;
	align-items: center;
	padding-inline: 0;

	@media (min-width: 769px) {
		display: grid;
		grid-template-columns: calc(750 / 1180 * 100%) calc(380 / 1180 * 100%);
		grid-template-areas:
			"image heading"
			"image body";
		column-gap: 50px;
		row-gap: 19px;
		justify-content: start;
		align-items: start;
		width: calc(1180 / 1280 * 100%);
	}

	.as-feature__heading {
		margin: 0;
		text-align: center;
		font-family: var(--as-font-ja-serif);
		font-size: var(--as-font-size-5xl);
		font-weight: var(--as-font-weight-regular);
		line-height: var(--as-line-height-normal);
		letter-spacing: var(--as-letter-spacing-lg);
		color: var(--as-color-navy);

		@media (min-width: 769px) {
			grid-area: heading;
			text-align: start;
			font-size: var(--as-font-size-7xl);

			height: -moz-available;
			height: stretch;
			display: flex;
			align-items: end;
			flex-wrap: wrap;
		}
	}

	.as-feature__image {
		margin: 0;

		@media (min-width: 769px) {
			grid-area: image;
			width: 100%;
		}
	}

	.as-feature__image img {
		aspect-ratio: 750 / 422;
	}

	.as-feature__body {
		padding-inline: var(--as-gutter);

		@media (min-width: 769px) {
			grid-area: body;
			width: auto;
			padding-inline: 0;
		}
	}

	/* Card variant CTA stack — Figma 982:3847 (dining dinner section).
	 * Stacks one or more .as-feature__link arrow-link items below the body
	 * text. The link visual style itself is inherited from the default
	 * variant rules above (gap 13px between label and arrow, hover opacity). */
	.as-feature__actions {
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin-top: 24px;
	}
}

.as-feature--card.as-feature--right {
	@media (min-width: 769px) {
		grid-template-columns: calc(380 / 1180 * 100%) calc(750 / 1180 * 100%);
		grid-template-areas:
			"heading image"
			"body image";
		justify-content: end;
		margin-left: auto;
	}
}

/* JA heading override: style.css has no html[lang="ja"] h3 rule today,
 * but restate the Figma size defensively so future style.css additions
 * cannot silently shrink our heading. See .claude/rules/ja-heading-css-overrides.md */

html[lang="ja"] .as-feature--card .as-feature__heading {
	font-size: var(--as-font-size-5xl) !important;
}

@media (min-width: 769px) {
	html[lang="ja"] .as-feature--card .as-feature__heading {
		font-size: var(--as-font-size-7xl) !important;
	}
}

/* --------------------------------------------------
 * Index (in-page navigation)
 * -------------------------------------------------- */

.as-index {
	background-color: var(--as-color-surface-blue-200);
	border-radius: 8px;
	padding: 30px;
	font-family: var(--as-font-ja-serif);
	font-size: var(--as-font-size-lg);
	font-weight: var(--as-font-weight-regular);
	line-height: var(--as-line-height-loose);
	letter-spacing: var(--as-letter-spacing-sm);
	color: var(--as-color-navy);

	.as-index__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 26px;
	}

	.as-index__item {
		margin: 0;
		padding-bottom: 6px;
		border-bottom: 1px solid var(--as-color-navy);
	}

	.as-index__link {
		display: flex;
		align-items: center;
		gap: 25px;
		padding: 0 14px;
		color: inherit;
		text-decoration: none;
	}

	.as-index__marker,
	.as-index__label {
		display: inline-block;
	}

	@media (min-width: 769px) {
		padding: 28px 20px 27px;

		.as-index__list {
			flex-direction: row;
			justify-content: center;
			gap: 30px;
		}

		.as-index__item {
			padding-bottom: 0;
			border-bottom: 0;
		}

		.as-index__link {
			gap: 0;
			padding: 0;
			white-space: nowrap;
		}
	}
}

@media (hover: hover) {
	.as-index__link:hover {
		opacity: var(--as-hover-opacity);
	}
}

/* --------------------------------------------------
 * Page Hero
 *
 * Full-bleed section rendered above the main content on every page
 * that is not excluded in theme/inc/page-hero-output.php. Replaces
 * the GeneratePress Premium Hero element — styles here are intentionally
 * scoped to the independent `.as-page-hero` class (not `.page-hero`) to
 * avoid cascade conflicts with GP Premium inline CSS.
 *
 * Variants:
 *   default — title over background image, no overlay
 *   video   — fullscreen background video (Setoda landing)
 *
 * The `--as-page-hero-bg` custom property is set inline from PHP per
 * request (WP featured image URL) so the stylesheet carries no theme
 * directory hardcoding.
 * -------------------------------------------------- */

.as-page-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	place-items: center;
	min-height: 692px;
	padding: 40px 20px;
	background-color: var(--as-color-navy);
	background-image: var(--as-page-hero-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	@media (min-width: 769px) {
		min-height: 719px;
		padding: 60px 40px;
	}

	.as-page-hero__inner {
		width: 100%;
		max-width: 571px;
		margin: 0 auto;
	}

	.as-page-hero__title {
		margin: 0 auto;
		max-width: 335px;
		width: calc(100% - 40px);
		font-family: var(--as-page-hero-heading-font);
		font-size: var(--as-font-size-9xl);
		font-weight: var(--as-font-weight-regular);
		letter-spacing: var(--as-letter-spacing-sm);
		line-height: var(--as-line-height-loose);
		color: var(--as-color-white);
		text-align: center;
		text-transform: uppercase;

		@media (min-width: 769px) {
			font-size: var(--as-font-size-10xl);
			max-width: 571px;
			width: 100%;
		}
	}

	.as-page-hero__title::after {
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-color: var(--as-color-white);
		margin-top: 4px;

		@media (min-width: 769px) {
			margin-top: 0;
		}
	}
}

.as-page-hero--video {
	padding: 0;
	min-height: 100vh;
	background-color: var(--as-color-black);
	background-image: none;

	@media (min-width: 769px) {
		min-height: 100vh;
		padding: 0;
	}
}

.as-page-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 0;
	object-fit: cover;
}

/* --------------------------------------------------
 * .as-page-hero--compact
 *
 * Smaller hero used on subordinate pages (FAQ, future contact / gallery).
 * DOM is identical to the default variant; only sizing changes.
 * -------------------------------------------------- */

.as-page-hero--compact {
	min-height: 187px;
	background-color: var(--as-color-navy);

	.as-page-hero__title {
		font-size: var(--as-font-size-9xl);
		letter-spacing: var(--as-letter-spacing-lg);
	}

	.as-page-hero__title::after {
		display: none;
	}

	@media (min-width: 769px) {
		min-height: 300px;

		.as-page-hero__title {
			font-size: var(--as-font-size-10xl);
		}
	}
}

/*
 * JA heading guard.
 *
 * style.css has `html[lang="ja"] h1 { font-family: "ten-mincho", ... }`
 * at specificity (0,0,1,2). Our `.as-page-hero .as-page-hero__title`
 * (0,0,2,0) wins so the page-hero keeps its intended font. No additional
 * override needed for font-size because style.css does not set a JA h1
 * size rule (the `!important` rule is on h2, not h1).
 */

/* --------------------------------------------------
 * Feature List
 *
 * `.as-feature--card` をリスト化するラッパ。accommodation
 * facilities / dining menus で共有。
 * -------------------------------------------------- */

.as-feature-list {
	padding-block: 60px;

	.as-feature-list__list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 80px;
		@media (min-width: 769px) {
			gap: 100px;
		}
	}

	.as-feature-list__item {
		margin: 0;
	}

	@media (min-width: 769px) {
		padding-block: 80px 160px;
	}
}

/* --------------------------------------------------
 * Feature card heading variants (subheading + note)
 *
 * card variant で subheading 引数を渡すと heading が main / time の
 * 2 span に分割される。note 引数は body 直後に小さい注釈として描画される。
 * dining の朝食 / 夕食セクションで使用。
 * -------------------------------------------------- */

.as-feature__heading-main {
	font-size: var(--as-font-size-7xl);
	letter-spacing: 0.2em;
}

.as-feature__heading-time {
	font-size: var(--as-font-size-lg);
	letter-spacing: 0.2em;
	margin-left: 0.25em;
}

.as-feature__note {
	font-size: var(--as-font-size-sm);
	color: var(--as-color-gray-800);
	letter-spacing: 0.1em;
	margin: 0;
}