/* ==========================================================================
   El Noa Noa Supermarket — LAYOUT
   Containers, grid, composition primitives and responsive utilities.
   Mobile-first: unprefixed rules are the phone layout; media queries only
   ever add capability at wider viewports.

   Breakpoints (must match the documentation block in tokens.css):
     sm  480px    large phone
     md  768px    tablet
     lg  1024px   small laptop
     xl  1280px   desktop
     2xl 1440px   large desktop
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINER
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

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

/* Full-bleed inside a container: breaks out to the viewport edges without
   requiring the parent to be restructured. */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   2. SECTION RHYTHM
   -------------------------------------------------------------------------- */

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

.section-sm { padding-block: clamp(2rem, 1.2rem + 3vw, 3rem); }
.section-lg { padding-block: clamp(4rem, 2.2rem + 8vw, 7rem); }

.section-alt     { background-color: var(--color-surface-alt); }
.section-surface { background-color: var(--color-surface); }
.section-inverse {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.section-inverse h1,
.section-inverse h2,
.section-inverse h3,
.section-inverse h4 {
  color: var(--color-text-inverse);
}

.section-inverse .text-muted {
  color: var(--color-text-on-inverse-muted);
}

/* --------------------------------------------------------------------------
   3. GRID
   .grid is a plain N-column grid that collapses to one column on phones.
   .grid-auto is the workhorse for product and category listings: it fits as
   many columns as the available width allows, with no breakpoint per page.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: 1fr;
}

.grid-tight { gap: var(--space-3); }
.grid-loose { gap: var(--space-8); }

/* Fluid track sizing. Override --col-min per instance:
   <div class="grid-auto" style="--col-min: 220px"> */
.grid-auto {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-min, 240px), 100%), 1fr));
}

/* Explicit column counts, applied progressively. Two columns already work on
   the smallest screens for compact tiles such as categories. */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 480px) {
  .sm\:grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* .grid-full-rows: a product rail (2 / 3 / 4 columns) never ends on a short
   row. The cards that would sit alone on the last row are hidden at that width;
   they are a homepage sample, and the "see all" link leads to the rest. A
   rail shorter than one row is left alone.
   Below 768px: two columns. */
@media (max-width: 767.98px) {
  .grid-full-rows > :last-child:nth-child(2n+1):not(:nth-child(-n+2)) { display: none; }
}
/* 768–1023px: three columns. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .grid-full-rows > :last-child:nth-child(3n+1):not(:nth-child(-n+3)),
  .grid-full-rows > :last-child:nth-child(3n+2):not(:nth-child(-n+3)),
  .grid-full-rows > :nth-last-child(2):nth-child(3n+1):not(:nth-child(-n+3)) { display: none; }
}
/* From 1024px: four columns. */
@media (min-width: 1024px) {
  .grid-full-rows > :last-child:nth-child(4n+1):not(:nth-child(-n+4)),
  .grid-full-rows > :last-child:nth-child(4n+2):not(:nth-child(-n+4)),
  .grid-full-rows > :last-child:nth-child(4n+3):not(:nth-child(-n+4)),
  .grid-full-rows > :nth-last-child(2):nth-child(4n+1):not(:nth-child(-n+4)),
  .grid-full-rows > :nth-last-child(2):nth-child(4n+2):not(:nth-child(-n+4)),
  .grid-full-rows > :nth-last-child(3):nth-child(4n+1):not(:nth-child(-n+4)) { display: none; }
}

/* Column spans. */
.col-span-2    { grid-column: span 2; }
.col-span-full { grid-column: 1 / -1; }

/* Sidebar + content, collapsing to a single column below lg. */
.layout-sidebar {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout-sidebar {
    grid-template-columns: var(--sidebar-width, 264px) minmax(0, 1fr);
    align-items: start;
  }

  .layout-sidebar-right {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 320px);
  }
}

/* --------------------------------------------------------------------------
   4. COMPOSITION PRIMITIVES
   -------------------------------------------------------------------------- */

/* Vertical rhythm between children without margin collapsing surprises. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

.stack-1 { --stack-gap: var(--space-1); }
.stack-2 { --stack-gap: var(--space-2); }
.stack-3 { --stack-gap: var(--space-3); }
.stack-6 { --stack-gap: var(--space-6); }
.stack-8 { --stack-gap: var(--space-8); }

/* Horizontal group that wraps instead of overflowing. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}

.cluster-2 { --cluster-gap: var(--space-2); }
.cluster-4 { --cluster-gap: var(--space-4); }
.cluster-center { justify-content: center; }
.cluster-end    { justify-content: flex-end; }

/* Two groups pushed apart, stacking on very small screens. */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.split-top { align-items: flex-start; }

/* Centre a block and cap its measure. */
.center {
  margin-inline: auto;
  text-align: center;
}

/* Push an element to the end of a flex row. */
.push-end { margin-inline-start: auto; }

/* --------------------------------------------------------------------------
   5. HORIZONTAL SCROLLER
   Department pills and mobile card rails. Scroll snapping with the scrollbar
   hidden, but keyboard and touch scrolling intact.
   -------------------------------------------------------------------------- */

.scroller {
  display: flex;
  gap: var(--scroller-gap, var(--space-3));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Bleed to the viewport edge on mobile so the last card is not clipped. */
  padding-inline: var(--container-gutter);
  margin-inline: calc(var(--container-gutter) * -1);
  padding-block: var(--space-1);
}

.scroller::-webkit-scrollbar {
  display: none;
}

.scroller > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  /* On desktop there is room for everything: stop bleeding and let it wrap. */
  .scroller-wrap-lg {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-inline: 0;
    margin-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   6. ASPECT RATIO AND MEDIA SLOTS
   Every image slot declares a ratio so the page never reflows during load.
   -------------------------------------------------------------------------- */

.ratio-square   { aspect-ratio: var(--ratio-square); }
.ratio-product  { aspect-ratio: var(--ratio-product); }
.ratio-card     { aspect-ratio: var(--ratio-card); }
.ratio-wide     { aspect-ratio: var(--ratio-wide); }
.ratio-banner   { aspect-ratio: var(--ratio-banner); }
.ratio-hero     { aspect-ratio: var(--ratio-hero); }
.ratio-portrait { aspect-ratio: var(--ratio-portrait); }

/* --------------------------------------------------------------------------
   7. SPACING UTILITIES
   Deliberately minimal. Components own their internal spacing; these exist
   for one-off adjustments in page templates.
   -------------------------------------------------------------------------- */

.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
/* Pushes an element to the bottom of a flex column. Keeps the action row of
   every card in a grid on the same line when titles wrap to different heights. */
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.p-0 { padding: 0; }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

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

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

.relative { position: relative; }
.sticky-top {
  position: sticky;
  top: var(--space-4);
}

.overflow-hidden { overflow: hidden; }

.rounded     { border-radius: var(--radius); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-full{ border-radius: var(--radius-full); }

/* --------------------------------------------------------------------------
   8. RESPONSIVE VISIBILITY
   Used for showing the mobile navigation trigger versus the desktop menu.
   -------------------------------------------------------------------------- */

.hide { display: none !important; }

@media (max-width: 767.98px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .hide-tablet { display: none !important; }
}

@media (min-width: 768px) {
  .show-mobile-only { display: none !important; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

@media (max-width: 1023.98px) {
  .show-desktop-only { display: none !important; }
}