/* theme/assets/css/overview.css
 *
 * Hardcoded layout for /overview/ (EN page-id 1565) and /ja/overview/
 * (JA page-id 2002). DOM is rendered by:
 *   - theme/page-overview.php
 *   - theme/template-parts/overview/intro.php
 *   - theme/template-parts/overview/video.php
 *   - theme/template-parts/overview/story-index.php
 *   - theme/template-parts/overview/sections.php
 *
 * The hero at the top of the page is rendered separately by the
 * `.as-page-hero` component via theme/inc/page-hero-output.php and is
 * NOT styled here.
 *
 * Mobile-first with @media (min-width: 769px) desktop breakpoint.
 * See .claude/rules/css-mobile-first-nesting.md and
 * .claude/rules/css-design-tokens.md.
 *
 * Figma references:
 *   - Mobile           459:6345
 *   - Desktop          459:4878
 *   - Story sub-heading 459:7157
 */

/* --------------------------------------------------
 * Page shell
 *
 * Page background mirrors accommodation: surface-blue-100 across the
 * whole `<main>`. The page template uses
 * `<main id="primary" class="site-main as-overview">` directly (no
 * `.content-area` wrapper) so we have to take responsibility for the
 * full-bleed background here.
 * -------------------------------------------------- */

.as-overview {
	width: 100%;
	background: var(--as-color-surface-blue-100);
	color: var(--as-color-navy);
	font-family: var(--as-font-ja-serif);
}

/* --------------------------------------------------
 * Intro section (philosophy heading + 3 paragraphs + ocean image)
 *
 * Mobile: heading → body → image stacked vertically, full-bleed image.
 * Desktop: 2-column grid — heading + body on the left, image on the
 * right (530×674 native, scaled with proportional widths so we do not
 * overflow narrow desktop viewports).
 * -------------------------------------------------- */

.as-overview-intro {
	padding-block: 60px;

	.as-overview-intro__inner {
		display: flex;
		flex-direction: column;
		gap: 48px;
		align-items: center;
		padding-inline: var(--as-gutter);
	}

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

	.as-overview-intro__break {
		display: inline;
	}

	.as-overview-intro__body {
		display: flex;
		flex-direction: column;
		gap: 16px;
		max-width: 335px;
		margin-top: 32px;
	}

	.as-overview-intro__paragraph {
		margin: 0;
		font-family: var(--as-font-ja-serif);
		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);
		color: var(--as-color-navy);
		text-align: justify;
	}

	.as-overview-intro__image {
		margin: 0;
		width: 100%;
	}

	.as-overview-intro__image img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 530 / 674;
		object-fit: cover;
	}

	@media (min-width: 769px) {
		padding: 100px 0 0;
		margin-bottom: 420px !important;

		.as-overview-intro__inner {
			display: flex;
			flex-direction: row;
			align-items: start;
			max-width: 1180px;
			margin-inline: auto;
			padding-inline: var(--as-gutter);
			position: relative;
		}
		.as-overview-intro__text {
			width: calc(645 / 1080 * 100%);
		}

		.as-overview-intro__heading {
			grid-area: heading;
			font-size: var(--as-font-size-7xl);
			line-height: var(--as-line-height-double);
			text-align: left;
			max-width: none;
		}

		.as-overview-intro__break {
			display: none;
		}

		.as-overview-intro__body {
			grid-area: body;
			max-width: 480px;
			width: calc(480 / 645 * 100%);
			gap: 24px;
		}

		.as-overview-intro__paragraph {
			font-size: var(--as-font-size-lg);
			letter-spacing: var(--as-letter-spacing-xs);
		}

		.as-overview-intro__image {
			width: calc(530 / 1080 * 100%);
			position: absolute;
			right: var(--as-gutter);
			top: 88px;
		}
	}
}

/* --------------------------------------------------
 * Video section (Vimeo iframe — brand story, ID 1001007645)
 *
 * The iframe is rendered in template-parts/overview/video.php with
 * `loading="lazy"` so the Vimeo player.js bundle is only fetched when
 * the section enters the viewport.
 *
 * Aspect ratios from Figma:
 *   - Mobile  335 × 188
 *   - Desktop 800 × 449
 * -------------------------------------------------- */

.as-overview-video {
	margin-block: 32px !important;
	padding-inline: var(--as-gutter);

	.as-overview-video__frame {
		position: relative;
		aspect-ratio: 335 / 188;
		overflow: hidden;
	}

	.as-overview-video__frame iframe {
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
	}

	@media (min-width: 769px) {
		margin-block: 80px 120px !important;


		.as-overview-video__frame {
			aspect-ratio: 800 / 449;
			max-width: 800px;
			margin-inline: auto;
		}
	}
}

/* --------------------------------------------------
 * Story section (sub-heading + in-page index)
 *
 * The sub-heading uses a `<br class="as-overview-story__break">` for
 * forced 2-line wrapping on mobile. Desktop hides the break so the
 * heading sits on a single line.
 *
 * The `.as-index` styling lives in common.css; we only override the
 * surrounding margins and width here via the `.as-overview__index`
 * helper.
 * -------------------------------------------------- */

.as-overview-story {
	margin-block: 60px;
	padding-inline: var(--as-gutter);

	.as-overview-story__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
		max-width: 800px;
		margin-inline: auto;
	}

	.as-overview-story__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: var(--as-line-height-loose);
		letter-spacing: var(--as-letter-spacing-lg);
		color: var(--as-color-black);
		text-align: center;
	}

	.as-overview-story__break {
		display: inline;
	}

	@media (min-width: 769px) {
		margin-block: 120px 77px !important;

		.as-overview-story__inner {
			gap: 40px;
		}

		.as-overview-story__heading {
			font-size: var(--as-font-size-7xl);
		}

		.as-overview-story__break {
			display: none;
		}
	}
}

/* --------------------------------------------------
 * Story sections (origin / architecture / space / future)
 *
 * Mobile: stacked single column with marker → heading → body → image.
 * Image is sized intrinsically (aspect-ratio comes from the asset).
 * Sections are spaced via `gap` on the wrapper.
 *
 * Desktop: same column layout but constrained to 800px content width
 * with larger inter-section gap.
 * -------------------------------------------------- */

.as-overview-sections {
	margin-block: 40px 100px !important;
	padding-inline: var(--as-gutter);
	display: flex;
	flex-direction: column;
	gap: 100px;

	@media (min-width: 769px) {
		margin-block: 60px 160px !important;
		max-width: 800px;
		margin-inline: auto;
		gap: 90px;
	}
}

.as-overview-section {
	display: flex;
	flex-direction: column;
	margin: 0;

	.as-overview-section__marker {
		margin: 0 0 12px;
		font-family: var(--as-font-ja-serif);
		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);
		color: var(--as-color-gray-500);
	}

	.as-overview-section__heading {
		margin: 0 0 32px;
		font-family: var(--as-font-ja-serif);
		font-size: var(--as-font-size-xl);
		font-weight: var(--as-font-weight-regular);
		line-height: normal;
		letter-spacing: var(--as-letter-spacing-lg);
		color: var(--as-color-black);
	}

	.as-overview-section__body {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.as-overview-section__paragraph {
		margin: 0;
		font-family: var(--as-font-ja-serif);
		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);
		color: var(--as-color-black);
		text-align: justify;
	}

	.as-overview-section__image {
		margin: 32px 0 0;
		width: 100%;
	}

	.as-overview-section__image img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}

	@media (min-width: 769px) {
		.as-overview-section__heading {
			font-size: var(--as-font-size-3xl);
		}
	}
}

/* --------------------------------------------------
 * Index helper (overview-specific spacing on `.as-index`)
 *
 * `.as-index` base styles live in common.css. We only override the
 * outer width/margin so the index slots cleanly underneath the story
 * sub-heading.
 *
 * Specificity bump: `.as-index.as-overview__index` is (0,2,0) which
 * beats GeneratePress' `main.min.css .site-main > *` (0,1,0) when this
 * `<nav>` happens to be a direct child of `.site-main`. See
 * .claude/rules/gp-main-css-overrides.md.
 *
 * In the current overview DOM the nav lives inside
 * `.as-overview-story__inner`, not directly under `.site-main`, but we
 * keep the connected selector so the helper continues to work if the
 * nav is later promoted to a top-level child.
 * -------------------------------------------------- */

.as-index.as-overview__index {
	width: 100%;
	margin: 0;
}

/* --------------------------------------------------
 * JA heading global overrides
 *
 * style.css has these globals that can hijack our headings:
 *   - line 91: html[lang="ja"] h2 { font-family: ... }    (font-family only)
 *   - line 102: h2 { font-size: var(--as-font-size-2xl) } (20px, all langs)
 *
 * The plain `h2` rule (specificity 0,0,0,1) is beaten by our
 * `.as-overview-*-heading` classes (0,0,1,0) without any work, but the
 * project convention (see .claude/rules/ja-heading-css-overrides.md
 * and the parallel rules in accommodation.css) is to defensively
 * restate the Figma size with `html[lang="ja"] .class` (0,0,2,1) +
 * !important so future additions to style.css cannot silently break
 * the page in JA.
 * -------------------------------------------------- */

html[lang="ja"] .as-overview-intro__heading {
	font-size: var(--as-font-size-xl) !important;
}

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

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

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

html[lang="ja"] .as-overview-section__heading {
	font-size: var(--as-font-size-xl) !important;
}

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