:root {
    --layout-ratio: 1.6667; /* Rapporto di riduzione per adattare il layout a 720px */
    --layout-width: calc(1200px / var(--layout-ratio)); /* Larghezza del layout ridotta a 720px */
    --squares-container-width: calc(400px / var(--layout-ratio));
    --squares-container-height: calc(350px / var(--layout-ratio));
    --square-gap: calc(20px / var(--layout-ratio));
    --square-size: calc((var(--squares-container-width) - var(--square-gap)) / 2);
    --square-height: calc(130px / var(--layout-ratio));
}

/* RESET STRUTTURALE */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    font-size: calc(18px / var(--layout-ratio)); /* Grandezza del font globale a 30px */
}

/* LAYOUT A LARGHEZZA FISSA (NIENTE RESPONSIVE) */
.container {
    width: var(--layout-width);
    margin: 0 auto;
    background-color: white;
}

/* HEADER */
.main-header {
    display: flex;
    width: var(--layout-width);
    padding: calc(30px / var(--layout-ratio));
    align-items: center;
    /*border-bottom: 1px solid #ddd;*/
}

.header-left {
    flex: 0 0 calc(3 * var(--layout-width) / 4); /* Esattamente 3/4 di */
    display: flex;
    flex-direction: column;
}

.logo-link img {
    display: block;
	max-width: 450px;
}

.payoff {
    margin-top: 15px;
    color: #555;
	font-size: 25px;
}

.header-right {
    flex: 0 0 calc(var(--layout-width) / 4); /* Esattamente 1/4 di */
    display: flex;
    justify-content: flex-end;
}

.header-right-box {
    display: flex;
    align-items: center;
    justify-content: center;
 width: calc(150px / var(--layout-ratio));
    aspect-ratio: 1 / 1;
    /*background-color: #333;*/
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    transition: background 0.3s;
}

.header-right-box:hover {
    /*background-color: #555;*/
}

/* RIGHE DEL PATTERN ALTERNATO */
.pattern-row {
    display: flex;
    width: var(--layout-width);
    height: var(--squares-container-height); /* Altezza proporzionata alle nuove dimensioni delle colonne */
    margin-top: calc(30px / var(--layout-ratio)); /* Spazio bianco sopra la riga */
    margin-bottom: calc(30px / var(--layout-ratio)); /* Spazio bianco sotto la riga */
}

.pattern-row-footer {
    display: flex;
    width: var(--layout-width);
    height: calc(150px / var(--layout-ratio));
    margin-top: calc(30px / var(--layout-ratio)); /* Spazio bianco sopra la riga */
    margin-bottom: calc(30px / var(--layout-ratio)); /* Spazio bianco sotto la riga */
	text-align: -webkit-center;
}

/* NUOVA SUDDIVISIONE: 1/3 (400px) e 2/3 (800px) */
.col-25 {
    flex: 0 0 calc(var(--layout-width) * 1 / 4);
    width: calc(var(--layout-width) * 1 / 4);
    height: var(--squares-container-height);
}

.col-33 {
    flex: 0 0 calc(var(--layout-width) * 1 / 3);
    width: calc(var(--layout-width) * 1 / 3);
    height: var(--squares-container-height);
}

.col-40 {
    flex: 0 0 calc(var(--layout-width) * 1 / 2.75);
    width: calc(var(--layout-width) * 1 / 2.75);
    height: var(--squares-container-height);
}

.col-60 {
    flex: 0 0 calc(var(--layout-width) * 2 / 3.145);
    width: calc(var(--layout-width) * 2 / 3.145);
    height: var(--squares-container-height);
}

.col-66 {
    flex: 0 0 calc(2 * var(--layout-width) * 1 / 3);
    width: calc(2 * var(--layout-width) * 1 / 3);
    height: var(--squares-container-height);
}

.col-75 {
    flex: 0 0 calc(1 * var(--layout-width) * 3 / 4);
    width: calc(3 * var(--layout-width) * 3 / 4);
    height: var(--squares-container-height);
}

/* GESTIONE GRIGLIA QUADRATI (1/3 della riga) */
.grid-container {
    background-color: white;
    padding: 0px calc(30px / var(--layout-ratio)); /* Spazio bianco perimetrale esterno di 30px */
    width: calc(var(--layout-width) / 3);
    height: var(--squares-container-height);
}

.grid-quadrati {
    display: flex;
    flex-wrap: wrap;
    gap: calc(30px / var(--layout-ratio)); /* Spazio bianco in mezzo ai quadrati di 30px */
    width: calc(380px / var(--layout-ratio)); /* 400px - 60px di padding totali */
    height: calc(380px / var(--layout-ratio)); /* Altezza proporzionata alle nuove dimensioni delle colonne */
}

.quadrato {
    /* Calcolo per far entrare 2 quadrati perfettamente in 340px considerando il gap da 30px */
    flex: 0 0 calc((100% - 30px) / 2); 
    width: calc((100% - 30px) / 2);
    max-width: calc((100% - 30px) / 2);
    aspect-ratio: 1 / 1; /* Forza la forma perfettamente quadrata */
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    
    /* Colori richiesti */
    background-color: #c0bfbf;
    color: #333;
    transition: background-color 0.2s ease-in-out;
    word-break: break-word;
    font-size: calc(20px / var(--layout-ratio));
    max-height: var(--square-height);
}

/* EFFETTO HOVER */
.quadrato:hover {
    background-color: #aaa;
}


/* GESTIONE IMMAGINE (2/3 della riga) */
.image-box img {
    /*width: 800px;
    height: 400px;
    display: block;
    object-fit: cover;*/
    width: 100%;
   /* height: 100%; var(--image-container-height);
    display: block;*/
	padding-top:5px;
}

/* FOOTER */
.main-footer {
    width: var(--layout-width);
}

.footer-bar {
    width: 100%;
    height: 15px;
    background-color: red; /* Riga rossa a tutta larghezza layout */
}

.footer-text {
display: block;
    font-size: 19px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
	text-align: -webkit-center;
}
.footer-text-2 {
display: block;
    font-size: 19px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-style: italic;
    unicode-bidi: isolate;
	text-align: -webkit-center;
}

.continua{font-size: 30px;
text-decoration: underline;}

.continua-container {
	text-align: right;
    margin-right: calc(var(--square-gap) + 10px); /* Spazio a destra per distanziare dal bordo */
}