/* ==================================================
   MARE A VELA
   PROGRAMMA CROCIERE
   CSS SPECIFICO PAGINA
================================================== */


/* =========================
   PAGINA GENERALE
========================= */


.pagina-programma {

    padding:60px 0;

}


.pagina-programma .contenitore {

    width:90%;
    max-width:1200px;
    margin:auto;

}


/* =========================
   COPERTINA
========================= */


.programma-cover {

    margin-bottom:40px;

}


.programma-cover img {

    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:15px;
    display:block;

}



/* =========================
   INTRODUZIONE
========================= */


.programma-intro {

    text-align:center;
    max-width:900px;
    margin:0 auto 50px;

}


.programma-intro h1 {

    color:#004080;
    font-size:38px;
    line-height:1.2;
    margin-bottom:25px;

}


.programma-intro p {

    font-size:18px;
    line-height:1.7;
    margin-bottom:15px;

}



/* =========================
   TITOLI
========================= */


.titolo-programma {

    text-align:center;
    color:#004080;
    font-size:34px;
    margin:50px 0 30px;

}



/* =========================
   TABELLE
========================= */


.tabella-scroll {

    width:100%;
    overflow-x:auto;
    margin-bottom:50px;

}


.programma-table {

    width:100%;
    border-collapse:collapse;
    background:white;
    font-size:16px;

}


.programma-table th {

    background:#004080;
    color:white;
    padding:15px;
    text-align:center;
    font-weight:700;

}


.programma-table td {

    padding:14px;
    border:1px solid #ddd;
    text-align:center;
    vertical-align:middle;

}


.programma-table tr:nth-child(even) {

    background:#f5f8fa;

}


.programma-table tr:hover {

    background:#eef8fa;

}



/* =========================
   IMBARCAZIONE
========================= */


.imbarcazione {

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

}


.imbarcazione img {

    width:50px;
    height:50px;
    object-fit:contain;

}



/* =========================
   STATO PRENOTAZIONE
========================= */


.stato {

    display:inline-block;
    font-weight:700;

}


.stato.completo {

    color:#777;

}


.stato.info {

    color:#0099cc;

}



.icona-stato {

    width:50px;
    height:50px;
    object-fit:contain;

}



/* =========================
   INFORMAZIONI FINALI
========================= */


.programma-info {

    text-align:center;
    max-width:900px;
    margin:40px auto;
    font-size:18px;
    line-height:1.6;

}



/* =========================
   BOX INFORMAZIONI
========================= */


.programma-box-info {

    display:flex;
    gap:40px;
    align-items:center;

    background:#f5f8fa;
    border-radius:15px;
    padding:35px;
    margin:40px 0;

}


.box-preiscrizione,
.programma-whatsapp {

    flex:1;

}


.programma-box-info h3 {

    color:#004080;
    font-size:24px;
    margin-bottom:20px;

}


.programma-box-info p {

    font-size:17px;
    line-height:1.6;

}



.programma-whatsapp {

    text-align:center;

}


.programma-whatsapp img {

    width:70px;
    height:70px;

}



/* =========================
   LINK APPROFONDIMENTO
========================= */


.programma-link {

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin:30px 0;

}


.programma-link .btn-secondario {

    min-width:180px;
    text-align:center;

}



/* =========================
   CALL TO ACTION
========================= */


.programma-cta {

    text-align:center;
    margin:50px 0 20px;

}


.programma-cta .btn {

    margin:10px;

}



/* ==================================================
   MOBILE
================================================== */


@media(max-width:768px) {


    .pagina-programma {

        padding:40px 0;

    }



    .pagina-programma .contenitore {

        width:92%;

    }



    .programma-cover img {

        height:250px;

    }



    .programma-intro h1 {

        font-size:30px;

    }



    .programma-intro p {

        font-size:16px;

    }



    .titolo-programma {

        font-size:28px;

        margin:35px 0 20px;

    }



    .programma-table {

        font-size:14px;

        min-width:850px;

    }



    .programma-box-info {

        flex-direction:column;

        padding:25px;

    }



    .programma-link {

        flex-direction:column;

        align-items:center;

    }



    .programma-link .btn-secondario {

        width:90%;

    }



}

/* =========================
   PULSANTI PROGRAMMA
========================= */


.programma-link .btn-secondario {

    display:inline-block;

    padding:12px 25px;

    background:white;

    color:#004080 !important;

    border:2px solid #004080;

    border-radius:6px;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:0.3s;

}



.programma-link .btn-secondario:hover {

    background:#004080;

    color:white !important;

}



/* =========================
   CTA FINALI
========================= */


.programma-cta .btn {

    display:inline-block;

    padding:14px 35px;

    background:#004080;

    color:white !important;

    border-radius:6px;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    margin:10px;

    transition:0.3s;

}



.programma-cta .btn:hover {

    background:#5FD3D8;

    color:#004080 !important;

}