/* JDServer-Webs v6.0 — modules/webcams/webcams.css (v1.4 - pair cams taller) */
#webcams{ margin: 14px 0 28px; }
.wc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.wc-title{ font-weight:600; }

/* Grid rows */
.wc-row{ display:grid; gap:12px; margin-bottom: 12px; }
.wc-row.wc-pano{ grid-template-columns: 1fr; }
.wc-row.wc-pair{ grid-template-columns: repeat(2, 1fr); }

/* Cards */
.wc-fig, .wc-ph{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  padding: 0;
  margin: 0;
}

/* Panorámicas: no tocar relación, sin recortes */
.wc-row.wc-pano .wc-fig{ display:block; }
.wc-row.wc-pano .wc-fig img{
  display:block; width:100%; height:auto; object-fit: contain;
}

/* Pares: más altas (ligero recorte controlado para que no queden "apaisadas") */
.wc-row.wc-pair .wc-fig{ aspect-ratio: 3 / 2; }             /* escritorio/tablet: un poco más alto */
.wc-row.wc-pair .wc-fig img{ width:100%; height:100%; object-fit: cover; }

/* Placeholder */
.wc-ph{ color: var(--muted); font-size: .95rem; display:flex; align-items:center; justify-content:center; }

/* Mobile: aún más altas y full-bleed horizontal */
@media (max-width: 520px){
  .wc-row{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .wc-row.wc-pair{ grid-template-columns: repeat(2, 1fr); }
  .wc-row.wc-pano{ grid-template-columns: 1fr; }

  /* Pares: más altura para evitar look "apaisado" */
  .wc-row.wc-pair .wc-fig{ aspect-ratio: 4 / 3; }           /* móvil: aún más alto */
}