/* ============================================================
   SITE.CSS — MONEDA NUMISMÁTICA
   Personalizzazioni specifiche del sito
   (HERO + griglia card 4→3→2→1)
============================================================ */


/* ------------------------------------------------------------
   1) HERO — gradiente blu → rame scuro
   (solo Moneda, perché questo file è caricato solo qui)
------------------------------------------------------------ */

.hero-section {
    background: linear-gradient(
        to right,
        #3a4d6a,  /* blu condiviso */
        #8b3a2a   /* rosso-rame scuro */
    );
    color: #fff;
}


/* ------------------------------------------------------------
   2) GRIGLIA DELLE CARD — 4 colonne da ~300px
   Layout uniforme per tutte le sezioni (Europa, Caribe, etc.)
------------------------------------------------------------ */

.site-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    gap: 2rem;

    /* la griglia occupa solo lo spazio necessario e viene centrata */
    width: fit-content;
    margin: 0 auto 3rem auto;
}


/* ------------------------------------------------------------
   3) RESPONSIVE
------------------------------------------------------------ */

/* Da 1500px in giù: 3 colonne */
@media (max-width: 1500px) {
    .site-card-grid {
        grid-template-columns: repeat(3, 300px);
    }
}

/* Da 1200px in giù: 2 colonne */
@media (max-width: 1200px) {
    .site-card-grid {
        grid-template-columns: repeat(2, 300px);
    }
}

/* Mobile: 1 colonna centrata */
@media (max-width: 900px) {

    .site-card-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;

        width: 100%;
        margin: 0 auto 3rem auto;
    }

    .site-card-grid > * {
        width: 300px;
        max-width: 100%;
    }
}