/*
 * Pagebuilder content trunk post layout `test-a` - desktop XL.
 *
 * Il foglio traduce la prima bozza Figma da 12 post. Le proporzioni sono
 * relative alla news column disponibile: il layout resta quindi compatibile
 * sia con un content trunk a piena larghezza sia con un trunk affiancato da
 * sidebar. Le immagini Edi3 mantengono il rapporto editoriale 16:9.
 */

.content_trunk_post_layout_test_a {
  --post-layout-column-gap: 24px;
  --post-layout-row-gap: 48px;
  --post-layout-separator: 1px solid var(--horizontal-separator-color);
  width: 100%;
  min-width: 0;
}

.content_trunk_post_layout_test_a .content_trunk_post_layout__items {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--post-layout-column-gap);
  row-gap: var(--post-layout-row-gap);
  width: 100%;
  min-width: 0;
}

.content_trunk_post_layout_test_a .content_trunk_post_layout__item {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Post 5-7: tre schede testuali sulla stessa riga. */
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(n + 5):nth-child(-n + 7),
/* Post 8-10: tre schede con immagine superiore sulla riga successiva. */
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(n + 8):nth-child(-n + 10) {
  grid-column: span 2;
}

/* Post 11-12: due schede con immagine superiore, ciascuna larga meta' riga. */
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(n + 11):nth-child(-n + 12) {
  grid-column: span 3;
}

.content_trunk_post_layout_test_a .news_item {
  height: 100%;
  min-width: 0;
  margin: 0;
}

.content_trunk_post_layout_test_a .news_item > .col_container,
.content_trunk_post_layout_test_a .news_item > .col_container > .text_part_wrapper,
.content_trunk_post_layout_test_a .news_item > .col_container > .text_part_wrapper > .text_part {
  min-width: 0;
}

/* La bozza mostra titolo, autore e condivisione, senza metadati accessori. */
.content_trunk_post_layout_test_a .news_item .shout,
.content_trunk_post_layout_test_a .news_item .excerpt,
.content_trunk_post_layout_test_a .news_item .date,
.content_trunk_post_layout_test_a .news_item .news_item_tags,
.content_trunk_post_layout_test_a .news_item .reading-time-icon.secondary {
  display: none;
}

/*
 * Post 1-2: testo a sinistra (un terzo) e immagine a destra (due terzi).
 * Il DOM conserva l'immagine per prima; le coordinate Grid ne invertono la
 * posizione visiva senza duplicare o spostare il markup del newsitem.
 */
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(-n + 2) .news_item > .col_container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--post-layout-column-gap);
  align-items: stretch;
}

.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(-n + 2) .news_item > .col_container > .image_container {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
}

.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(-n + 2) .news_item > .col_container > .text_part_wrapper {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  width: 100%;
  padding: 0;
}

/* Post 3-7: varianti volutamente prive di immagine nella composizione. */
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(n + 3):nth-child(-n + 7) .image_container {
  display: none;
}

.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(n + 3):nth-child(-n + 4) {
  padding-bottom: var(--post-layout-row-gap);
  border-bottom: var(--post-layout-separator);
}

/* Separazioni verticali delle due griglie a tre colonne. */
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(6),
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(7),
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(9),
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(10),
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(12) {
  padding-left: var(--post-layout-column-gap);
  border-left: var(--post-layout-separator);
}

/* Post 8-12: immagine 16:9 a tutta larghezza sopra al contenuto testuale. */
.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(n + 8) .news_item > .col_container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  row-gap: 24px;
  height: 100%;
}

.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(n + 8) .news_item > .col_container > .image_container {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
}

.content_trunk_post_layout_test_a .content_trunk_post_layout__item:nth-child(n + 8) .news_item > .col_container > .text_part_wrapper {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  padding: 0;
}

/* Neutralizza il placeholder proporzionale storico e riempie l'area 16:9. */
.content_trunk_post_layout_test_a .news_item > .col_container > .image_container picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
}

.content_trunk_post_layout_test_a .news_item > .col_container > .image_container img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

/* Autore in fondo alla scheda e icona share allineata sullo stesso separatore. */
.content_trunk_post_layout_test_a .news_item > .col_container > .text_part_wrapper > .text_part {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.content_trunk_post_layout_test_a .news_item .author {
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 12px;
  border-bottom: var(--post-layout-separator);
}

.content_trunk_post_layout_test_a .news_item .news_item_icons {
  right: 0;
  bottom: 12px;
}