/* Pagine e articoli scritti con i blocchi di WordPress e trasformati in
   elementi Bricks da tools/bricks/blocchi-in-bricks.php.

   Prima Bricks li mostrava con template-parts/page.php: un <article
   class="wordpress"> largo 1100 px con dentro il titolo e il testo, e
   WordPress aggiungeva i fogli dei blocchi usati (colonne, elenchi...).
   Dopo la conversione sulla pagina non ci sono piu' blocchi, quindi quei
   fogli non arrivano: le regole che servono sono qui, riprese da
   wp-includes/blocks/{columns,image,gallery}/style.css.

   Le pagine stanno in section.montanaro-pagina-wp, gli articoli in
   div.montanaro-articolo-wp dentro il modello «Articolo IT/EN». */

/* -------------------------------------------------------------- la pagina */

/* Come #brx-content.wordpress (content-default.min.css di Bricks). */
#brx-content .montanaro-pagina-wp {
    padding: 0;
}
#brx-content .montanaro-pagina-wp > .brxe-container {
    display: block;
    width: 1100px;
    max-width: 100%;
    margin-inline: auto;
}

/* Gli elementi stanno uno sotto l'altro come i blocchi di prima, con i loro
   margini che si sommano e si fondono come nel testo di WordPress. */
.montanaro-articolo-wp {
    display: block;
}
.montanaro-articolo-wp > * + * {
    margin-top: 1em;
}

/* ---------------------------------------------------------------- colonne */

:where(.montanaro-pagina-wp, .montanaro-articolo-wp) .wp-block-columns.brxe-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: normal;
    gap: 2em;
    width: auto;
    margin-bottom: 1.75em;
    box-sizing: border-box;
}
@media (min-width: 782px) {
    :where(.montanaro-pagina-wp, .montanaro-articolo-wp) .wp-block-columns.brxe-block {
        flex-wrap: nowrap;
    }
}
:where(.montanaro-pagina-wp, .montanaro-articolo-wp) .wp-block-column.brxe-block {
    display: block;
    /* Se un foglio la fa diventare flessibile (le schede degli stand in
       news.css), il contenuto resta largo quanto la colonna, come in
       WordPress: il «Blocco» di Bricks lo stringerebbe (flex-start). */
    align-items: normal;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
@media (max-width: 781px) {
    :where(.montanaro-pagina-wp, .montanaro-articolo-wp) .wp-block-columns.brxe-block > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ------------------------------------------------------- gruppi e immagini */

:where(.montanaro-pagina-wp, .montanaro-articolo-wp) .wp-block-group.brxe-block {
    display: block;
    width: auto;
}
:where(.montanaro-pagina-wp, .montanaro-articolo-wp) .wp-block-image img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
}

/* Galleria (il suo foglio lo carica inc/pagine-wp.php): e' una riga che va a
   capo, e le foto crescono fino a riempirla. Il «Blocco» di Bricks e' una
   colonna larga il 100%: cosi' la foto aerea della Storia restava a meta'
   larghezza e il margine di 40 px del <figure> sforava a destra. */
:where(.montanaro-pagina-wp, .montanaro-articolo-wp) .wp-block-gallery.brxe-block {
    flex-direction: row;
    width: auto;
}

/* Bricks da' a ogni suo elemento max-width: 100% ([class*="brxe-"]): il
   <figure> di un'immagine di WordPress non l'aveva, e con i margini negativi
   (le foto delle macchine nelle schede degli stand) deve poter uscire dalla
   colonna. L'immagine dentro resta limitata dalla regola qui sopra. */
:where(.montanaro-pagina-wp, .montanaro-articolo-wp) figure.wp-block-image.brxe-image {
    max-width: none;
}

/* Il <figure> di un'immagine di WordPress e' un blocco largo quanto la
   colonna. Bricks lo fa in riga e largo quanto il contenuto
   (:where(.brxe-image).tag): con l'immagine al 100% dentro, si riduceva a
   zero, e la locandina dell'articolo SIMEI spariva. Specificita' bassa: le
   schede degli stand (news.css) e le gallerie hanno il loro display. */
:where(.montanaro-pagina-wp, .montanaro-articolo-wp) :where(figure).wp-block-image {
    display: block;
}

/* Un'immagine con link (la locandina, che si apre a piena grandezza): il
   foglio delle immagini di WordPress fa il link in riga e largo quanto
   l'immagine, e Bricks fa l'immagine larga il 100% del link
   (:where(.brxe-image) img): un cerchio che finiva a zero, e la locandina
   spariva. Non si puo' rimettere la larghezza dell'immagine: qualunque width
   nel CSS, anche auto, fa ignorare al browser le misure scritte nel tag, e
   finche' l'immagine (caricata tardi) non arriva la sua altezza e' zero. Il
   link diventa un blocco largo quanto la colonna, come il <figure>. Due
   classi: il foglio di WordPress (.wp-block-image > a) arriva dopo. */
:where(.montanaro-pagina-wp, .montanaro-articolo-wp) .wp-block-image.brxe-image > a {
    display: block;
}