/* /ai-hub — sidmall "Landningssida" (ljus hero utan kort → sektioner växelvis
   #f7f7f7/vitt → teal footer-band). Element och komponenter kommer från
   weapp-ui.css; här ligger bara sidlayouten. Bara var(--w-*). 1rem = 18px. */

#content-holder p.aih-lede { max-width: var(--w-measure); }

/* Föreläsningsraden i boksektionen: samma påstående och samma lista som
   /ai-boken, men i bläck på ljust. (Där står den i --w-bg och blev osynlig när
   teal-heron togs bort — egen fix, se rapporten 2026-09-15.) */
.aih-proof { margin-top: var(--w-space-40); border-top: var(--w-border) solid var(--w-line); padding-top: var(--w-space-24); }
#content-holder .aih-proof .w-kicker { margin-bottom: var(--w-space-16); }
.aih-proof-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--w-space-8) var(--w-space-24); margin: 0; padding: 0; }
#content-holder .aih-proof-list li { font-family: var(--w-font-semibold); font-size: var(--w-small-size); line-height: var(--w-small-lh); color: var(--w-ink); margin: 0; }
#content-holder .aih-proof-list li.aih-proof-more { font-family: var(--w-font-body); color: var(--w-muted); }

/* Ankarraden. Ligger i dag stilla i heron. Markerad [data-w-anchornav] så att
   en kommande klibbig .w-*-komponent kan ta över samma markup — se den
   gemensamma systemändrings-PR:en. */
.aih-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--w-space-24);
  align-items: center;
  margin-top: var(--w-space-40);
}

/* Boken: text bredvid omslaget. Omslaget är porträtt (900x1346) och hålls
   smalt, som i forken — annars torn det över texten. */
/* Boksektionens brödtext kapas till läsbar radlängd. Sedan wrappen blev
   flytande (ds22) fyller kolumnen skärmen: uppmätt 2000px vid 2400, alltså
   nästan tre gånger läsbar radlängd. */
#content-holder .aih-book p { max-width: var(--w-measure); }
.aih-book { display: grid; gap: var(--w-space-40) var(--w-gutter); align-items: center; }
#content-holder .aih-book .w-figure { max-width: 300px; justify-self: center; }
/* Mobil: omslaget direkt under rubriken, före brödtexten. Staplat i
   markupordning hamnade bilden sist av allt, efter föreläsningsraden, och
   tappade kopplingen till rubriken (David 2026-09-15). Knappen och
   föreläsningsraden hänger ihop och står kvar sist. */
.aih-book > .w-figure { order: -1; }

@media screen and (min-width: 768px) {
  .aih-book { grid-template-columns: 1fr 300px; }
  .aih-book > .w-figure { order: 0; }
}

/* Efterlevnadsguiden: kort med numrerade steg, som i forken. Siffran är
   .w-pill (systemets enda tillåtna radie) i kvadrat, alltså en cirkel.
   Responsivt: 4 på höjd under 768, 2 per rad 768–991, 4 i bredd från 992 —
   forkens egen radbrytning (1–2 på rad ett, 3 och 4 på egna rader) undviks.
   Kopplingslinjen visas bara när alla fyra står på samma rad. */
.aih-wizard { margin-top: var(--w-space-40); }
#content-holder .aih-wizard h3 { margin: 0 0 var(--w-space-8); }

.aih-steps { list-style: none; margin: var(--w-space-40) 0 0; padding: 0; display: grid; gap: var(--w-space-16) var(--w-gutter); }
.aih-steps li { display: flex; align-items: center; gap: var(--w-space-16); }
#content-holder .aih-steps .aih-step-n {
  flex: 0 0 auto; width: var(--w-space-40); height: var(--w-space-40);
  padding: 0; align-items: center; justify-content: center;
  font-family: var(--w-font-h2); color: var(--w-green); border-color: var(--w-line);
}
#content-holder .aih-steps .aih-step-t { color: var(--w-ink); }
.aih-steps li::after { content: ''; display: none; flex: 1 1 auto; height: var(--w-border); background: var(--w-line); }

@media screen and (min-width: 768px) {
  .aih-steps { grid-template-columns: 1fr 1fr; }
}
@media screen and (min-width: 992px) {
  .aih-steps { grid-template-columns: repeat(4, 1fr); }
  .aih-steps li:not(:last-child)::after { display: block; }
}

/* AI-verktygen: forkens kortuppställning — typetikett, kort linje, namn, text,
   knapp, i ett vitt kort med 1px kant. Kort i grid är sanktionerat för val
   (07 §Tillägg 2026-09-02); det är förbjudet som dekorativa feature-tiles.
   Linjen under etiketten är .w-divider, kapad till etikettbredd. */
#content-holder .aih-assets .w-kicker { margin-bottom: var(--w-space-8); }
#content-holder .aih-assets .aih-asset-rule { width: 32px; margin: 0 0 var(--w-space-24); }
#content-holder .aih-assets .w-card { display: flex; flex-direction: column; min-width: 0; }
/* Kortens 40px padding gör .w-grid-3:s tre spalter för smala för långa
   verktygsnamn ("Underbiträdeskarta" är 301px i h3-steget) — två spalter under
   1170, tre först därefter. Avstavning som skyddsnät i de smala banden. */
#content-holder .aih-assets .w-card h3 { hyphens: auto; overflow-wrap: break-word; }
@media screen and (min-width: 768px) and (max-width: 1169.98px) {
  .aih-assets { grid-template-columns: 1fr 1fr; }
}
#content-holder .aih-assets .w-card .w-actions { margin-top: auto; padding-top: var(--w-space-40); }