<!-- Page Version 1.0 -->
<!-- Written by Fabio Cujo Strinna -->
<!-- Last Modify 01-12-2025
/* ============================================================= */
/* responsive.css – VERSIONE DEFINITIVA e FUNZIONANTE            */
/* Ultimo aggiornamento: 05-12-2025                             */
/* ============================================================= */

/* 1. Desktop: nascondiamo sempre le card mobile */
.eventi-mobile {
    display: none !important;
}

/* 2. Mobile + Tablet = 868px – INDEX.PHP (card al posto della tabella) */
@media (max-width: 868px)
	{
    table.eventi
		{ display: none !important; }
	
    .eventi-mobile
		{
        display: flex !important;
        flex-direction: column;
        gap: 34px;
        padding: 0 12px;
        max-width: 100%;
        margin: 0 auto;
		}
		
    .evento-card
		{
        background: rgba(255,255,255,0.05);
        border: 2px dotted #777;
        border-radius: 18px;
        overflow: hidden;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    	}
		
	.evento-card h3
		{
        background-color: #F0F0F0 !important;
        color: Maroon !important;
        border-radius: 18px 8px !important;
        padding: 12px 10px !important;
        font-size: 17px !important;
        font-weight: bold !important;
        margin: 0 !important;
	    }

    .evento-card .logo-tabella {
        width: 160px;
		height: 160px;
		margin: 16px auto;
        background-color: #fff;
		border-radius: 8px;
		object-fit: contain;
        transition: transform .3s ease, box-shadow .3s ease;
	    }

    .evento-card .logo-tabella:hover
		{
        transform: scale(1.08);
        box-shadow: 0 0 15px 4px rgba(255,255,255,.7);
	    }

	.evento-card .info
		{
		font-size: 14px !important;
		padding: 14px 10px !important;
		background: rgba(0,0,0,0.15);
		color: white;
		line-height: 1.5 !important;
		}

	.evento-card .btn-iscrizione
		{
        background-color: #444 !important;
		color: #fff !important;
        border: 2px solid #777 !important;
		border-radius: 18px 8px !important;
        padding: 8px 14px !important;
		font-size: 1.4em !important;
		font-weight: 600 !important;
        width: 82% !important;
		max-width: 300px !important;
		margin: 16px auto 20px !important;
        transition: all .25s ease;
		display: block !important;
		}
		
	/*.evento-card .btn-iscrizione[disabled], */
	.evento-card .btn-iscrizione:disabled,
	.evento-card .btn-iscrizione.disabled
		{
		background-color: #222 !important;
		color: #999 !important;
		border-color: #555 !important;
		cursor: not-allowed !important;
		box-shadow: none !important;
		transform: none !important;
		}
    .evento-card .btn-iscrizione:hover:not(:disabled)
		{
        background-color: #fff !important;
		color: #000 !important;
        box-shadow: 0 0 15px 4px rgba(255,255,255,.8) !important;
		transform: scale(1.05) !important;
		}

	/* Fix riga "istruzioni" che va a capo strana (tutte le pagine) 
    .istruzioni
		{
		white-space: normal !important;
        line-height: 1.4 !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        box-sizing: border-box;
        padding: 12px 20px !important;
		}
*/
/* Tablet medio: 2 card per riga */
@media (min-width: 569px) and (max-width: 868px)
	{
    .eventi-mobile
		{
        flex-direction: row !important;
        flex-wrap: wrap !important;
		justify-content: center !important;
        gap: 28px !important;
        padding: 0 20px !important;
		/*display: flex !important; */
		}
		
    .evento-card
		{
		flex: 0 1 calc(50% - 30px) !important;
        max-width: calc(50% - 30px) !important;
		}
		
    .evento-card .logo-tabella
		{
		width: 140px !important;
        height: 140px !important;
		/*margin:14px auto; */
		}
	}

/* ============================================================= */
/* HEADER RIUTILIZZABILE – versione mobile/tablet                */
/* ============================================================= */
@media (max-width: 868px) {
    .main-title,
    .sub-title {
        min-width: unset;          /* elimina larghezza fissa */
        width: 96%;
        max-width: 500px;
        padding: 12px 16px;
        font-size: 20px;
    }
    .sub-title {
        font-size: 17px;
        margin-top: 14px;
    }
}

@media (max-width: 480px) {
    .main-title   { font-size: 19px; }
    .sub-title    { font-size: 16.5px; }
}

/* ============================================================= */
/* DISTANZE.PHP – tabella responsive */
/* ============================================================= */
@media (max-width: 768px)
	{
    .content table td, .content table th
		{
		font-size: 13px !important;
		padding: 8px 4px !important;
		}
		
    .content table .label
		{
		font-size: 11px !important;
		padding: 6px 2px !important;
		}
		
    .content table input[type="checkbox"]
		{
		transform: scale(1.3);
		margin: 0 auto;
		display: block;
		}
		
    .content table td:nth-child(3)
		{
		white-space: normal !important;
		word-wrap: break-word;
		max-width: 120px;
		}
	}
	
@media (max-width: 420px)
	{
    .content table td, .content table th
		{
		font-size: 12px !important;
		padding: 6px 3px !important;
		}
		
    .content table .label
		{
		font-size: 10px !important;
		}
		
    .content table td:nth-child(3)
		{
		max-width: 100px;
		font-size: 12.5px !important;
		}
	}

/* ============================================================= */
/* TUTTI I FORM CHE DEVONO DIVENTARE VERTICALI SU MOBILE         */
/* Aggiungi semplicemente class="form-vertical-mobile" al <form> */
/* ============================================================= */
@media (max-width: 768px) {
    .content .form-vertical-mobile table {
        display: block !important;
        width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }
    .content .form-vertical-mobile tr {
        display: block !important;
        margin-bottom: 18px !important;
		padding-bottom: 14px !important;
    }
	.content .form-vertical-mobile tr:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 14px !important;
    }
    .content .form-vertical-mobile td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 6px 0 !important;
    }
    .content .form-vertical-mobile .label {
        font-size: 14px !important;
        padding: 10px 12px !important;
        font-weight: bold !important;
        border-radius: 12px 6px !important;
        margin-bottom: 4px !important;
        background: #707070;
        color: white;
    }
    .content .form-vertical-mobile input[type="text"],
    .content .form-vertical-mobile input[type="email"],
    .content .form-vertical-mobile input[type="tel"],
    .content .form-vertical-mobile input[type="date"],
    .content .form-vertical-mobile select {
        width: 100% !important;
        padding: 10px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        box-sizing: border-box;
    }
    .content .form-vertical-mobile input[type="radio"] + label,
    .content .form-vertical-mobile input[type="checkbox"] + label {
        font-size: 14px !important;
        margin-left: 8px;
    }
	.content .form-vertical-mobile input[type="button"],
	.content .form-vertical-mobile input[type="submit"] {
		width: auto !important;
		min-width: 280px;                          /* ? larghezza minima decente */
		max-width: 90%;                            /* ? non supera mai il contenitore */
		padding: 14px 30px !important;
		font-size: 17px !important;
		border-radius: 18px 8px !important;
		margin: 20px auto !important;              /* ? centrato orizzontalmente */
		display: block !important;                 /* ? necessario per margin auto */
		}
    .content .form-vertical-mobile td[style*="width"] { /* nasconde spazi vuoti */
        display: none !important;
    }
}

@media (max-width: 420px) {
    .content .form-vertical-mobile .label { font-size: 13px !important; }
    .content .form-vertical-mobile input,
    .content .form-vertical-mobile select { font-size: 15px !important; padding: 9px !important; }
}