/**
 * Plugin-side styling for the directory/search/map shortcodes.
 * Reads the same custom properties the theme defines in style.css
 * (--bbd-bg, --bbd-ink, --bbd-primary, etc.) with safe fallbacks, so the
 * plugin renders sensibly even if activated under a different theme, but
 * matches exactly under the Billboards Kenya theme.
 */
:root {
	--bbd-bg: var(--bg, #fbf9f3);
	--bbd-panel: var(--panel, #fffdfa);
	--bbd-surface-2: var(--surface-2, #f4f0e7);
	--bbd-ink: var(--ink, #1d1713);
	--bbd-ink-dark: var(--panel-ink, #1e1814);
	--bbd-muted: var(--muted, #6c635a);
	--bbd-line: var(--line, #e1dcd2);
	--bbd-primary: var(--primary, #df5200);
	--bbd-cream-text: var(--cream-text, #f7f5ef);
	--bbd-radius: var(--radius-2xl, 24px);
}

.bbd-grid { display: grid; gap: 12px; }
.bbd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bbd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bbd-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .bbd-grid-2, .bbd-grid-3, .bbd-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bbd-grid-2, .bbd-grid-3, .bbd-grid-4 { grid-template-columns: 1fr; } }

.bbd-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	border: 1px solid var(--bbd-line);
	border-radius: var(--bbd-radius);
	background: var(--bbd-surface-2);
	color: var(--bbd-ink);
	text-decoration: none;
	transition: border-color 0.15s ease;
	font-family: inherit;
}
.bbd-card:hover { border-color: var(--bbd-primary); }
.bbd-card-img { margin: -20px -20px 0; border-radius: var(--bbd-radius) var(--bbd-radius) 0 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bbd-line); }
.bbd-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bbd-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bbd-card-title { font-weight: 700; font-size: 17px; line-height: 1.3; }
.bbd-card-loc { font-size: 13px; color: var(--bbd-muted); margin-top: 4px; }
.bbd-badge-row { display: flex; gap: 6px; flex-shrink: 0; }
.bbd-badge { font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; padding: 4px 9px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; }
.bbd-badge-hot { background: var(--bbd-primary); color: var(--bbd-cream-text); }
.bbd-badge-off { background: var(--bbd-ink-dark); color: var(--bbd-cream-text); }
.bbd-card-format { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bbd-muted); }
.bbd-card-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--bbd-line); padding-top: 14px; }
.bbd-spec-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bbd-muted); margin-bottom: 3px; }
.bbd-spec-value { font-weight: 700; font-size: 14px; }
.bbd-spec-value.bbd-coords { font-weight: 600; font-size: 12.5px; }
.bbd-was { color: var(--bbd-muted); text-decoration: line-through; font-weight: 500; font-size: 12px; margin-left: 4px; }
.bbd-view-link { font-weight: 700; color: var(--bbd-primary); font-size: 13.5px; }
.bbd-card:hover .bbd-view-link { text-decoration: underline; }
.bbd-empty { color: var(--bbd-muted); }

/* filter bar */
.bbd-filter-bar {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 12px;
	border: 1px solid var(--bbd-line);
	background: var(--bbd-panel);
	border-radius: var(--bbd-radius);
	padding: 20px;
	margin-bottom: 16px;
}
.bbd-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bbd-muted); margin-bottom: 8px; }
.bbd-field input, .bbd-field select {
	width: 100%; border: 1px solid var(--bbd-line); border-radius: 10px; padding: 10px 12px;
	font-family: inherit; font-size: 14px; color: var(--bbd-ink); background: var(--bbd-bg);
}
.bbd-field input:focus, .bbd-field select:focus { outline: none; border-color: var(--bbd-primary); }
.bbd-results-meta { font-size: 13px; color: var(--bbd-muted); margin-bottom: 16px; }
@media (max-width: 900px) { .bbd-filter-bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bbd-filter-bar { grid-template-columns: 1fr; } }

/* map */
.bbd-map { width: 100%; border-radius: var(--bbd-radius); border: 1px solid var(--bbd-line); overflow: hidden; z-index: 1; }
.bbd-marker { background: transparent; border: none; }
.bbd-popup { display: flex; flex-direction: column; min-width: 180px; font-family: inherit; }
.bbd-popup-img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.bbd-popup-body { font-size: 13px; line-height: 1.5; color: var(--bbd-ink); }
.bbd-popup-body a { color: var(--bbd-primary); font-weight: 700; }
.leaflet-popup-content { margin: 10px 12px; }