/**
 * assets/css/jnpr-list.css
 *
 * Styles du shortcode [jardin_points_relais_liste].
 *
 * Format "tableau" : un <table> classique au-delà de 700px. En dessous,
 * chaque <tr> devient une carte (même langage visuel que .jnpr-map-card
 * dans jnpr-map.css, pour rester cohérent avec la carte interactive) : les
 * <td> passent en colonne via display:flex sur <tr>, dans l'ordre où elles
 * apparaissent déjà dans le tableau (Bassin / Nom / Adresse / Téléphone /
 * Horaires) — aucun réordonnancement CSS nécessaire. Les libellés de
 * colonnes ("Bassin :", "Adresse :"…) ne sont plus affichés visuellement en
 * mobile : le sens se lit par la mise en forme (badge, titre en gras, icône)
 * plutôt que par un préfixe textuel — mais restent lisibles pour les
 * lecteurs d'écran via .jnpr-list-sr-only.
 */

.jnpr-list-wrap {
  --jnpr-list-green: #52a74f;
  --jnpr-list-border: #e4e6e9;
  --jnpr-list-text-muted: #666;
  overflow-x: auto;
}

.jnpr-list-empty {
  color: var(--jnpr-list-text-muted);
}

.jnpr-list-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Format liste à puce ─────────────────────────────────────────── */

.jnpr-list-bullets {
  margin: 0;
  padding-left: 1.4em;
}

.jnpr-list-bullets li {
  margin-bottom: 6px;
}

/* ── Format tableau : bureau ─────────────────────────────────────── */

.jnpr-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.jnpr-list-table th,
.jnpr-list-table td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--jnpr-list-border);
  vertical-align: top;
}

.jnpr-list-table th {
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #ccc;
}

.jnpr-list-table tbody tr:hover {
  background: #fafafa;
}

.jnpr-list-cell--title {
  font-weight: 600;
}

.jnpr-list-cell--phone a {
  color: inherit;
  text-decoration: none;
}

.jnpr-list-cell--phone a:hover {
  color: var(--jnpr-list-green);
  text-decoration: underline;
}

.jnpr-list-hours-line + .jnpr-list-hours-line {
  margin-top: 2px;
}

.jnpr-list-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(82, 167, 79, 0.12);
  color: var(--jnpr-list-green);
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Format tableau : mobile (cartes) ────────────────────────────── */

@media (max-width: 700px) {
  .jnpr-list-table thead {
    display: none;
  }

  .jnpr-list-table,
  .jnpr-list-table tbody {
    display: block;
    width: 100%;
  }

  .jnpr-list-table tr {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--jnpr-list-border) !important;
    border-radius: 10px;
    background: #fff;
  }

  .jnpr-list-table tbody tr:hover {
    background: #fff;
  }

  .jnpr-list-table td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .jnpr-list-cell--bassin:empty {
    display: none;
  }

  .jnpr-list-cell--title {
    font-size: 1.05em;
  }

  .jnpr-list-cell--address {
    color: var(--jnpr-list-text-muted);
    font-size: 0.9em;
  }

  .jnpr-list-cell--address::before {
    content: "📍 ";
  }

  .jnpr-list-cell--phone::before {
    content: "📞 ";
  }

  .jnpr-list-cell--hours {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #eee;
    color: var(--jnpr-list-text-muted);
    font-size: 0.85em;
  }

  .jnpr-list-cell--hours::before {
    content: "🕒";
    display: block;
    margin-bottom: 4px;
  }
}