/*
 * ══════════════════════════════════════════════════════════════════
 *  APDG Store — Home page
 *  Hero, sections produits, carousel, catégories.
 * ══════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════════
   HERO — split 50/50
   ══════════════════════════════════════════════════════════════════ */

.home-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 600px;
    overflow: hidden;
}

/* Colonne gauche — fond primary-500 */
.home-hero__content {
    background-color: var(--color-primary-500);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xl);
    padding: 80px;
    text-align: center;
}

.home-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.home-hero__title {
    font-family: var(--font-headline);
    font-size: var(--text-headline);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-headline);
    color: var(--color-surface-50);
    max-width: 560px;
}

.home-hero__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    color: var(--color-surface-50);
    max-width: 560px;
}

.home-hero__cta {
    align-self: center;
}

/* Colonne droite — image */
.home-hero__image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--color-surface-100);
}

.home-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.home-hero__image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary-200), var(--color-surface-100));
}

.home-hero__image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.20);
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   SECTIONS GÉNÉRIQUES
   ══════════════════════════════════════════════════════════════════ */

.home-section {
    padding-block: var(--container-py);
}

.home-section--white {
    background: var(--color-surface-50);
}

/* Fond vert très clair (section événementiels) */
.home-section--primary-200 {
    background: var(--color-primary-200);
}

/* En-tête de section */
.home-section__header {
    margin-bottom: var(--gap-2xl);
}

.home-section__header--center {
    text-align: center;
}

.home-section__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-regular);
    color: var(--color-surface-950);
    margin-bottom: 4px;
}

.home-section__title {
    font-family: var(--font-title);
    font-size: var(--text-title);
    font-weight: var(--fw-semibold);
    color: var(--color-surface-950);
    line-height: var(--lh-title);
}

/* Titre sur fond coloré (primary-200) */
.home-section__title--dark {
    color: var(--color-primary-950);
}

/* ══════════════════════════════════════════════════════════════════
   CAROUSEL PRODUITS
   Affiche 4 colonnes, scroll horizontal sur mobile
   ══════════════════════════════════════════════════════════════════ */

.home-products-carousel {
    position: relative;
    /* Pas de padding, pas d'overflow hidden : les boutons débordent en dehors */
}

/* Fenêtre qui masque les cartes hors-vue — pleine largeur du container */
.home-products-carousel__window {
    overflow: hidden;
    width: 100%;
}

/* Track = bande flex qui glisse avec translateX */
.home-products-carousel__track {
    display: flex;
    gap: 24px;
    flex-wrap: nowrap;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* Chaque carte produit dans le carousel — 292px fixe comme Figma */
.home-products-carousel__track .prod-card,
.home-products-carousel__track .product-card {
    flex: 0 0 292px;
    width: 292px;
}

/* Boutons prev/next */
.home-products-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-surface-50);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    color: var(--color-surface-950);
    transition: background 0.15s, transform 0.15s;
    z-index: 2;
}

.home-products-carousel__btn:hover {
    background: var(--color-surface-100);
    transform: translateY(-50%) scale(1.05);
}

.home-products-carousel__btn--prev {
    left: -36px;
}

.home-products-carousel__btn--next {
    right: -36px;
}

/* ══════════════════════════════════════════════════════════════════
   SECTION CATÉGORIES — grille asymétrique
   ══════════════════════════════════════════════════════════════════ */

.home-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
    height: 500px;
}

/* Vignette catégorie commune */
.home-categories__card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-100);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    height: 100%;
}

.home-categories__card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.20);
    border-radius: var(--radius-md);
    pointer-events: none;
}

.home-categories__btn {
    position: relative;
    z-index: 1;
    /* Le fond blanc est déjà dans .btn--white */
}

/* Colonne principale (grande vignette) */
.home-categories__main {
    height: 100%;
}

.home-categories__main .home-categories__card {
    height: 100%;
}

/* Colonne secondaire (2 vignettes empilées) */
.home-categories__secondary {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    height: 100%;
}

.home-categories__secondary .home-categories__card {
    flex: 1;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablette large ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .home-products-carousel__btn--prev { left: -20px; }
    .home-products-carousel__btn--next { right: -20px; }

    .home-categories {
        grid-template-columns: 1fr 1fr;
        height: 400px;
    }
}

/* ── Tablette ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Hero : empilement vertical */
    .home-hero {
        grid-template-columns: 1fr;
        height: auto;
    }
    .home-hero__content {
        padding: 60px 40px;
        min-height: 360px;
    }
    .home-hero__image-wrap {
        height: 280px;
    }

    /* Catégories */
    .home-categories {
        grid-template-columns: 1fr;
        height: auto;
    }
    .home-categories__main { height: auto; }
    .home-categories__main .home-categories__card {
        height: 280px;
    }
    .home-categories__secondary {
        flex-direction: row;
        height: 180px;
    }
    .home-categories__secondary .home-categories__card {
        flex: 1;
        height: 180px;
    }

    /* Carousel : 2 cartes visibles */
    .home-products-carousel__track .prod-card,
    .home-products-carousel__track .product-card {
        flex: 0 0 260px;
        width: 260px;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hero mobile */
    .home-hero__content {
        padding: 48px 24px;
        min-height: 300px;
    }
    .home-hero__title {
        font-size: 28px;
        line-height: 36px;
        max-width: 100%;
    }
    .home-hero__image-wrap {
        height: 220px;
    }

    /* Section padding réduit */
    .home-section {
        padding-block: 48px;
    }

    /* Carousel mobile : 1 carte + aperçu de la suivante */
    .home-products-carousel {
        padding: 0 16px;
    }
    .home-products-carousel__track .prod-card,
    .home-products-carousel__track .product-card {
        flex: 0 0 calc(100vw - 80px);
        width: calc(100vw - 80px);
        max-width: 292px;
    }
    .home-products-carousel__track .prod-card__image-wrap {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
    /* Boutons carousel masqués sur mobile (swipe tactile) */
    .home-products-carousel__btn {
        display: none;
    }

    /* Catégories mobile */
    .home-categories {
        grid-template-columns: 1fr;
        height: auto;
    }
    .home-categories__main .home-categories__card {
        height: 220px;
    }
    .home-categories__secondary {
        flex-direction: column;
        height: auto;
    }
    .home-categories__secondary .home-categories__card {
        height: 160px;
    }

    /* Section valeurs : 1 colonne */
    .home-values {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ── Petit mobile ────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .home-hero__content {
        padding: 40px 20px;
    }
    .home-hero__title {
        font-size: 24px;
        line-height: 32px;
    }
    .home-hero__cta .btn {
        width: 100%;
        justify-content: center;
    }
}

.home-categories__btn { display: flex; align-items: center; gap: 6px; }