/* ZihWeb Listcontent - listados de contenido (secciones, blog, [posts]) y artículo.
   Prefijo .zwl- para no chocar con Bootstrap 3 ni con las plantillas NOBOOTSTRAP.
   Hereda color de texto y fondo del sitio (plantillas claras u oscuras).
   Medidas en em, no rem: Bootstrap 3 fija html{font-size:10px}.
   La base es ext/listcontent.php; las extensiones hijas (blog, surfspots…) añaden el modificador .zwl--<tipo>
   y, si lo necesitan, su propia hoja.

   Estructura:
     <div class="listContent zwl zwl--<tipo>">
       <div class="zwl-grid" style="--zwl-cols:3;--zwl-ratio:16/10">
         <article class="zwl-card"><a class="zwl-card-link" href="…">
           <div class="zwl-media"><img …></div>            (.zwl-media--empty sin imagen)
           <div class="zwl-body"><h2 class="zwl-title">…</h2><p class="zwl-excerpt">…</p><time class="zwl-date">…</time></div>
         </a></article>
         <div class="zwl-ad">anuncio a lo ancho</div>
*/

.zwl {
  --zwl-line: rgba(127, 127, 127, .22);
  --zwl-soft: rgba(127, 127, 127, .06);
  --zwl-accent: var(--g-accent, #0b6fd6);
  --zwl-radius: 14px;
  clear: both;
  margin: 1.5em 0 2em;
}

/* ---------- Rejilla ---------- */
.zwl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5em;
}
@media (min-width: 480px) {
  .zwl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25em; }
  .zwl-grid[style*="--zwl-cols:1"] { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .zwl-grid { grid-template-columns: repeat(var(--zwl-cols, 3), minmax(0, 1fr)); gap: 1.5em; }
}
.zwl-ad { grid-column: 1 / -1; min-width: 0; text-align: center; }

/* ---------- Tarjeta ---------- */
.zwl-card {
  min-width: 0;
  border: 1px solid var(--zwl-line);
  border-radius: var(--zwl-radius);
  background: var(--zwl-soft);
  overflow: hidden;
}
.zwl .zwl-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.zwl .zwl-card-link:focus-visible { outline: 3px solid var(--zwl-accent); outline-offset: -3px; border-radius: var(--zwl-radius); }

.zwl-media {
  position: relative;
  aspect-ratio: var(--zwl-ratio, 16 / 10);
  overflow: hidden;
  background: rgba(127, 127, 127, .15);
}
.zwl .zwl-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Sin portada: inicial del título sobre un degradado suave */
.zwl-media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(11, 111, 214, .18), rgba(127, 127, 127, .12));
}
.zwl-media--empty span { font-size: 3em; font-weight: 700; line-height: 1; opacity: .45; text-transform: uppercase; }

.zwl-body { display: flex; flex: 1; flex-direction: column; gap: .4em; padding: .9em 1em 1.1em; }
.zwl .zwl-title {
  margin: 0;
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.zwl .zwl-excerpt {
  margin: 0;
  font-size: .92em;
  line-height: 1.5;
  opacity: .78;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.zwl-date { margin-top: auto; padding-top: .3em; font-size: .82em; opacity: .65; }

/* Compacto: [posts] con 4 columnas o más */
.zwl-grid[style*="--zwl-cols:4"] .zwl-title,
.zwl-grid[style*="--zwl-cols:5"] .zwl-title,
.zwl-grid[style*="--zwl-cols:6"] .zwl-title { font-size: 1em; }
.zwl-grid[style*="--zwl-cols:4"] .zwl-excerpt,
.zwl-grid[style*="--zwl-cols:5"] .zwl-excerpt,
.zwl-grid[style*="--zwl-cols:6"] .zwl-excerpt { display: none; }

@media (hover: hover) {
  .zwl-card:hover { border-color: rgba(127, 127, 127, .45); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45); }
  .zwl-card:hover .zwl-title { color: var(--zwl-accent); }
}
@media (prefers-reduced-motion: no-preference) {
  .zwl-card { transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
  .zwl .zwl-media img { transition: transform .4s ease; }
  @media (hover: hover) {
    .zwl-card:hover { transform: translateY(-2px); }
    .zwl-card:hover .zwl-media img { transform: scale(1.04); }
  }
}

/* ---------- Artículo (entrada de blog / página de sección) ---------- */
.zwl-post { max-width: 48em; margin: 0 auto 2em; }
.zwl-post-head { margin: 0 0 1.25em; }
.zwl .zwl-post-head h1, .zwl-post .zwl-post-head h1 { margin: 0 0 .35em; font-size: clamp(1.7em, 4.5vw, 2.4em); line-height: 1.15; }
.zwl-meta { display: flex; flex-wrap: wrap; gap: .25em .9em; margin: 0 0 1em; font-size: .9em; opacity: .7; }
.zwl-meta > * + *::before { content: "·"; margin-right: .9em; }
.zwl-post-cover img { display: block; width: 100%; height: auto; border-radius: var(--zwl-radius); }
.zwl-post-body { font-size: 1.08em; line-height: 1.7; }
.zwl-post-body img { max-width: 100%; height: auto; border-radius: 10px; }
.zwl-post-comments { margin: 2em 0 0; }
.zwl-more { margin: 2.5em 0 0; padding-top: 1.5em; border-top: 1px solid rgba(127, 127, 127, .22); }
.zwl-more > h2 { margin: 0 0 .25em; font-size: 1.35em; }
.zwl-more .zwl { margin-top: 1em; }

/* ---------- Blog: una entrada por fila, tarjeta horizontal desde 600px ---------- */
.zwl--blog .zwl-grid { gap: 1.25em; }
@media (min-width: 600px) {
  .zwl--blog .zwl-card-link { flex-direction: row; }
  .zwl--blog .zwl-media { flex: 0 0 40%; aspect-ratio: auto; min-height: 12em; }
  .zwl--blog .zwl-media img { position: absolute; inset: 0; }
  .zwl--blog .zwl-body { padding: 1.1em 1.35em 1.2em; justify-content: center; }
  .zwl--blog .zwl-title { font-size: 1.4em; }
  .zwl--blog .zwl-excerpt { font-size: 1em; -webkit-line-clamp: 4; }
  .zwl--blog .zwl-date { margin-top: .4em; }
}

/* ---------- Paginación (nav.zwl-pager) ---------- */
.zwl-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5em 1em;
  margin: 1.75em 0 0;
}
.zwl-pager .zwl-pager-info { margin: 0; font-size: .85em; opacity: .8; }
.zwl-pager ul { display: flex; flex-wrap: wrap; gap: .35em; margin: 0; padding: 0; list-style: none; }
.zwl-pager li { margin: 0; padding: 0; }
.zwl-pager a, .zwl-pager [aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  height: 2.5em;
  padding: 0 .65em;
  border: 1px solid rgba(127, 127, 127, .3);
  border-radius: 10px;
  color: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
}
.zwl-pager a:hover { border-color: currentColor; background: var(--zwl-soft); }
.zwl-pager a:focus-visible { outline: 3px solid var(--zwl-accent); outline-offset: 2px; }
.zwl-pager [aria-current="page"] {
  border-color: var(--zwl-accent);
  background: var(--zwl-accent);
  color: #fff;
  font-weight: 700;
}
.zwl-pager .zwl-gap { display: flex; align-items: center; padding: 0 .25em; opacity: .6; }
@media (max-width: 479px) { .zwl-pager { justify-content: center; text-align: center; } }