/* ============================================
   COMPONENTE: Tarjeta de equipo
   DS: docs/design-system.html → Patrones → Tarjeta de equipo
   Vista: template-parts/components/tarjeta-equipo.php
   Handle: santoliquido-tarjeta-equipo (lo registra includes/components.php;
   lo encola como dependencia el módulo que use la tarjeta).

   Anatomía:
     .sl-equipo-card                 article; toda la tarjeta lleva a la ficha
       __media                        marco cuadrado con la foto
         __img                        la foto entra completa (object-fit: contain)
         __badge (+ .sl-badge)        estado opcional, ej. "Nuevo ingreso"
       __body
         __title > __link             nombre; el link se estira sobre la tarjeta
         __tipo                       tipo de equipo (se ve arriba del título)
         .sl-card-action              acción opcional (patrón en style.css)

   Modificador:
     --con-accion                     deja el cuerpo listo para la Acción de tarjeta

   Mobile: initial-scale=0.6 (header.php), px CSS ≈ reales ÷ 0,6.
   ============================================ */

.sl-equipo-card {
  --sl-card-pad-x: var(--spacing-md); /* lo usa .sl-card-action */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border-grey);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* El tema legacy pone otra fuente, márgenes y alineación en títulos y links:
   la tarjeta usa Inter en todo (menos los íconos de Font Awesome). */
.sl-equipo-card :not(i) {
  font-family: var(--font-primary);
}

.sl-equipo-card:hover {
  border-color: var(--color-mid-grey);
  box-shadow: 0 4px 16px rgba(31, 58, 84, .08);
}

/* Marco cuadrado fijo: la foto entra completa sin importar su proporción
   (small_thumbs no recorta) y todas las tarjetas quedan parejas. */
.sl-equipo-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border-grey);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.sl-equipo-card__img {
  position: absolute;
  inset: var(--spacing-sm);
  display: block;
  width: calc(100% - var(--spacing-sm) * 2);
  height: calc(100% - var(--spacing-sm) * 2);
  object-fit: contain;
}

.sl-equipo-card__badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
}

.sl-equipo-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: var(--spacing-sm) var(--sl-card-pad-x) var(--spacing-md);
}

.sl-equipo-card--con-accion .sl-equipo-card__body {
  padding-bottom: 0; /* la Acción de tarjeta llega hasta el borde inferior */
}

/* El tipo se ve arriba del título, pero en el DOM va después: el lector de
   pantalla anuncia primero el equipo. */
.sl-equipo-card .sl-equipo-card__tipo {
  order: -1;
  position: relative;
  z-index: 1; /* por encima del link estirado */
  align-self: flex-start;
  font-size: var(--text-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-secondary); /* 5,74:1 sobre blanco */
  text-decoration: none;
}

.sl-equipo-card .sl-equipo-card__tipo:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.sl-equipo-card .sl-equipo-card__title {
  margin: 0 0 var(--spacing-xs);
  padding: 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.sl-equipo-card .sl-equipo-card__link {
  color: var(--color-primary);
  text-decoration: none;
}

/* Toda la tarjeta es clickeable. */
.sl-equipo-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.sl-equipo-card:hover .sl-equipo-card__link {
  text-decoration: underline;
}

/* Al pasar por la Acción de tarjeta no se subraya el título: se está por
   consultar, no por abrir la ficha. */
.sl-equipo-card:has(.sl-card-action:hover) .sl-equipo-card__link {
  text-decoration: none;
}

.sl-equipo-card__link:focus-visible {
  outline: none;
}

.sl-equipo-card__link:focus-visible::after {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .sl-equipo-card {
    --sl-card-pad-x: 20px;
  }

  .sl-equipo-card__body {
    gap: 8px;
    padding: 20px var(--sl-card-pad-x);
  }

  .sl-equipo-card .sl-equipo-card__tipo {
    font-size: 19px; /* ≈ 11,5px reales */
    line-height: 26px;
  }

  .sl-equipo-card .sl-equipo-card__title {
    font-size: 26px; /* ≈ 16px reales */
    line-height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-equipo-card {
    transition: none;
  }
}