/* ========================================
   RESPONSIVE - Centralized breakpoints
   All media queries & container queries
   ======================================== */

/* ========== CONTAINER QUERIES (LOOPS) ========== */
/*
  Breakpoints conteneur (largeur de .loops-stack) :
  > 780px  : layout complet  — cover | info | waveform | meta | actions
  680-780px: sans waveform   — cover | info | meta | actions
  480-680px: meta réduite    — cover | info | meta | actions (méta + petite)
  < 480px  : meta masquée   — cover | info | actions  (inline-meta dans info)
  < 340px  : très petit      — icônes réduites

  Tags  : visibles >= 840px
  Inline-meta : visible < 480px (BPM · KEY · Cr. dans la colonne info)
*/

/* ── 1024px+ : cartes loops un peu plus grandes (grands écrans) ── */
@container (min-width: 1024px) {
  .loop-card:not([data-compact]) {
    --lc-cover: 48px;
    --lc-wave: clamp(118px, 30%, 330px);
    --lc-gap: 17px;
    --lc-pad: 11px 0;
  }
  .loop-card:not([data-compact]) .loop-waveform {
    height: 32px;
  }
}

/* ── 840px+ : tags visibles en permanence ─────────────────── */
@container (min-width: 840px) {
  .loop-card .loop-tags {
    display: flex;
  }
}
@container (max-width: 839px) {
  .loop-card .loop-tags {
    display: none;
  }
}

/* ── < 800px : réduire légèrement la waveform ── */
@container (max-width: 800px) {
  .loop-card {
    --lc-wave: clamp(80px, 22%, 200px);
  }
}

/* ── < 560px : cacher la waveform, info prend 1fr ─────── */
@container (max-width: 560px) {
  .loop-card:not([data-compact]):not([data-no-waveform]) {
    grid-template-columns: var(--lc-cover) minmax(110px, 1fr) var(--lc-meta-width) min-content;
    grid-template-areas: "cover info meta actions";
  }
  .loop-card:not([data-compact]):not([data-no-waveform]) .loop-waveform {
    display: none;
  }
  .loop-card {
    --lc-gap: 10px;
    --lc-meta-inner-gap: 10px;
    --lc-meta-pad-x: 4px;
  }
  .loop-card .loop-meta {
    padding: 0 var(--lc-meta-pad-x);
  }
  .loop-card .loop-meta .meta-value {
    font-size: 11px;
  }
  .loop-card .loop-meta .meta-label {
    font-size: var(--font-size-xs);
  }
}

/* ── < 540px : masquer LICENSE dans la meta ──────────────── */
@container (max-width: 540px) {
  .loop-card .loop-meta .meta-item[class*="license-"] {
    display: none;
  }
  .loop-card {
    --lc-meta-width: calc(
      var(--lc-meta-bpm) + var(--lc-meta-key) + var(--lc-meta-cr)
      + (2 * var(--lc-meta-inner-gap)) + (2 * var(--lc-meta-pad-x))
    );
  }
  .loop-card .loop-meta {
    grid-template-columns: var(--lc-meta-bpm) var(--lc-meta-key) var(--lc-meta-cr);
  }
}

/* ── < 480px : masquer toute la meta, montrer inline-meta ── */
@container (max-width: 480px) {
  .loop-card:not([data-compact]) {
    grid-template-columns: var(--lc-cover) minmax(90px, 1fr) min-content;
    grid-template-areas: "cover info actions";
  }
  .loop-card:not([data-compact]) .loop-meta {
    display: none;
  }
  .loop-card:not([data-compact]) .loop-waveform {
    display: none;
  }
  .loop-card:not([data-compact]) .loop-inline-meta {
    display: block;
  }
}

/* ── < 360px : icônes réduites ──────────────────────────── */
@container (max-width: 360px) {
  .loop-card {
    --lc-cover: 30px;
    --lc-play:  28px;
    --lc-gap:   5px;
    --lc-pad:   4px 6px;
  }
  .loop-card .play-container svg {
    width: 10px;
    height: 10px;
  }
  .loop-card .loop-info h3 {
    font-size: 11px;
  }
  .loop-card .loop-info p {
    font-size: 9px;
  }
  .loop-card .like-container,
  .loop-card .Btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
  .loop-card .like-container svg,
  .loop-card .Btn .svgIcon {
    width: 14px;
    height: 14px;
  }
}


/* ========== FILTER BAR (media queries inchangées) ========== */

/* ── 1024-1199px ──────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1199px) {
  .loops-filter-bar {
    padding: 0.3rem 0 1rem;
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }
}

/* ── 768-1023px ───────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .loops-filter-bar {
    padding: 0.3rem 0 1rem;
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }
}

/* ── < 640px ──────────────────────────────────────────────── */
@media (max-width: 639px) {
  .loops-filter-bar {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .filter-search {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
}