/* =========================
Card
========================= */

/* =========================
	 Card START
	 ※ 画像比率・hoverは制作実績（grm-works）
	 　のカードと同じ挙動に統一
========================= */
.grm-slider-card{
	height:auto !important;
	border-radius: 0px !important;
	border: none !important;
}
/* Card END */

/* =========================
	 Card Link START
	 ・「日付の位置が違う」との指摘で、grm-theme-sckett側の
	 　.sckett-news-cardと同じ、日付（縦書き）を写真の左側に
	 　添える横並びに変更。日付とメイン（写真＋キャプション）を
	 　左右に並べ、メイン側だけを縦積み（写真→キャプション）に
	 　するため、縦積みは.grm-card-main側に移した。
========================= */
.grm-card-link{
	display:flex;
	align-items:stretch;
	gap:10px;
	height:100%;
	color:inherit;
	text-decoration:none;
}
.grm-card-main{
	display:flex;
	flex-direction:column;
	flex:1;
	min-width:0;
}
/* Card Link END */

/* =========================
	 Card Photo Wrap START
	 ・「grm-modules.com/concept/のブログカードもsckettと
	 　同じデザインに」との指定で、grm-theme-sckett側の
	 　.sckett-news-photo-wrap／.sckett-news-arrowと同じ、
	 　写真とキャプションの境目にまたがる丸い矢印ボタンを追加。
	 　矢印ボタンはbottom:-17pxで下にはみ出すため、写真の角丸
	 　クロップ用overflow:hidden（.grm-card-image側）の外・
	 　この要素側に置く。
========================= */
.grm-card-photo-wrap{
	position:relative;
}
/* Card Photo Wrap END */

/* =========================
	 Card Image START
	 ・制作実績のサムネイルと同じ 4:3 比率
	 ・「sckettと同じデザインに」との指定で角丸を追加
========================= */
.grm-card-image{
	position:relative;
	aspect-ratio:4 / 3;
	overflow:hidden;
	border-radius:var(--radius-sm);
	background:#f2f2f2;
}
.grm-card-image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .4s;
}
.grm-card:hover .grm-card-image img{
	transform:scale(1.04);
}
.grm-card-noimage{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	background:#f2f2f2;
	color:#999;
	font-size:0.8125rem;
	letter-spacing:.05em;
}
/* Card Image END */

/* =========================
	 Card Arrow START
	 ・sckett側の.sckett-news-arrowと同じ、写真の右下に半分だけ
	 　はみ出す丸いボタン。ホバー時は塗りつぶしに切り替える
	 ・「まるのサイズを1.5倍くらいに」との指定で34px→51pxに拡大。
	 　半分はみ出す位置（bottom）もサイズに合わせて-17px→-25.5pxに
	 　比例して調整
========================= */
.grm-card-arrow{
	position:absolute;
	right:12px;
	bottom:-25.5px;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	width:51px;
	height:51px;
	border-radius:var(--radius-full);
	background:#fff;
	border:1px solid var(--color-border);
	color:var(--color-main);
	transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.grm-card:hover .grm-card-arrow{
	background:var(--color-main);
	border-color:var(--color-main);
	color:#fff;
}
/* Card Arrow END */

/* =========================
	 Card Body START
	 ・「sckettと同じデザインに」との指定で、キャプション部分を
	 　色つきの帯（--color-gray）にする
========================= */
.grm-card-body{
	display:flex;
	flex-direction:column;
	flex:1;
	padding:14px 40px 14px 14px;
	background-color:var(--color-gray);
}
/* Card Body END */

/* =========================
	 Card Date START
	 ・「日付の位置が違う」との指摘で、grm-theme-sckett側の
	 　.sckett-news-dateと同じ、写真の左側に添える縦書きに変更
	 　（書式も get_the_date('Y.m.d') で「2026.07.16」形式に統一）
========================= */
.grm-card-date{
	flex:0 0 auto;
	writing-mode:vertical-rl;
	text-orientation:mixed;
	letter-spacing:.06em;
	font-size:0.8125rem;
	font-weight:300;
	color:var(--color-sub);
	padding:2px 0;
	margin:0;
}
/* Card Date END */
.grm-card-cat{
	margin-bottom:8px;
}

/* =========================
	 Card Title START
	 ・タイトルが長い投稿でも高さが揃うよう2行まででクランプ
========================= */
.grm-card-title{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	font-size:1rem;
	font-weight:400;
	line-height:1.6;
	margin-bottom:10px;
}
/* Card Title END */

/* =========================
	 Card Excerpt START
	 ・「抜粋文字数は2行」との指定で2行までにクランプ
========================= */
.grm-card-excerpt{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	margin:0;
	font-size:0.9375rem;
	line-height:1.8;
	color:#666;
}
/* Card Excerpt END */

/* =========================
Badge
========================= */
.grm-badge{
	display:inline-block;
	align-self:flex-start;
	padding:4px 10px;
	font-size:12px;
	line-height:1.4;
	border-radius:20px;
	background:#eee;
}
.grm-badge-success{
	background:#dcfce7;
}
.grm-badge-danger{
	background:#fee2e2;
}
.grm-badge-warning{
	background:#fef3c7;
}
.grm-badge-info{
	background:#dbeafe;
}