/**
 * Kagari Manga Card v0 - Styles
 * V0デザイン準拠の漫画カードスタイル
 *
 * @package Kagari
 */

/* ====== グリッドコンテナ（共通） ====== */
/* すべてのページで同じサイズ感を維持するための共通グリッドスタイル */
.kc-manga-card-v0-grid {
	max-width: 1290px;
	margin: 0 auto;
	padding: 24px 16px;
}

.kc-manga-card-v0-grid__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* モバイル: 3列（Explorer2と同じ） */
	gap: 16px;
}

@media (min-width: 768px) {
	.kc-manga-card-v0-grid__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr)); /* タブレット: 4列（Explorer2と同じ） */
	}
}

@media (min-width: 1024px) {
	.kc-manga-card-v0-grid__inner {
		grid-template-columns: repeat(5, minmax(0, 1fr)); /* デスクトップ: 5列（Explorer2と同じ） */
	}
}

@media (min-width: 1280px) {
	.kc-manga-card-v0-grid__inner {
		grid-template-columns: repeat(6, minmax(0, 1fr)); /* 大画面: 6列（Explorer2と同じ） */
	}
}

/* グリッド内でのカード表示 */
.kc-manga-card-v0-grid__inner .kc-manga-card-v0 {
	width: 100%;
}

/* ====== カード全体 ====== */
.kc-manga-card-v0 {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0;
	overflow: hidden;
	transition: all 0.2s ease;
	cursor: pointer;
	display: block;
	width: 100%;
}

.kc-manga-card-v0:hover {
	border-color: rgba(213, 11, 11, 0.5); /* --kc-x2-red の50%透明度 */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.kc-manga-card-v0__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* ====== 画像エリア ====== */
.kc-manga-card-v0__media {
	position: relative;
	aspect-ratio: 5 / 7;
	overflow: hidden;
	background-color: #f5f5f5; /* プレースホルダー用 */
}

.kc-manga-card-v0__thumb {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.3s ease;
}

.kc-manga-card-v0:hover .kc-manga-card-v0__thumb {
	transform: scale(1.05);
}

/* ====== Previewボタン ====== */
/* Pattern 3: Badge Style - 右上角に配置されたバッジ風デザイン */
.kc-manga-card-v0__preview,
.kc-manga-card-v0__preview.kagari-preview-button {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important; /* 右上角に配置 */
	left: auto !important;
	bottom: auto !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 6px 12px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	line-height: 1;
	color: #ffffff !important;
	background: var(--kc-primary, #E2004F) !important;
	border: none !important;
	border-radius: 20px !important;
	box-shadow: 0 2px 8px rgba(226, 0, 79, 0.3) !important;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 10;
	min-width: 44px; /* タップ領域確保 */
	min-height: 28px;
	justify-content: center;
	width: auto !important; /* 自動幅 */
	pointer-events: auto !important; /* 親の pointer-events: none; を上書き */
}

.kc-manga-card-v0__preview:hover,
.kc-manga-card-v0__preview.kagari-preview-button:hover {
	transform: scale(1.05) !important;
	box-shadow: 0 4px 12px rgba(226, 0, 79, 0.4) !important;
	background: rgba(226, 0, 79, 0.9) !important;
	color: #ffffff !important;
}

.kc-manga-card-v0__preview-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ffffff;
	flex-shrink: 0;
}

.kc-manga-card-v0__preview-text {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

/* ====== Views/Likesオーバーレイ ====== */
.kc-manga-card-v0__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 8px;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(4px);
	color: #ffffff;
	font-size: 11px;
	font-weight: 500;
	z-index: 5;
	pointer-events: none; /* オーバーレイ自体はクリック不可、リンクを通す */
}

.kc-manga-card-v0__stat {
	display: flex;
	align-items: center;
	gap: 4px;
}

.kc-manga-card-v0__icon {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	color: currentColor;
}

.kc-manga-card-v0__count {
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
}

/* ====== タイトルエリア ====== */
.kc-manga-card-v0__content {
	padding: 12px;
}

.kc-manga-card-v0__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #000000;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	text-wrap: balance;
}

/* ====== レスポンシブ対応 ====== */
@media (max-width: 767px) {
	/* グリッドコンテナ（モバイル） */
	.kc-manga-card-v0-grid {
		padding: 16px 12px;
	}

	.kc-manga-card-v0-grid__inner {
		gap: 12px;
	}

	/* カード内要素 */
	.kc-manga-card-v0__preview,
	.kc-manga-card-v0__preview.kagari-preview-button {
		top: 6px !important;
		right: 6px !important; /* 右上角に配置 */
		padding: 5px 10px !important;
		font-size: 10px !important;
		min-width: 36px;
		min-height: 24px;
	}

	.kc-manga-card-v0__preview-dot {
		width: 5px;
		height: 5px;
	}

	.kc-manga-card-v0__preview-text {
		font-size: 10px;
	}

	.kc-manga-card-v0__content {
		padding: 10px;
	}

	.kc-manga-card-v0__title {
		font-size: 13px;
	}
}