/**
 * rddh-related.css
 * Frontend styles for the Related Databases section on single-database.php.
 * Append to rddh-page.css or enqueue separately.
 *
 * @package ridigital-datahub
 * @since   1.1.0
 */

/* ── Section wrapper ──────────────────────────────────────────────────────── */
.rddh-related {
	margin-top: 52px !important;
	padding-top: 40px !important;
	border-top: 1px solid var(--bdr, #e5e7eb);
}

.rddh-related__view-all {
	flex-shrink: 0 !important; white-space: nowrap !important; align-self: center !important;
	font-size: .82rem !important; font-weight: 700 !important; color: var(--ink, #111827) !important;
	background: #fff !important; border: 1px solid var(--bdr, #e5e7eb) !important; border-radius: 8px !important;
	padding: 9px 16px !important; text-decoration: none !important; transition: border-color .15s, color .15s;
}
.rddh-related__view-all:hover { border-color: var(--rp, #5c1d77) !important; color: var(--rp, #5c1d77) !important; }

/* ── Grid layouts ─────────────────────────────────────────────────────────── */
.rddh-related__grid { display: grid !important; gap: 20px !important; }

.rddh-related__grid--1col { grid-template-columns: minmax(0,420px) !important; }
.rddh-related__grid--2col { grid-template-columns: repeat(2, 1fr) !important; }
.rddh-related__grid--3col { grid-template-columns: repeat(3, 1fr) !important; }
.rddh-related__grid--4col { grid-template-columns: repeat(4, 1fr) !important; }

/* ── Card (ported from the reference prototype's .spec-card) ──────────────── */
.rddh-spec-card {
	background: #fff !important; border: 1px solid var(--bdr, #e5e7eb) !important; border-radius: 16px !important;
	padding: 26px 24px 24px !important; display: flex !important; flex-direction: column !important; gap: 14px !important;
	text-decoration: none !important; color: inherit !important;
	transition: box-shadow .22s, transform .22s, border-color .22s;
}
.rddh-spec-card:hover {
	box-shadow: 0 14px 32px -14px rgba(20,10,30,.18); border-color: var(--bdrl, #ede9f7) !important;
	transform: translateY(-4px);
}
.rddh-spec-top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; }
.rddh-spec-tag {
	align-self: flex-start; font-size: .68rem; font-weight: 700; padding: 5px 12px !important;
	border-radius: 100px; background: var(--rpl, #f7f2fa); border: 1px solid var(--bdrl, #ede9f7);
	color: var(--rp, #5c1d77) !important;
}
.rddh-spec-icon {
	width: 38px; height: 38px; border-radius: 10px; display: flex !important; align-items: center !important;
	justify-content: center !important; background: var(--rpl, #f7f2fa); color: var(--rp, #5c1d77) !important;
	flex-shrink: 0 !important; transition: background .15s, color .15s;
}
.rddh-spec-card:hover .rddh-spec-icon { background: var(--rp, #5c1d77); color: #fff !important; }
.rddh-spec-card h4 { font-size: 1.02rem !important; font-weight: 700; color: var(--ink, #111827) !important; line-height: 1.35; margin: 0 !important; }
.rddh-spec-meta-row { display: flex !important; gap: 16px !important; }
.rddh-spec-meta-item { display: flex !important; align-items: center !important; gap: 6px !important; font-size: .78rem; color: var(--fnt, #6b7280) !important; }
.rddh-spec-meta-item svg { color: var(--fnt, #6b7280) !important; flex-shrink: 0 !important; }
.rddh-spec-foot {
	display: flex !important; align-items: center !important; justify-content: space-between !important;
	margin-top: auto !important; padding-top: 14px !important; border-top: 1px solid var(--sl2, #f4f3f8);
}
.rddh-spec-price { font-size: .85rem; color: var(--ink, #111827) !important; font-weight: 700; }
.rddh-spec-price span { font-weight: 500; color: var(--fnt, #6b7280) !important; font-size: .75rem; }
.rddh-spec-arrow {
	display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: .85rem; font-weight: 700;
	color: var(--rp, #5c1d77) !important; padding: 9px 16px !important; margin: -9px -16px !important;
	border-radius: 100px; border: 1px solid transparent; transition: all .2s ease;
}
.rddh-spec-card:hover .rddh-spec-arrow { background: var(--rp, #5c1d77); color: #fff !important; gap: 9px !important; border-color: var(--rp, #5c1d77); }

/* ── Load more button row ─────────────────────────────────────────────────── */
.rddh-related__more-wrap {
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

/* ── Mobile: horizontal snap-scroll ──────────────────────────────────────── */
@media (max-width: 640px) {
	.rddh-related__grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 14px;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.rddh-related__grid::-webkit-scrollbar { display: none; }

	.rddh-spec-card {
		flex-shrink: 0;
		width: 75vw;
		max-width: 280px;
		scroll-snap-align: start;
	}
}

@media (max-width: 900px) {
	.rddh-related__grid--4col { grid-template-columns: repeat(2, 1fr); }
	.rddh-related__grid--3col { grid-template-columns: repeat(2, 1fr); }
}

/* ── Admin meta box – related ─────────────────────────────────────────────── */
.rddh-meta-box--related { margin-top: 24px; }

.rddh-related-admin__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
	max-height: 360px;
	overflow-y: auto;
}

.rddh-related-admin__row {
	display: grid;
	grid-template-columns: 44px 1fr auto 140px;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	background: #fafafa;
	border: 1px solid var(--bdr, #e5e7eb);
	transition: opacity 0.2s;
}

.rddh-related-admin__row.is-excluded { opacity: 0.45; }

.rddh-related-admin__thumb img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
}

.rddh-related-admin__info {
	font-size: 12px;
	min-width: 0;
	overflow: hidden;
}
.rddh-related-admin__info strong {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rddh-score-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 2px 6px;
	background: var(--rpt, #ede5f5);
	color: var(--rp, #5c1d77);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
}

.rddh-related-admin__actions { display: flex; gap: 6px; }

.rddh-related-admin__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 500;
	border-radius: 5px;
	border: 1px solid var(--bdr, #e5e7eb);
	background: #fff;
	color: var(--mut, #4b5563);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.rddh-related-admin__btn:hover,
.rddh-related-admin__btn.is-active {
	background: var(--rpt, #ede5f5);
	color: var(--rp, #5c1d77);
	border-color: var(--bdrl, #ede9f7);
}
.rddh-related-admin__btn.rddh-danger.is-active {
	background: #fef2f2;
	color: var(--red, #dc2626);
	border-color: #fecaca;
}

.rddh-related-admin__manual { margin-top: 16px; }

.rddh-related-admin__footer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--bdr, #e5e7eb);
}