/*
 * SECTION:  Panels: series, authors and sellers (shared grid and panel style)
 * File:     assets/css/sections/sol-panel.css
 * Used by:  [sol_series], [sol_authors], [sol_sellers], [sol_journal]. Delete only if all of these are removed.
 * To remove: delete this file and its line in inc/assets.php (handle "sol-panel").
 */

.sol-grid-3,
.sol-grid-4 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.sol-grid-3 {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.sol-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	.sol-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	.sol-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

.sol-panel {
	display: flex;
	gap: 16px;
	align-items: center;
	min-width: 0;
	padding: 18px;
	text-decoration: none;
	color: var(--sol-text);
	background: var(--sol-surface);
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-md);
}

.sol-panel:hover {
	border-color: var(--sol-gold-text);
	color: var(--sol-text);
}

.sol-panel h3 {
	margin: 0;
	color: var(--sol-text);
	font: 600 1rem var(--sol-font-sans);
	overflow-wrap: anywhere;
}

.sol-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--sol-accent);
	color: var(--sol-accent-ink);
	font: 600 1.5rem var(--sol-font-serif);
	overflow: hidden;
}

.sol-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}