/* =========================================================
   TurfPronostics PMU – Cheval (Detail)
   File: assets/css/tppmu-cheval.css
   Objectif: même identité visuelle que tppmu-partants.css
   ========================================================= */

:root{
  --tp-green: #2d810e;
  --tp-green-2: #0aa35a;
  --tp-bg: #f3f5f4;
  --tp-text: #0f1a12;
  --tp-muted: #6b7280;
  --tp-border: #e7ece8;
  --tp-soft: #f7f9f8;
  --tp-shadow: 0 18px 50px rgba(0,0,0,.10);
  --tp-shadow-soft: 0 10px 26px rgba(0,0,0,.08);
  --tp-radius: 18px;
}

/* Reset / Integration */
.tppmu-cheval,
.tppmu-cheval *{
  box-sizing: border-box;
}

.tppmu-cheval table,
.tppmu-cheval th,
.tppmu-cheval td{
  box-shadow: none !important;
}

/* ====== WRAPPER CARD ====== */
.tppmu-cheval{
  max-width: 1240px;
  margin: 22px auto 34px;
  padding: 22px 22px 18px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);

  background:
    radial-gradient(1200px 280px at 20% -40%, rgba(45,129,14,.12), transparent 55%),
    radial-gradient(1200px 280px at 85% -40%, rgba(10,163,90,.10), transparent 55%),
    #fff;
}

/* Back link */
.tppmu-cheval p a{
  color: #142116;
  text-decoration: none;
  border-bottom: 2px solid rgba(45,129,14,.18);
  transition: color .15s ease, border-color .15s ease;
  padding-bottom: 1px;
  font-weight: 800;
}
.tppmu-cheval p a:hover{
  color: var(--tp-green);
  border-color: rgba(45,129,14,.55);
}

/* Titles */
.tppmu-cheval h2{
  margin: 8px 0 10px;
  font-size: 28px;
  line-height: 1.15;
  color: var(--tp-text);
  font-weight: 950;
  letter-spacing: .2px;
}

.tppmu-cheval h3{
  margin: 16px 0 10px;
  font-size: 16px;
  line-height: 1.25;
  color: var(--tp-text);
  font-weight: 950;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.tppmu-cheval h3::after{
  content: "";
  display: block;
  width: 88px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tp-green), var(--tp-green-2));
  opacity: .95;
  margin-top: 10px;
}

/* Info lines */
.tppmu-cheval p{
  margin: 6px 0;
  color: #17251c;
  font-size: 14px;
}
.tppmu-cheval p strong{
  font-weight: 900;
}
.tppmu-cheval p:nth-of-type(4){
  color: var(--tp-muted);
}

/* ====== TABLE BASE (desktop) ====== */
.tppmu-cheval .tppmu-table{
  width: 100%;
  margin-top: 14px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--tp-shadow-soft);
  border: 1px solid var(--tp-border);
}

/* Header */
.tppmu-cheval .tppmu-table thead{
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
.tppmu-cheval .tppmu-table thead th{
  background: #f2f5f3;
  color: #17251c;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 14px 14px;
  border-bottom: 1px solid var(--tp-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Body */
.tppmu-cheval .tppmu-table tbody td{
  padding: 14px 14px;
  border-bottom: 1px solid #eef2ef;
  color: var(--tp-text);
  font-size: 14px;
  vertical-align: middle;
}

/* Zebra + hover */
.tppmu-cheval .tppmu-table tbody tr:nth-child(odd){ background:#fff; }
.tppmu-cheval .tppmu-table tbody tr:nth-child(even){ background: var(--tp-soft); }
.tppmu-cheval .tppmu-table tbody tr:hover{ background: rgba(45,129,14,.08); }
.tppmu-cheval .tppmu-table tbody tr:last-child td{ border-bottom: none; }

/* Alignment */
.tppmu-cheval .tppmu-table td:nth-child(2),  /* DATE */
.tppmu-cheval .tppmu-table td:nth-child(6),  /* DT */
.tppmu-cheval .tppmu-table td:nth-child(7),  /* SP */
.tppmu-cheval .tppmu-table td:nth-child(8),  /* CTE */
.tppmu-cheval .tppmu-table td:nth-child(9){  /* CL */
  text-align: center;
  white-space: nowrap;
}
.tppmu-cheval .tppmu-table td:nth-child(8),
.tppmu-cheval .tppmu-table td:nth-child(9){
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.tppmu-cheval .tppmu-table td:nth-child(1),
.tppmu-cheval .tppmu-table td:nth-child(5){
  white-space: nowrap;
}
.tppmu-cheval .tppmu-table td:nth-child(3),
.tppmu-cheval .tppmu-table td:nth-child(4){
  white-space: nowrap;
}

/* ====== Responsive base ====== */
@media (max-width: 1024px){
  .tppmu-cheval{
    padding: 18px 16px;
    border-radius: 16px;
    overflow-x: hidden; /* sin scroll lateral */
  }
  .tppmu-cheval h2{ font-size: 24px; }
}

/* ====== Mobile/Tablet: MISMO DISEÑO QUE PARTICIPANTS (table -> cards compact) ====== */
@media (max-width: 1024px){

  /* ocultar cabecera */
  .tppmu-cheval .tppmu-table thead{ display:none; }

  /* tabla -> bloques */
  .tppmu-cheval .tppmu-table,
  .tppmu-cheval .tppmu-table tbody,
  .tppmu-cheval .tppmu-table tr,
  .tppmu-cheval .tppmu-table td{
    display:block;
    width:100%;
  }

  /* quitar look desktop */
  .tppmu-cheval .tppmu-table{
    border:none;
    background:transparent;
    box-shadow:none;
    border-radius: 0;
    overflow: visible;
    min-width: 0 !important;
  }

  /* cada fila como card */
  .tppmu-cheval .tppmu-table tbody tr{
    margin: 0 0 10px 0;
    border: 1px solid var(--tp-border);
    border-radius: 14px;
    overflow:hidden;
    background:#fff;
    box-shadow: var(--tp-shadow-soft);
  }

  /* celdas compactas: label | valor */
  .tppmu-cheval .tppmu-table tbody td{
    padding: 7px 10px !important;
    border-bottom: 1px solid #eef2ef;
    font-size: 12px;
    line-height: 1.15;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .tppmu-cheval .tppmu-table tbody td:last-child{
    border-bottom: none;
  }

  .tppmu-cheval .tppmu-table tbody td::before{
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--tp-muted);
    text-align: left;
  }

  /* un poco más fuerte CTE/CL */
  .tppmu-cheval .tppmu-table tbody td[data-label="CTE"],
  .tppmu-cheval .tppmu-table tbody td[data-label="CL"]{
    font-weight: 900;
  }
}

/* Tablet: 2 columnas por card (reduce altura) */
@media (min-width: 600px) and (max-width: 1024px){
  .tppmu-cheval .tppmu-table tbody tr{
    display:grid;
    grid-template-columns: 1fr 1fr;
  }

  /* cada td ocupa su celda de grid */
  .tppmu-cheval .tppmu-table tbody td{
    width: auto;
  }
}

/* ===== Tablet: cards en 2 columnas ===== */
@media (min-width: 600px) and (max-width: 1024px){

  /* El tbody se convierte en grid de 2 columnas */
  .tppmu-cheval .tppmu-table tbody{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* Cada card ocupa una columna */
  .tppmu-cheval .tppmu-table tbody tr{
    display: block !important;
    margin: 0 !important; /* el gap ya maneja el espacio */
  }
}

/* ===== Tablet: cards en 2 columnas (FIX) ===== */
@media (min-width: 600px) and (max-width: 1024px){

  /* El contenedor de cards (tbody) en 2 columnas */
  .tppmu-cheval .tppmu-table tbody{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* Cada card (tr) debe permitir que el grid la controle (NO width:100%) */
  .tppmu-cheval .tppmu-table tbody tr{
    width: auto !important;        /* <- clave */
    margin: 0 !important;          /* gap ya separa */
    display: block !important;
    grid-column: auto !important;  /* por si alguna regla lo estira */
  }
}

@media (min-width: 600px) and (max-width: 1024px){
  .tppmu-cheval .tppmu-table{
    display: block !important;
    width: 100% !important;
  }
}

/* =================================================
   GRID RESPONSIVE DE CARDS
   - Mobile: 2 columnas
   - Tablet: 3 columnas
   ================================================= */

/* 📱 CELULAR → 2 columnas */
@media (max-width: 599px){

  .tppmu-cheval .tppmu-table tbody{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .tppmu-cheval .tppmu-table tbody tr{
    width: auto !important;
    margin: 0 !important;
    display: block !important;
  }
}


/* 📲 TABLETA → 3 columnas */
@media (min-width: 600px) and (max-width: 1024px){

  .tppmu-cheval .tppmu-table tbody{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }

  .tppmu-cheval .tppmu-table tbody tr{
    width: auto !important;
    margin: 0 !important;
    display: block !important;
  }
}