/* =========================================
   Module Page / モジュール説明ページ（page-module.php）
   ・固定ページ「grm-modules」の子ページでのみ読み込む
   ・トップページと同じ「左に英字ラベル／右に本文」の文字主体レイアウト
========================================= */

.grm-mod{
	max-width:var(--container-wide);
	margin:0 auto;
	padding:0 60px 160px;
	box-sizing:border-box;
}

/* =========================================
   Hero
========================================= */
.grm-mod-hero{
	padding-top:60px;
}

.grm-mod-hero__crumb{
	display:flex;
	gap:10px;
	font-size:13px;
	font-weight:500;
	color:var(--color-sub);
	margin-bottom:40px;
}

.grm-mod-hero__crumb a:hover{
	color:var(--color-main);
}

/* page.css の .site-main h1 に負けないよう .site-main を付ける */
.site-main .grm-mod-hero__name{
	margin:0;
	font-size:clamp(56px, 10vw, 168px);
	line-height:.92;
	letter-spacing:-.035em;
	color:var(--color-main);
}

/* タイトル＋右側のアイコン */
.grm-mod-hero__head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:40px;
}

/* アイコン：薄いグレーで大きく、画面の右端からはみ出して配置
   ・タイトルの後ろ（背面）に置く
   ・right は「コンテナ右端〜画面右端の距離」＋ 4vw だけ外へ出す */
.grm-mod-hero{
	position:relative;
}

/* はみ出したアイコンで横スクロールが出ないよう、ページ全体の外枠で切り取る
   （clip はスクロール領域を作らないので、見出しの追従表示は維持される） */
.grm-container-field{
	overflow-x:clip;
}

.grm-mod-hero__name,
.grm-mod-hero__crumb,
.grm-mod-hero__foot{
	position:relative;
	z-index:1;
}

.grm-mod-hero__icon{
	position:absolute;
	top:50%;
	right:calc(-1 * max(60px, (100vw - var(--container-wide)) / 2 + 60px) - 4vw);
	z-index:0;
	width:clamp(260px, 36vw, 580px);
	color:#e4e4e8;
	transform:translateY(-50%);
	pointer-events:none;
}

.grm-mod-hero__icon svg{
	display:block;
	width:100%;
	height:auto;
}

.grm-mod-hero__name span{
	display:block;
}

.grm-mod-hero__name-strong{
	font-weight:700;
	-webkit-text-stroke:.025em currentColor;
}

.grm-mod-hero__name-light{
	font-weight:200;
}

.grm-mod-hero__foot{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	margin-top:80px;
	padding-top:32px;
	border-top:1px solid #e6e6e6;
}

.grm-mod-hero__meta{
	grid-column:1;
	grid-row:1;
	display:flex;
	gap:48px;
}

.grm-mod-hero__meta dt{
	font-size:12px;
	font-weight:500;
	color:var(--color-sub);
	margin-bottom:6px;
}

.grm-mod-hero__meta dd{
	font-size:15px;
	font-weight:500;
}

.grm-mod-hero__lead{
	grid-column:2;
	max-width:640px;
	font-size:17px;
	font-weight:500;
	line-height:2;
}

/* =========================================
   Body / 本文
   ・クラス「grm-mod-sec」を付けたグループブロックが1セクション
========================================= */
.grm-mod-body .grm-mod-sec{
	padding-top:160px;
}

.grm-mod-body .grm-mod-sec > .wp-block-group__inner-container,
.grm-mod-body .grm-mod-sec:not(:has(> .wp-block-group__inner-container)){
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0 60px;
	align-items:start;
}

/* 見出し（左・スクロール追従） */
.grm-mod-body .grm-mod-sec h2{
	grid-column:1;
	grid-row:1 / span 20;
	position:sticky;
	top:120px;
	font-size:clamp(30px, 3vw, 44px);
	font-weight:600;
	letter-spacing:0;
	line-height:1.2;
}

/* 中身（右） */
.grm-mod-body .grm-mod-sec h2 ~ *{
	grid-column:2;
	max-width:640px;
}

.grm-mod-body h3{
	font-size:clamp(24px, 2.4vw, 34px);
	font-weight:600;
	line-height:1.55;
	letter-spacing:.02em;
	margin-bottom:32px;
}

.grm-mod-body p{
	font-size:15px;
	font-weight:500;
	line-height:2;
	margin-bottom:24px;
}

.grm-mod-body code{
	font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size:.9em;
	padding:2px 6px;
	background:#f2f2f4;
	border-radius:4px;
}

/* =========================================
   Features / 特徴の一覧（リストに grm-mod-features）
========================================= */
.grm-mod-body .grm-mod-features{
	list-style:none;
	margin:8px 0 0;
	padding:0;
	border-bottom:1px solid #e6e6e6;
}

.grm-mod-body .grm-mod-features li{
	padding:24px 0;
	border-top:1px solid #e6e6e6;
	font-size:13px;
	line-height:1.9;
	color:var(--color-sub);
}

.grm-mod-body .grm-mod-features strong{
	display:block;
	margin-bottom:6px;
	font-size:18px;
	font-weight:600;
	line-height:1.4;
	color:var(--color-main);
}

/* =========================================
   Steps / 使い方の手順（番号付きリストに grm-mod-steps）
========================================= */
.grm-mod-body .grm-mod-steps{
	list-style:none;
	margin:8px 0 0;
	padding:0;
	counter-reset:grm-step;
	border-bottom:1px solid #e6e6e6;
}

.grm-mod-body .grm-mod-steps li{
	position:relative;
	padding:24px 0 24px 84px;
	border-top:1px solid #e6e6e6;
	font-size:13px;
	line-height:1.9;
	color:var(--color-sub);
	counter-increment:grm-step;
}

.grm-mod-body .grm-mod-steps li::before{
	content:counter(grm-step, decimal-leading-zero);
	position:absolute;
	top:22px;
	left:0;
	font-size:40px;
	font-weight:100;
	line-height:1;
	letter-spacing:-.02em;
	color:var(--color-main);
}

.grm-mod-body .grm-mod-steps strong{
	display:block;
	margin-bottom:6px;
	font-size:18px;
	font-weight:600;
	line-height:1.4;
	color:var(--color-main);
}

/* =========================================
   Spec / 仕様（表ブロックに grm-mod-spec）
========================================= */
.grm-mod-body .grm-mod-spec{
	margin:8px 0 0;
}

.grm-mod-body .grm-mod-spec table{
	width:100%;
	border-collapse:collapse;
	border-bottom:1px solid #e6e6e6;
}

.grm-mod-body .grm-mod-spec td{
	padding:20px 0;
	border:0;
	border-top:1px solid #e6e6e6;
	font-size:14px;
	font-weight:500;
	line-height:1.8;
	vertical-align:top;
	text-align:left;
}

.grm-mod-body .grm-mod-spec td:first-child{
	width:34%;
	padding-right:20px;
	font-size:12px;
	color:var(--color-sub);
}

/* =========================================
   Screens / 管理画面のスクリーンショット（画像ブロックに grm-mod-shot）
========================================= */
.grm-mod-body .grm-mod-shot{
	margin:8px 0 56px;
}

.grm-mod-body .grm-mod-shot:last-child{
	margin-bottom:0;
}

.grm-mod-body .grm-mod-shot img{
	display:block;
	width:100%;
	height:auto;
	border:1px solid #e6e6e6;
	border-radius:8px;
}

/* クリックで拡大（assets/js/module.js） */
.grm-mod-body .grm-mod-shot img{
	cursor:zoom-in;
}

.grm-mod-lightbox{
	position:fixed;
	inset:0;
	z-index:10000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:60px;
	box-sizing:border-box;
	background:rgba(0, 0, 0, .8);
	cursor:zoom-out;
	opacity:0;
	visibility:hidden;
	transition:opacity .3s ease, visibility .3s ease;
}

.grm-mod-lightbox.is-open{
	opacity:1;
	visibility:visible;
}

.grm-mod-lightbox__img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	border-radius:8px;
	box-shadow:0 20px 60px rgba(0, 0, 0, .4);
	transform:scale(.96);
	transition:transform .3s ease;
}

.grm-mod-lightbox.is-open .grm-mod-lightbox__img{
	transform:scale(1);
}

/* 閉じるボタン（×） */
.grm-mod-lightbox__close{
	position:absolute;
	top:24px;
	right:24px;
	width:48px;
	height:48px;
	border:1px solid #ddd;
	border-radius:var(--radius-full);
	background:#fff;
	cursor:pointer;
}

.grm-mod-lightbox__close::before,
.grm-mod-lightbox__close::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:18px;
	height:1px;
	background:var(--color-main);
}

.grm-mod-lightbox__close::before{
	transform:translate(-50%, -50%) rotate(45deg);
}

.grm-mod-lightbox__close::after{
	transform:translate(-50%, -50%) rotate(-45deg);
}

html.grm-mod-lightbox-open{
	overflow:hidden;
}

@media (max-width:767px){
	.grm-mod-lightbox{
		padding:80px 12px 24px;
	}
}

.grm-mod-body .grm-mod-shot figcaption{
	margin-top:14px;
	font-size:13px;
	line-height:1.9;
	color:var(--color-sub);
}

/* =========================================
   Grid Demo / グリッドの実例（HTMLブロックに grm-mod-grid-demo）
   ・中身の grow-* クラスはテーマの grid.css のものをそのまま使用
========================================= */
.grm-mod-body .grm-mod-grid-demo{
	margin:8px 0 48px;
}

.grm-mod-body .grm-mod-grid-demo:last-child{
	margin-bottom:0;
}

.grm-mod-body .grm-mod-grid-demo__label{
	margin-bottom:12px;
	font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size:12px;
	color:var(--color-sub);
}

.grm-mod-body .grm-mod-grid-demo [class^="grow-"]{
	--gap:10px;
}

.grm-mod-body .grm-mod-grid-demo [class^="grow-"] > div{
	display:flex;
	align-items:center;
	justify-content:center;
	height:64px;
	background:#f2f2f4;
	font-size:22px;
	font-weight:100;
	color:var(--color-main);
}

/* =========================================
   Modules Index / 一覧ページ（page-grm-modules.php）
   ・カードを横並び（PC 3列 ／ タブレット 2列 ／ スマホ 1列）
   ・文字主体：大きな細い番号、GRM＋名前、紹介文、バージョン
   ・右下に各モジュールのアイコンを薄く大きく敷く
========================================= */
.grm-mod-index .grm-mod-hero__name sup{
	margin-left:.12em;
	font-size:.16em;
	font-weight:500;
	letter-spacing:0;
	vertical-align:super;
}

/* GRM Modules とは（タイトルの下） */
.grm-idx-points{
	flex-direction:column;
	gap:24px;
}

.grm-idx-points dd{
	font-size:14px;
}

.grm-idx-about__body{
	grid-column:2;
}

.grm-idx-about__body .grm-mod-hero__lead{
	grid-column:auto;
}

.grm-idx-about__lead{
	margin-bottom:24px;
	font-size:clamp(22px, 2.2vw, 30px);
	font-weight:600;
	line-height:1.55;
	letter-spacing:.02em;
}

.grm-idx-list{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	margin:96px 0 0;
	padding:0;
	list-style:none;
	border-top:1px solid #e6e6e6;
	border-left:1px solid #e6e6e6;
}

.grm-idx-item{
	border-right:1px solid #e6e6e6;
	border-bottom:1px solid #e6e6e6;
}

.grm-idx-item a{
	position:relative;
	display:flex;
	flex-direction:column;
	height:100%;
	min-height:420px;
	padding:32px 32px 28px;
	box-sizing:border-box;
	overflow:hidden;
	color:var(--color-main);
	background-color:rgba(237, 238, 242, 0);
	transition:background-color .3s cubic-bezier(.82, .02, .83, .86);
}

/* 番号 */
.grm-idx-item__no{
	position:relative;
	font-size:56px;
	font-weight:100;
	line-height:1;
	letter-spacing:-.02em;
}

/* 名前（GRM 太字／名前 細字） */
.grm-idx-item__name{
	position:relative;
	margin-top:48px;
	font-size:clamp(28px, 2.6vw, 40px);
	line-height:1.02;
	letter-spacing:-.03em;
}

.grm-idx-item__name > span{
	display:block;
}

.grm-idx-item__name-strong{
	font-weight:700;
}

.grm-idx-item__name-light{
	font-weight:200;
}

/* 紹介文（3行まで） */
.grm-idx-item__desc{
	position:relative;
	display:-webkit-box;
	margin-top:24px;
	overflow:hidden;
	font-size:13px;
	line-height:1.9;
	color:var(--color-sub);
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}

/* バージョン・View */
.grm-idx-item__foot{
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:auto;
	padding-top:32px;
	font-size:12px;
	font-weight:500;
	color:var(--color-sub);
}

.grm-idx-item__more{
	display:inline-flex;
	align-items:center;
	gap:8px;
	color:var(--color-main);
	font-weight:600;
}

.grm-idx-item__more::after{
	content:"\2192";
	transition:transform .4s cubic-bezier(.22, 1, .36, 1);
}

/* アイコン（右下に薄く大きく） */
.grm-idx-item__icon{
	position:absolute;
	right:-18%;
	bottom:12%;
	width:78%;
	color:#eeeef1;
	transition:transform .6s cubic-bezier(.22, 1, .36, 1), color .4s ease;
}

.grm-idx-item__icon svg{
	display:block;
	width:100%;
	height:auto;
}

/* アイコン内の白い塗り（矢印・チェック円など）は、カードの背景色に合わせる */
.grm-idx-item__icon [fill="#fff"]{
	fill:var(--grm-icon-bg, #fff);
	transition:fill .3s ease;
}

/* ホバー：背景がうっすらグレー、アイコンが少し動く、矢印が右へ */
@media (hover:hover) and (pointer:fine){

	/* 他のCSS（プラグイン側の a:hover { opacity } 等）で薄くならないよう opacity を固定 */
	.grm-idx-item a:hover{
		opacity:1;
		background-color:rgba(237, 238, 242, .5);
		transition:background-color .3s cubic-bezier(.4, 1.07, 1, 1);
		--grm-icon-bg:#f6f7f9;
	}

	.grm-idx-item a:hover .grm-idx-item__icon{
		color:#dedee3;
		transform:translateX(-6%);
	}

	.grm-idx-item a:hover .grm-idx-item__more::after{
		transform:translateX(6px);
	}

}

/* =========================================
   Tablet / SP
========================================= */
@media (max-width:991px){

	.grm-mod{
		padding:0 20px 100px;
	}

	.grm-mod-hero{
		padding-top:32px;
	}

	/* スマホでもPCと同じく文字の背面（一番下のレイヤー）に置く */
	.grm-mod-hero__icon{
		right:-12vw;
		width:70vw;
	}

	.grm-mod-hero__foot{
		grid-template-columns:1fr;
		gap:28px;
		margin-top:48px;
	}

	.grm-mod-hero__meta,
	.grm-mod-hero__lead,
	.grm-idx-about__body{
		grid-column:1;
		grid-row:auto;
	}

	/* スマホ・タブレットでは文章を先に、ポイントを後に */
	.grm-idx-about__body{
		order:-1;
	}

	.grm-idx-points{
		flex-direction:row;
		flex-wrap:wrap;
		gap:20px 32px;
	}

	.grm-mod-body .grm-mod-sec{
		padding-top:100px;
	}

	.grm-idx-list{
		grid-template-columns:repeat(2, 1fr);
		margin-top:56px;
	}

	.grm-mod-body .grm-mod-sec > .wp-block-group__inner-container,
	.grm-mod-body .grm-mod-sec:not(:has(> .wp-block-group__inner-container)){
		grid-template-columns:1fr;
	}

	.grm-mod-body .grm-mod-sec h2{
		grid-row:auto;
		position:static;
		margin-bottom:28px;
	}

	.grm-mod-body .grm-mod-sec h2 ~ *{
		grid-column:1;
	}

}

@media (max-width:767px){

	.grm-idx-list{
		grid-template-columns:1fr;
	}

	.grm-idx-item a{
		min-height:340px;
		padding:28px 24px 24px;
	}

	.grm-mod-body .grm-mod-steps li{
		padding-left:60px;
	}

	.grm-mod-body .grm-mod-steps li::before{
		font-size:30px;
	}

}

/* =========================================
   Demo（動作サンプルへのリンク）
   ・GRM Map など、動作サンプルのあるモジュールで使用
========================================= */
.grm-mod-demo .wp-block-buttons{
	gap:10px;
	margin-top:28px;
}

.grm-mod-body .grm-mod-demo p.grm-mod-demo-note{
	margin-top:18px;
	font-size:12px;
	font-weight:400;
	color:var(--color-sub);
}