/*
 * grid.css — Calzedonia Maroc
 * Système de grille extrait du source (Foundation + Chakra flex patterns)
 * Recodé en CSS Custom Properties natif — zéro dépendance.
 * Propriétés logiques pour RTL natif.
 */

/* ─────────────────────────────────────────────
   CONTENEUR PRINCIPAL
   ───────────────────────────────────────────── */

/*
 * .container — wrapper de largeur max
 * Breakpoints extraits de --chakra-breakpoints-*
 */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);      /* 1rem = 14px mobile */
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-8);    /* 2rem tablet */
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--space-10);   /* 2.5rem desktop */
    max-width: 1440px;                 /* --bp-xl = largeur de design */
  }
}

@media (min-width: 1440px) {
  .container {
    padding-inline: var(--space-12);   /* 3.125rem grand écran */
  }
}

/* .container--flush — sans padding horizontal (hero, sections pleine largeur) */
.container--flush {
  width: 100%;
  margin-inline: auto;
  max-width: 1440px;
}

/* ─────────────────────────────────────────────
   GRILLE FLEX — pattern extrait du source
   Foundation : .grid-x + .cell
   Chakra : display:flex + gap
   ───────────────────────────────────────────── */

/* .grid — conteneur flex (équivalent .grid-x Foundation) */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap, 0);
}

/* .grid--gap — grille avec gap standard */
.grid--gap {
  --grid-gap: var(--space-4);
}

.grid--gap-lg {
  --grid-gap: var(--space-8);
}

/* ── Colonnes responsive (mobile-first) ── */

/* 1 colonne par défaut */
.col {
  flex: 1 0 100%;
  min-width: 0;
}

/* 2 colonnes dès tablet */
.col--half {
  flex: 1 0 100%;
}

@media (min-width: 768px) {
  .col--half {
    flex: 1 0 calc(50% - var(--grid-gap, 0px) / 2);
    max-width: calc(50% - var(--grid-gap, 0px) / 2);
  }
}

/* 3 colonnes dès tablet */
.col--third {
  flex: 1 0 100%;
}

@media (min-width: 768px) {
  .col--third {
    flex: 1 0 calc(33.333% - var(--grid-gap, 0px) * 2 / 3);
    max-width: calc(33.333% - var(--grid-gap, 0px) * 2 / 3);
  }
}

/* ─────────────────────────────────────────────
   GRILLE PRODUITS
   Extrait : product-grid (listing)
   Mobile : 2 col · Tablet : 3 col · Desktop : 4 col
   ───────────────────────────────────────────── */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-2);
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6) var(--space-4);
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8) var(--space-6);
  }
}

/* ─────────────────────────────────────────────
   GRILLE HOMEPAGE MULTICARDS (6 cartes catégories)
   Extrait : homepage-multiplecards-grid
   Mobile : 2 col · Tablet : 3 col · Desktop : 6 col
   ───────────────────────────────────────────── */

.multicards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .multicards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .multicards-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
  }
}

/* ─────────────────────────────────────────────
   GRILLE FOOTER CARDS (service client)
   Extrait : footer-card-container
   Mobile : 1 col · Tablet : 2 col · Desktop : 4 col
   ───────────────────────────────────────────── */

.footer-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .footer-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

/* ─────────────────────────────────────────────
   GRILLE FOOTER NAVIGATION (colonnes liens)
   Extrait : footer-navigation-banner
   Mobile : accordion · Desktop : 4-5 colonnes flex
   ───────────────────────────────────────────── */

.footer-nav-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .footer-nav-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-8);
  }
}

/* ─────────────────────────────────────────────
   SEO CONTENT GRID
   Extrait : seocontent.css .cell.large-5
   ───────────────────────────────────────────── */

.seo-grid {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(-1 * var(--space-11));  /* -2.67857rem */
}

@media (max-width: 63.93625em) {
  .seo-grid {
    margin-inline: 0;
  }
}

.seo-grid__cell {
  width: calc(50% - 90px);
  display: inline-block;
  margin: var(--space-11) var(--space-11) 0;
  flex: 1 0 auto;
}

@media (max-width: 63.93625em) {
  .seo-grid__cell {
    width: 100%;
    margin: var(--space-7) 0 0;
  }
}

/* ─────────────────────────────────────────────
   CAROUSEL / SCROLLING BOX
   Extrait : scrolling-box-test (card-carousel)
   ───────────────────────────────────────────── */

.scroll-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;           /* Firefox */
  -webkit-overflow-scrolling: touch;
}

.scroll-track::-webkit-scrollbar {
  display: none;                   /* Chrome/Safari */
}

.scroll-track__item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: calc(50vw - var(--space-6)); /* 2 items visibles mobile */
}

@media (min-width: 768px) {
  .scroll-track__item {
    width: calc(33.333vw - var(--space-6)); /* 3 items tablet */
  }
}

@media (min-width: 1024px) {
  .scroll-track__item {
    width: calc(25% - var(--space-4));      /* 4 items desktop */
  }
}

/* ─────────────────────────────────────────────
   UTILITAIRES LAYOUT
   ───────────────────────────────────────────── */

.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start   { display: flex; align-items: flex-start; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }

.grid-auto    { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.w-full       { width: 100%; }
.h-full       { height: 100%; }
.min-h-screen { min-height: 100dvh; }

.hidden       { display: none; }
.block        { display: block; }
.inline-block { display: inline-block; }

/* Responsive visibility */
.hide-mobile  { display: none; }
.show-mobile  { display: block; }

@media (min-width: 1024px) {
  .hide-mobile  { display: block; }
  .show-mobile  { display: none; }
  .hide-desktop { display: none; }
  .show-desktop { display: block; }
}

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }