/* Journal section - Figma 準拠 (2026-04-22 リワーク)
 * spec: docs/superpowers/specs/2026-04-22-journal-cpt-design.md §5.4
 *
 * プロジェクト規約 (.claude/rules/css-mobile-first-nesting.md) に従い、
 * &__ によるセレクタ結合は禁止。フルクラス名 .as-journal__xxx で記述する。
 */

.as-journal {
	background-color: var(--as-color-surface-blue-200);
	padding-block: 60px;
	margin-bottom: 0 !important;
	/* Clip peeking slides at the viewport edge without causing page-level
	 * horizontal scroll. The swiper itself needs overflow: visible so that
	 * slidesPerView: 1.2 can show the next card peeking in from the right.
	 * Setting overflow: hidden here (on the full-width section) provides the
	 * clip boundary while leaving the gutter gap visible as the peek area. */
	overflow: hidden;

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

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

	.as-journal__swiper {
		--swiper-theme-color: var(--as-color-navy-deep);
		--swiper-pagination-progressbar-bg-color: var(--as-color-surface-blue-100);
		/* Required for slidesPerView: 1.2 — allows the next card to peek
		 * in from the right. Page-level scroll is prevented by
		 * overflow: hidden on the parent .as-journal section. */
		overflow: visible;
	}

	/* Reserve space for the pagination only when Swiper actually shows it.
	 * Swiper toggles `.swiper-pagination-lock` on the pagination element
	 * when slides count <= slidesPerView (no scroll needed), so we key the
	 * padding off its absence via :has(). */
	.as-journal__swiper:has(.as-journal__pagination:not(.swiper-pagination-lock)) {
		padding-bottom: 44px;
	}

	.as-journal__card {
		width: 300px;
		margin: 0;
	}

	.as-journal__link {
		display: flex;
		flex-direction: column;
		gap: 24px;
		color: inherit;
		text-decoration: none;
		@media (min-width: 769px) {
			gap: 17px;
		}

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

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

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

	.as-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;
		/* Clamp to 2 lines visually; PHP passes the full excerpt without
		 * truncating by word count, so the cutoff is purely presentational. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.as-journal__pagination {
		/* Position the progressbar at the bottom of the swiper. Swiper's
		 * default is position: absolute; top: 0, and its bundled CSS uses
		 * `!important` on those rules, so we override with !important too.
		 *
		 * Visibility: the progressbar doubles as a scrollbar, so it should
		 * appear only when there is something to scroll. Swiper handles
		 * this via `.swiper-pagination-lock { display: none !important }`
		 * applied when slides count <= slidesPerView (e.g. 3 highlights at
		 * desktop slidesPerView: 3). We intentionally leave that default
		 * in place — `display: block !important` is NOT set here.
		 * See .claude/rules/swiper-patterns.md "Progressbar visibility". */
		top: auto !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 4px !important;
	}

	@media (min-width: 1025px) {
		padding-block: 60px 70px;

		.as-journal__inner {
			max-width: 1280px;
			margin-inline: auto;
			padding-inline: 100px;
		}

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

		.as-journal__card {
			width: 340px;
		}

		.as-journal__swiper:has(.as-journal__pagination:not(.swiper-pagination-lock)) {
			padding-bottom: 64px;
		}
	}
}

/* 見出しの global override。font-family / color / text-align / text-transform は
 * 共通コンポーネント .as-section-heading が担う。ここでは
 * - main.min.css: h2 { font-size: 35px; margin-bottom: 20px }
 * - style.css:   h2 { font-size: 20px }
 * を確実に打ち消すため、margin のみ !important 上書き。
 * .claude/rules/ja-heading-css-overrides.md 準拠。
 */
html[lang="ja"] .as-journal__heading,
.as-journal .as-journal__heading {
	margin: 0 auto 32px !important;
}

@media (min-width: 1025px) {
	html[lang="ja"] .as-journal__heading,
	.as-journal .as-journal__heading {
		margin: 0 auto 71px !important;
	}
}