/* ==========================================================================
   BASE BLOCKS (PUBLIC)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TEXT OVERFLOW — sin esto, una palabra sin espacios (o un font-size grande)
   estira el contenedor en vez de cortar a la línea siguiente; en un grid/flex
   (ej. las 2 columnas de About) eso además rompe el layout entero, porque un
   item de grid/flex no se achica por debajo del ancho de su contenido salvo
   que se le fuerce (ver min-width: 0 en about.css para ese caso puntual).
   -------------------------------------------------------------------------- */

.node h1,
.node h2,
.node h3,
.node h4,
.node h5,
.node h6,
.node p {
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   BLOCK HEADING 
   -------------------------------------------------------------------------- */

.block-heading a {
    color: inherit;
}

/* --------------------------------------------------------------------------
   BLOCK PARAGRAPH 
   -------------------------------------------------------------------------- */

.block-paragraph a {
    color: inherit;
}

/* --------------------------------------------------------------------------
   BLOCK BOX
   -------------------------------------------------------------------------- */

/* Sin width: 100% en los contenedores de bloque: como flex de bloque ya ocupan todo el ancho,
   y con 100% el margin del drawer se sumaba al ancho y desbordaba la página */
.block-box {
    display: flex;
    transition: background-color 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease;
}

.block-box--column {
    flex-direction: column;
}

.block-box--row {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Nodos dentro de un Box Horizontal (Row): lado a lado, cada uno con un ancho mínimo (12rem); los
   que no caben pasan a la línea siguiente, así el texto no se aprieta a una letra por línea (#143).
   En celular se apilan (#264). */
.block-box--row > .cms-node--nested,
.block-box--row > [data-node-id] {
    flex: 1 1 12rem;
    min-width: 0;
    width: auto;
    max-width: 100%;
    margin: 0;
}

/* Alineación vertical de los hijos del box horizontal (#143): arriba si no se eligió otra.
   En celular se apilan y vuelven a ocupar todo el ancho (abajo) */
.block-box--row.block-box--align-start {
    align-items: flex-start;
}

.block-box--row.block-box--align-center {
    align-items: center;
}

.block-box--row.block-box--align-end {
    align-items: flex-end;
}

.block-box--row.block-box--align-stretch {
    align-items: stretch;
}

@container site (max-width: 767px) {
    .block-box--row {
        flex-direction: column;
    }

    .block-box--row.block-box--align-start,
    .block-box--row.block-box--align-center,
    .block-box--row.block-box--align-end {
        align-items: stretch;
    }

    /* En columna, los 12rem serían de alto: cada uno, el suyo */
    .block-box--row > .cms-node--nested,
    .block-box--row > [data-node-id] {
        flex: 0 0 auto;
    }
}

/* --------------------------------------------------------------------------
   BLOCK BUTTON CONTAINER (el botón en sí usa .btn, ver base.css)
   -------------------------------------------------------------------------- */

.block-button-container,
.block-image-container {
    display: flex;
    box-sizing: border-box;
    transition: justify-content 0.2s ease;
}

.block-button-container.justify-left,
.block-image-container.justify-left {
    justify-content: flex-start;
}

.block-button-container.justify-center,
.block-image-container.justify-center {
    justify-content: center;
}

.block-button-container.justify-right,
.block-image-container.justify-right {
    justify-content: flex-end;
}

.block-button-container.justify-full,
.block-image-container.justify-full {
    justify-content: stretch;
}

.block-button-container.justify-full .btn {
    width: 100%;
}

/* Botón de un widget: solo con alineación elegida pasa a flex; sin ella sigue el
   text-align del widget (centrado en el hero, a la izquierda en about) */
.element-button-wrapper.justify-left,
.element-button-wrapper.justify-center,
.element-button-wrapper.justify-right,
.element-button-wrapper.justify-full {
    display: flex;
}

.element-button-wrapper.justify-left   { justify-content: flex-start; }
.element-button-wrapper.justify-center { justify-content: center; }
.element-button-wrapper.justify-right  { justify-content: flex-end; }
.element-button-wrapper.justify-full .btn {
    width: 100%;
    justify-content: center;
}

/* Imagen de un widget: con width/height en el <img> (evitan el salto al cargar) el alto lo da
   la proporción, y nunca desborda su contenedor. Con una proporción elegida (aspect-ratio)
   se recorta para llenarla, sin deformarse */
.element-image {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Imagen de un widget: se alinea con márgenes automáticos y no con flex, así el
   ancho en % sigue siendo del <figure> aunque la imagen esté dentro de un <a> */
.element-image-wrapper.justify-left .element-image,
.element-image-wrapper.justify-center .element-image,
.element-image-wrapper.justify-right .element-image {
    display: block;
}

.element-image-wrapper.justify-left .element-image   { margin-left: 0; margin-right: auto; }
.element-image-wrapper.justify-center .element-image { margin-left: auto; margin-right: auto; }
.element-image-wrapper.justify-right .element-image  { margin-left: auto; margin-right: 0; }
.element-image-wrapper.justify-full .element-image   { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   BLOCK IMAGE (el <img> en sí — nunca debe desbordar su contenedor)
   -------------------------------------------------------------------------- */

.block-image {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.block-image-container.justify-full .block-image {
    width: 100%;
}

/* Con enlace (solo en el sitio), el <a> no cuenta como caja: si no, el contenedor flex lo
   achica al tamaño de la imagen y su ancho en % se mide contra el <a> y no contra el bloque */
.block-image-container > a {
    display: contents;
}