/* =========================================================================
 * EL DIRECTORIO DE PODCASTS, VESTIDO DE ZARZA
 *
 * `/podcasts/` no lo pinta este tema: lo pinta `custom-podcast-plugin`, con sus
 * propias reglas de reescritura y su contenido fuera de WordPress. Y es el
 * activo del sitio: unas 618.000 fichas indexadas. O sea que la parte mas
 * visitada del sitio se veria como OTRO sitio.
 *
 * Hasta hoy lo parcheaba `scripts-n-styles` con 794 caracteres de CSS apuntando
 * a clases de Sahifa. Eso no se copia --no serviria de nada-- pero el encargo
 * si: aqui esta hecho de verdad.
 *
 * 🔴 NO SE REESCRIBEN SUS 695 LINEAS. El plugin ya tiene un sistema decente: 15
 * variables CSS y 83 usos de var(). Basta con redefinir las quince. Reescribir
 * su hoja habria creado una segunda copia que se queda vieja en cuanto alguien
 * toque el plugin.
 *
 * (Los 35 atributos style="" de sus plantillas, que ganan a cualquier hoja sin
 * !important, se cambiaron para que usen esas mismas variables. Ver
 * _util/parchea-cpp-colores.py.)
 * ========================================================================= */

:root {
  /* El rojo de la casa donde estaba el azul de Apple. */
  --cpp-primary:       var(--zz-rojo);
  --cpp-primary-dark:  var(--zz-rojo-hondo);
  --cpp-primary-light: var(--zz-rojo-vivo);

  /* La tinta sobre crema del sistema, no el gris de Apple. */
  --cpp-secondary:     var(--zz-tinta);
  --cpp-text:          var(--zz-tinta);

  /* 🔴 El gris secundario va a --zz-rotulo-txt y NO a --zz-tinta-3, aunque
     tinta-3 sea el tono equivalente. tinta-3 sobre crema da 3,07:1 y no llega a
     AA; rotulo-txt esta medido en 4,53:1 y existe exactamente para esto. Aqui
     pesa: el gris del plugin lleva las fechas, las duraciones y el numero de
     episodios de todas las fichas. */
  --cpp-gray:          var(--zz-rotulo-txt);
  --cpp-gray-light:    var(--zz-tinta-3);

  --cpp-light:         var(--zz-crema-2);
  --cpp-white:         var(--zz-crema);
  --cpp-border:        var(--zz-linea);

  --cpp-radius:        var(--zz-radio);
  --cpp-radius-small:  var(--zz-radio-chico);

  /* Las sombras del plugin son de interfaz de sistema operativo: suaves y
     azuladas. Las de ZARZA son de papel sobre rojo. */
  --cpp-shadow:        0 1px 0 rgba(36,26,21,.06), 0 2px 10px rgba(36,26,21,.07);
  --cpp-shadow-hover:  0 2px 0 rgba(36,26,21,.08), 0 8px 22px rgba(36,26,21,.13);
}

/*
 * Lo que las variables no alcanzan: tipografia y rotulacion.
 *
 * El plugin no tiene variable de fuente, asi que aqui se le da la de la marca.
 * Sin esto el directorio se leeria en la fuente del sistema mientras el resto
 * del sitio va en IBM Plex Mono, y se notaria el salto al entrar.
 */
.cpp-container { font-family: var(--zz-mono); color: var(--zz-tinta); }

.cpp-podcast-title,
.cpp-episode-title,
.cpp-player-title {
  font-family: var(--zz-display);
  letter-spacing: var(--zz-tracking-titular);
  text-transform: lowercase;   /* regla de marca: los titulares van en minusculas */
}

/* Los datos --fecha, duracion, numero de episodio-- son ROTULACION TECNICA:
   versalita, espaciada, y nunca compitiendo con el titular. */
.cpp-episode-date,
.cpp-episode-meta,
.cpp-podcast-stats,
.cpp-time-current,
.cpp-time-total {
  font-family: var(--zz-mono);
  font-size: 10.5px;
  letter-spacing: var(--zz-tracking-rotulo);
  text-transform: uppercase;
  color: var(--zz-rotulo-txt);
}

/* Las fichas del directorio son fichas de casete, como las del catalogo: papel
   crema sobre el rojo, con su filo. */
.cpp-podcast-card,
.cpp-episode-item {
  background: var(--zz-crema);
  border: 1px solid var(--zz-linea);
  border-radius: var(--zz-radio);
}
.cpp-podcast-card:hover,
.cpp-episode-item:hover { border-color: var(--zz-linea-2); }

/* El boton primario del plugin es el boton rojo del sistema. */
.cpp-btn-primary,
.cpp-play-main,
.cpp-play-inline {
  background: var(--zz-rojo);
  color: var(--zz-sobre-rojo);
  border: 1px solid var(--zz-rojo-hondo);
}
.cpp-btn-primary:hover,
.cpp-play-main:hover,
.cpp-play-inline:hover { background: var(--zz-rojo-alto); }

.cpp-btn-secondary {
  background: var(--zz-crema-2);
  color: var(--zz-tinta);
  border: 1px solid var(--zz-linea);
}

/* El reproductor flotante del plugin y el del tema son DOS barras fijas abajo.
   Si un dia coincidieran en pantalla se taparian, asi que el del plugin se
   levanta por encima de la altura de la del tema. */
body.zz-sonando .cpp-floating-player { bottom: 92px; }

/* La barra de avance, en rojo. */
.cpp-progress-fill { background: var(--zz-rojo); }
.cpp-progress-buffered { background: var(--zz-linea-2); }
.cpp-progress-bar { background: var(--zz-crema-3); }

/* La paginacion, con la rotulacion del sistema. */
.cpp-page-link,
.cpp-page-current {
  font-family: var(--zz-mono);
  letter-spacing: .1em;
  border-radius: var(--zz-radio-chico);
}
.cpp-page-current { background: var(--zz-rojo); color: var(--zz-sobre-rojo); }

/* =========================================================================
 * EL BLOQUE DE "ULTIMOS EPISODIOS"  (atajo [podcast_mostrar_recientes])
 *
 * 🔴 ESTE MARCADO NO ES DEL PLUGIN NI DEL TEMA: ES DE SAHIFA. El atajo emite
 * `.cat-box.recent-box > .recent-item > .post-thumbnail + h3.post-box-title`,
 * que son las clases del tema viejo. Mientras Sahifa estuvo activo las vestia
 * el, y por eso nadie lo noto; con el tema nuevo el bloque salia como una lista
 * pelada con un hueco de 165 px por episodio. Es el bloque principal de las
 * ocho portadas.
 *
 * (Esto es lo que de verdad pedia el CSS del viejo `scripts-n-styles`: sus 794
 * caracteres apuntaban justo a `.recent-item-podcasts`. Aqui esta hecho en
 * condiciones, con los tokens de la marca y sin `!important`.)
 *
 * 🔴 EL TITULO NO SE PUEDE DIMENSIONAR DESDE AQUI. El atajo escribe
 * `style="font-size:1em !important"` en el <h3>, y una declaracion `!important`
 * EN LINEA gana a cualquier hoja de autor, tambien `!important`. No hay pelea
 * que ganar: como es `1em`, se hereda del padre, asi que el tamano se fija en
 * `.recent-item` y el titulo lo sigue.
 * ========================================================================= */

.cat-box.recent-box {
  display: grid;
  /* 128 px deja cuatro columnas dentro de la medida de 66ch del manual.
     La rejilla no se sale de la columna de lectura: la medida es una
     regla de la marca, no un accidente. */
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 20px 18px;
  margin: 26px 0 30px;
}
.cat-box.recent-box .clear { display: none; }   /* limpiador de flotados heredado */

.recent-item {
  font-size: 13px;                 /* la base de la ficha; el titulo lo repite */
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;                    /* sin esto un titulo largo ensancha la columna */
}

.recent-item .post-thumbnail {
  position: relative;
  /* El disco va DETRAS de toda caratula, no solo de las que faltan: cuando la
     imagen del feed da 404 --pasa, son URL de terceros-- el navegador deja el
     hueco transparente y asoma el disco en vez de un cuadro vacio. No cuesta
     una peticion: es un degradado. */
  background-image: var(--zz-disco-dibujado);
  background-size: cover;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--zz-linea);
  border-radius: var(--zz-radio-chico);
  background: var(--zz-crema-2);
  box-shadow: var(--zz-sombra-ficha);
  transition: transform .15s ease, box-shadow .15s ease;
}
.recent-item .post-thumbnail a { display: block; width: 100%; height: 100%; }

/* Las caratulas vienen con width/height 165 en el atributo. Se ignoran: la
   ficha manda, y asi una caratula rectangular no deforma la rejilla. */
.recent-item .post-thumbnail img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}

.recent-item:hover .post-thumbnail {
  transform: translateY(-2px);
  box-shadow: var(--zz-sombra-disco);
}

/* --- El hueco de quien no tiene caratula ------------------------------------
 * Muchos feeds antiguos --audiolibros de dominio publico, sobre todo-- no
 * traen imagen, o la traen por http y no se acepta. Antes eso descartaba el
 * episodio entero y la portada acababa vacia. Ahora se pinta un disco dibujado
 * con CSS: es del mundo de la marca (sello discografico) y no pide ni una
 * peticion mas. */
:root {
  /* Un solo dibujo, usado en dos sitios. Dos copias del mismo degradado
     divergen en cuanto alguien ajuste un radio. */
  --zz-disco-dibujado:
    radial-gradient(circle at 50% 50%,
      var(--zz-crema) 0 6.5%,
      var(--zz-rojo) 7% 8%,
      var(--zz-vinilo) 8.5% 40%,
      transparent 40.5%),
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 3px, rgba(255,255,255,.05) 3px 4px);
}
.cpp-sin-caratula {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- El titulo -------------------------------------------------------------- */
.recent-item .post-box-title {
  margin: 0;
  /* 🔴 EL TAMANO SE FIJA AQUI, EXPLICITO. Antes el atajo escribia
     `font-size:1em !important` en linea y bastaba con dar tamano al padre. Al
     quitar ese estilo en linea (v4.3.6), el <h3> paso a coger el tamano de
     `.zz-texto h3` --27 px-- y los titulos salieron enormes. Quitar un estilo
     en linea obliga a poner en la hoja lo que ese estilo tapaba. */
  font-size: 13px;
  font-family: var(--zz-mono);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.recent-item .post-box-title a {
  color: var(--zz-tinta);
  text-decoration: none;
  /* Tres lineas y elipsis: sin esto, un titulo de audiolibro desalinea toda la
     fila. `line-clamp` sin prefijo aun no lo aplica nadie, pero se declara. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.recent-item .post-box-title a:hover,
.recent-item .post-box-title a:focus-visible { color: var(--zz-rojo); }

/* --- El mismo bloque, cuando va de widget en una barra lateral --------------
 * Ahi no hay sitio para una rejilla: se pone en fila, caratula pequena a un
 * lado. Con propiedades logicas, para que en arabe se ponga solo del otro. */
.widget_podcast_mostrar_recientes .cat-box.recent-box {
  display: block;
  margin: 0;
}
.widget_podcast_mostrar_recientes .recent-item {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-block: 11px;
  border-block-end: 1px solid var(--zz-linea);
}
.widget_podcast_mostrar_recientes .recent-item:last-of-type { border-block-end: 0; }
.widget_podcast_mostrar_recientes .recent-item .post-thumbnail {
  flex: 0 0 58px;
  width: 58px;
  box-shadow: none;
}
.widget_podcast_mostrar_recientes .recent-item:hover .post-thumbnail { transform: none; }
.widget_podcast_mostrar_recientes .recent-item .post-box-title a { -webkit-line-clamp: 2; line-clamp: 2; }