/*
 * responsive.css — 幅による横断的な微調整だけを置く。
 *
 * 各コンポーネントのメディアクエリは、それぞれのファイル
 * （layout.css / header.css / navigation.css / archive.css / sidebar.css）側に書く。
 * ここに集めると、あとから読む人がコンポーネントの全体像を1ファイルで追えなくなるため。
 *
 * 確認対象幅（指示書 §19）: 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920px
 * どの幅でも横スクロールを出さないこと。
 */

/* 極小幅（320px 前後）でも余白が潰れないようにする。 */
@media (max-width: 22.5rem) {
	:root {
		--picico-gutter: 0.75rem;
	}
}

/* 大画面で本文が間延びしないよう、余白だけ広げる。 */
@media (min-width: 90rem) {
	.pc-container {
		padding-block: var(--picico-space-xl);
	}
}

/* 印刷時はナビ・サイドバー・CTA を落として本文だけ残す。 */
@media print {
	.pc-header__actions,
	.pc-nav,
	.pc-sidebar,
	.pc-related,
	.pc-cta-area,
	.pc-footer__nav {
		display: none;
	}

	.pc-container {
		max-width: none;
		padding: 0;
	}
}