/* ══════════════════════════════════════════════
   Syntarq — Layout
   Griglia, contenitori, sezioni, spaziature.
   ══════════════════════════════════════════════ */

/* ── Contenitori ── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.container--narrow {
    max-width: var(--container-narrow);
}

/* ── Sezioni ── */
.section {
    padding: var(--space-section) 0;
}

.section--light {
    background-color: var(--color-white);
}

.section--alt {
    background-color: var(--color-grey-light);
}

.section--dark {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--color-white);
}

.section--dark p {
    color: rgba(255, 255, 255, 0.85);
}

.section--dark a {
    color: var(--color-cyan);
}

.section--dark a:hover {
    color: var(--color-white);
}

/* ── Griglia ── */
.grid {
    display: grid;
    gap: var(--grid-gap);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

/* Layout asimmetrico testo/immagine */
.grid--55-45 {
    grid-template-columns: 55% 1fr;
    align-items: center;
}

.grid--45-55 {
    grid-template-columns: 1fr 55%;
    align-items: center;
}

.grid--60-40 {
    grid-template-columns: 60% 1fr;
    align-items: start;
}

.grid--40-60 {
    grid-template-columns: 1fr 60%;
    align-items: start;
}

/* ── Flexbox utilities ── */
.flex {
    display: flex;
}

.flex--center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex--between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex--column {
    display: flex;
    flex-direction: column;
}

.flex--gap-sm {
    gap: var(--space-sm);
}

.flex--gap-md {
    gap: var(--space-md);
}

/* ── Allineamento testo ── */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

/* ── Spaziature helper ── */
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }

.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }

/* ── Offset per header fisso ── */
.main-content {
    padding-top: var(--header-height);
}

/* ── Hero sections ── */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
    padding: var(--space-xl) 0;
    overflow: hidden;
}

.hero--short {
    min-height: auto;
    padding: var(--space-xl) 0 var(--space-lg);
}

.hero--band {
    min-height: auto;
    padding: var(--space-lg) 0;
}

/* ── Responsive ── */

/* Tablet */
@media (max-width: 1200px) {
    .grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--55-45,
    .grid--45-55 {
        grid-template-columns: 1fr 1fr;
    }

    .grid--60-40,
    .grid--40-60 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-sm);
    }

    .grid--2,
    .grid--3,
    .grid--5 {
        grid-template-columns: 1fr;
    }

    .grid--55-45,
    .grid--45-55,
    .grid--60-40,
    .grid--40-60 {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
        padding: var(--space-lg) 0;
    }
}