/* layout.css – sidstruktur + respons (gold standard) */

/* Sidhuvudet är klistrat och oskarpt – reglerna bor i components.css.
   OBS: lägg aldrig overflow: clip eller hidden på .site-header. Mobilmenyn
   är absolut positionerad mot den och sticker ut nedanför; med clip
   försvinner den utan felmeddelande. */

.site-main {
  padding: var(--space-4) 0;
}

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

/* Vänsterkolumn: staplar "kort" i en egen kolumn (oberoende av sidokolumnen) */
.main-col {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

/* Innehållsdrivna brytpunkter – justera när innehållet kräver det */
@media (min-width: 52rem) {
  .grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }

  /* Panelen följer med i stället för att rulla bort. align-self: start krävs
     för att sticky ska fungera i ett grid - utan den sträcks kolumnen till
     radens höjd och har inget att klistra sig inom.
     top matchar scroll-padding-top i base.css, alltså under det klistrade
     sidhuvudet. */
  .sidebar {
    position: sticky;
    top: 5.5rem;
    align-self: start;
  }
}

@media (min-width: 70rem) {
  .grid {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

/* Sidfoten är ett färgat plan – reglerna bor i components.css. */