/**
 * lplus Related Card (LRC) - Frontend CSS
 *
 * 関連記事カード(横型)のスタイル
 * 構成:
 *   1. CSS変数
 *   2. カード全体(.lrc-card)
 *   3. バッジ帯(.lrc-card__band)
 *   4. 横並び行(.lrc-card__row)= アイコン | タイトル+補足 | 丸ボタン
 *
 * 設計方針: 参考プラグイン(RSBT)と同じく .lrc-card で名前空間を切り、
 *           box-sizing をリセットしてテーマCSSの影響を受けにくくする。
 *           バッジは画像に重ねず最上部の帯として配置。
 */

/* ============================================================
 * 1. CSS変数
 * ============================================================ */

.lrc-card {
	--lrc-primary: #0A9298;
	--lrc-primary-deep: #0a7a7f;
	--lrc-band-bg: #EAF6F6;
	--lrc-band-border: #D7ECEC;
	--lrc-thumb-bg: #E0F1F1;
	--lrc-border: #CFE8E8;
	--lrc-card-bg: #F8FCFC;
	--lrc-title: #2f3a3a;
	--lrc-desc: #7f9596;
}

/* ============================================================
 * 2. カード全体
 * ============================================================ */

.lrc-card {
	display: block;
	max-width: 380px;
	margin: 1.75em auto;
	background: var(--lrc-card-bg);
	border: 1px solid var(--lrc-border);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(10,146,152,.04);
	-webkit-tap-highlight-color: transparent;
	transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}

.lrc-card *,
.lrc-card *::before,
.lrc-card *::after {
	box-sizing: border-box;
}

.lrc-card:active {
	transform: scale(.99);
	border-color: var(--lrc-primary);
	box-shadow: 0 0 0 2px rgba(10,146,152,.12);
}

/* ============================================================
 * 3. バッジ帯(画像に重ねず最上部に配置)
 * ============================================================ */

.lrc-card__band {
	display: block;
	width: 100%;
	padding: 8px 16px 8px 36px;
	background: var(--lrc-band-bg)
		url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22%230A9298%22%3E%3Cpath%20d=%22M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%22/%3E%3C/svg%3E")
		no-repeat 16px center;
	background-size: 12px 12px;
	border-bottom: 1px solid var(--lrc-band-border);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--lrc-primary-deep);
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================
 * 4. 横並び行 = アイコン | タイトル+補足 | 丸ボタン
 * ============================================================ */

.lrc-card__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
}

.lrc-card__left {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.lrc-card__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--lrc-thumb-bg);
}

.lrc-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* キャンペーンバッジ(アイコンの上に独立配置・lead-compare-toolと同デザイン) */
.lrc-card__badge {
	display: inline-block;
	max-width: 92px;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: transparent;
}

.lrc-card__badge--teal  { color: #0A9298; border: 1px solid #b8e8eb; }
.lrc-card__badge--amber { color: #e6a000; border: 1px solid #ffe082; }
.lrc-card__badge--pink  { color: #C4613F; border: 1px solid rgba(224,123,90,.3); }
.lrc-card__badge--gold  { color: #e6a000; border: 1px solid #ffe082; }
.lrc-card__badge--gray  { color: #999;    border: 1px solid #e0e0e0; }

.lrc-card__main {
	flex: 1 1 auto;
	min-width: 0;
}

.lrc-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	color: var(--lrc-title);
	line-height: 1.4;
	margin: 0;
}

.lrc-card__desc {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	color: var(--lrc-desc);
	line-height: 1.5;
	margin: 3px 0 0;
}

.lrc-card__btn {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lrc-primary);
	opacity: .55;
	transition: transform .14s ease, opacity .14s ease;
}

.lrc-card__btn svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* タップで矢印がぴょこっと前に出る */
.lrc-card:active .lrc-card__btn {
	opacity: 1;
	transform: translateX(2px);
}

/* PCではホバーでも軽く反応 */
@media (hover: hover) {
	.lrc-card:hover .lrc-card__btn {
		opacity: 1;
		transform: translateX(1px);
	}
}