/* ---------- Modulkatalog: kategorimeny + numrerade komponentkort ----------
   Delar grundtypografin/färgerna med style.css, men lägger till en egen
   tvåkolumns-layout: en sticky innehållsförteckning till vänster (hoppar
   mellan kategorier), och en lång lista av "datablad"-kort till höger -
   varje modul får ett eget löpnummer (M01, M02, ...), samma "komponent-
   katalog"-språk som byggarens sammanfattningspanel redan etablerat. */

.catalog-grid{ display:grid; grid-template-columns: 200px 1fr; gap: 2.8rem; align-items:start; }
@media (max-width: 820px){ .catalog-grid{ grid-template-columns: 1fr; } }

.catalog-toc{
  position: sticky; top: 1.6rem; display:flex; flex-direction:column; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.84rem;
}
@media (max-width: 820px){
  .catalog-toc{ position:static; flex-direction:row; flex-wrap:wrap; gap: 0.5rem 1rem; margin-bottom: 0.4rem; }
}
.catalog-toc-label{
  font-size: 0.72rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--ink-faint);
  margin-bottom: 0.3rem;
}
@media (max-width: 820px){ .catalog-toc-label{ display:none; } }
.catalog-toc a{ color: var(--ink-soft); text-decoration:none; padding: 0.15rem 0; border-left: 2px solid transparent; padding-left: 0.7rem; }
.catalog-toc a:hover{ color: var(--blueprint); border-left-color: var(--blueprint); }
@media (max-width: 820px){ .catalog-toc a{ border-left:none; padding-left:0; border:1px solid var(--paper-line); border-radius:999px; padding:0.3rem 0.8rem; } }

.catalog-section{ margin-bottom: 3rem; scroll-margin-top: 1.5rem; }
.catalog-section-head{ display:flex; align-items:baseline; gap:0.8rem; flex-wrap:wrap; margin-bottom: 0.3rem; }
.catalog-section-tag{
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--brass-deep);
  background: var(--brass-tint); padding: 0.2rem 0.6rem; border-radius: 999px;
}
.catalog-section-desc{ color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 1.4rem; max-width: 60ch; }

.mod-card{
  display:flex; gap: 1.1rem; align-items:flex-start; background: var(--white);
  border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 1.1rem 1.3rem;
  margin-bottom: 0.8rem; scroll-margin-top: 1.5rem;
}
.mod-number{
  font-family: var(--font-mono); font-size: 0.76rem; font-weight:600; color: var(--blueprint);
  background: var(--blueprint-tint); border-radius: 6px; padding: 0.25rem 0.5rem; flex-shrink:0;
  margin-top: 0.15rem;
}
.mod-card h3{ font-size: 1rem; font-family: var(--font-body); font-weight:600; margin: 0 0 0.3rem; }
.mod-card p{ color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
.mod-add-link{
  display:inline-block; margin-top: 0.6rem; font-size: 0.82rem; color: var(--blueprint);
  text-decoration:none; font-weight:600;
}
.mod-add-link:hover{ text-decoration:underline; }

/* Kort som just länkats till direkt (#modul-nyckel i URL:en) lyser
   tillfälligt upp - hjälper besökaren se VILKET kort de landade på
   när de klickar en "ⓘ"-länk från byggaren. */
.mod-card:target{ border-color: var(--brass); background: var(--brass-tint); }