/* ==========================================================================
   main.css — Master stylesheet for Nordvest UK prototype
   All @import statements must appear before any other rules.
   Layer order is determined by import sequence.
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700&display=swap');

/* Partials — @import with layer() sets layer order by sequence */
@import '_tokens.css'     layer(tokens);
@import '_reset.css'      layer(reset);
@import '_base.css'       layer(base);
@import '_layout.css'     layer(layout);
@import '_components.css' layer(components);
@import '_product.css'    layer(components);
@import '_category.css'   layer(components);
@import '_home.css'       layer(components);

/* ------------------------------------------------------------------
   Utilities — single-purpose helper classes
   Declared after imports; utilities layer created here.
------------------------------------------------------------------ */

@layer utilities {

  /* Spacing */
  .mt-section    { margin-block-start: var(--space-section); }
  .mt-section-sm { margin-block-start: var(--space-section-sm); }
  .mb-section    { margin-block-end: var(--space-section); }
  .pt-section    { padding-block-start: var(--space-section); }
  .pb-section    { padding-block-end: var(--space-section); }

  /* Text */
  .text-muted   { color: var(--color-text-muted); }
  .text-accent  { color: var(--color-accent); }
  .text-center  { text-align: center; }

  /* Backgrounds */
  .bg-surface   { background-color: var(--color-surface); }
  .bg-dark      { background-color: var(--color-text); color: var(--color-white); }

  /* Visibility */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Layout helpers */
  .flow > * + *    { margin-block-start: var(--space-6); }
  .flow--sm > * + * { margin-block-start: var(--space-3); }
  .flow--lg > * + * { margin-block-start: var(--space-10); }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: var(--col-gap);
  }

  .grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--col-gap);
  }

  .grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--col-gap);
  }

  /* Fixed 4-column grid — each item always takes 1/4 width.
     Use where card count is variable but proportions must stay fixed
     (e.g. products-used on project pages). Collapses to 2-col at medium,
     1-col at small. */
  .grid-4-fixed {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--col-gap);

    @media (max-width: 900px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 500px) {
      grid-template-columns: 1fr;
    }
  }
}