/*
 * Influencer Directory Pro — the 10 documented display layouts.
 * Each layout only changes the wrapper/card presentation; markup is shared
 * (templates/parts/card.php) so every layout stays in sync automatically.
 */

/* ===== 1. Modern Grid (default) — handled by public.css base styles ===== */

/* ===== 2. Luxury Card ===== */

.idp-layout-luxury-card .idp-card {
	border-radius: 22px;
	border: 1px solid #f1e6c8;
	background: linear-gradient(180deg, #fffdf7, #ffffff);
}

.idp-layout-luxury-card .idp-card-name a {
	font-family: Georgia, 'Times New Roman', serif;
}

.idp-layout-luxury-card .idp-card-btn {
	background: #b8860b;
}

.idp-layout-luxury-card .idp-card-btn:hover {
	background: #96690a;
}

.idp-layout-luxury-card .idp-card-grade {
	background: #b8860b;
}

/* ===== 3. Masonry ===== */

.idp-layout-masonry .idp-listing-grid {
	display: block;
	column-count: var(--idp-columns, 4);
	column-gap: 24px;
}

.idp-layout-masonry .idp-card {
	break-inside: avoid;
	margin-bottom: 24px;
	display: inline-block;
	width: 100%;
}

@media (max-width: 1024px) {
	.idp-layout-masonry .idp-listing-grid { column-count: 2; }
}

@media (max-width: 640px) {
	.idp-layout-masonry .idp-listing-grid { column-count: 1; }
}

/* ===== 4. Horizontal Cards ===== */

.idp-layout-horizontal .idp-listing-grid {
	grid-template-columns: 1fr;
}

.idp-layout-horizontal .idp-card {
	flex-direction: row;
}

.idp-layout-horizontal .idp-card-media {
	width: 220px;
	aspect-ratio: auto;
	flex: none;
}

.idp-layout-horizontal .idp-card-body {
	flex: 1;
}

.idp-layout-horizontal .idp-card-stats {
	grid-template-columns: repeat(3, minmax(80px, 1fr));
}

@media (max-width: 640px) {
	.idp-layout-horizontal .idp-card { flex-direction: column; }
	.idp-layout-horizontal .idp-card-media { width: 100%; aspect-ratio: 4/3; }
}

/* ===== 5 & 6. Carousel / Slider (shared track behaviour) ===== */

.idp-track-layout {
	position: relative;
}

.idp-track-layout .idp-listing-grid {
	display: flex;
	grid-template-columns: none;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}

.idp-track-layout .idp-listing-grid::-webkit-scrollbar {
	height: 6px;
}

.idp-track-layout .idp-listing-grid::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 999px;
}

.idp-track-layout .idp-card {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.idp-layout-slider .idp-card {
	width: 100%;
}

.idp-layout-carousel .idp-card {
	width: calc((100% / var(--idp-columns, 4)) - 16px);
}

@media (max-width: 1024px) {
	.idp-layout-carousel .idp-card { width: calc(50% - 12px); }
}

@media (max-width: 640px) {
	.idp-layout-carousel .idp-card { width: 85%; }
}

.idp-track-controls {
	position: absolute;
	top: -52px;
	right: 0;
	display: flex;
	gap: 8px;
}

.idp-track-prev,
.idp-track-next {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #d1d5db;
	background: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.idp-track-prev:hover,
.idp-track-next:hover {
	background: #111827;
	color: #fff;
}

/* ===== 7. Minimal ===== */

.idp-layout-minimal .idp-card {
	box-shadow: none;
	border: 1px solid #eef0f3;
	border-radius: 10px;
}

.idp-layout-minimal .idp-card:hover {
	transform: none;
	box-shadow: 0 4px 10px rgba(15,23,42,.06);
}

.idp-layout-minimal .idp-card-stats,
.idp-layout-minimal .idp-card-platforms {
	display: none;
}

.idp-layout-minimal .idp-card-body {
	padding: 12px;
}

/* ===== 8. Dark Mode ===== */

.idp-layout-dark-mode {
	background: #0b0f19;
	padding: 24px;
	border-radius: 18px;
}

.idp-layout-dark-mode .idp-card {
	background: #151b2c;
	box-shadow: none;
	border: 1px solid #232a3d;
}

.idp-layout-dark-mode .idp-card-name a {
	color: #f8fafc;
}

.idp-layout-dark-mode .idp-card-meta,
.idp-layout-dark-mode .idp-stat-label {
	color: #94a3b8;
}

.idp-layout-dark-mode .idp-stat-value {
	color: #f1f5f9;
}

.idp-layout-dark-mode .idp-card-stats {
	border-color: #232a3d;
}

.idp-layout-dark-mode .idp-card-category {
	background: #1e293b;
	color: #93c5fd;
}

.idp-layout-dark-mode .idp-no-results {
	color: #94a3b8;
}

/* ===== 9. Agency Style ===== */

.idp-layout-agency .idp-card {
	border-radius: 6px;
	box-shadow: none;
	border: 1px solid #111827;
}

.idp-layout-agency .idp-card-body {
	padding: 18px;
}

.idp-layout-agency .idp-card-name {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 15px;
}

.idp-layout-agency .idp-card-btn {
	border-radius: 0;
	background: transparent;
	color: #111827 !important;
	border: 1px solid #111827;
}

.idp-layout-agency .idp-card-btn:hover {
	background: #111827;
	color: #fff !important;
}

.idp-layout-agency .idp-card-grade {
	border-radius: 0;
}

/* ===== 10. Premium Luxury Style ===== */

.idp-layout-premium-luxury .idp-card {
	border-radius: 24px;
	background: linear-gradient(160deg, #1a1a2e, #16213e);
	color: #f5f0e6;
	border: 1px solid #caa24a;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.idp-layout-premium-luxury .idp-card-name a {
	color: #f5f0e6;
}

.idp-layout-premium-luxury .idp-card-meta,
.idp-layout-premium-luxury .idp-stat-label {
	color: #cbb98f;
}

.idp-layout-premium-luxury .idp-stat-value {
	color: #f5f0e6;
}

.idp-layout-premium-luxury .idp-card-category {
	background: rgba(202,162,74,.15);
	color: #e8cf8a;
}

.idp-layout-premium-luxury .idp-card-stats {
	border-color: rgba(202,162,74,.25);
}

.idp-layout-premium-luxury .idp-card-price {
	color: #e8cf8a;
}

.idp-layout-premium-luxury .idp-card-btn {
	background: linear-gradient(135deg, #caa24a, #e8cf8a);
	color: #1a1a2e !important;
	font-weight: 700;
}

.idp-layout-premium-luxury .idp-card-grade {
	background: #caa24a;
	color: #1a1a2e;
}