/* ===================================================== */
/* TP CURSOS – LAYOUT LISTA HORIZONTAL (DEFINITIVO) */
/* ===================================================== */

.tp-cursos__card{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:18px !important;
  padding:18px 20px !important;
  border-radius:20px !important;
}

/* ========================= */
/* THUMB PEQUEÑO CUADRADO */
/* ========================= */

.tp-cursos__thumb{
  flex:0 0 72px !important;
  width:72px !important;
  height:72px !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

.tp-cursos__thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

/* ========================= */
/* BODY (TEXTO) */
/* ========================= */

.tp-cursos__body{
  flex:1 1 auto !important;
  padding:0 !important;
}

.tp-cursos__cardtitle{
  font-size:16px !important;
  line-height:1.3 !important;
  margin:0 !important;

  display:-webkit-box;
  -webkit-line-clamp:2;       /* máx 2 líneas */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ========================= */
/* ACTIONS (BOTONES A LA DERECHA) */
/* ========================= */

.tp-cursos__actions{
  flex:0 0 190px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:0 !important;
}

/* Botones un poco más compactos */
.tp-cursos__btn{
  padding:10px 14px !important;
  border-radius:12px !important;
  font-size:14px !important;
}

/* ========================= */
/* GRID – 2 COLUMNAS */
/* ========================= */

.tp-cursos__list{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:20px 28px !important;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width:1024px){
  .tp-cursos__list{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:640px){
  .tp-cursos__card{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .tp-cursos__actions{
    width:100% !important;
    flex-direction:row !important;
  }

  .tp-cursos__btn{
    flex:1 1 auto !important;
    text-align:center !important;
  }
}

/* ========================= */
/* MOBILE FIX (solo mobile)  */
/* ========================= */

@media (max-width:640px){

  /* Card: columna ok, pero con aire */
  .tp-cursos__card{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
  }

  /* Titulo: en mobile mejor 3 lineas o sin clamp */
  .tp-cursos__cardtitle{
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
  }

  /* Actions: reset del flex-basis fijo de desktop */
  .tp-cursos__actions{
    width:100% !important;
    flex: 1 1 auto !important;     /* ANULA el 0 0 190px */
    flex-basis: auto !important;
    min-width: 0 !important;

    display:flex !important;
    flex-direction:row !important;
    gap:12px !important;

    align-items: stretch !important;
    justify-content: space-between !important;

    padding:0 !important;
    margin-top: 6px !important;
  }

  /* Botones: matar “ovalo gigante” venga de donde venga */
  .tp-cursos__btn{
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 46px !important;

    padding: 12px 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 1.15 !important;
    text-align: center !important;

    /* por si algun estilo externo mete circulos */
    aspect-ratio: auto !important;
  }
}