/* =============================================================
   LAYOUT — griglia, contenitori, struttura pagina
   ============================================================= */

/* --- Variabili ------------------------------------------------ */
:root {
    /* Colori brand */
    --color-brand:          #3B1E08;   /* marrone caffè scuro */
    --color-brand-mid:      #6B3A2A;   /* marrone medio */
    --color-accent:         #C8860A;   /* oro/caramello */
    --color-accent-light:   #F2C96E;   /* oro chiaro */
    --color-bg:             #FAFAFA;   /* bianco neutro */
    --color-bg-alt:         #F4EDE4;   /* beige chiaro */
    --color-card-dark:      #1A1A1A;   /* sfondo card scura (come nel mockup) */
    --color-text:           #1A1008;   /* quasi nero */
    --color-text-muted:     #7A6252;   /* grigio caldo */
    --color-border:         #E2D5C8;   /* bordo neutro */
    --color-white:          #FFFFFF;
    --color-error:          #C0392B;
    --color-success:        #27AE60;

    /* Tipografia */
    --font-heading:  'Playfair Display', Georgia, serif;
    --font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;

    /* Spaziature */
    --space-xs:  0.25rem;   /*  4px */
    --space-sm:  0.5rem;    /*  8px */
    --space-md:  1rem;      /* 16px */
    --space-lg:  1.5rem;    /* 24px */
    --space-xl:  2rem;      /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */

    /* Layout */
    --container-max:  1280px;
    --container-wide: 1440px;
    --container-sm:    800px;
    --gutter:          1.5rem;

    /* Griglia prodotti e categorie */
    --grid-cols: 4;
    --grid-gap:  1rem;       /* 16px — fedele al mockup */

    /* Bordi / raggi */
    --radius-sm:   4px;
    --radius-md:  12px;      /* card medio */
    --radius-lg:  16px;      /* card principale */
    --radius-pill: 999px;

    /* Ombre */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --shadow-md:  0 4px 12px rgba(0,0,0,.10);
    --shadow-lg:  0 8px 24px rgba(0,0,0,.12);

    /* Transizioni */
    --transition: 0.2s ease;

    /* Header */
    --topbar-height: 36px;
    --header-height: 60px;
    --header-total:  calc(var(--topbar-height) + var(--header-height));
}

/* --- Reset minimo -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }

/* --- Contenitore base ---------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--sm   { max-width: var(--container-sm); }

/* --- Struttura pagina ---------------------------------------- */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main {
    flex: 1;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-3xl);
}

/* --- Topbar -------------------------------------------------- */
/* Sfondo quasi-nero come nel mockup */
.topbar {
    height: var(--topbar-height);
    background: #111;
    color: var(--color-white);
    display: flex;
    align-items: center;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
/* Promo testo allineato a sinistra nel mockup */
.topbar__promo { flex: 1; }
.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

/* --- Header -------------------------------------------------- */
/* Nel mockup: bianco, bordo inferiore leggero, logo | search | cart */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
    display: flex;
    align-items: center;
}
.header__inner {
    display: grid;
    /* Logo fisso | search che prende tutto lo spazio | azioni fisse */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --- Navigazione (nascosta nell'header, menu mobile) --------- */
.main-nav { display: none; }   /* Le categorie sono card visive sulla homepage */

/* --- Hero banner --------------------------------------------- */
/* Nel mockup: card scura a bordi arrotondati, larghezza piena del container */
.hero-banner {
    position: relative;
    background: var(--color-card-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 200px;
    display: flex;
    align-items: flex-start;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.hero-banner__bg {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}
.hero-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* --- Griglia prodotti e categorie (identica struttura) ------- */
.imdc-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gap);
}

/* --- Sezioni homepage ---------------------------------------- */
.home-section { margin-bottom: var(--space-xl); }

/* --- Sidebar (pagine shop/archivio) -------------------------- */
.with-sidebar {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

/* --- Banner promozionale ------------------------------------ */
.promo-banner {
    background: var(--color-accent);
    color: var(--color-brand);
    padding-block: var(--space-md);
    text-align: center;
}

/* --- Footer -------------------------------------------------- */
.site-footer {
    background: var(--color-brand);
    color: var(--color-white);
    padding-top: var(--space-3xl);
}
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    padding-bottom: var(--space-3xl);
}
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.15);
    padding-block: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* --- Responsive --------------------------------------------- */
@media (max-width: 1100px) {
    :root { --grid-cols: 3; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    :root {
        --grid-cols: 2;
        --gutter: 1rem;
    }
    .with-sidebar { grid-template-columns: 1fr; }
    .footer__grid  { grid-template-columns: 1fr; }
    /* Nav mobile */
    .main-nav { display: none; }
    .main-nav.is-open {
        display: block;
        background: var(--color-white);
        border-bottom: 1px solid var(--color-border);
    }
    .main-nav__list { flex-direction: column; }
}

@media (max-width: 480px) {
    :root { --grid-cols: 2; }
    .hero-banner { min-height: 140px; }
}