/*
 * Content Trunk Style Engine V2 - separatori strutturali del child.
 *
 * Queste regole appartengono alla relazione fra il lenzuolo delle notizie e
 * le colonne laterali. Non dipendono dal layout dei post scelto nel
 * Pagebuilder e devono quindi rimanere esterne ai relativi fogli CSS.
 */

.content-trunk-v2 {
  --content-trunk-v2-sheet-sidebar-gap: 20px;
  --content-trunk-v2-sheet-sidebar-separator-width: 1px;
}

.content-trunk-v2__news-column {
  position: relative;
}

/*
 * Alcuni content trunk affiancano la sidebar gia' dal breakpoint md.
 * Il column-gap sovrascrive soltanto la distanza orizzontale: l'eventuale
 * distanza fra righe continua a essere governata dal layout parent.
 */
@media (min-width: 768px) {
  .content-trunk-v2--vertical-one-sidebar .content-trunk-v2__layout,
  .content-trunk-v2--offerta-lavoro-double-sheet-one-sidebar .content-trunk-v2__layout {
    column-gap: var(--content-trunk-v2-sheet-sidebar-gap);
  }

  .content-trunk-v2--vertical-one-sidebar .content-trunk-v2__news-column::after,
  .content-trunk-v2--offerta-lavoro-double-sheet-one-sidebar .content-trunk-v2__news-column::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: calc(var(--content-trunk-v2-sheet-sidebar-gap) / -2);
    bottom: 0;
    display: block;
    width: var(--content-trunk-v2-sheet-sidebar-separator-width);
    background-color: var(--separator-color-strong);
    transform: translateX(50%);
    pointer-events: none;
  }
}

/* Gli altri layout parent passano da una a piu' colonne al breakpoint lg. */
@media (min-width: 992px) {
  .content-trunk-v2--vertical-two-sidebars .content-trunk-v2__layout,
  .content-trunk-v2--vertical-three-sidebars .content-trunk-v2__layout,
  .content-trunk-v2--vertical-four-sidebars .content-trunk-v2__layout,
  .content-trunk-v2--vertical-50-one-sidebar .content-trunk-v2__layout,
  .content-trunk-v2--vertical-double-sheet-one-sidebar .content-trunk-v2__layout,
  .content-trunk-v2--vertical-double-sheet-two-sidebars .content-trunk-v2__layout {
    column-gap: var(--content-trunk-v2-sheet-sidebar-gap);
  }

  .content-trunk-v2--vertical-two-sidebars .content-trunk-v2__news-column::after,
  .content-trunk-v2--vertical-three-sidebars .content-trunk-v2__news-column::after,
  .content-trunk-v2--vertical-four-sidebars .content-trunk-v2__news-column::after,
  .content-trunk-v2--vertical-50-one-sidebar .content-trunk-v2__news-column::after,
  .content-trunk-v2--vertical-double-sheet-one-sidebar .content-trunk-v2__news-column::after,
  .content-trunk-v2--vertical-double-sheet-two-sidebars .content-trunk-v2__news-column::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: calc(var(--content-trunk-v2-sheet-sidebar-gap) / -2);
    bottom: 0;
    display: block;
    width: var(--content-trunk-v2-sheet-sidebar-separator-width);
    background-color: var(--separator-color-strong);
    transform: translateX(50%);
    pointer-events: none;
  }
}