/* ==========================================================================
   LAYOUT — Spices of Kerala
   Container, grid system, section spacing, mobile-first breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTAINER
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-xl);   /* 1200px */
  margin-inline: auto;
  padding-inline: var(--space-4);   /* 16px */
}

@media (min-width: 640px) {
  .container {
    padding-inline: var(--space-6); /* 24px */
  }
}

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

@media (min-width: 1400px) {
  .container {
    padding-inline: var(--space-10); /* 40px */
  }
}

/* Container size variants */
.container--xs  { max-width: var(--container-xs); }
.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--xl  { max-width: var(--container-xl); }   /* Default */
.container--2xl { max-width: var(--container-2xl); }
.container--full { max-width: 100%; }

/* --------------------------------------------------------------------------
   GRID SYSTEM — 12 column, mobile-first
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}

/* Gap utilities */
.grid--gap-sm  { gap: var(--space-3); }
.grid--gap-md  { gap: var(--space-6); }
.grid--gap-lg  { gap: var(--space-8); }
.grid--gap-xl  { gap: var(--space-10); }
.grid--no-gap  { gap: 0; }

/* Column spans — mobile (default, full width) */
.col-1   { grid-column: span 1; }
.col-2   { grid-column: span 2; }
.col-3   { grid-column: span 3; }
.col-4   { grid-column: span 4; }
.col-5   { grid-column: span 5; }
.col-6   { grid-column: span 6; }
.col-7   { grid-column: span 7; }
.col-8   { grid-column: span 8; }
.col-9   { grid-column: span 9; }
.col-10  { grid-column: span 10; }
.col-11  { grid-column: span 11; }
.col-12  { grid-column: span 12; }
.col-full { grid-column: 1 / -1; }

/* Column spans — tablet (768px+) */
@media (min-width: 768px) {
  .col-md-1   { grid-column: span 1; }
  .col-md-2   { grid-column: span 2; }
  .col-md-3   { grid-column: span 3; }
  .col-md-4   { grid-column: span 4; }
  .col-md-5   { grid-column: span 5; }
  .col-md-6   { grid-column: span 6; }
  .col-md-7   { grid-column: span 7; }
  .col-md-8   { grid-column: span 8; }
  .col-md-9   { grid-column: span 9; }
  .col-md-10  { grid-column: span 10; }
  .col-md-11  { grid-column: span 11; }
  .col-md-12  { grid-column: span 12; }
  .col-md-full { grid-column: 1 / -1; }
}

/* Column spans — desktop (1024px+) */
@media (min-width: 1024px) {
  .col-lg-1   { grid-column: span 1; }
  .col-lg-2   { grid-column: span 2; }
  .col-lg-3   { grid-column: span 3; }
  .col-lg-4   { grid-column: span 4; }
  .col-lg-5   { grid-column: span 5; }
  .col-lg-6   { grid-column: span 6; }
  .col-lg-7   { grid-column: span 7; }
  .col-lg-8   { grid-column: span 8; }
  .col-lg-9   { grid-column: span 9; }
  .col-lg-10  { grid-column: span 10; }
  .col-lg-11  { grid-column: span 11; }
  .col-lg-12  { grid-column: span 12; }
  .col-lg-full { grid-column: 1 / -1; }
}

/* Column spans — large (1400px+) */
@media (min-width: 1400px) {
  .col-xl-1   { grid-column: span 1; }
  .col-xl-2   { grid-column: span 2; }
  .col-xl-3   { grid-column: span 3; }
  .col-xl-4   { grid-column: span 4; }
  .col-xl-5   { grid-column: span 5; }
  .col-xl-6   { grid-column: span 6; }
  .col-xl-7   { grid-column: span 7; }
  .col-xl-8   { grid-column: span 8; }
  .col-xl-9   { grid-column: span 9; }
  .col-xl-10  { grid-column: span 10; }
  .col-xl-11  { grid-column: span 11; }
  .col-xl-12  { grid-column: span 12; }
  .col-xl-full { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   AUTO-FIT PRODUCT GRIDS
   -------------------------------------------------------------------------- */
.grid--products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}

@media (max-width: 479px) {
  .grid--products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

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

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

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

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

@media (min-width: 1024px) {
  .grid--products-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   SECTION SPACING
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-12);
}

.section--sm {
  padding-block: var(--space-8);
}

.section--lg {
  padding-block: var(--space-20);
}

.section--xl {
  padding-block: var(--space-28);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-16);
  }
  .section--sm {
    padding-block: var(--space-12);
  }
  .section--lg {
    padding-block: var(--space-24);
  }
  .section--xl {
    padding-block: var(--space-32);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-20);
  }
  .section--lg {
    padding-block: var(--space-28);
  }
}

/* Section background variants */
.section--cream   { background-color: var(--color-cream); }
.section--white   { background-color: var(--color-white); }
.section--warm    { background-color: var(--color-warm-white); }
.section--primary { background-color: var(--color-turmeric-50); }
.section--secondary { background-color: var(--color-cardamom-50); }
.section--dark    {
  background-color: var(--color-charcoal-800);
  color: var(--color-cream);
}

/* --------------------------------------------------------------------------
   FLEX LAYOUTS (commonly used)
   -------------------------------------------------------------------------- */
.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--start        { display: flex; align-items: flex-start; }
.flex--end          { display: flex; align-items: center; justify-content: flex-end; }
.flex--col          { display: flex; flex-direction: column; }
.flex--col-center   { display: flex; flex-direction: column; align-items: center; }
.flex--wrap         { flex-wrap: wrap; }
.flex--gap-2        { gap: var(--space-2); }
.flex--gap-3        { gap: var(--space-3); }
.flex--gap-4        { gap: var(--space-4); }
.flex--gap-6        { gap: var(--space-6); }
.flex--gap-8        { gap: var(--space-8); }

/* --------------------------------------------------------------------------
   MAIN CONTENT WRAPPER
   -------------------------------------------------------------------------- */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
  padding-top: calc(var(--header-height-mobile) + var(--announcement-bar-height));
}

@media (min-width: 768px) {
  .site-main {
    padding-top: calc(var(--header-height-desktop) + var(--announcement-bar-height));
  }
}

/* --------------------------------------------------------------------------
   TWO-COLUMN SIDEBAR LAYOUT
   -------------------------------------------------------------------------- */
.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .layout-sidebar {
    grid-template-columns: 280px 1fr;
  }
  .layout-sidebar--right {
    grid-template-columns: 1fr 320px;
  }
}

.layout-sidebar__sidebar {
  position: sticky;
  top: calc(var(--header-height-desktop) + var(--announcement-bar-height) + var(--space-6));
}

/* --------------------------------------------------------------------------
   ASPECT RATIOS
   -------------------------------------------------------------------------- */
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-video    { aspect-ratio: 16 / 9; }
.aspect-4-3      { aspect-ratio: 4 / 3; }
.aspect-3-4      { aspect-ratio: 3 / 4; }
.aspect-product  { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   DIVIDERS
   -------------------------------------------------------------------------- */
.divider {
  height: 1px;
  background-color: var(--color-border);
  margin-block: var(--space-6);
}

.divider--spice {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-turmeric-400),
    var(--color-cinnamon-400),
    var(--color-turmeric-400),
    transparent
  );
  border: none;
  margin-block: var(--space-10);
}