/**
 * トップのセクション（sumida-cc/front-section）。
 *
 * Figma: events PC 847:22728 / SP 1357:50980、news PC 1351:47824 / SP 1357:50993
 * - 見出しの行（__head）：見出しと「一覧を見る」を下端そろえ。左右の余白は events molecule/rg、news organism/xs（PC）
 * - カードの並び（__body）：上に 1px の線。events は画面の全幅、news は PC だけ左右 organism/xs 内側
 * - セクションの下の余白は各セクションが持つ。最後のセクションは 0 で、CTA までの余白は main の下の余白（theme の content.css の .content--front）
 */

.front-section {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding-block-end: var(--wp--custom--molecule--rg);
}

.front-section:last-child {
	padding-block-end: 0;
}

.front-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--custom--atom--xxl);
	box-sizing: border-box;
	padding-block-start: var(--wp--custom--organism--sm);
	padding-inline: var(--wp--custom--molecule--rg);
}

.front-section--news .front-section__head {
	padding-inline: var(--wp--custom--organism--xs);
}

.front-section__title {
	min-width: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-xs);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--relax);
	letter-spacing: 0;
}

.front-section__action {
	flex-shrink: 0;
}

.front-section__action .wp-block-button {
	margin: 0;
}

.front-section__body {
	box-sizing: border-box;
	margin-block-start: var(--wp--custom--atom--xxl);
	border-block-start: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
}

.front-section--news .front-section__body {
	margin-inline: var(--wp--custom--organism--xs);
}

.front-section__empty {
	box-sizing: border-box;
	margin: 0;
	padding: var(--wp--custom--molecule--rg);
	font-size: var(--wp--preset--font-size--text-sm);
	line-height: var(--wp--custom--line-height--regular);
}

/* グループ展 large とそれ以外 medium を続けて1リストに見せる（/events/ と同じ） */
.front-section__body > .card-list + .card-list {
	margin-block-start: 0;
}

/*
 * portfolio（Figma PC 847:22707 / SP 1357:48300）。
 * __feature：1件目。見た目・ホバーはプロジェクト事例の archive / large（card.css は変えない）、中身は作品
 * __cards：2件目以降。/portfolio/ と同じ archive / small。列数・線は card.css のコンテナクエリを外してここで決める
 * PC：__body の列 = large 3列分 ＋ small の列（--front-portfolio-cols）。small は2段
 */
@media (min-width: 768px) {
	.front-section--portfolio {
		--front-portfolio-cols: 3;
		--front-portfolio-track: 6;
	}

	.front-section--portfolio .front-section__body {
		display: grid;
		grid-template-columns: repeat(var(--front-portfolio-track), minmax(0, 1fr));
		align-items: stretch;
	}

	.front-section--portfolio .front-section__feature {
		grid-column: 1 / span 3;
		box-sizing: border-box;
		border-right: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
		border-bottom: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
	}

	.front-section--portfolio .front-section__cards {
		grid-column: span var(--front-portfolio-cols);
	}

	/* card.css の card-grid-240（列数・千鳥・線のコンテナクエリ）を外す。詳細度を card.css の指定（0,4,0）にそろえる */
	.front-section--portfolio .card-list.front-section__cards[data-size] {
		container: none;
	}

	/* 件数が少なくても2段の高さを保つ（large が small 2段分の高さになる） */
	.front-section--portfolio .front-section__cards .card-list__items {
		display: grid;
		grid-template-columns: repeat(var(--front-portfolio-cols), minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		height: 100%;
	}

	.front-section--portfolio .front-section__cards .card-list__items > * {
		max-width: none;
	}

	/*
	 * large：プロジェクト事例の archive / large（card.css）のまま。画像の下に文字の帯が重なり、ホバーで帯が上がって概要・タグが出る。
	 * 違うのは画像の縦横比だけ（正方形ではなく、small 2段分の高さのセルいっぱい）
	 */
	.front-section--portfolio .front-section__feature .card-list__items,
	.front-section--portfolio .front-section__feature .card-list__item,
	.front-section--portfolio .front-section__feature .card__link {
		height: 100%;
	}

	.front-section--portfolio .front-section__feature .card-list__item {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.front-section--portfolio .front-section__feature .card__inner {
		height: calc(100% - (var(--wp--custom--molecule--xs) * 2));
		aspect-ratio: auto;
	}
}

/*
 * portfolio の small の件数と列数（画面の幅で決める。JS なし）。
 * small の列数 n は 1440px で 3、そこから 240px ごとに 1 列（2 件）増やし、2400px 以上は 7。表示は 2n 件（2 段）、残りの予備は display: none。
 * 列の幅は 画面の幅 ÷（3 + n）。1440・1680・1920・2160・2400px でちょうど 240px。SP は常に 6 件
 * 線：最後の列（:nth-child(n の倍数)）は右なし
 */
@media (width < 1680px) {
	.front-section--portfolio .front-section__cards .card-list__items > :nth-child(n + 7) {
		display: none;
	}
}

@media (768px <= width < 1680px) {
	.front-section--portfolio .front-section__cards .card-list__items > :nth-child(3n) {
		border-right: 0;
	}
}

@media (1680px <= width < 1920px) {
	.front-section--portfolio {
		--front-portfolio-cols: 4;
		--front-portfolio-track: 7;
	}

	.front-section--portfolio .front-section__cards .card-list__items > :nth-child(n + 9) {
		display: none;
	}

	.front-section--portfolio .front-section__cards .card-list__items > :nth-child(4n) {
		border-right: 0;
	}
}

@media (1920px <= width < 2160px) {
	.front-section--portfolio {
		--front-portfolio-cols: 5;
		--front-portfolio-track: 8;
	}

	.front-section--portfolio .front-section__cards .card-list__items > :nth-child(n + 11) {
		display: none;
	}

	.front-section--portfolio .front-section__cards .card-list__items > :nth-child(5n) {
		border-right: 0;
	}
}

@media (2160px <= width < 2400px) {
	.front-section--portfolio {
		--front-portfolio-cols: 6;
		--front-portfolio-track: 9;
	}

	.front-section--portfolio .front-section__cards .card-list__items > :nth-child(n + 13) {
		display: none;
	}

	.front-section--portfolio .front-section__cards .card-list__items > :nth-child(6n) {
		border-right: 0;
	}
}

@media (width >= 2400px) {
	.front-section--portfolio {
		--front-portfolio-cols: 7;
		--front-portfolio-track: 10;
	}

	.front-section--portfolio .front-section__cards .card-list__items > :nth-child(n + 15) {
		display: none;
	}

	.front-section--portfolio .front-section__cards .card-list__items > :nth-child(7n) {
		border-right: 0;
	}
}

/*
 * portfolio の SP。large は全幅の正方形（card.css の large の SP の下帯）に、余白 16px・文字 logo-blue を足す。
 * large の下の線は card.css の SP の区切り線（セルの下）だけ。__feature にも付けると small との間が 2px になる。
 * small は /portfolio/ の SP（1列・横長）のまま、Figma に合わせて帯タイトルを出さずタイトルを 12px にする。
 */
@media (max-width: 767px) {
	.front-section--portfolio .front-section__feature .card__link {
		box-sizing: border-box;
		padding: var(--wp--custom--atom--xxl);
	}

	.front-section--portfolio .front-section__feature .card__inner {
		margin: 0;
	}

	.front-section--portfolio .front-section__feature .card__detail,
	.front-section--portfolio .front-section__feature .card__detail.wp-block-group {
		justify-content: center;
		padding: var(--wp--custom--atom--lg) var(--wp--custom--atom--xxl);
		color: var(--wp--preset--color--logo-blue);
	}

	.front-section--portfolio .front-section__feature.card-list[data-size] .card h3.card__title {
		height: auto;
		max-height: calc(2em * var(--wp--custom--line-height--regular));
		font-size: var(--wp--preset--font-size--text-md);
		font-weight: var(--wp--custom--font-weight--medium);
	}

	.front-section--portfolio .front-section__feature .card .card__subtitle {
		margin-block-start: var(--wp--custom--atom--rg);
	}

	/* SP の帯は帯タイトル・タイトル・サブタイトルだけ（概要・タグは PC のホバーで出す） */
	.front-section--portfolio .front-section__feature .card__body,
	.front-section--portfolio .front-section__feature .card__foot {
		display: none;
	}

	/* card.css の creatives の small の SP（0,5,0）より強く */
	.front-section--portfolio .front-section__cards.card-list[data-size] .card .card__eyebrow {
		display: none;
	}

	.front-section--portfolio .front-section__cards.card-list[data-size] .card h3.card__title {
		font-size: var(--wp--preset--font-size--text-sm);
	}
}

/*
 * creator（Figma PC 847:22714 / SP 1357:49707）。4段（カード・タグ・タグ・カード）を画面の全幅に、段の間の余白なしで並べる。
 * 一番上の線は __body の上の線。カードはセルの右・下、タグの段は下に線。
 * カードは /creator/ の archive / small のまま、幅だけ固定（PC 240px・SP 131px）。card.css の card-grid-240（列数・千鳥・線のコンテナクエリ）は外す
 */
.front-section--creator .card-list.front-section__creators[data-size] {
	container: none;
}

.front-section--creator .card-list__items.marquee__track {
	flex-wrap: nowrap;
	width: max-content;
}

/* card.css の SP の格子（2列。1行目の上・偶数の右を消す、0,4,0）より強く */
.front-section--creator .card-list.front-section__creators[data-size] .card-list__items > * {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 15rem;
	width: 15rem;
	max-width: none;
	border-top: 0;
	border-right: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
	border-bottom: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
	border-left: 0;
}

.front-section--creator .front-section__row--tags {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-block-size: 3.5625rem;
	border-bottom: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line-grey);
}

.front-section--creator .front-section__tags {
	gap: var(--wp--custom--atom--xxl);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 動かないとき（横スクロール）は両端に余白。ループでは複製との間も gap になるので余白なし */
.front-section--creator .front-section__row--tags:not([data-state="loop"]) .front-section__tags {
	padding-inline: var(--wp--custom--atom--xxl);
}

/* 本文の行の高さ・ベースラインで文字の下に余白が出ないように、li とラベルを flex にして上下中央にそろえる */
.front-section--creator .front-section__tag {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	margin: 0;
	padding: 0;
}

.front-section--creator .front-section__tag .marker-text__label {
	display: flex;
	align-items: center;
}

@media (max-width: 767px) {
	.front-section--creator .card-list.front-section__creators[data-size] .card-list__items > * {
		flex-basis: 8.1875rem;
		width: 8.1875rem;
	}

	.front-section--creator .front-section__row--tags {
		min-block-size: 2.4375rem;
	}
}

/*
 * フェードイン（reveal.js）。隠すのは JS が data-reveal="pending" を付けたときだけ（JS が無ければ最初から見える）。
 * 時間・間隔・移動の距離・イージングは reveal.js の定数が CSS 変数で渡す。
 */
[data-reveal="pending"] [data-reveal-item] {
	transition:
		opacity var(--reveal-duration, 600ms) var(--reveal-easing, ease) var(--reveal-delay, 0ms),
		transform var(--reveal-duration, 600ms) var(--reveal-easing, ease) var(--reveal-delay, 0ms);
}

[data-reveal="pending"] [data-reveal-item][data-state="hidden"] {
	opacity: 0;
	transform: translateY(var(--reveal-offset, 0px));
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal="pending"] [data-reveal-item] {
		transition: none;
	}

	[data-reveal="pending"] [data-reveal-item][data-state="hidden"] {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 767px) {
	.front-section {
		padding-block-end: var(--wp--custom--atom--xxl);
	}

	.front-section__head,
	.front-section--news .front-section__head {
		padding-block-start: var(--wp--custom--molecule--xxl);
		padding-inline: var(--wp--custom--atom--xxl);
	}

	/* Figma SP は 16px。text-lg は fluid の最小が 1rem（393px で約 16.1px） */
	.front-section__title {
		font-size: var(--wp--preset--font-size--text-lg);
	}

	.front-section__body {
		margin-block-start: var(--wp--custom--atom--rg);
	}

	.front-section--news .front-section__body {
		margin-inline: 0;
	}

	.front-section__empty {
		padding-inline: var(--wp--custom--atom--xxl);
	}
}