/* Columnas. Exclusivo de los cinco patrones nuevos.
   No se modifican las reglas ni el diseño de las composiciones existentes. */
.fba-columns {
  --fba-columns-gap:clamp(16px,2.2vw,32px);
  --fba-columns-line-color:var(--wp--preset--color--magenta-base,#F0008A);
  display:flex;
  align-items:stretch;
  gap:var(--fba-columns-gap);
}
.fba-columns > .wp-block-column { min-width:0; overflow-wrap:anywhere; }
/* Las columnas nuevas, incluidas las que se añadan desde Gutenberg, se reparten igual. */
.fba-columns--equal > .wp-block-column,
.fba-columns--title-line > .wp-block-column,
.fba-columns--vertical > .wp-block-column {
  flex:1 1 0; min-width:0;
}
/* Línea de 3px, a todo el ancho del título: funciona en columnas nuevas
   una vez que se incorpora un primer bloque Encabezado. */
.fba-columns--title-line > .wp-block-column > .wp-block-heading:first-of-type::after {
  content:""; display:block; width:100%; height:3px;
  margin-block-start:12px; background:var(--fba-columns-line-color);
}
/* Separación vertical perceptible entre columnas, sin una línea exterior. */
.fba-columns--vertical > .wp-block-column + .wp-block-column {
  border-inline-start:3px solid var(--fba-columns-line-color);
  padding-inline-start:clamp(16px,2vw,30px);
}
/* Una columna grande y dos áreas pequeñas apiladas dentro de la otra. */
.fba-columns--asym > .wp-block-column { flex:1 1 0; min-width:0; }
.fba-columns--asym > .fba-columns__stack {
  display:grid; grid-template-rows:repeat(2,minmax(0,1fr));
  gap:var(--fba-columns-gap);
}
.fba-columns--asym > .fba-columns__stack > .wp-block-group {
  min-height:0; margin-block-start:0;
}
.fba-columns--asym.is-style-fba-col-large-right { flex-direction:row-reverse; }
.fba-columns--asym.is-style-fba-col-large-left { flex-direction:row; }
/* 30/70; invertir el orden de presentación no cambia el contenido editado. */
.fba-columns--ratio > .fba-columns__narrow { flex:3 1 0; }
.fba-columns--ratio > .fba-columns__wide { flex:7 1 0; }
.fba-columns--ratio.is-style-fba-col-wide-left { flex-direction:row-reverse; }
.fba-columns--ratio.is-style-fba-col-wide-right { flex-direction:row; }
.fba-columns.is-style-fba-col-line-magenta-suave { --fba-columns-line-color:var(--wp--preset--color--magenta-suave,#FBC7E4); }
.fba-columns.is-style-fba-col-line-magenta-medio { --fba-columns-line-color:var(--wp--preset--color--magenta-medio,#F65CAE); }
.fba-columns.is-style-fba-col-line-magenta-base { --fba-columns-line-color:var(--wp--preset--color--magenta-base,#F0008A); }
.fba-columns.is-style-fba-col-line-magenta-intenso { --fba-columns-line-color:var(--wp--preset--color--magenta-intenso,#B80069); }
.fba-columns.is-style-fba-col-line-berenjena-suave { --fba-columns-line-color:var(--wp--preset--color--berenjena-suave,#D8C1D8); }
.fba-columns.is-style-fba-col-line-berenjena-medio { --fba-columns-line-color:var(--wp--preset--color--berenjena-medio,#B075B3); }
.fba-columns.is-style-fba-col-line-berenjena-base { --fba-columns-line-color:var(--wp--preset--color--berenjena-base,#7E2C7F); }
.fba-columns.is-style-fba-col-line-berenjena-intenso { --fba-columns-line-color:var(--wp--preset--color--berenjena-intenso,#9A2FA0); }
.fba-columns.is-style-fba-col-line-marfil { --fba-columns-line-color:var(--wp--preset--color--marfil,#FFFAF3); }
.fba-columns.is-style-fba-col-line-carbon { --fba-columns-line-color:var(--wp--preset--color--carbon,#2B2B2B); }
.fba-columns.is-style-fba-col-line-turquesa { --fba-columns-line-color:var(--wp--preset--color--turquesa,#20CEC7); }
.fba-columns.is-style-fba-col-line-turquesa-oscuro { --fba-columns-line-color:var(--wp--preset--color--turquesa-oscuro,#168F8B); }
.fba-columns.is-style-fba-col-line-turquesa-marca { --fba-columns-line-color:var(--wp--preset--color--turquesa-marca,#20CEC7); }

/* Las columnas nativas de Gutenberg se apilan a 781px por defecto.
   Solo Columnas conserva su reparto mientras disponga de anchura real.
   Se respeta el ajuste nativo «No apilar en móviles». */
@media (min-width:621px) and (max-width:781px) {
  .wp-block-columns.fba-columns:not(.is-not-stacked-on-mobile) {
    flex-direction:row;
    flex-wrap:nowrap!important;
  }
  .wp-block-columns.fba-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis:0!important;
    width:auto!important;
    min-width:0;
  }
  .wp-block-columns.fba-columns--ratio:not(.is-not-stacked-on-mobile) > .fba-columns__narrow {
    flex:3 1 0!important;
  }
  .wp-block-columns.fba-columns--ratio:not(.is-not-stacked-on-mobile) > .fba-columns__wide {
    flex:7 1 0!important;
  }
  /* Cuatro o más columnas necesitan dos filas legibles en tableta. */
  .wp-block-columns.fba-columns--equal:not(.is-not-stacked-on-mobile):has(> .wp-block-column:nth-child(4)),
  .wp-block-columns.fba-columns--title-line:not(.is-not-stacked-on-mobile):has(> .wp-block-column:nth-child(4)),
  .wp-block-columns.fba-columns--vertical:not(.is-not-stacked-on-mobile):has(> .wp-block-column:nth-child(4)) {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
  }
  .wp-block-columns.fba-columns--vertical:not(.is-not-stacked-on-mobile):has(> .wp-block-column:nth-child(4)) > .wp-block-column:nth-child(odd) {
    border-inline-start:0;
    padding-inline-start:0;
  }
}
@media (max-width:620px) {
  .wp-block-columns.fba-columns:not(.is-not-stacked-on-mobile),
  .wp-block-columns.fba-columns--asym.is-style-fba-col-large-left:not(.is-not-stacked-on-mobile),
  .wp-block-columns.fba-columns--asym.is-style-fba-col-large-right:not(.is-not-stacked-on-mobile),
  .wp-block-columns.fba-columns--ratio.is-style-fba-col-wide-right:not(.is-not-stacked-on-mobile),
  .wp-block-columns.fba-columns--ratio.is-style-fba-col-wide-left:not(.is-not-stacked-on-mobile) {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap!important;
  }
  .wp-block-columns.fba-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex:1 1 auto!important;
    flex-basis:auto!important;
    width:100%!important;
    min-width:0;
  }
  .wp-block-columns.fba-columns--vertical:not(.is-not-stacked-on-mobile) > .wp-block-column + .wp-block-column {
    border-inline-start:0;
    padding-inline-start:0;
    border-block-start:3px solid var(--fba-columns-line-color);
    padding-block-start:clamp(16px,2vw,30px);
  }
  .wp-block-columns.fba-columns--asym:not(.is-not-stacked-on-mobile) > .fba-columns__stack {
    grid-template-rows:auto;
  }
}

/* Línea opcional: se configura en el bloque Título, no se impone desde Columnas. */
.fba-columns--title-line > .wp-block-column > .wp-block-heading:first-of-type:not(.is-style-fba-heading-subtle):not(.is-style-fba-heading-full)::after {content:none!important;display:none!important;}
