@charset "UTF-8";

/* =========================================================================
   INSTAGRAM  (Figma: INSTAGRAM_pc01 = 1440x3077 / 背景 #F9F9F9)
     y=217   03 + INSTAGRAM(共通部品 .ptitle)
     y=751   コンテンツ幅1280。内側の間隔は一律80
               @shinsuke_ikeuchi(32px Light)+ 一文(15px Light)
               / 右に 360x64 の FOLLOW ボタン(枠1px #191919)
               投稿グリッド 424px角 × 3列、隙間4px
               VIEW MORE ON INSTAGRAM(中央・16px)
     y=2050  footer(コンテンツ下の余白180)
   SP は INSTAGRAM_sp01 = 390x1653。2列173px角・内側の間隔32。
   トークン(:root)は main.css のものをそのまま使う。
   字間は main.css の `*` セレクタで一律5%が当たっているので個別指定しない。
   ========================================================================= */

.insta {
	background: var(--c-f9);
	color: var(--c-ink);
	/*
	 * 下の余白は padding で取る。最後の子要素に margin-bottom を置くと
	 * マージンの相殺で親の外へ抜け、body の黒地が帯状に見えてしまう。
	 */
	padding-bottom: 180px;
}

/*
 * 左右の余白と最大幅。.ptitle は共通部品なので main.css 側で同じ値を持っている。
 * 親の padding には依存させない(依存させるとラッパーの無いページで余白が消える)。
 */
.insta__inner {
	max-width: calc(1280px + var(--edge) * 2);
	margin: 180px auto 0;
	padding-left: var(--edge);
	padding-right: var(--edge);
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/* -------------------------------------------------------------------------
   アカウント名と FOLLOW ボタン
   Figmaは1280の両端寄せ(左テキスト / 右に360x64のボタン)。
   ボタンは高さ83の行に対して上下中央(y=10)。
   ------------------------------------------------------------------------- */

.insta__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.insta__id {
	min-width: 0;
}

.insta__handle {
	font-weight: 300;
	font-size: 32px;
	line-height: 41.6px;
	color: var(--c-ink);
}

.insta__note {
	/* Figmaの行間隔11 */
	margin-top: 11px;
	font-weight: 300;
	font-size: 15px;
	line-height: 30px;
	color: var(--c-3c);
}

/*
 * FOLLOW ボタン。塗りは地色と同じ #F9F9F9 で、1px #191919 の枠が輪郭を作る。
 * 角丸は無し(Figma: cornerRadius なし)。
 */
.insta__follow {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 360px;
	min-height: 64px;
	padding: 16px;
	background: var(--c-f9);
	border: 1px solid var(--c-ink);
	color: var(--c-ink);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* ホバーはFigmaに指定が無い。枠付きボタンなので地と文字を反転させる */
.insta__follow:hover {
	background: var(--c-ink);
	color: var(--c-f9);
}

.insta__glyph {
	flex: none;
}

/* -------------------------------------------------------------------------
   投稿グリッド(ウィジェットの出力を流し込む器)
   Figma: repeat(3, minmax(0,1fr)) / 隙間4px / 正方形。
   ウィジェット未導入のため、ここにダミーは置かない。PHP側が
   ショートコードの出力をそのまま子要素として渡す。
   ------------------------------------------------------------------------- */

.insta__posts {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.insta__feed {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
}

/*
 * 各セルは正方形。行数は投稿数に任せる(6件でも9〜12件でも崩れない)。
 * :only-child を除いているのは下のラッパー対応のため。
 */
.insta__feed > *:not(:only-child) {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	min-width: 0;
}

.insta__feed > *:not(:only-child) img,
.insta__feed > *:not(:only-child) video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * ウィジェットが自前のラッパー1枚だけを出力する場合(Smash Balloon など)は、
 * 列に押し込まず全幅を渡してウィジェット側のレイアウトに任せる。
 */
.insta__feed > :only-child {
	grid-column: 1 / -1;
}

/* -------------------------------------------------------------------------
   Smash Balloon Social Photo Feed(プラグイン instagram-feed)の出力を
   Figmaのグリッドへ合わせる。

   プラグインの出力:
     #sb_instagram > #sbi_images > .sbi_item > .sbi_photo_wrap > a.sbi_photo > img
   #sbi_images は既にCSSグリッドで、列数はクラス(.sbi_col_3 など)、
   隙間は **inline style の gap**(設定の imagepadding × 2)で出てくる。

   ※ !important を使っているのは inline style と、読み込み順が保証されない
     プラグイン側の同詳細度セレクタ(#sb_instagram.sbi_col_3 #sbi_images)に
     勝つため。ここ以外では使わないこと。
   ※ プラグイン側の設定も「3列 / 余白2px / モバイル2列」に合わせておくと、
     この上書きが無くてもデザインどおりになる。
   ------------------------------------------------------------------------- */

.insta__feed #sb_instagram {
	width: 100% !important;
	padding: 0 !important;
}

/*
 * display:grid もこちらで持たせる。プラグインには「レガシーCSS」モードがあり、
 * その場合 #sbi_images はグリッドにならず inline-block + padding で並ぶ。
 * プラグイン側のCSSに依存すると、そのモードで列数・隙間の指定が効かなくなる。
 */
.insta__feed #sb_instagram #sbi_images {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 4px !important;
	padding: 0 !important;
}

/* レガシーCSSモードは .sbi_item に inline の padding/width を出す */
.insta__feed #sb_instagram .sbi_item {
	width: auto !important;
	min-width: 0;
	padding: 0 !important;
	margin: 0 !important;
}

.insta__feed #sb_instagram .sbi_photo_wrap {
	height: 100%;
}

/* 正方形。プラグインはJSで高さを入れてくるので、こちらで比率を持たせる */
.insta__feed #sb_instagram .sbi_photo {
	aspect-ratio: 1 / 1;
	height: auto !important;
	padding: 0 !important;
}

.insta__feed #sb_instagram .sbi_photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * プラグイン自前のヘッダーと「もっと読み込む / フォロー」は使わない。
 * デザイン側の @ハンドル・FOLLOW ボタン・VIEW MORE が担当する。
 */
.insta__feed .sb_instagram_header,
.insta__feed #sbi_load {
	display: none !important;
}

/*
 * 読み込み失敗・API制限でウィジェットが空を返したときのフォールバック(要件)。
 * PHP側でも中身が無ければ .insta__posts 自体を出力しないが、
 * クライアント側で空になるケースもあるためCSSでも受けておく。
 * グリッドと VIEW MORE を消し、FOLLOW ボタンだけで成立させる。
 */
.insta__feed:empty {
	display: none;
}

.insta__feed:empty + .insta__more {
	display: none;
}

/*
 * ウィジェットが器だけ返して投稿が0件のとき(未接続・フィード未作成・
 * トークン失効・API制限)。ラッパーは出ているので :empty では捕まらない。
 * 返るマーカーは状況で変わる(#sb_instagram の器 / #sbi_mod_error のエラー文)ため、
 * 「プラグインの出力があるのに .sbi_item が無い」で判定する。
 * PHP側にも同じ判定があり、こちらはクライアント側で空になる場合の保険。
 * :has を持たない環境では空の枠が残るが、それ以外は同じ挙動になる。
 */
.insta__posts:has(#sb_instagram, #sbi_mod_error):not(:has(.sbi_item)) {
	display: none;
}

/* 管理者向けのエラー文はサイト上に出さない(管理画面で気づけばよい) */
.insta__feed #sbi_mod_error {
	display: none !important;
}

/* -------------------------------------------------------------------------
   固定ページ本文の「ギャラリー」ブロックをFigmaのグリッドに合わせる。

   Instagramのアカウント接続ができない場合の恒久的な代替手段。
   先方スタッフが INSTAGRAM の固定ページを編集し、ギャラリーブロックへ
   画像を並べるだけでこのレイアウトになる(APIもトークン更新も不要)。
   各画像のリンク先に投稿URLを入れれば、クリックでその投稿へ飛ばせる。

   本文に中身があるときは本文が優先される(page-instagram.php の採用順)。
   ------------------------------------------------------------------------- */

.insta__feed .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	margin: 0;
}

.insta__feed .wp-block-gallery figure {
	/* ギャラリーブロックは各画像に inline style で幅(%)を出す */
	width: auto !important;
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	min-width: 0;
}

.insta__feed .wp-block-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* キャプションはデザインに無いので出さない */
.insta__feed .wp-block-gallery figcaption {
	display: none;
}

/* --- VIEW MORE ON INSTAGRAM(中央・矢印との間隔12)--- */

.insta__more {
	display: flex;
	justify-content: center;
}

.insta__more a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--c-ink);
	/* ヒーローの LATEST NEWS と同じ、間隔が開くホバー */
	transition: gap 0.35s ease;
}

.insta__more a:hover {
	gap: 16px;
}

.insta__more .arrow {
	flex: none;
}

/* -------------------------------------------------------------------------
   900px以下: アカウント名とボタンを縦積みにする
   32pxの @shinsuke_ikeuchi と360pxのボタンは横に並ばない幅になるため。
   ボタン幅は 360px を上限に、入らなければ器の幅いっぱい(SPの350pxと一致)。
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.insta__head {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.insta__follow {
		width: 360px;
		max-width: 100%;
	}
}

/* タブレット幅(SP専用デザインの対象外)の詰め方。ARTISTと同じ比率で縮める */
@media (min-width: 768px) and (max-width: 900px) {
	.insta {
		padding-bottom: 120px;
	}

	.insta__inner {
		margin-top: 96px;
		gap: 48px;
	}

	.insta__posts {
		gap: 48px;
	}
}

/* =========================================================================
   SP  (Figma: INSTAGRAM_sp01 = 390x1653)
     タイトル下80 → コンテンツ(内側の間隔32)→ 下余白80
     ボタンは幅いっぱい・高さ56。グリッドは2列173px角
   ========================================================================= */

@media (max-width: 767px) {
	.insta {
		padding-bottom: 80px;
	}

	.insta__inner {
		margin-top: 80px;
		gap: 32px;
	}

	.insta__head {
		/* Figma: 名前ブロックとボタンの間隔24 */
		gap: 24px;
	}

	.insta__handle {
		font-size: 24px;
		line-height: 31.2px;
	}

	.insta__note {
		font-size: 14px;
		line-height: 28px;
	}

	.insta__follow {
		min-height: 56px;
		font-size: 14px;
		line-height: 21px;
	}

	.insta__feed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Figma(INSTAGRAM_sp01)は2列・173px角。プラグインの設定より優先させる */
	.insta__feed #sb_instagram #sbi_images {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.insta__feed .wp-block-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.insta__posts {
		gap: 32px;
	}
}