/* ── RESPONSIVE — UndergroundTekno 2026 ─────────────────── */

/* ── xs → sm (< 576px) ───────────────────────────────────── */

@media (max-width: 575px) {
	.pcard-body { padding: 0.6rem 0.75rem 0.4rem; }
	.pcard-title { font-size: 0.85rem; }
	.pcard-footer { padding: 0.5rem 0.75rem; }
	.pcard-price { font-size: 0.85rem; }
	.pcard-chip { font-size: 0.55rem; padding: 0.12rem 0.35rem; }

	.plist-row { padding: 0.6rem 0.75rem; gap: 0.5rem; }
	.plist-img { width: 44px; height: 44px; }
	.plist-title { font-size: 0.82rem; }
	.plist-price { font-size: 0.82rem; min-width: 40px; }

	.section-title { font-size: 1.15rem; }
	.demo-banner-title { font-size: 1.35rem; }

	.player-track-info { width: 140px; }
	.player-track-title { font-size: 0.8rem; }
}

/* ── sm → md (576–767px) ─────────────────────────────────── */

@media (min-width: 576px) {
	.pcard-play-btn { width: 56px; height: 56px; font-size: 1.2rem; }
}

/* ── md (≥ 768px) ─────────────────────────────────────────── */

@media (min-width: 768px) {
	.h1-title { font-size: 1.75rem; padding: 1.25rem 0; }
	.h2-title { font-size: 1.4rem; padding: 1.25rem 0; }

	.home-section { padding: 3rem 2rem; }

	.section-title { font-size: 1.6rem; }
	.section-header { margin-bottom: 2rem; }

	.plist-img { width: 60px; height: 60px; }

	#player-track-wavform-outer { width: 50%; }

	#sidenav-filters { max-width: 480px !important; }

	.demo-banner-inner { padding: 0 1.5rem; }
	.demo-banner-title { font-size: 2rem; }
}

/* ── lg (≥ 992px) ─────────────────────────────────────────── */

@media (min-width: 992px) {
	.pcard:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 32px rgba(0,0,0,.7), 0 0 0 1px rgba(229,126,34,.25);
	}

	.home-section { padding: 3.5rem 2rem; }

	.player-track-info { width: 260px; }
}

/* ── xl (≥ 1200px) ────────────────────────────────────────── */

@media (min-width: 1200px) {
	#sidenav-top { min-width: 280px; }
	#player-track-wavform-outer { width: 70%; }
	.section-title { font-size: 1.75rem; }
	.demo-banner-title { font-size: 2.2rem; }
}

/* ── xxl (≥ 1400px) ───────────────────────────────────────── */

@media (min-width: 1400px) {
	.home-section { padding: 4rem 3rem; }
	.pcard-title { font-size: 1rem; }
}

/* ════════════════════════════════════════════════════════════
   VUE LISTE SUR MOBILE (parité site physique)
   Sur petit écran, la grille de cartes des sections d'accueil est
   plus lisible en RANGÉES pleine largeur : pochette | titre/label/
   genre/artistes | prix + actions. Le catalogue a déjà sa vue liste
   serveur (_product-list) ; ici on ne touche QUE l'accueil.
   Pur CSS, scopé à .home-section .row (la seule grille produits des
   sections) -> aucun edit PHP/JS, effet immédiat via le bust .cache.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
	/* 1 produit par ligne : chaque colonne passe pleine largeur, interligne serré. */
	.home-section .row { --bs-gutter-y: .5rem; }
	.home-section .row > [class*="col-"] {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		margin-bottom: 0 !important;
	}

	/* La carte devient une rangée horizontale. */
	.home-section .pcard {
		flex-direction: row;
		align-items: center;
	}
	.home-section .pcard:hover { transform: none; }

	/* Pochette compacte à gauche (l'overlay play et le badge type n'ont pas de
	   sens sur une vignette 64px : le pied a déjà son bouton play). */
	.home-section .pcard-cover {
		flex: 0 0 64px;
		width: 64px;
		height: 64px;
		aspect-ratio: auto;
	}
	.home-section .pcard-overlay,
	.home-section .pcard-type-badge,
	.home-section .pcard-history-icon { display: none !important; }

	/* Corps : titre + métas empilés, ellipsés, centrés verticalement. */
	.home-section .pcard-body {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: .1rem;
		padding: .4rem .75rem;
	}
	.home-section .pcard-body > * { margin: 0 !important; }
	.home-section .pcard-title,
	.home-section .pcard-meta,
	.home-section .pcard-artists {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	/* Pied : prix + actions poussés à droite, sans panneau sombre ni bordure. */
	.home-section .pcard-footer {
		flex: 0 0 auto;
		margin-left: auto;
		gap: .5rem;
		padding: .4rem .75rem;
		background: transparent;
		border-top: 0;
	}
	.home-section .pcard-chips { display: none; }
	.home-section .pcard-price { white-space: nowrap; }
}