/* ZihWeb Beaches - playas (ext/beaches.php) sobre lib/listcontent.css.
   Prefijo .zwb-. Hereda color de texto y fondo del sitio; medidas en em (Bootstrap 3 fija html{font-size:10px}).

   Lista:   <nav class="zwb-filter"><ul><li><a aria-current="true">Surf <span class="zwb-n">12</span></a></li>…</ul></nav>
            .zwl--beaches .zwb-card: .zwl-media + .zwb-lvl (nivel sobre la foto), .zwb-loc, .zwb-wave, .zwb-feats, .zwb-stats
   Playa:   .zwb-post: .zwb-back, .zwb-hero (portada + h1) o .zwb-head, .zwb-conds (ola, nivel .zwb-meter, temporada,
            swell .zwb-compass), .zwb-tags (.zwb-kinds + .zwb-map), .zwb-layout (.zwb-body + .zwb-known), .zwb-admin, .zwb-next
*/

.zwb-filter, .zwb-count, .zwb-list, .zwb-post, .zwb-admin {
  --zwb-line: rgba(127, 127, 127, .25);
  --zwb-soft: rgba(127, 127, 127, .07);
  --zwb-accent: var(--g-accent, #0b6fd6);
  --zwb-beginner: #1f8a4c;
  --zwb-intermediate: #b26a00;
  --zwb-advanced: #c0392b;
}
.zwb-i { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Filtros ---------- */
.zwb-filter ul { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 .6em; padding: 0; list-style: none; }
.zwb-filter a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 2.6em;
  padding: .35em 1em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--zwb-line);
  color: inherit;
  font-size: .95em;
  text-decoration: none;
}
.zwb-filter a:hover { box-shadow: inset 0 0 0 1px var(--zwb-accent); }
.zwb-filter a:focus-visible { outline: 3px solid var(--zwb-accent); outline-offset: 2px; }
.zwb-filter a[aria-current="true"] { background: var(--zwb-accent); box-shadow: none; color: #fff; }
.zwb-filter--lvl a { min-height: 2.4em; font-size: .9em; }
.zwb-n { font-size: .85em; opacity: .7; }
/* En el filtro activo las barras van en blanco: los colores de nivel no contrastan sobre el acento */
.zwb-filter a[aria-current="true"] .zwb-bar { background: rgba(255, 255, 255, .35); }
.zwb-filter a[aria-current="true"] .zwb-bar.is-on { background: #fff; }

.zwb-count { margin: .3em 0 1em; font-size: .9em; opacity: .65; }
.zwb-empty { margin: 0; padding: 2em 0; }
.zwb-empty a { color: var(--zwb-accent); }

/* ---------- Medidor de nivel (lista, filtros y playa) ---------- */
.zwb-meter { display: flex; flex: none; align-items: flex-end; gap: 3px; height: 1.1em; }
.zwb-meter--sm { gap: 2px; height: .85em; }
.zwb-bar { display: block; width: .55em; border-radius: 2px; background: rgba(127, 127, 127, .28); }
.zwb-meter--sm .zwb-bar { width: .32em; border-radius: 1px; }
.zwb-bar--beginner { height: 45%; }
.zwb-bar--intermediate { height: 72%; }
.zwb-bar--advanced { height: 100%; }
.zwb-bar--beginner.is-on { background: var(--zwb-beginner); }
.zwb-bar--intermediate.is-on { background: var(--zwb-intermediate); }
.zwb-bar--advanced.is-on { background: var(--zwb-advanced); }

/* ---------- Lista: tarjetas en fila (foto + datos) ----------
   El ancho de la lista (no el de la pantalla) decide: apiladas en columnas angostas, en fila desde 520px y en dos
   columnas desde 1040px (plantillas sin barra lateral). */
.zwb-list { margin: 0 0 2em; container-type: inline-size; }
.zwb-grid { display: grid; gap: 1.1em; }
@container (min-width: 1040px) { .zwb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25em; } }

.zwb-card { min-width: 0; border-radius: 16px; background: var(--zwb-soft); box-shadow: inset 0 0 0 1px var(--zwb-line); overflow: hidden; }
.zwb-list .zwb-card-link { display: grid; height: 100%; color: inherit; text-decoration: none; }
@container (min-width: 520px) { .zwb-list .zwb-card-link { grid-template-columns: minmax(10em, 36%) minmax(0, 1fr); } }
.zwb-list .zwb-card-link:hover { color: inherit; text-decoration: none; }
.zwb-card:hover { box-shadow: inset 0 0 0 1px var(--zwb-accent); }
.zwb-card:hover .zwb-card-title { color: var(--zwb-accent); }
.zwb-card-link:focus-visible { outline: 3px solid var(--zwb-accent); outline-offset: -3px; border-radius: 16px; }

.zwb-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(127, 127, 127, .15); }
@container (min-width: 520px) { .zwb-card-media { aspect-ratio: auto; min-height: 11em; } }
.zwb-list .zwb-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.zwb-card-media--empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(11, 111, 214, .16), rgba(127, 127, 127, .1)); }
.zwb-card-media--empty span { font-size: 3.2em; font-weight: 700; line-height: 1; opacity: .4; }

.zwb-card-body { display: flex; flex-direction: column; gap: .3em; min-width: 0; padding: 1em 1.15em 1.05em; }
.zwb-list .zwb-card-title { margin: 0; font-size: 1.3em; font-weight: 700; line-height: 1.2; }
.zwb-loc { display: flex; align-items: center; gap: .35em; margin: 0; font-size: .9em; opacity: .7; }
.zwb-card-desc {
  margin: .15em 0 0;
  font-size: .95em;
  line-height: 1.5;
  opacity: .82;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.zwb-list .zwb-cond dd { font-size: 0.8em; }
/* Condiciones en pequeño: misma estructura que en la playa, en rejilla fija de 2×2 para que los valores se alineen
   de una tarjeta a otra; 4 en fila si la lista es de una columna y ancha */
.zwb-conds.zwb-conds--mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6em 1.2em;
  margin: auto 0 0;
  padding-top: .75em;
  border-top: 1px solid var(--zwb-line);
  border-bottom: 0;
}
@container (min-width: 900px) and (max-width: 1039px) { .zwb-conds.zwb-conds--mini { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zwb-card-desc + .zwb-conds--mini, .zwb-loc + .zwb-conds--mini { margin-top: .6em; }
.zwb-conds--mini .zwb-cond:nth-child(n) { padding: 0; border: 0; }
.zwb-conds--mini dt { margin: 0 0 .15em; font-size: .75em; opacity: .62; }
.zwb-conds--mini dd { display: flex; align-items: center; gap: .45em; font-size: .9em; line-height: 1.25; }
.zwb-conds--mini .zwb-meter { height: .9em; }
.zwb-conds--mini .zwb-bar { width: .38em; }
.zwb-conds--mini .zwb-compass { width: 24px; height: 24px; }
.zwb-conds--mini .zwb-compass-n { display: none; }
.zwb-conds--mini .zwb-compass-needle { animation: none; }

/* ---------- Playa ----------
   Una sola pieza protagonista: la franja de condiciones (.zwb-conds) con la brújula del swell. Lo demás, sobrio. */
/* Contenedor de consulta: la columna del artículo cambia según la plantilla (con o sin barra lateral) */
.zwb-post { max-width: 64em; margin: 0 auto 3em; container-type: inline-size; }
.zwb-post h1 { margin: 0; font-size: clamp(2em, 5.2vw, 3.3em); font-weight: 700; line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; }

.zwb-back {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  min-height: 2.75em;   /* objetivo táctil */
  margin: 0 0 .25em -.2em;
  padding: 0 .2em;
  color: inherit;
  font-size: .95em;
  opacity: .75;
  text-decoration: none;
}
.zwb-back:hover { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }

/* Portada con el título encima; el degradado inferior garantiza el contraste del texto blanco */
.zwb-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 19em;
  aspect-ratio: 4 / 3;
  margin: 0 0 1.5em;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(127, 127, 127, .2);
  color: #fff;
  isolation: isolate;
}
@media (min-width: 600px) { .zwb-hero { aspect-ratio: 16 / 9; } }
@media (min-width: 1000px) { .zwb-hero { aspect-ratio: 21 / 9; } }
.zwb-post .zwb-hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.zwb-hero::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .35) 55%, transparent);
}
.zwb-hero-text { padding: 1.25em 1.25em 1.4em; }
@media (min-width: 600px) { .zwb-hero-text { padding: 2em 2.25em 2.1em; } }
.zwb-hero h1 { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.zwb-hero .zwb-lvl { top: 1em; left: 1em; font-size: .9em; }
.zwb-hero-loc { display: flex; align-items: center; gap: .35em; margin: .5em 0 0; font-size: 1.05em; opacity: .92; }
.zwb-hero-loc .zwb-i { width: 1.05em; height: 1.05em; }

/* Sin portada */
.zwb-head { margin: .25em 0 1.25em; }
.zwb-head .zwb-hero-loc { opacity: .7; }

/* Franja de condiciones: celdas separadas por líneas finas, como un reporte de surf */
.zwb-conds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 1em;
  border-top: 1px solid var(--zwb-line);
  border-bottom: 1px solid var(--zwb-line);
}
.zwb-cond { min-width: 0; padding: .9em 1em .95em 0; overflow-wrap: anywhere; }
.zwb-cond + .zwb-cond { padding-left: 1em; border-left: 1px solid var(--zwb-line); }
.zwb-cond:nth-child(odd) { padding-left: 0; border-left: 0; }
.zwb-cond:nth-child(n+3) { border-top: 1px solid var(--zwb-line); }
@container (min-width: 760px) {
  .zwb-conds { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .zwb-cond:nth-child(odd) { padding-left: 1em; border-left: 1px solid var(--zwb-line); }
  .zwb-cond:first-child { padding-left: 0; border-left: 0; }
  .zwb-cond:nth-child(n+3) { border-top: 0; }
}
.zwb-cond dt { margin: 0 0 .3em; font-size: .85em; font-weight: 400; opacity: .65; }
.zwb-cond dd { margin: 0; font-size: 1.12em; font-weight: 600; line-height: 1.3; }
.zwb-cond--swell dd { display: flex; align-items: center; gap: .6em; }

/* Nivel en la playa: el medidor (definido arriba) sobre el texto */
.zwb-conds:not(.zwb-conds--mini) .zwb-meter { margin: 0 0 .35em; }

/* Brújula: la aguja gira hasta el rumbo (una sola animación en la página) */
.zwb-compass { flex: none; overflow: visible; }
.zwb-compass-ring { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .35; }
.zwb-compass-tick { stroke: currentColor; stroke-width: 1.5; opacity: .5; }
.zwb-compass-n { fill: currentColor; font-size: 8px; font-weight: 700; opacity: .7; }
.zwb-compass-needle {
  fill: var(--zwb-accent);
  transform-box: view-box;
  transform-origin: 24px 24px;
  transform: rotate(var(--zwb-deg, 0deg));
}
@media (prefers-reduced-motion: no-preference) {
  .zwb-compass-needle { animation: zwb-swing 1.1s cubic-bezier(.3, 1.45, .5, 1) .25s both; }
  @keyframes zwb-swing { from { transform: rotate(calc(var(--zwb-deg, 0deg) - 140deg)); } }
}

/* Tipos (enlaces a la lista filtrada) y mapa */
.zwb-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75em 1em; margin: 0 0 2em; }
.zwb-kinds { display: flex; flex-wrap: wrap; gap: .45em; margin: 0; padding: 0; list-style: none; }
.zwb-kinds a, .zwb-kinds span {
  display: inline-flex;
  align-items: center;
  min-height: 2.4em;
  padding: .3em .95em;
  border-radius: 999px;
  background: var(--zwb-soft);
  box-shadow: inset 0 0 0 1px var(--zwb-line);
  color: inherit;
  font-size: .92em;
  text-decoration: none;
}
.zwb-kinds a:hover { box-shadow: inset 0 0 0 1px var(--zwb-accent); color: var(--zwb-accent); }
.zwb-map {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 2.6em;
  padding: .35em 1.1em;
  border-radius: 999px;
  background: var(--zwb-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.zwb-map:hover, .zwb-map:focus { color: #fff; text-decoration: none; filter: brightness(1.08); }
.zwb-back:focus-visible, .zwb-kinds a:focus-visible, .zwb-map:focus-visible { outline: 3px solid var(--zwb-accent); outline-offset: 2px; }

/* Contenido y "Bueno saber": arriba del texto en columnas angostas (es la consulta rápida); al lado, fija, si cabe */
.zwb-layout { display: grid; gap: 1.75em; }
@container (min-width: 820px) {
  .zwb-layout--aside { grid-template-columns: minmax(0, 1fr) 17em; gap: 3em; align-items: start; }
  .zwb-layout--aside .zwb-known { grid-column: 2; grid-row: 1; position: sticky; top: 1.5em; }
  .zwb-layout--aside .zwb-body { grid-column: 1; grid-row: 1; }
}
.zwb-post .zwb-body { font-size: 1.1em; line-height: 1.75; }
/* Con "Bueno saber" al lado se acota la línea; sin él el contenido usa todo el ancho */
.zwb-post .zwb-layout--aside .zwb-body { max-width: 38em; }
.zwb-body > :first-child { margin-top: 0; }
.zwb-body p { margin: 0 0 1.1em; }
.zwb-body h2 { margin: 1.6em 0 .5em; font-size: 1.4em; line-height: 1.25; }
.zwb-body h3 { margin: 1.4em 0 .4em; font-size: 1.15em; }
.zwb-body img { display: block; max-width: 100%; height: auto; /*margin: 1.5em 0;*/ border-radius: 12px; }
/* Nivo Slider: sus imágenes las posiciona el plugin (capas absolutas); el margen y el radio van en el contenedor */
.zwb-body .nivoSlider { margin: 1.5em 0; border-radius: 12px; overflow: hidden; }
.zwb-body .nivoSlider .nivoSlider { margin: 0; border-radius: 0; }   /* div.slider-wrapper.nivoSlider > #reela.nivoSlider */
.zwb-body .nivoSlider img { max-width: none; margin: 0; border-radius: 0; }
.zwb-body a { color: var(--zwb-accent); text-underline-offset: .2em; }

.zwb-known { padding: 1.1em 1.25em 1.2em; border-radius: 14px; background: var(--zwb-soft); box-shadow: inset 0 0 0 1px var(--zwb-line); }
.zwb-known h2 { margin: 0 0 .7em; font-size: 1.05em; font-weight: 700; }
.zwb-known ul { display: grid; gap: .6em; margin: 0; padding: 0; list-style: none; }
.zwb-known li { display: flex; align-items: flex-start; gap: .55em; line-height: 1.4; }
.zwb-known .zwb-i { width: 1.15em; height: 1.15em; margin-top: .1em; color: var(--zwb-beginner); stroke-width: 2.5; }

/* Más playas */
.zwb-next { margin: 3em 0 0; padding-top: 1.75em; border-top: 1px solid var(--zwb-line); }
.zwb-next > h2 { margin: 0; font-size: 1.45em; }
.zwb-next .zwb-list { margin: 1em 0 0; }

@media print {
  .zwb-hero { aspect-ratio: auto; min-height: 0; color: inherit; }
  .zwb-hero-img, .zwb-hero::after, .zwb-map, .zwb-admin, .zwb-next { display: none; }
  .zwb-hero h1 { color: inherit; text-shadow: none; }
}

/* ---------- Administración ---------- */
.zwb-admin {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  border: 1px dashed var(--zwb-line);
  border-radius: 14px;
  font-size: .95em;
}
.zwb-admin summary { cursor: pointer; font-weight: 600; }
.zwb-inline { display: inline; }
.zwb-form { display: grid; gap: .8em; margin-top: .8em; }
.zwb-form fieldset { margin: 0; padding: 0; border: 0; }
.zwb-form legend { margin: 0 0 .3em; border: 0; font-size: .9em; font-weight: 600; }
.zwb-form fieldset label { display: inline-flex; align-items: center; gap: .3em; margin: 0 1em .3em 0; font-weight: 400; }
.zwb-field { display: grid; gap: .25em; margin: 0; font-weight: 400; }
.zwb-field span { font-size: .9em; font-weight: 600; }
.zwb-field input, .zwb-field textarea {
  width: 100%;
  padding: .45em .6em;
  border: 1px solid var(--zwb-line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
}
.zwb-field--short input { max-width: 8em; }
.zwb-help { margin: 0; font-size: .85em; opacity: .7; }