/* ==========================================================================
   Hiwa Saeed Yasin — LAYOUT
   Containers, sections, bands and grids. No colour lives here.
   ========================================================================== */

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

.container--narrow { max-width: 760px; }


/* ---- Sections and bands ---------------------------------------------------
   .section owns vertical rhythm. .band owns background. They are kept apart on
   purpose: an element that needed both used to end up with two competing
   padding rules, and whichever stylesheet loaded last won. Now a band is only
   ever a colour and a section is only ever space.
   -------------------------------------------------------------------------- */

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

.section--tight { padding-block: calc(var(--section-y) * 0.55); }

.band       { background: var(--bg); }
.band--lift { background: var(--bg-lift); }
.band--sink { background: var(--bg-sink); }


/* The head of a section: eyebrow, heading, one line, and often a link sitting
   out at the far end on wide screens. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  margin-block-end: var(--s-7);
}

.section-head__text { max-width: 46ch; }
.section-head p { margin-block-start: var(--s-3); color: var(--fg-soft); }


/* ---- Stacks and rows ------------------------------------------------------ */

.stack    > * + * { margin-block-start: var(--s-4); }
.stack-sm > * + * { margin-block-start: var(--s-2); }
.stack-lg > * + * { margin-block-start: var(--s-6); }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.row--between { justify-content: space-between; }
.row--end     { justify-content: flex-end; }


/* ---- Grids ----------------------------------------------------------------
   Product cards sit close together with a tight gutter and a generous row gap.
   Goods on a shelf are stacked near each other; the air goes between the
   shelves, not between the folded pieces.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--s-5);
}

.grid--cards {
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-7);
  /* Cards size to their own content. Photographs fit their frames exactly, so
     a landscape shot makes a shorter card than an upright one; stretching them
     to match would put a band of dead space under the short ones. */
  align-items: start;
}

/* Flex rather than grid, and centred.

   The category tiles are built from taxonomy.js, so the count is whatever the
   shop happens to sell — it was three, it is five now, and it will change
   again. In a three-column grid five tiles leave two stranded on the left of
   an empty row, which reads as a mistake rather than as a layout. Wrapping
   flex items with justify-content:center puts the remainder in the middle at
   any count, so adding a category stays the one-line change taxonomy.js
   promises it is.

   align-items: flex-start keeps the original behaviour — tiles size to their
   own photograph, so a short landscape shot does not stretch to match a tall
   one beside it and show a band of bare espresso underneath. */
.grid--tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.grid--tiles > * {
  /* 20rem basis rather than 18: at 18 a fourth tile squeezed onto the first
     row on a wide screen and left one alone underneath. */
  flex: 1 1 20rem;
  max-width: 26rem;
}

.grid--two { grid-template-columns: 1fr; }

.grid--three { grid-template-columns: 1fr; }

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

@media (min-width: 900px) {
  .grid--cards { grid-template-columns: repeat(3, 1fr); }
  .grid--three { grid-template-columns: repeat(3, 1fr); }
}

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


/* ---- Split ----------------------------------------------------------------
   The product detail layout: gallery on one side, everything else on the
   other. The gallery sticks while the specification column scrolls past it.
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s-8);
  }
  .split__media {
    position: sticky;
    top: var(--s-6);
  }
}