/* ============================================
   Component: contentbrowser_experience
   Layout split con immagine full-bleed a destra
   ============================================ */



.components.component-contentbrowser_experience > .wrapper .container{padding:0px;}
.components.component-contentbrowser_experience > .wrapper{
  background-color:#e5e3e3;
}

.component-contentbrowser_experience .wrapper {
  position: relative;
  /* rimuove eventuale background residuo dal vecchio template */
  background-image: none !important;

}

.component-contentbrowser_experience .container {
  /* assicura che il container non clippi i figli che sforano */
  position: relative;
}

/* ---- DESKTOP >= 1200px : split a due colonne ---- */
@media (min-width: 1200px) {

  .component-contentbrowser_experience .component-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 600px;
    gap: 0;
  }

  .component-contentbrowser_experience .component-col-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* colonna destra: contenitore relativo per lo pseudo-elemento */
  .component-contentbrowser_experience .carousel-bgimage {
    position: relative;
    min-height: 100%;
  }

  /* lo pseudo-elemento porta il background fino al bordo destro del viewport */
  .component-contentbrowser_experience .carousel-bgimage::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: calc(50% - 50vw);
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
  }

  /* il contenuto del carousel sta sopra il background */
  .component-contentbrowser_experience .carousel-bgimage > * {
    position: relative;
    z-index: 1;
  }
}

/* ---- MOBILE/TABLET < 1200px : una colonna, immagine sopra ---- */
@media (max-width: 1199px) {

  .component-contentbrowser_experience .carousel-bgimage {
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.component-contentbrowser_experience .component-col-content > header.header { flex: 0 0 auto; }

.component-contentbrowser_experience .component-col-content > header.header,
.component-contentbrowser_experience .component-col-content > .body {
  flex: 0 0 auto;
}


@media (min-width: 1200px) {
    .components .component-col-content, .components .component-col-body, .components .component-col-image, .components .component-col-gallery, .components .component-col-aside {
        flex: 0 0 50%;
        max-width:unset;
    }
}



@media (min-width: 1200px) {
    .components.component-contentbrowser_experience > .wrapper .carousel-wrapper {
       padding-top: unset;
        max-width: calc(100%);
    }
}

@media (min-width: 1200px) {
  .component-contentbrowser_experience .carousel-bgimage {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 3rem;
  }
}







@media (max-width: 1199px) {
  .component-contentbrowser_experience .carousel-bgimage {
    position: relative;
    min-height: 400px;
    /* rimuovi il background diretto */
    background-image: none;
  }

  .component-contentbrowser_experience .carousel-bgimage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
  }

  .component-contentbrowser_experience .carousel-bgimage > * {
    position: relative;
    z-index: 1;
  }
  
  .component-contentbrowser_experience .header,
  .component-contentbrowser_experience .body
  {
  	padding:20px !important;
  }
}