/* --------------------------------------------
BIZ LAYOUT — リニューアル対象ページ共通の「ページ土台」

	■ このファイルが受け持つ範囲（ページ固有CSSでは書かない）
		・ページ全体の左右余白と最大幅
		・本文＋サイドバーの2カラムグリッド（.columns02）
		・パンくずの位置揃え
		・サイドバーの幅と内部の文字サイズ
		・1カラムに落ちるブレークポイント（960px）

	■ 適用ページ
		#singleCompany  … 企業TOP / ES・面接・コラム一覧
		#singleEs       … ES・面接 詳細
		#archive_esinfo … ES横断一覧（サイドバーの文字サイズのみ）

	■ 意図（なぜ必要か）
		テーマは 1580px キャンバス想定の固定レイアウト＋ html{ font-size:.888vw }
		による rem 連動スケールで作られている。そのため素の状態では
		 ・1580px 未満で padding-inline が負値になり本文が画面からはみ出す
		 ・style.css の body{ min-width:1200px } で横スクロールが出る
		 ・サイドバー(22.5rem)と内部文字が画面幅に応じて縮み続ける
		が起きる。新デザインのモックは固定px・流動グリッド前提なので、
		対象ページだけをその挙動に合わせる。

	■ 読み込み順
		lib/assets.php で company.css / es-info.css より「先」に enqueue している
		（共有の土台 → ページ固有の見た目、という素直なカスケード）。
		各ページのCSSからは旧レイアウト指定を削除済みなので競合しない。
		→ レイアウト・サイドバーを調整したいときは各ページのCSSではなく
		  このファイルを編集する（対象ページ全体に効くので変更時は担当者間で共有）。

	■ 対象外（現状維持）
		ブログ記事 / campus記事 / 動画ページ は従来の vw 連動のまま。
		将来それらもリニューアルする際は、下の :is() セレクタに
		該当ページのIDを足せば同じ土台に乗せられる。
--------------------------------------------- */

/* ===== 1. 横スクロールの解除 =====
	style.css の body{ min-width:1200px } はサイト全体に効くため、
	1200px 未満で body 自体が固定幅になり横スクロールが発生する。
	対象ページでのみ解除する（:has() はテーマ自身も body:has(#headerCampus) で使用済み）。 */
body:has( #singleCompany ),
body:has( #singleEs ){
	min-width : 0;
}

/* ===== 2. ページ全体の余白 ===== */
@media print , screen and ( width > 768px ){
	:is( #singleCompany , #singleEs ){
		/* 素の calc((100% - 1580px)/2) は 1580px 未満で負値になりはみ出す。
		   max() で最低 20px の余白を確保する。 */
		padding-inline : max( 20px , ( 100% - 1580px ) / 2 );
	}
}

/* ===== 3. 本文＋サイドバーの2カラム ===== */
@media print , screen and ( width > 768px ){
	:is( #singleCompany , #singleEs ) .columns02{
		display : grid;
		/* 本文は伸縮（minmax の 0 が無いと中の長い要素でグリッドが破れる）、
		   サイドバーは固定 300px。モックの .wrap（本文minmax(0,1fr)＋固定サイド）と同じ構成。
		   ※ 300px は企業ES一覧モック（na-seo-company-es-list-mock）の値に合わせたもの。 */
		grid-template-columns : minmax( 0 , 1fr ) 300px;
		column-gap : 32px;
		align-items : start;
		max-width : 1200px;
		margin-inline : auto;
	}
	:is( #singleCompany , #singleEs ) .columns02 > *{
		min-width : 0;
	}

	/* パンくずは .columns02 の外にあるため、同じ幅制約を与えて本文と左端を揃える。
	   padding-inline:130px は旧デザインのカード内余白に合わせた字下げなので解除。 */
	:is( #singleCompany , #singleEs ) .breadcrumb{
		max-width : 1200px;
		margin-inline : auto;
		padding-inline : 0;
	}
}

/* ===== 4. サイドバーの幅 =====
	campus_renew.css は .sidebar を 22.5rem で指定しており、html の font-size が
	vw 連動のため画面幅と一緒に縮む（固定300pxのグリッド枠との間に隙間ができる）。
	モックに合わせ「サイドバーは固定幅・本文だけが伸縮」に統一する。 */
@media print , screen and ( width > 768px ){
	:is( #singleCompany , #singleEs , #archive_esinfo ) .sidebar{
		width : 300px;
		flex-shrink : 0;
	}
}

/* ===== 5. 1カラムに落ちるブレークポイント（モックと同じ 960px） =====
	サイドバーは本文の下に回り込み、画面幅いっぱいに広がる。 */
@media screen and ( width <= 960px ) and ( width > 768px ){
	:is( #singleCompany , #singleEs ) .columns02{
		grid-template-columns : minmax( 0 , 1fr );
		row-gap : 0;
	}
	:is( #singleCompany , #singleEs ) .sidebar{
		grid-row : auto;
		grid-column : 1;
		width : 100%;
		margin-top : 60px;
	}
}

/* ===== 6. サイドバー内部の文字・余白をpx固定 =====
	rem 指定のままだと 768〜1440px で画面幅に応じて縮み、1200px 幅では
	本文12px相当が 8px まで小さくなって読めない。
	_campus_renew.scss の設計値（rem(N) = 16px基準の N px）をそのまま px で固定する。
	※ 対象ページ限定。ブログ等は従来の vw 連動のまま。 */
:is( #singleCompany , #singleEs , #archive_esinfo ) .sidebar{
	/* 人気記事 */
	.popular-posts-header{
		font-size : 16px;
		padding : 14px;
		margin-top : 40px;
		border-radius : 16px 16px 0 0;
	}
	.popular-posts-list{
		border-radius : 0 0 16px 16px;
	}
	.popular-post-item{
		padding : 24px 32px;
	}
	.popular-post-item > a{
		font-size : 12px;
	}

	/* おすすめ就活アプリ */
	.app-promo-inner{
		gap : 24px;
	}
	.app-promo-icon img{
		width : 90px;
		height : 90px;
	}
	.app-promo-title{
		font-size : 15px;
	}
	.app-promo-description{
		font-size : 12px;
		margin-top : 8px;
	}
	.app-promo-buttons{
		gap : 10px;
		margin-top : 16px;
	}
	.app-store-button{
		height : 29px;
		font-size : 12px;
		border-radius : 300px;
	}

	/* コーナー記事・診断セクション */
	.side_sec{
		margin-top : 40px;
		border-radius : 16px;
	}
	.corner-box,
	.campus-section{
		padding-top : 24px;
	}
	.corner-tab{
		width : 148px;
		font-size : 12px;
		padding : 4px 8px;
		margin : 0 24px;
		border-radius : 10px 10px 0 0;
	}
	.corner-post-item{
		padding : 24px 32px;
	}
	.corner-post-item > a{
		font-size : 12px;
	}
}