/* ==========================================================================
   Estilos de bloques de WordPress (Gutenberg)
   --------------------------------------------------------------------------
   Se encola desde functions.php con dependencia de `wp-block-library`, por lo
   que carga DESPUES del CSS del core y de main.css: puede corregir el core sin
   recurrir a !important.

   Contiene dos cosas:
     1. El CSS de "layout support" (.is-layout-flex / .is-layout-grid / ...).
        WordPress normalmente lo imprime inline dentro de los estilos globales;
        en este sitio no se esta imprimiendo, y sin el las galerias, columnas y
        grupos con layout flex no aplican display:flex y se apilan en vertical.
     2. Ajustes del tema sobre los bloques dentro de `.article-content`.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Layout support
   -------------------------------------------------------------------------- */

body {
  /* Mismo valor por defecto que usa WordPress cuando no hay theme.json (24px) */
  --wp--style--block-gap: 1.5rem;
}

.is-layout-flow > .alignleft {
  float: left;
  margin-inline-start: 0;
  margin-inline-end: 2em;
}

.is-layout-flow > .alignright {
  float: right;
  margin-inline-start: 2em;
  margin-inline-end: 0;
}

.is-layout-flow > .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.is-layout-constrained > .alignleft {
  float: left;
  margin-inline-start: 0;
  margin-inline-end: 2em;
}

.is-layout-constrained > .alignright {
  float: right;
  margin-inline-start: 2em;
  margin-inline-end: 0;
}

.is-layout-constrained > .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.is-layout-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--style--block-gap, 0.5em);
}

.is-layout-flex > :is(*, div) {
  margin: 0;
}

.is-layout-grid {
  display: grid;
  gap: var(--wp--style--block-gap, 0.5em);
}

.is-layout-grid > :is(*, div) {
  margin: 0;
}

.is-vertical {
  flex-direction: column;
}

.is-nowrap {
  flex-wrap: nowrap;
}

.is-content-justification-left {
  justify-content: flex-start;
}

.is-content-justification-center {
  justify-content: center;
}

.is-content-justification-right {
  justify-content: flex-end;
}

.is-content-justification-space-between {
  justify-content: space-between;
}


/* --------------------------------------------------------------------------
   2. Galeria (wp-block-gallery / has-nested-images)
   --------------------------------------------------------------------------
   El core calcula el ancho de cada figure con
   `calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * .66667)`.
   Ese custom property lo inyecta normalmente el bloque como estilo inline; si
   falta, el calculo usa el fallback de 16px. Lo declaramos explicitamente para
   que el gap real y el ancho calculado coincidan siempre.
   -------------------------------------------------------------------------- */

.wp-block-gallery.has-nested-images {
  --wp--style--unstable-gallery-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: normal;
  gap: var(--wp--style--unstable-gallery-gap);
}

/* `.article-content > *` y `.wp-block-image img { margin: 0 auto }` del tema
   descuadran los anchos que calcula el core dentro de la galeria. */
.article-content .wp-block-gallery.has-nested-images figure.wp-block-image,
.article-content .wp-block-gallery.has-nested-images figure.wp-block-image > a,
.article-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
  margin: 0;
}

/* Los pies de foto de la galeria van superpuestos, en blanco sobre degradado:
   hay que anular el `color: grey` que el tema aplica a .wp-block-image figcaption. */
.article-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  color: #fff;
  text-align: center;
}

/* En movil el core deja 2 columnas (50%). Con una sola columna se ve mejor
   en la columna estrecha del articulo. Quitar este bloque para volver al
   comportamiento por defecto de WordPress. */
@media (max-width: 599px) {
  .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: 100%;
  }
}

/* OPCIONAL — Ultima fila incompleta.
   Por defecto WordPress pone `flex-grow: 1` en cada figure, asi que una imagen
   suelta en la ultima fila se estira a todo el ancho (comportamiento identico
   al del editor). Si prefieres que conserve su ancho de columna y quede
   alineada a la izquierda, descomenta:

   .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
     flex-grow: 0;
   }
*/


/* --------------------------------------------------------------------------
   3. Imagen suelta y pies de foto
   -------------------------------------------------------------------------- */

.article-content .wp-block-image {
  margin-left: 0;
  margin-right: 0;
}

.article-content .wp-block-image img {
  height: auto;
  max-width: 100%;
}

.article-content figcaption,
.article-content .wp-element-caption {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #71717a;
  text-align: center;
  margin-top: 0.5rem;
}


/* --------------------------------------------------------------------------
   4. Alineaciones
   --------------------------------------------------------------------------
   El articulo vive dentro de una columna con ancho fijo, asi que alignwide y
   alignfull se limitan al ancho disponible en lugar de sangrar a pantalla completa.
   -------------------------------------------------------------------------- */

.article-content .alignleft {
  float: left;
  max-width: 50%;
  margin: 0.5rem 1.5rem 1rem 0;
}

.article-content .alignright {
  float: right;
  max-width: 50%;
  margin: 0.5rem 0 1rem 1.5rem;
}

.article-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.article-content .alignwide,
.article-content .alignfull {
  width: 100%;
  max-width: 100%;
}

/* Cierra los floats de alignleft / alignright al final del articulo */
.article-content::after {
  content: "";
  display: table;
  clear: both;
}


/* --------------------------------------------------------------------------
   5. Embeds e iframes
   -------------------------------------------------------------------------- */

.article-content .wp-block-embed iframe,
.article-content iframe {
  max-width: 100%;
}

.article-content .wp-block-embed figcaption {
  margin-top: 0.5rem;
}


/* --------------------------------------------------------------------------
   6. Otros bloques que dependen del layout flex
   -------------------------------------------------------------------------- */

.article-content .wp-block-columns {
  margin-bottom: 1.5rem;
}

@media (max-width: 781px) {
  .article-content .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap;
  }

  .article-content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
}

.article-content .wp-block-buttons {
  align-items: center;
}

.article-content .wp-block-table table {
  width: 100%;
}

.article-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: #f4f4f5;
}