/* Front page blog section refinements. */

.tiptop-front-content .intro4 .front-blog-layout {
	display: block !important;
}

.tiptop-front-content .intro4 .blog-in {
	width: min(100%, 940px);
	max-width: 940px;
	margin-inline: auto;
	text-align: center;
}

.tiptop-front-content .intro4 .front-blog-heading__title {
	margin-bottom: 0;
	text-align: center;
}

.tiptop-front-content .intro4 .front-blog-list {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
	width: 100%;
	max-width: 940px;
	margin: clamp(36px, 4vw, 52px) auto 0;
	text-align: left;
}

.tiptop-front-content .intro4 .front-blog-card {
	width: auto;
	max-width: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.tiptop-front-content .intro4 .front-blog-card .post-card__image {
	display: block;
	aspect-ratio: 16 / 10;
	margin-bottom: 16px;
	border-radius: var(--tt-radius-md, 0);
	background: var(--tiptop-surface-alt);
	overflow: hidden;
}

.tiptop-front-content .intro4 .front-blog-card .post-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tiptop-front-content .intro4 .front-blog-card .post-card__image--fallback img,
.tiptop-front-content .intro4 .front-blog-card .tiptop-post-thumbnail-fallback {
	object-fit: cover;
}

.tiptop-front-content .intro4 .front-blog-card .post-card__body {
	padding: 0;
}

.tiptop-front-content .intro4 .front-blog-card .post-card__meta {
	margin-bottom: 13px;
}

.tiptop-front-content .intro4 .front-blog-card .post-card__title {
	margin: 0;
}

.tiptop-front-content .intro4 .front-blog-card .post-card__excerpt {
	margin: 13px 0 0;
	font-size: var(--tt-text-note);
	line-height: calc(2 * var(--tt-leading-scale));
}

.tiptop-front-content .intro4 .front-blog-card--empty-visual .post-card__body {
	padding: 0;
}

.tiptop-front-content .intro4 .front-blog-layout .more {
	margin-top: 28px;
	text-align: right;
}

/* 本実装：3枚同格カードを「注目1件+一覧2件」へ。front-page.php側のループ順は
 * そのまま（PHP変更なし）で、DOM順1件目だけを:first-childで大きく扱う。
 *
 * 2026-08-10（Issue #833）：**この 900px ブロックは触っていない。**
 * 標準デザインの 900〜960px を1列にする指定は、下の「標準のみ ≤960px」ブロックで
 * 標準スコープを足して詳細度を1段上げて上書きしている。
 * ここを 961px に動かさない理由は、このブロックのセレクタがモード非限定
 * （0,3,0 / 0,4,0）で**イマーシブにも効いている**ため。境界を動かすと
 * イマーシブの 900〜960px も一緒に変わってしまう（「イマーシブは現状維持」に反する）。 */
@media (min-width: 900px) {
	/* gapは front-page-adjustments-rules.css が詳細度で勝つため、あちらが所有する（ここに書かない）。
	 * 行は「2件目 / 3件目 / 余り」の3本。モックは右カラムを .blog-list という別ラッパーで
	 * まとめているが、実DOMは3枚が .front-blog-list の直接の子なのでラッパーが無い。
	 * そのため2件目=1行目・3件目=2行目を内容高さ(auto)で上に詰め、残りの高さは3本目の
	 * 1fr に吸わせる。注目カードは 1/-1 で全行にまたがせる。
	 * （grid-row: 1/span 2 だと2行が注目カードの高さで等分され、2件目と3件目が
	 * 大きく離れて縦に散る。実機で確認した実装ミス。） */
	.tiptop-front-content .intro4 .front-blog-list {
		grid-template-columns: 1.15fr 1fr;
		grid-template-rows: auto auto 1fr;
	}

	.tiptop-front-content .intro4 .front-blog-card:first-child {
		grid-row: 1 / -1;
	}

	.tiptop-front-content .intro4 .front-blog-card:first-child .post-card__image {
		aspect-ratio: 4 / 3;
	}
}

/* 2〜3件目は「サムネ左＋本文右」の横並び。
 * ⚠ 並べる対象は .front-blog-card ではなく .front-blog-card__link。
 * カード(article)の子は<a>1個だけ（content-front-blog-card.php）なので、
 * カード側に display:flex を当てても画像と本文は並ばない（実機で確認した実装ミス）。
 * モックの .blog-row と同じ grid（120px + 残り / gap 16px）で組む。
 *
 * 2026-08-10（Issue #833）：上の2カラム化ブロックから切り出したが、境界は
 * **900px のまま**にしてある。このセレクタは (0,5,0)（:not(:first-child) が
 * クラス1個分）で、front-reloom-motifs.css:184 にあるイマーシブ側の同要素ルール
 * (0,3,1) に**詳細度で勝ってしまう**。つまりこの行レイアウトは以前からイマーシブにも
 * 効いており、範囲を782pxまで広げるとイマーシブの見た目も 782〜899px で変わる。
 * 「イマーシブは現状維持」を守るため、ここは触らず、標準だけ下の
 * 782〜899px ブロックで足す。 */
@media (min-width: 900px) {
	.tiptop-front-content .intro4 .front-blog-card:not(:first-child) .front-blog-card__link {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
	}

	.tiptop-front-content .intro4 .front-blog-card:not(:first-child) .post-card__image {
		width: 120px;
		aspect-ratio: 1;
		margin-bottom: 0;
	}

	.tiptop-front-content .intro4 .front-blog-card:not(:first-child) .post-card__body {
		min-width: 0;
	}
}

/* 標準デザインは全幅で「サムネ左＋本文右」を保つ（2026-08-10・Issue #833 → #838）。
 * モックは .blog-grid が1列に落ちても .blog-row の横並びを維持し、781px以下では
 * サムネだけ 88px に縮める（実測：375pxで 88px + 231px / gap 16px）。
 *
 * Issue #833 では 782〜899px だけを対象にした帯を置いていたが、#838 で781px以下も
 * 揃えることになったので**メディアクエリを外して一本化した**。同じ宣言セットを
 * 3箇所（900px以上／782〜899px／781px以下）へ散らすより、全幅で1回書いて
 * 781px以下の差分（サムネ幅と列トラック）だけ下で上書きする方が短い。
 *
 * 上のモード非限定 900px ブロックはイマーシブにも効いているので触っていない。
 * こちらは標準スコープを足して詳細度が1段上（0,6,1 対 0,5,0）なので、900px以上でも
 * こちらが勝つが**同じ値**なので標準の見た目は変わらない。イマーシブは
 * 900px以上で従来のまま、900px未満は元から自前のレイアウトのまま。 */
body.tiptop-standard-system .tiptop-front-content .intro4 .front-blog-card:not(:first-child) .front-blog-card__link {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

body.tiptop-standard-system .tiptop-front-content .intro4 .front-blog-card:not(:first-child) .post-card__image {
	width: 120px;
	aspect-ratio: 1;
	margin-bottom: 0;
}

body.tiptop-standard-system .tiptop-front-content .intro4 .front-blog-card:not(:first-child) .post-card__body {
	min-width: 0;
}

/* 781px以下はサムネを88pxへ（2026-08-10・Issue #838）。
 * モバイルは PR #818/#819 で375pxのモックと突合済みの領域なので、変えるのは
 * サムネ幅と列トラックだけに留める。gap 16px は上のまま（モックも16px）。 */
@media (max-width: 781px) {
	body.tiptop-standard-system .tiptop-front-content .intro4 .front-blog-card:not(:first-child) .front-blog-card__link {
		grid-template-columns: 88px minmax(0, 1fr);
	}

	body.tiptop-standard-system .tiptop-front-content .intro4 .front-blog-card:not(:first-child) .post-card__image {
		width: 88px;
	}
}

/* 旧来の 899px 以下（モード非限定）。**イマーシブの見た目を動かさないためここは残す。**
 * grid-template-columns は下の標準スコープが上書きするが、gap と max-width は
 * イマーシブにも効いているため（イマーシブ側のルールは columns しか指定していない）、
 * ブロックごと消すとイマーシブが変わってしまう。 */
@media (max-width: 899px) {
	.tiptop-front-content .intro4 .front-blog-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px;
		max-width: 660px;
	}
}

/* 標準デザインのみ：960px以下は1列（2026-08-10・Issue #833）。
 * モックは 960px以下で .blog-grid を1列にする（900px幅で実測：注目カードが
 * 828px幅・行も828px幅）。実サイトは 2等分カラム（426px + 370px）のままだった。
 * 上のブロックの `max-width: 660px` も標準では打ち消す——モックは1列でも
 * コンテナ幅いっぱいを使う（900px幅で828px）。
 *
 * ⚠ `grid-template-rows` と `:first-child` の `grid-row` も戻す必要がある。
 * 上の 900px ブロックが「3行 ＋ 注目カードを 1/-1 で全行にまたがせる」を当てており、
 * 1列のまま行だけ残すと注目カードがグリッド全体を占めて2〜3件目が暗黙の列へ
 * こぼれる（列を変えるだけでは足りない）。 */
@media (max-width: 960px) {
	body.tiptop-standard-system .tiptop-front-content .intro4 .front-blog-list {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		gap: 36px;
		max-width: none;
	}

	body.tiptop-standard-system .tiptop-front-content .intro4 .front-blog-card:first-child {
		grid-row: auto;
	}
}

@media (max-width: 560px) {
	.tiptop-front-content .intro4 .blog-in {
		text-align: left;
	}

	.tiptop-front-content .intro4 .front-blog-heading__title,
	.tiptop-front-content .intro4 .more {
		text-align: center;
	}

	.tiptop-front-content .intro4 .front-blog-list {
		grid-template-columns: 1fr;
		gap: 34px;
		margin-top: 42px;
	}
}