/* === JustList v2.0.1 – 3 colonne desktop/tablet, mobile invariato === */

/* WRAPPER BASE */
.justlist-wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:center;
  max-width:900px;
  margin:0 auto;
  box-sizing:border-box;
}
@media(max-width:768px){
  .justlist-wrapper{max-width:100%;}
}

/* Layout verticale desktop */
.justlist-wrapper.layout-vertical{display:grid;gap:18px;}
.justlist-wrapper.layout-vertical.cols-2{grid-template-columns:1fr 1fr;}
.justlist-wrapper.layout-vertical.cols-3{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:768px){
  .justlist-wrapper.layout-vertical,
  .justlist-wrapper.layout-vertical.cols-2,
  .justlist-wrapper.layout-vertical.cols-3{grid-template-columns:1fr!important;}
}

/* CARD BASE */
.jl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  background:#fff;
  border:1px solid #e8ebf1;
  border-radius:10px;
  padding:14px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  transition:box-shadow .2s ease;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.jl-card:hover{box-shadow:0 4px 14px rgba(0,0,0,0.12);}
.jl-card a.jl-card-overlay{position:absolute;inset:0;z-index:1;background:transparent;cursor:pointer;}
.jl-card .jl-left,.jl-card .jl-center,.jl-card .jl-side{position:relative;z-index:2;pointer-events:none;}
.jl-card .jl-btn{pointer-events:auto;z-index:3;}

/* Colonne desktop/tablet ≥768px */
@media(min-width:768px){
  .jl-card{
    display:grid;
    grid-template-columns:280px 1fr 180px;
    gap:18px;
    align-items:stretch;
  }
  .jl-left{grid-column:1;}
  .jl-center{grid-column:2;}
  .jl-side{grid-column:3;}
}

/* IMMAGINE */
.jl-left{
  width:100%;
  aspect-ratio:3/2;
  border-radius:8px;
  overflow:hidden;
  background:#eef1f5;
  flex-shrink:0;
}
.jl-left img{
  width:100%;
  height:100%!important;
  object-fit:cover;
  display:block;
}

/* CONTENUTO CENTRALE */
.jl-center{
  display:flex;
  flex-direction:column;
  *gap:8px;
}
.jl-title,.jl-title a.jl-title-link{
  margin:0;
  font-weight:600;
  color:#023169;
  font-size:1.05rem;
  line-height:1.2;
  text-decoration:none;
}
/* ⭐ stelle alla destra del titolo (stessa riga) */
.jl-title-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom: 4px;
}
.jl-stars{display:flex;gap:4px;}
.jl-stars i{color:#E83E72;font-size:.85rem;}

/* RIGA META (hotel + indirizzo) nel centro */
.jl-meta{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:.85rem;
  color:#606060;
}
.jl-meta-iconline{display:flex;align-items:center;gap:6px; font-weight:500;}
.jl-meta-iconline i,.jl-meta-iconline svg{width:16px!important;height:16px!important;color:#E83E72;}
.jl-meta-address{display:flex;align-items:center;gap:6px;}
.jl-meta-address i{color:#E83E72;}

.jl-meta-iconline svg {
  fill: #E83E72 !important;   /* Giallo JustRoma */
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle;
  transition: fill 0.3s ease;
}

/* DESCRIZIONE */
.jl-desc{
  font-size:.9rem;
  color:#313131;
  line-height:1.35;
  margin:0;
  min-height:50px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* PULSANTE */
.jl-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#E83E72;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  padding:8px 18px;
  border-radius:999px;
  font-size:.9rem;
  margin-top:auto;
  width:auto!important;
  max-width:fit-content;
  transition:background .15s ease;
}
.jl-btn:hover{background:#D92F65; color: #fff !important}

/* COLONNA DESTRA (SIDE) */
.jl-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  text-align:right;
}
.jl-rating{
  font-size:.85rem;
  color:#222;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.jl-rating-score{
  background:#023169;
  color:#fff;
  border-radius:6px;
  padding:0px 6px;
  font-weight:600;
  font-size:.78rem;
}
.jl-iconline{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  font-size:.85rem;
  color:#555;
  flex-wrap:wrap;
}
.jl-iconline i,.jl-iconline svg{width:16px!important;height:16px!important;color:#E83E72;}
.jl-address{display:flex;align-items:center;gap:5px;font-size:.82rem;color:#555;}
.jl-address i{color:#E83E72;}

/* Overlay effetto hover */
.jl-card:hover .jl-left img,
.jl-card:hover .jl-title{opacity:0.85;transition:opacity .2s ease;}

/* Allineamento icona e testo indirizzo */
.jl-meta,
.jl-meta-address {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px; /* leggermente più spazio per respiro visivo */
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

/* Icona centrata visivamente */
.jl-meta i.fa-solid {
  flex-shrink: 0;
  margin-top: 3px; /* più centrata con font grande */
  font-size: 0.85rem;
  line-height: 1;
  align-self: flex-start;
  color: #E83E72;
}

/* Testo indirizzo: leggibile e coerente */
.jl-meta-address span {
  font-size: 0.80rem; /* dimensione più leggibile */
  color: #606060;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-width: 100%;
  word-break: break-word;
  margin-top: 1px; /* compensa visivamente con l'icona */
}

/* Responsive solo per extra small */
@media (max-width: 400px) {
  .jl-meta i.fa-solid {
    font-size: 0.8rem;
    margin-top: 2px;
  }
  .jl-meta-address span {
    font-size: 0.75rem;
  }
}



/* MOBILE: ORIZZONTALE COMPATTO */
@media(max-width:768px){
  .justlist-wrapper.layout-mobile-horizontal-compact{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .justlist-wrapper.layout-mobile-horizontal-compact .jl-card{
    display:flex;
    flex-direction:row!important;
    align-items:stretch!important;
    gap:10px;
    padding:12px;
  }
  .justlist-wrapper.layout-mobile-horizontal-compact .jl-left{
    width:110px!important;
    height:auto!important;
    aspect-ratio:1/1;
    border-radius:6px;
  }
  .justlist-wrapper.layout-mobile-horizontal-compact .jl-left img{
    width:100%;
    height:100%!important;
    object-fit:cover;
  }
  .justlist-wrapper.layout-mobile-horizontal-compact .jl-center{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .justlist-wrapper.layout-mobile-horizontal-compact .jl-side{display:none!important;} /* nascondiamo la colonna dx in mobile */
  .justlist-wrapper.layout-mobile-horizontal-compact .jl-desc{*display:none; font-size:0.75rem; margin-bottom: 10px;}
  .justlist-wrapper.layout-mobile-horizontal-compact .jl-btn{
    padding:6px 12px;
    font-size:.8rem;
    margin-top:auto;
  }
.jl-stars i {
  color: #E83E72;
  font-size: .65rem;
}
.jl-title {
  margin-bottom: -5px;
}


@media (max-width: 768px) {
    .justlist-wrapper .jl-title,
    .justlist-wrapper .jl-title h4 {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
    }
}

.jl-title-wrap {
  margin-bottom: 6px;
}
/* SOLO CARD VERTICALI IN DESKTOP */
@media (min-width: 1024px) {

    /* Rende jl-center contenitore flessibile verticale */
    .justlist-wrapper.layout-vertical .jl-card .jl-center {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Fa uscire rating/iconline/bottone da jl-side */
    .justlist-wrapper.layout-vertical .jl-card .jl-side {
        display: contents !important;
    }

    /* Sposta il rating subito sotto l'indirizzo */
    .justlist-wrapper.layout-vertical .jl-card .jl-rating {
        order: 2 !important;
        margin-top: 6px !important;
        margin-bottom: 4px !important;
    }

    /* Iconline sotto il rating */
    .justlist-wrapper.layout-vertical .jl-card .jl-iconline {
        order: 3 !important;
    }

    /* Bottone sempre ultimo */
    .justlist-wrapper.layout-vertical .jl-card .jl-btn-desktop {
        order: 4 !important;
    }
}


/* Correzione indirizzo lungo e allineamento verticale icona */
.jl-meta,
.jl-meta-address {
  display: flex;
  flex-wrap: nowrap !important;
  word-break: normal !important;
  align-items: flex-start !important; /* evita che l’icona resti appiccicata in alto */
  gap: 4px;
  line-height: 1.3;
  white-space: nowrap !important;
  word-break: break-word;
  overflow: visible;
}
.jl-meta-address span {
        white-space: nowrap !important;
		overflow: visible !important;    /* NON taglia */
        text-overflow: unset !important; /* niente puntini */
    }

/* Allineamento dell’icona con il testo */
.jl-meta i.fa-solid {
  flex-shrink: 0;
  margin-top: 2px; /* piccola compensazione per centratura visiva */
  font-size: 0.75rem;
  line-height: 1;
}

/* Testo indirizzo */
.jl-meta-address span {
  font-size: 0.65rem;
  display: inline-block;
  max-width: calc(100% - 20px);
 }
}

/* MOBILE: VERTICALE */
@media(max-width:768px){
  .justlist-wrapper.layout-mobile-vertical{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .justlist-wrapper.layout-mobile-vertical .jl-card{
    display:flex;
    flex-direction:column!important;
    align-items:flex-start;
    padding:14px;
  }
  .justlist-wrapper.layout-mobile-vertical .jl-left{
    width:100%!important;
    aspect-ratio:3/2;
    border-radius:8px;
    margin-bottom:10px;
  }
  .justlist-wrapper.layout-mobile-vertical .jl-center{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .justlist-wrapper.layout-mobile-vertical .jl-side{display:none!important;} /* nascondiamo la colonna dx in mobile */
  .justlist-wrapper.layout-mobile-vertical .jl-desc{display:none;}
  .justlist-wrapper.layout-mobile-vertical .jl-btn{
    padding:6px 14px;
    font-size:.8rem;
    margin-top:auto;
  }
}

/* LAYOUT VERTICALE DESKTOP FIX */
@media(min-width:769px){
  .justlist-wrapper.layout-vertical .jl-card{
    display:flex;
    flex-direction:column!important;
    align-items:flex-start;
  }
  .justlist-wrapper.layout-vertical .jl-left{
    width:100%!important;
    height:220px!important;
  }
  .justlist-wrapper.layout-vertical .jl-left img{
    height:100%!important;
    object-fit:cover;
  }
  .justlist-wrapper.layout-vertical .jl-center{
    padding-top:0px;
  }
}

/* === Micro-fix: disposizione elementi === */

/* Desktop (≥769px):
   - Pulsante SOLO nella colonna destra
   - Riga meta nel centro
   - Nascondi icone/indirizzo nella side per evitare duplicati
*/
@media (min-width: 769px) {
  .jl-btn-desktop{display:inline-flex!important; align-self:flex-end; margin-top:8px;}
  .jl-btn-mobile{display:none!important;}

  .jl-center .jl-meta{display:flex;}
  .jl-side .jl-iconline,
  .jl-side .jl-address{display:none!important;}
}

/* Mobile (≤768px):
   - Mostriamo la riga meta nel centro
   - Pulsante visibile nel centro (quello duplicato)
*/
@media (max-width: 768px) {
  .jl-center .jl-meta{display:flex;}
  .jl-btn-mobile{display:inline-flex!important;}
}


/* === JUSTLIST – pulsante centrato verticalmente, descrizione standard === */
@media (min-width: 769px) {

  /* Struttura principale */
  .jl-card {
    display: grid;
    grid-template-columns: 280px 1fr 180px;
    align-items: stretch;
  }

  /* --- COLONNA CENTRALE --- */
  .jl-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
  }

  /* Titolo e meta sempre in alto */
  .jl-title-wrap,
  .jl-meta {
    flex-shrink: 0;
  }

  /* Descrizione standard (subito sotto meta) */
  .jl-desc {
    margin: 0.3rem 0 0 0;
    line-height: 1.5;
  }

  /* --- COLONNA DESTRA --- */
  .jl-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center; /* centra verticalmente pulsante */
    position: relative;
  }

  /* Rating fisso in alto */
  .jl-rating {
    position: absolute;
    top: 0;
    right: 0;
  }

  /* Pulsante centrato verticalmente */
  .jl-side .jl-btn {
    align-self: flex-end;
    margin-top: 30px;
    margin-bottom: 0;
	font-size: 15px;
  }
}
/* === JustList – versione finale immagini solo per layout orizzontale desktop === */
@media (min-width: 769px) {
  .justlist-wrapper.layout-horizontal .jl-card {
    max-height: 195px; /* altezza compatta e proporzionata */
  }
}

/* === JustList – layout verticale desktop (voto a destra, pulsante centrato) === */
@media (min-width: 769px) {
  .justlist-wrapper.layout-vertical {
    max-width: none !important;
    justify-content: flex-start !important;
  }

  .justlist-wrapper.layout-vertical .jl-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    position: relative;
  }

  .justlist-wrapper.layout-vertical .jl-side {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;   /* centra orizzontalmente il pulsante */
    width: 100%;
    padding: 0px 0 15px;
    box-sizing: border-box;
    position: relative;
  }

  /* Rating a destra sopra il pulsante */
  .justlist-wrapper.layout-vertical .jl-rating {
    position: static;
    align-self: flex-start;   /* sposta a destra */
    margin-bottom: 8px;     /* distanzia dal pulsante */
  }

  /* Pulsante centrato */
  .justlist-wrapper.layout-vertical .jl-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
}
/* === Stelline sempre sotto al titolo nel layout verticale (versione definitiva) === */
@media (min-width: 769px) {

  /* Contenitore di titolo + stelle in colonna */
  .justlist-wrapper.layout-vertical .jl-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* allinea a sinistra */
  }

  /* Titolo sempre sopra */
  .justlist-wrapper.layout-vertical .jl-title {
    order: 1;
  }

  /* Stelline subito sotto */
  .justlist-wrapper.layout-vertical .jl-stars {
    order: 2;
    margin-top: 0px;
  }
}


/* ============================================
   JUSTLIST – COMPATTAZIONE CARDS VERTICALI (DESKTOP)
   Non rompe nulla, agisce solo su layout-vertical
   ============================================ */
@media (min-width: 769px) {

  /* Riduce altezza immagine */
  .justlist-wrapper.layout-vertical .jl-left {
    height: 160px !important;   /* prima era 220px */
    margin-bottom: 0px;
  }
}