/* Experiences page — Figma 459:5339 (Desktop) / 459:6676 (Mobile)
 * Spec: docs/superpowers/specs/2026-04-24-experiences-page-design.md
 *
 * モバイルファースト + Nesting (.claude/rules/css-mobile-first-nesting.md)
 * BEM 命名 (.claude/rules/css-coding-standards.md)
 */

/* --------------------------------------------------
 * Page wrapper
 * -------------------------------------------------- */

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

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

.as-experiences-intro {
	padding-block: 60px 40px;
	margin-bottom: 0 !important;

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

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

	.as-experiences-intro__body {
		font-family: var(--as-font-ja-serif);
		font-size: var(--as-font-size-base);
		line-height: 1.85;
		letter-spacing: var(--as-letter-spacing-xs);
		color: var(--as-color-black);
		text-align: justify;
		margin: 0 0 1.4em;

		@media (min-width: 769px) {
			margin: 0 0 60px;
			font-size: var(--as-font-size-md);
		}
	}

	.as-experiences-intro__accordion {
		border-bottom: 1px solid var(--as-color-navy);
		margin-block-start: 1.6em;
	}

	.as-experiences-intro__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding-right: 14px;
		cursor: pointer;
		list-style: none;

		@media (min-width: 769px) {
			padding-right: 19px;
		}
	}

	.as-experiences-intro__summary::-webkit-details-marker {
		display: none;
	}

	.as-experiences-intro__summary-text {
		font-family: var(--as-font-ja-serif);
		font-size: var(--as-font-size-2xl);
		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-experiences-intro__summary-icon {
		width: 20px;
		height: 10px;
		flex: 0 0 auto;
		transition: transform 0.2s ease;

		@media (min-width: 769px) {
			width: 22px;
			height: 11px;
		}
	}

	.as-experiences-intro__accordion[open] .as-experiences-intro__summary-icon {
		transform: rotate(180deg);
	}

	.as-experiences-intro__accordion-body {
		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-900);
		text-align: justify;
		margin-block: 24px;

		p {
			margin: 0 0 1em;
		}
	}
}

/* --------------------------------------------------
 * Journal section ("Letters from the Island")
 * -------------------------------------------------- */

.as-experiences-journal {
	background-color: var(--as-color-surface-blue-200);
	padding-block: 60px;
	overflow: hidden;
	margin-bottom: 0 !important;

	.as-experiences-journal__inner {
		padding-inline: var(--as-gutter);
	}

	.as-experiences-journal__heading {
		margin-block: 0 32px;
	}

	.as-experiences-journal__swiper {
		--swiper-theme-color: var(--as-color-navy-deep);
		--swiper-pagination-progressbar-bg-color: var(--as-color-surface-blue-100);
		overflow: visible;
		padding-bottom: 44px;

		@media (min-width: 1025px) {
			/* Clip slides beyond the 750px viewport so off-screen cards
			 * don't bleed into the section's right padding. Mobile keeps
			 * `overflow: visible` for the 1.2-slide peek effect. */
			overflow: hidden;
			padding-bottom: 64px;
			max-width: 750px;
		}
	}

	.as-experiences-journal__card {
		width: 300px;
		display: flex;
		flex-direction: column;
		gap: 22px;
		margin: 0;

		@media (min-width: 1025px) {
			width: 360px;
		}
	}

	.as-experiences-journal__link {
		display: flex;
		flex-direction: column;
		gap: 22px;
		color: inherit;
		text-decoration: none;

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

	.as-experiences-journal__image {
		aspect-ratio: 340 / 425;
		overflow: hidden;
		margin: 0;

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

	.as-experiences-journal__excerpt {
		font-family: var(--as-font-ja-serif);
		font-size: var(--as-font-size-base);
		line-height: var(--as-line-height-loose);
		letter-spacing: var(--as-letter-spacing-xs);
		color: var(--as-color-black);
		text-align: justify;
		margin: 0;
	}

	.as-experiences-journal__pagination {
		/* When highlights count <= slidesPerView, Swiper adds
		 * `.swiper-pagination-lock` and its bundled CSS hides this
		 * element with `display: none !important`. We intentionally
		 * leave that default in place so the progressbar acts like a
		 * scrollbar — visible only when there is something to scroll.
		 * Sibling `.as-journal__pagination` overrides it because the
		 * Setoda Figma keeps the bar visible at 3/3. */
		top: auto !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 4px !important;
	}
}

/* --------------------------------------------------
 * Activities section ("体験の一覧")
 * -------------------------------------------------- */

.as-activities {
	padding-block: 60px;

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

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

	.as-activities__heading {
		margin-block: 0 32px;
		text-align: center;
	}

	.as-activities__filters {
		margin-block: 0 40px;
		@media (min-width: 769px) {
			margin-block: 0 80px;
		}
	}

	.as-activities__filter-list {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 0;
		margin: 0;
		justify-content: center;
	}

	.as-activities__filter-item {
		margin: 0;
	}

	.as-activities__filter-link {
		display: inline-block;
		padding: 7px 12px;
		font-size: var(--as-font-size-base);
		line-height: var(--as-line-height-none);
		letter-spacing: var(--as-letter-spacing-xs);
		color: var(--as-color-navy-deep);
		background-color: transparent;
		border: 1px solid var(--as-color-navy-deep);
		border-radius: 999px;
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease;

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

	.as-activities__filter-link.is-active {
		background-color: var(--as-color-navy-deep);
		color: var(--as-color-white);
	}

	.as-activities__grid {
		list-style: none;
		display: grid;
		grid-template-columns: 1fr;
		gap: 32px 24px;
		padding: 0;
		margin: 0;

		@media (min-width: 769px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (min-width: 1025px) {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.as-activities__empty {
		padding-block: 60px;
		text-align: center;
	}

	.as-activities__empty-message {
		font-size: var(--as-font-size-base);
		color: var(--as-color-navy-deep);
		margin: 0 0 16px;
	}

	.as-activities__empty-clear {
		display: inline-block;
		padding: 8px 20px;
		font-size: var(--as-font-size-xs);
		color: var(--as-color-navy-deep);
		border: 1px solid var(--as-color-navy-deep);
		text-decoration: none;

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