/* ============================================================
   HEADER MOBILE — LOGO GRANDE FULL-WIDTH (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Mantieni il blocco per contenere il logo */
  .top-links {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* Rimuovi completamente i due elementi laterali */
  .top-search,
  .top-links-menu {
    display: none !important;
  }

  /* Rimuovi eventuali wrapper stretti */
  .top-links .center-hold,
  .member-links {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    text-align: center !important;
  }

  /* LOGO FULL WIDTH — GRANDE */
  .top-logo {
    position: relative !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  .top-logo .logo-link {
    font-size: 85px !important;      /* << MOLTO GRANDE */
    line-height: 1 !important;
    color: #212121 !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Nascondi navigation */
  .navigation {
    display: none !important;
  }
}






@media (max-width: 768px) {

  .join2-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .join2-photo-col,
  .join2-content-col {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
  }

  .join2-photo-col img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .fr-grid {
    width: 100% !important;
    display: block !important;
  }
}




/* ============================================================
   JOIN2 MOBILE — colonna destra nascosta, layout verticale
   ============================================================ */
@media (max-width: 768px) {

  /* Colonna destra: deve scomparire completamente */
  .join2-photo-col:last-child {
    display: none !important;
  }

  /* Layout diventa colonna unica */
  .join2-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* Colonna sinistra: full-width */
  .join2-photo-col:first-child {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Immagine sinistra proporzionata e CENTRATA */
  .join2-photo-col:first-child img {
    width: 100% !important;
    max-width: 480px !important;   /* stessa larghezza delle card */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Colonna centrale (card) anch'essa centrata e a colonna */
  .join2-content-col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .fr-wrapper {
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Le card NON devono essere in row su mobile */
  .fr-grid {
    display: block !important;
    width: 100% !important;
  }

  .fr-card {
    margin: 0 auto 20px auto !important;
  }
}



@media (max-width: 768px) {

  /* ------------------------------ */
  /* 1) FOTO MOBILE NON A TUTTA LARGHEZZA */
  /* ------------------------------ */
  .join2-photo-col {
    width: 100% !important;
    padding: 0 20px !important; /* margini laterali che riducono la foto */
    box-sizing: border-box !important;
  }

  .join2-photo-col img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0;
  }


  /* ------------------------------ */
  /* 2) GRID CARD A DUE COLONNE SU MOBILE */
  /* ------------------------------ */
  .fr-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* due colonne */
    gap: 15px !important; /* spazio tra card */
    width: 100% !important;
    padding: 0 15px !important; /* margini laterali della grid */
    box-sizing: border-box !important;
  }

  .fr-card {
    width: 100% !important;   /* ogni card occupa la sua colonna */
    margin: 0 !important;
  }
}



@media (max-width: 768px) {

  .join2-promo-image {
      width: calc(100% - 40px) !important;
      margin: 0 20px !important;
      height: auto !important;
      display: block !important;
  }

}



@media (max-width: 768px) {

    .join2-layout {
        width: calc(100% - 40px) !important; /* lascia 20px per lato */
        max-width: 600px !important;        /* evita layout troppo largo */
        margin: 0 auto !important;          /* centra tutto */
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .join2-promo-image {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}




@media (max-width: 768px) {

    /* Aumenta lo spazio verticale tra le righe della grid */
    .fr-grid {
        row-gap: 40px !important; /* puoi aumentare a 24/30px se vuoi più aria */
    }

}




@media (max-width: 768px) {
    .fr-credentials-title {
        margin: 50px 0 10px 0 !important;
    }
}




@media (max-width: 768px) {

    /* Metti i campi uno sotto l'altro */
    .fr-credentials-row {
        flex-direction: column !important;
        gap: 12px !important;  /* spazio verticale tra i campi */
        align-items: stretch !important;
    }

    /* Ogni campo deve occupare tutta la larghezza */
    .fr-cred-field {
        width: 100% !important;
    }

    /* Gli input riempiono il contenitore */
    .fr-cred-field .fr-input {
        width: 100% !important;
        box-sizing: border-box !important;
    }

}




@media (max-width: 768px) {

    /* Ingrandisce il bottone JOIN NOW */
    .fr-join-bottom {
        font-size: 44px !important;   /* invece di 34px */
        padding: 10px 0 !important;   /* più aria above/below */
        letter-spacing: 0.02em !important;
    }

}




@media (max-width: 768px) {
    .fr-join-big-btn {
        margin-bottom: 50px !important;
    }
}









/* FOOTER – titoli colonne super piccoli SOLO sotto 828px */
@media (max-width: 828px) {
    .page-join2 .footer-columns .footer-col h3 {
        font-size: 8px !important;
        margin-bottom: 3px !important;
        letter-spacing: 0.3px !important;
        text-transform: uppercase !important; /* se vuoi mantenerlo */
    }
}








@media (max-width: 828px) {
    .footer.new-footer .footer-columns .footer-col a {
        font-size: 8px !important;   /* o 4px se le vuoi micro */
        line-height: 1.2 !important;
    }
}




@media (max-width: 828px) {
    .footer-col-social .footer-social-icons a svg {
        width: 12px !important;
        height: 12px !important;
        display: block !important;
        margin: 0 auto !important;  /* centra ogni icona */
    }
}






@media (max-width: 828px) {
    .footer.new-footer .footer-columns .footer-col a {
        font-size: 8px !important;   /* o 4px se le vuoi micro */
        line-height: 1.2 !important;
    }
}




@media (max-width: 828px) {
    .footer-col-social .footer-social-icons a svg {
        width: 12px !important;
        height: 12px !important;
        display: block !important;
        margin: 0 auto !important;  /* centra ogni icona */
    }
}


@media (max-width: 828px) {
    .footer-col-social .footer-social-icons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;   /* centra tutte */
        gap: 12px !important;              /* spazio tra icone */
    }
}






@media (max-width: 828px) {
    .footer-col-logo {
        display: none !important;
    }
}




/* nascosto su desktop */
.footer-top-mobile {
    display: none;
}

/* visibile su mobile */
@media (max-width: 828px) {
    .footer-top-mobile {
        display: block;
        padding: 0 20px 30px 20px;
        max-width: 500px;
        margin: 0 auto;
    }

    .footer-top-mobile .footer-logo-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .footer-top-mobile .footer-newsletter-block {
        margin-top: 10px;
    }

    .footer-top-mobile .footer-newsletter-form {
        display: flex;
        gap: 8px;
    }

    .footer-top-mobile input[type="email"] {
        flex: 1;
    }
}





@media (max-width: 828px) {

    .footer-top-mobile .footer-logo-title {
        font-size: 48px;       /* più grande */
        text-align: center;    /* centrato */
        margin-bottom: 10px;
        display: block;
    }

}






@media (max-width: 828px) {
    .footer-top-mobile .footer-logo-title {
        font-family: 'League Gothic', sans-serif !important;
        font-size: 48px !important;
        text-align: center !important;
        letter-spacing: 1px !important;
        font-weight: 400 !important;
        margin-bottom: 20px !important;
        display: block !important;
    }
}





@media (max-width: 828px) {

    /* Rendi il contenitore una riga */
    .footer-columns {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
        max-width: 100%;
    }

    /* Ogni colonna deve occupare 1/3 */
    .footer-columns .footer-col {
        flex: 1 1 33%;
        text-align: center;
        padding: 0 10px;
    }

    /* Titoli centrati */
    .footer-columns .footer-col h3 {
        text-align: center;
    }
}


















/* ============================================================
   CONTENUTO TRA HEADER E FOOTER — FULL-WIDTH (≤ 1560px)
   ============================================================ */

@media (min-width: 1560px) {
    .fr-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 10px;
        width: 916px;       /* elimina spazio viola */
        margin: 0 auto;
    }
}










@media (min-width: 1261px) and (max-width: 1559px) {

    /* Container delle card */
    .fr-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
        max-width: 1220px;
        margin: 0 auto;
    }

    /* Ogni card prende 1/3 della riga */
    .fr-grid .fr-card {
        flex: 0 0 calc((100% / 3) - 20px);
        margin: 0 0 10px 0 !important;   /* <-- margin-bottom 10px */
    }
}









@media (min-width: 1261px) and (max-width: 1559px) {
    .join2-layout {
        max-width: 1240px !important;
    }
}









@media (min-width: 1059px) and (max-width: 1260px) {

    .fr-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* 2 card per riga */
    .fr-grid .fr-card {
        flex: 0 0 calc((100% / 2) - 20px);
        margin: 0 0 10px 0 !important; /* se vuoi tenere il bottom 10px */
    }
}







@media (min-width: 1059px) and (max-width: 1260px) {
    .join2-layout {
        max-width: 1040px !important;
    }
}








@media (max-width: 1059px) {
    .join2-photo-col:last-child {
        display: none !important;
    }
}







@media (min-width: 769px) and (max-width: 1058px) {

    .fr-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* 2 card per riga */
    .fr-grid .fr-card {
        flex: 0 0 calc((100% / 2) - 20px);
        margin: 0 0 10px 0 !important;
    }
}








@media (min-width: 769px) and (max-width: 1058px) {
    .join2-layout {
        max-width: 740px !important;
    }
}







@media (max-width: 419px) {

    .fr-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .fr-grid .fr-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
    }
}










@media (max-width: 828px) {

    /* COLONNE ALLINEATE PERFETTAMENTE */
    .footer-columns {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: stretch !important;   /* ← fondamentale */
        gap: 20px;
        width: 100%;
    }

    /* CONTENUTO INTERNO ALLINEATO AL CENTRO */
    .footer-columns .footer-col {
        flex: 1 1 33%;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 10px;
    }

    /* Titoli centrati */
    .footer-columns .footer-col h3 {
        text-align: center !important;
    }
}






@media (max-width: 828px) {
    .footer-col.footer-col-logo {
        display: none !important;
    }
}