/* theme/assets/css/accommodation.css
 *
 * Figma-compliant styles for /accommodation/ — intro, rooms section, and
 * per-card Swiper gallery. The hero at the top of the page is rendered
 * by the theme's `.as-page-hero` component (styled in
 * theme/assets/css/common.css, output via theme/inc/page-hero-output.php).
 * Mobile-first with @media (min-width: 769px) desktop breakpoint.
 * See .claude/rules/css-mobile-first-nesting.md and
 * .claude/rules/swiper-patterns.md.
 *
 * Figma references:
 *   - Desktop 459:4922 (rooms list 531:2812)
 *   - Mobile  459:6398 (rooms list 531:2815)
 */

/* --------------------------------------------------
 * Page shell
 *
 * The page template uses <main id="primary" class="site-main as-accommodation">
 * directly (no .content-area wrapper). GeneratePress' flex layout leaves
 * flex-basis:auto on the primary element, which would let it shrink to
 * intrinsic content width on desktop. Force full width so intro + rooms
 * can span the viewport.
 * -------------------------------------------------- */

.as-accommodation {
	width: 100%;
	background: var(--as-color-surface-blue-100);
}

/* --------------------------------------------------
 * Intro
 * -------------------------------------------------- */

.as-accommodation-intro {
	padding-block: 60px 50px;

	.as-accommodation-intro__inner {
		padding-inline: var(--as-gutter);
		max-width: 840px;
		margin-inline: auto;
	}

	.as-accommodation-intro__body {
		margin: 0;
		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-double);
		letter-spacing: var(--as-letter-spacing-sm);
		color: var(--as-color-navy);
		text-align: justify;
	}

	.as-accommodation-intro__body + .as-accommodation-intro__body {
		margin-top: 2em;
	}

	@media (min-width: 769px) {
		padding-block: 86px 60px;

		.as-accommodation-intro__inner {
			padding-inline: 0;
			max-width: 800px;
		}
	}
}

/* --------------------------------------------------
 * Rooms
 * -------------------------------------------------- */

.as-rooms {
	padding-block: 40px 60px;

	.as-rooms__inner {
		padding-inline: var(--as-gutter);
		max-width: 1280px;
		margin-inline: auto;
	}

	.as-rooms__heading {
		margin: 0 auto 60px;
		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-navy);
		text-align: center;
	}

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

	.as-rooms__item {
		margin: 0;
	}

	.as-rooms__card {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.as-rooms__swiper {
		overflow: hidden;
		position: relative;
		margin: 0;
		order: 1;
	}

	.as-rooms__slide {
		aspect-ratio: 335 / 251;
		overflow: hidden;
	}

	.as-rooms__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Title + rule block — visually a heading with a horizontal line under it.
	 * The rule is rendered via ::after so there is no extra DOM. */
	.as-rooms__title {
		order: 0;
		margin: 0;
		padding-bottom: 13px;
		border-bottom: 1px solid var(--as-color-navy);
		font-family: var(--as-font-ja-old-mincho);
		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-navy);
	}

	.as-rooms__body {
		order: 2;
		& > * + * {
			margin: 15px 0 0;
		}
	}

	.as-rooms__description {
		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-rooms__description p {
		margin: 0;
	}

	.as-rooms__description p + p {
		margin-top: 15px;
	}

	.as-rooms__tags {
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0 8px;
		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-rooms__tag {
		margin: 0;
	}

	.as-rooms__capacity {
		font-family: var(--as-font-ja-serif);
		font-size: var(--as-font-size-sm);
		font-weight: var(--as-font-weight-regular);
		line-height: var(--as-line-height-dense);
		letter-spacing: var(--as-letter-spacing-sm);
		color: var(--as-color-navy);
		position: relative;
	}

	.as-rooms__cta {
		order: 3;
		width: 100%;
		max-width: none;
		margin-top: 13px;
		align-self: stretch;
		/* Override common.css .as-button 15px/17px vertical padding to match
		 * Figma spec of 44px total CTA height (15px top + 16px line-height
		 * + 13px bottom = 44px). */
		padding: 15px 15px 13px;
	}

	/* Swiper bullets pulled to the bottom-center of the gallery image, 26px
	 * from the image bottom per Figma node 459:4978. active = solid white,
	 * inactive = transparent fill + 1px white border.
	 * See .claude/rules/swiper-patterns.md for the !important rationale. */
	.as-rooms__pagination {
		position: absolute;
		top: auto !important;
		bottom: 26px !important;
		left: 50% !important;
		transform: translateX(-50%);
		display: block !important;
		width: auto !important;
		height: auto !important;
		line-height: var(--as-line-height-none);
		text-align: center;
		z-index: 2;
	}

	.as-rooms__pagination .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		margin: 0 4px;
		border-radius: 50%;
		background: transparent;
		border: 1px solid var(--as-color-white);
		box-sizing: border-box;
		opacity: 1;
		transition: background-color 200ms ease;
	}

	.as-rooms__pagination .swiper-pagination-bullet-active {
		background: var(--as-color-white);
	}

	.as-rooms__pagination.swiper-pagination-lock {
		display: none !important;
	}

	@media (min-width: 769px) {
		padding-block: 82px 100px;

		.as-rooms__inner {
			padding-inline: 99px;
		}

		.as-rooms__heading {
			margin: 0 auto 78px;
			font-size: var(--as-font-size-7xl);
		}

		.as-rooms__list {
			gap: 80px;
		}

		.as-rooms__card {
			display: grid;
			grid-template-columns: 491fr 540fr;
			grid-template-rows: auto auto 1fr;
			column-gap: 50px;
			row-gap: 20px;
			align-items: start;
		}

		.as-rooms__title {
			grid-column: 1;
			grid-row: 1;
		}

		.as-rooms__swiper {
			grid-column: 2;
			grid-row: 1 / span 3;
			aspect-ratio: 540 / 405;
			order: initial;
		}

		.as-rooms__slide {
			aspect-ratio: 540 / 405;
		}

		.as-rooms__body {
			grid-column: 1;
			grid-row: 2;
			order: initial;
		}

		.as-rooms__cta {
			grid-column: 1;
			grid-row: 3;
			order: initial;
			max-width: 285px;
			margin: 7px auto 0 0;
			align-self: start;
		}
	}
}

/* --------------------------------------------------
 * JA h2 global override
 * style.css: `html[lang="ja"] h2 { font-size: 20px !important }` (0,0,1,2)
 * Override with specificity 0,0,2,1 on `.as-rooms__heading`, and keep the
 * value in sync with the rule above. Hero h1 does not have a matching
 * global JA rule at this size, but we explicitly restate the Figma value
 * so future additions to style.css cannot silently break it.
 * See .claude/rules/ja-heading-css-overrides.md.
 * -------------------------------------------------- */

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

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

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

/* --------------------------------------------------
 * Amenities
 *
 * Figma references:
 *   - Mobile  459:6498 (3×4 grid)
 *   - Desktop 459:5023 (4 flex rows with horizontal rules)
 *
 * Mobile-first: `.as-amenities__row` uses `display: contents` so that
 * `.as-amenities__item` becomes a direct grid child of `.as-amenities__list`
 * (3×4 layout). On desktop (>= 769px), `.as-amenities__list` switches to
 * vertical flex and each `__row` becomes a horizontal flex row with
 * border-top/bottom dividers.
 * -------------------------------------------------- */

.as-amenities {
	background: var(--as-color-surface-blue-50);
	padding: 40px var(--as-gutter);

	.as-amenities__inner {
		margin-inline: auto;
		max-width: 840px;
	}

	.as-amenities__heading {
		margin: 0 0 32px;
		font-family: var(--as-font-ja-serif);
		font-size: var(--as-font-size-3xl);
		font-weight: var(--as-font-weight-regular);
		letter-spacing: var(--as-letter-spacing-lg);
		line-height: var(--as-line-height-tight-plus);
		color: var(--as-color-navy);
		text-align: center;
	}

	.as-amenities__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 12px;
		row-gap: 12px;
	}

	.as-amenities__row {
		display: contents;
	}

	.as-amenities__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 7px;
		margin: 0;
	}

	.as-amenities__icon {
		display: block;
		width: auto;
		height: 25px;
		flex-shrink: 0;
	}

	.as-amenities__label {
		font-family: var(--as-font-ja-serif);
		font-size: var(--as-font-size-xs);
		font-weight: var(--as-font-weight-regular);
		letter-spacing: var(--as-letter-spacing-sm);
		line-height: var(--as-line-height-snug);
		color: var(--as-color-navy);
		text-align: center;
	}

	@media (min-width: 769px) {
		padding: 55px var(--as-gutter);

		.as-amenities__inner {
			max-width: 800px;
		}

		.as-amenities__heading {
			margin: 0 0 40px;
		}

		.as-amenities__list {
			display: flex;
			flex-direction: column;
			border-top: 1px solid var(--as-color-navy);
			column-gap: 0;
			row-gap: 0;
		}

		.as-amenities__row {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 30px;
			align-items: center;
			padding: 30px 50px;
			border-bottom: 1px solid var(--as-color-navy);
		}

		.as-amenities__item {
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			gap: 22px;
		}

		.as-amenities__label {
			font-size: var(--as-font-size-base);
			letter-spacing: var(--as-letter-spacing-sm);
			line-height: var(--as-line-height-dense);
			text-align: left;
		}

		.as-amenities__label br {
			display: none;
		}
	}
}

/* --------------------------------------------------
 * JA h2 global override for .as-amenities__heading
 * style.css `html[lang="ja"] h2 { font-size: 20px !important }` (0,0,1,2)
 * を specificity 0,0,2,1 で上書きし、Figma 値 22px を維持する。
 * See .claude/rules/ja-heading-css-overrides.md.
 * -------------------------------------------------- */

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

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