/*
 * layout.css — ページ全体の骨組み。
 * mobile first。まず1カラム、幅が足りたら本文＋サイドバーの2カラムにする。
 */

.pc-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.pc-main {
	flex: 1 0 auto;
}

.pc-container {
	width: 100%;
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding-inline: var(--picico-gutter);
	padding-block: var(--picico-space-lg);
}

.pc-content {
	min-width: 0;
	max-width: var(--picico-content-width);
	margin-inline: auto;
}

/*
 * 幅を広げる固定ページ（page-wide / page-full / page-lp）の指定は
 * Worker B の article.css に .pc-page--wide / --full / --lp として入っている。
 * ここには置かない。
 */

/*
 * 帯（full-bleed のセクション）。pc-container の外側に置き、
 * 背景色を画面幅いっぱいに敷いたうえで中身だけを幅で揃える。
 * TOP のヒーロー・サービス導線・404 の導線で使う。
 */
.pc-band {
	padding-block: var(--picico-space-xl);
}

.pc-band--alt {
	background-color: var(--picico-color-surface-alt);
}

.pc-band--warm {
	background-color: var(--picico-color-surface-warm);
}

.pc-band--pale {
	background-color: var(--picico-color-primary-pale);
}

.pc-band__inner {
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding-inline: var(--picico-gutter);
}

/* 2カラムは PC 幅（1024px）から。それまではサイドバーを本文の下に積む。 */
@media (min-width: 64rem) {
	.pc-layout--with-sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--picico-sidebar-width);
		gap: var(--picico-space-xl);
		align-items: start;
	}

	.pc-layout--with-sidebar .pc-content {
		margin-inline: 0;
	}
}