/* Sitiincontri — v0.7.18: homepage e navigazione mobile.
   Caricato DOPO gli altri CSS; non modifica il layout desktop. */
.v0718-main-menu-button{display:none}

@media (max-width:700px){
  /* Il menu principale diventa un pulsante separato da "Categorie". */
  .complete-navigation .main-nav-bar{
    padding:5px 0;
    border-top:1px solid var(--line);
    background:#f8f3ed;
  }
  html.v0718-mobile-ready .complete-navigation .v0718-main-menu-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:calc(100% - 26px);
    min-height:42px;
    margin:2px auto;
    padding:9px 14px;
    background:var(--paper);
    border:1px solid var(--line-strong);
    color:var(--ink);
    border-radius:999px;
    font:650 14px/1.3 var(--sans);
    cursor:pointer;
  }
  .complete-navigation .v0718-main-menu-button:hover,
  .complete-navigation .v0718-main-menu-button[aria-expanded="true"]{
    border-color:var(--wine);
    color:var(--wine);
  }
  .complete-navigation .v0718-main-menu-button:focus-visible{
    outline:2px solid var(--wine);
    outline-offset:2px;
  }
  html.v0718-mobile-ready .complete-navigation .main-nav-bar .main-bar-nav{
    display:none!important;
  }
  html.v0718-mobile-ready .complete-navigation .main-nav-bar.v0718-open .main-bar-nav{
    display:block!important;
    padding-top:8px;
    padding-bottom:10px;
  }
  /* Sostituisce la griglia di v0.7.5; non spezza i nomi dei menu. */
  html.v0718-mobile-ready .complete-navigation .main-bar-nav .primary-menu{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:0!important;
    padding:0!important;
  }
  .complete-navigation .main-bar-nav .primary-menu > .site-nav-group{
    display:block;
    flex:none!important;
    width:100%;
    border-bottom:1px solid var(--line);
  }
  .complete-navigation .main-bar-nav .primary-menu > .site-nav-group:last-child{border-bottom:0}
  .complete-navigation .main-bar-nav .site-nav-heading{
    display:flex;
    align-items:center;
    justify-content:space-between!important;
  }
  .complete-navigation .main-bar-nav .site-nav-link{
    flex:1;
    font-size:15px!important;
    line-height:1.45;
    padding:12px 0!important;
    white-space:normal!important;
    overflow-wrap:normal;
    word-break:normal;
  }
  .complete-navigation .main-bar-nav .site-submenu-toggle{
    min-width:44px;
    width:44px;
    height:44px;
  }
  .complete-navigation .main-bar-nav .site-submenu{
    position:static!important;
    width:100%;
    max-width:none;
    min-width:0;
    border:0;
    border-left:2px solid var(--line-strong);
    border-radius:0;
    margin:0 0 8px;
    padding:0 0 0 8px;
    background:transparent;
    box-shadow:none;
  }
  /* Classifica: prima numero/logo/punteggio, poi titolo a piena larghezza. */
  .ranking-list{width:100%;max-width:100%}
  .ranking-list > .ranking-card{
    display:grid!important;
    grid-template-columns:34px 86px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto;
    gap:10px 12px!important;
    padding:18px 16px!important;
    align-items:center!important;
    min-width:0;
  }
  .ranking-list > .ranking-card > .rank-num{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    margin:0!important;
    padding:0!important;
    font-size:29px;
  }
  .ranking-list > .ranking-card > a[aria-label^="Apri la recensione"]{
    grid-column:2!important;
    grid-row:1!important;
    display:block;
    width:86px;
    min-width:0;
  }
  .ranking-list > .ranking-card .rank-image{
    display:block;
    width:86px!important;
    height:82px!important;
    max-width:100%;
    object-fit:contain;
  }
  .ranking-list > .ranking-card > .rank-score{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end;
    text-align:right!important;
    align-self:center!important;
    max-width:100%;
    margin:0!important;
    padding:0!important;
    font-size:28px;
  }
  .ranking-list > .ranking-card > .rank-score small{
    display:block!important;
    margin:5px 0 0!important;
    line-height:1.35;
    letter-spacing:.4px;
    white-space:normal;
    font-size:9px;
  }
  .ranking-list > .ranking-card > .rank-main{
    grid-column:1/-1!important;
    grid-row:2!important;
    min-width:0!important;
    width:100%!important;
    display:block!important;
    margin:0!important;
  }
  .ranking-list .rank-title-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    min-width:0;
    margin-bottom:6px;
  }
  .ranking-list .rank-title{
    display:inline;
    max-width:100%;
    font-size:clamp(21px,5.5vw,25px)!important;
    line-height:1.25;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .ranking-list .rank-desc{
    display:block!important;
    grid-column:auto!important;
    max-width:100%;
    font-size:14px;
    line-height:1.6;
    margin:10px 0 12px;
  }
  .ranking-list .actions{
    display:flex!important;
    grid-column:auto!important;
    flex-wrap:wrap;
    gap:8px;
  }
  .ranking-list .actions .btn{min-height:36px}
  .ranking-list > .ranking-card > .rank-compare-links{
    grid-column:1/-1!important;
    grid-row:3!important;
    min-width:0;
    margin-top:0;
  }
}
@media(max-width:350px){
  .ranking-list > .ranking-card{grid-template-columns:30px 72px minmax(0,1fr)!important;gap:9px!important;padding:14px 12px!important}
  .ranking-list > .ranking-card > a[aria-label^="Apri la recensione"],
  .ranking-list > .ranking-card .rank-image{width:72px!important}
  .ranking-list > .ranking-card .rank-image{height:70px!important}
}