/* ================================================================
   Grid — template.css
   ================================================================
   Två visualiseringar:
   1. grid-token-card (data-driven från data.json) — token-referens
   2. grid-status, grid-12-demo (hardcoded i index.html) — live demo

   Förutsätter att tokens-filen är laddad (--clr-*, --spc-*, --shp-*,
   --background-*, --content-*, --grid-*, --bp-*, --type-family-code).
================================================================ */

/* ============ TOKEN CARDS (data-driven) ============ */

.grid-token-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spc-04);
  width: 100%;
}

.grid-token-card {
  display: flex;
  flex-direction: column;
  padding: var(--spc-04);
  background: var(--background-secondary);
  border-radius: var(--shp-sm);
  border: 1px solid var(--border-tertiary);
}

.grid-token-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.grid-token-card__name {
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-primary);
  word-break: break-all;
}

.grid-token-card__value {
  font-family: var(--type-family-code);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-tertiary);
  word-break: break-all;
}

/* ============ LIVE DEMO ============ */

/* Status-panel — visar viewport-info live */
.grid-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spc-04);
  padding: var(--spc-05);
  background: var(--background-secondary);
  border-radius: var(--shp-md);
}

.grid-status__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.grid-status__label {
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.grid-status__value {
  font-family: var(--type-family-code);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--content-primary);
}

/* 12-column demo — refererar nu --grid-columns och --grid-gutter direkt */
.grid-12-demo {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  margin-bottom: var(--spc-04);
}
.grid-12-demo:last-child { margin-bottom: 0; }

.grid-12-demo__col {
  grid-column: span 1;
  background: var(--background-secondary);
  border-radius: var(--shp-sm);
  padding: var(--spc-04) var(--spc-03);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-12-demo__col span {
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-primary);
}

.grid-12-demo__col--span-12 { grid-column: span 12; }
.grid-12-demo__col--span-8 { grid-column: span 8; }
.grid-12-demo__col--span-6 { grid-column: span 6; }
.grid-12-demo__col--span-4 { grid-column: span 4; }
.grid-12-demo__col--span-3 { grid-column: span 3; }

@media (max-width: 600px) {
  .grid-12-demo__col {
    padding: var(--spc-03) var(--spc-02);
    min-height: 40px;
  }
  .grid-12-demo__col span {
    font-size: 0.625rem;
  }
}

/* ============ LAYOUT STRATEGY DEMO ============
   Två viewport-mock-rutor som visar skillnaden mellan constrained
   (max-width + center) och fluid (clamp padding, edge-to-edge).
   Varje rad: label-kolumn + viewport-simulerad ruta som visualiserar
   container-bredden vid aktuell viewport.
============================================================ */

.layout-strategy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spc-04);
  margin-bottom: var(--spc-07);
}

.layout-strategy:last-child { margin-bottom: 0; }

@media (min-width: 60rem) {
  .layout-strategy {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--spc-08);
    align-items: center;
  }
}

.layout-strategy__label {
  display: flex;
  flex-direction: column;
  gap: var(--spc-02);
}

.layout-strategy__name {
  font-family: var(--type-family-title);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--content-primary);
}

.layout-strategy__rule {
  font-family: var(--type-family-code);
  font-size: 0.75rem;
  color: var(--content-tertiary);
  word-break: break-word;
}

/* Viewport-simulerad ruta: dashed border markerar viewport-edge */
.layout-strategy__viewport {
  position: relative;
  border: 1px dashed var(--border-tertiary);
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 6px,
      var(--background-tertiary) 6px,
      var(--background-tertiary) 7px
    );
  padding: var(--spc-04) 0;
  min-height: 80px;
  display: flex;
  align-items: center;
}

.layout-strategy__container {
  background: var(--brand-prm-base, var(--clr-key-prm));
  color: var(--clr-key-white);
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  padding: var(--spc-04) var(--spc-05);
  border-radius: var(--shp-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Constrained — max-width + centrerad inom viewport */
.layout-strategy__container--constrained {
  max-width: min(60rem, 90%);
  margin: 0 auto;
  text-align: center;
}

/* Fluid — sträcker sig kant-till-kant av viewporten med clamp padding */
.layout-strategy__container--fluid {
  width: 100%;
  margin: 0 clamp(0.5rem, 4vw, 2rem);
  text-align: center;
}