/*! JDServer-Webs v6.1 — modules/networks/networks.css (dark-safe, FULL)
    - 3 col en desktop, 2 en tablet, 1 en móvil
    - Tarjeta coherente con nearcams/radar
    - Fondos y bordes tematizados (light/dark)
*/

#networks{ margin:16px 0 28px; }
#networks > h3{ font-weight:600; margin:0 0 12px; }

/* Grid responsiva */
.networks-grid{
  display:grid;
  grid-template-columns: 1fr;   /* móvil */
  gap: 14px;
}
@media (min-width: 700px){
  .networks-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .networks-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Tarjeta */
.network-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  display: grid;
  grid-template-rows: auto auto; /* imagen + pie */
  min-height: 160px;
}
.network-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* Enlace “clickable” entero (si lo usas como wrapper) */
.network-link{
  display: grid;
  grid-template-rows: auto auto;
  text-decoration: none;
  color: inherit;
}

/* Marco de imagen (dark-safe) */
.network-img-wrap{
  /* IMPORTANTÍSIMO: nada de blanco fijo aquí */
  background: var(--card);
  padding: 10px;
  display: grid;
  place-items: center;
}
.network-img-wrap a{
  display:block;
  border-radius: calc(var(--radius) - 4px);
  overflow:hidden;
}
.network-img{
  display:block;
  width: 100%;
  height: auto;
  max-height: 140px;          /* evita estirar demasiado en desktop */
  object-fit: contain;        /* quepa la “pastilla” sin recortar */
}

/* Pie/leyenda (leve tinte sobre la tarjeta para separarlo) */
.network-foot{
  background: color-mix(in oklab, var(--card) 88%, var(--fg) 12%);
  color: var(--fg);
  border-top: 1px solid var(--border);
  padding: 9px 12px;
  text-align: center;
  font: 600 13px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.network-foot small{
  display:block;
  margin-top: 2px;
  font: 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--muted);
  font-weight: 500;
}

/* Por si alguna “pastilla” viene con borde blanco, que no desborde */
.network-img{ image-rendering: auto; }