/* Reset e impostazioni base */
/* Rimuove margini e padding predefiniti da tutti gli elementi e imposta box-sizing: border-box
   per includere padding e bordi nelle dimensioni totali degli elementi */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Stile base del corpo della pagina */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    min-height: 100vh;                                          /* Altezza minima uguale alla viewport */
    display: flex;                                              /* Attiva flexbox per il layout */
    flex-direction: column;                                     /* Organizza header, main e footer in colonna */
}

/* Header e Footer */
/* Stile per l'header con sfondo blu scuro e testo bianco */
header {
    background-color: #2c3e50;
    color: white;
    padding: 2rem;                                                  /* Spaziatura interna generosa */
    text-align: center;
}

/* Stile per i link nell'header */
header a {
    color: white;
    text-decoration: underline;                                     /* Sottolineato per chiarezza del link */
    text-align: center;
    display: inline-block;                                          /* Permette margin-top di funzionare */
    margin-top: 0.5rem;                                             /* Spazio sopra il link */
}

/* Stile per il footer simile all'header ma con colore leggermente più chiaro */
footer {
    background-color: #34495e;
    color: white;
    padding: 2rem;
    text-align: center;
    margin-top: auto;                                               /* Spinge il footer in basso quando c'è poco contenuto */
}

/* Main container */
/* Contenitore principale che centra il contenuto orizzontalmente */
main {
    max-width: 1200px;                                              /* Larghezza massima per schermi grandi */
    margin: 2rem auto;                                              /* Centratura orizzontale + margine verticale */
    padding: 0 2rem;                                                /* Spaziatura interna laterale */
    flex: 1;                                                        /* Occupa lo spazio disponibile tra header e footer */
}

/* ====== INDEX ===== */
/* Grigia per la pagina principale che elenca i quadri */
.grid-quadri {
    display: grid;                                                  /* Attiva il layout a griglia */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));    /* Responsive: colonne min 280px, max flessibile */
    gap: 25px;                                                      /* Spazio tra le card */
    align-items: start;                                             /* Allinea le card in alto (utile se hanno altezze diverse) */
}

/* Card layout per i quadri */
.quadro {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;                                                /* Spaziatura interna */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);                          /* Ombra leggera per effetto profondità */
    text-align: center;
}

/* Stile per le miniature delle immagini dei quadri */
.quadro .miniatura {
    width: 100%;                                                    /* Occupa tutta la larghezza della card */
    height: auto;                                                   /* Mantiene le proporzioni originali */
    border-radius: 4px;                                             /* Leggero arrotondamento */
    margin-bottom: 1rem;                                            /* Spazio sotto l'immagine */
}

/* Titolo del quadro nella card */
.quadro h3 {
    color: #2c3e50;                                                 /* Stesso colore dell'header per coerenza */
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

/* Artista nella card (testo più piccolo e grigio) */
.quadro h5 {
    color: #7f8c8d;
    margin-bottom: 1rem;
    font-weight: normal;
    font-size: 0.9rem;
}

/* Bottone/pulsante primario per i dettagli */
.quadro .primary {
    display: inline-block;
    background-color: #3498db;                                      /* Blu brillante */
    color: white;
    text-decoration: none;                                          /* Rimuove sottolineatura */
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;                              /* Transizione morbida al hover */
}

/* Effetto hover per il bottone */
.quadro .primary:hover {
    background-color: #2980b9;                                      /* Blu più scuro */
}

/* ===== PAGINA DEI DETTAGLI ===== */
/* Container principale per la pagina di dettaglio */
.container {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);                          /* Stessa ombra delle card */
}

/* Layout verticale: due colonne per immagine e dettagli */
.quadro-verticale {
    display: grid;
    grid-template-columns: 1fr 1fr;                                 /* Due colonne di uguale larghezza (una frazione) */
    gap: 2rem;                                                      /* Spazio tra le colonne */
}

/* Layout orizzontale: tutto in colonna */
.quadro-orizzontale {
    display: flex;
    flex-direction: column;                                         /* Elementi in colonna */
    gap: 2rem;
}

/* Contenitore per l'immagine nella pagina di dettaglio */
.img-container {
    text-align: center;                                             /* Centra l'immagine */
}

.img-container img {
    max-width: 100%;                                                /* Immagine responsive */
    height: auto;                                                   /* Mantiene proporzioni */
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Contenitore per la tabella (scroll orizzontale se necessario su mobile) */
.table-container {
    overflow-x: auto;                                    /* Abilita scroll orizzontale se la tabella è troppo larga */
}

/* Stile tabella */
table {
    width: 100%;                                         /* Tabella larga quanto il contenitore */
    border-collapse: collapse;                           /* Bordi uniti invece che doppi */
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #ddd;                       /* Linea sottile di separazione */
}

/* Intestazioni tabella */
th {
    background-color: #f8f9fa;                            /* Grigio chiarissimo */
    font-weight: bold;
    color: #2c3e50;
    width: 30%;                                            /* Le intestazioni occupano il 30% della larghezza */
}

/* Stile per la cella del titolo nella tabella dei dettagli */
th.titolo, td.titolo h1 {
    color: #2c3e50;
}

td.titolo h1 {
    font-size: 1.8rem;
    margin: 0;                                             /* Rimuove margini predefiniti dell'h1 */
}

/* Stile per la cella dell'artista */
td.artista h3 {
    color: #7f8c8d;
    margin: 0;
    font-weight: normal;
}

/* Responsive per mobile */
/* Media query per schermi fino a 768px di larghezza (tablet e mobile) */
@media (max-width: 768px) {
    /* Sul mobile, il layout verticale diventa a una colonna */
    .quadro-verticale {
        grid-template-columns: 1fr;                        /* Una sola colonna */
    }

    /* Riduce il padding laterale del main per sfruttare meglio lo spazio */
    main {
        padding: 0 1rem;
    }

    /* Grigia della homepage a una colonna su mobile */
    .grid-quadri {
        grid-template-columns: 1fr;
    }
}