/* Problem- och rumssidornas mall (AO #7856, Problemsida.java). Mobil forst: 360 px utan sidledsscroll. */
.ps { margin: 0 0 24px; }
.ps h2 { font-size: 1.15rem; margin: 0 0 8px; }
.ps-del { margin: 20px 0 0; }

.ps-problem { display: grid; gap: 12px; }
.ps-bild { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--ws-radius-md, 8px); }
.ps-mening { font-size: 1.1rem; line-height: 1.45; margin: 0; }
@media (min-width: 760px) {
  .ps-problem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

.ps-sjalv ul { margin: 0; padding-left: 1.2em; }
.ps-sjalv li { margin: 4px 0; line-height: 1.4; }

/* Valjarsidans bildrutor */
.ps-rutor { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 20px 0 0; }
.ps-ruta { display: flex; flex-direction: column; text-decoration: none; color: var(--ws-color-text, #222);
  background: var(--ws-color-surface, #fff); border: 1px solid var(--ws-color-border, #ddd);
  border-radius: var(--ws-radius-md, 8px); overflow: hidden; box-shadow: var(--ws-shadow-sm, none); }
.ps-ruta:hover, .ps-ruta:focus-visible { border-color: var(--ws-color-primary, #2a7); }
.ps-ruta img, .ps-ingenbild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #eef1ee; }
.ps-ruta strong { padding: 8px 10px 0; font-size: 1rem; }
.ps-ruta small { padding: 2px 10px 10px; color: var(--ws-color-muted, #666); line-height: 1.35; }
.ps-ruta strong:last-child { padding-bottom: 10px; }

/* Produkterna: familjekorten i rutnat */
.ps-familjer { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ps-lank { display: flex; gap: 10px; align-items: center; padding: 10px; text-decoration: none; color: inherit;
  border: 1px solid var(--ws-color-border, #ddd); border-radius: var(--ws-radius-md, 8px); }
.ps-lank img { width: 64px; height: 64px; object-fit: contain; }

.ps-fraga ul { margin: 4px 0 8px; padding-left: 1.2em; }
.ps-vagar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ps-knapp { display: inline-block; padding: 10px 16px; border-radius: var(--ws-radius-md, 8px); text-decoration: none;
  background: var(--ws-color-primary, #2a7); color: #fff; font-weight: 600; }
.ps-knapp:hover { background: var(--ws-color-primary-hover, #186); color: #fff; }
.ps-mer a { font-weight: 600; }

/* Lokaltypssidan: ovriga referenser hopfallda under de tva forsta */
.ro-ovriga { margin: 12px 0 0; }
.ro-ovriga > summary { cursor: pointer; font-weight: 600; padding: 8px 0; }

/* base.css "a:link, a:visited { color }" vinner annars over klasserna: rutornas text blev ljusgron och
   knappens text lika gron som knappen (samma fel som Nasta steg, nasta-steg.spec.js). */
.ps a.ps-ruta:link, .ps a.ps-ruta:visited, .ps a.ps-lank:link, .ps a.ps-lank:visited { color: var(--ws-color-text, #222); }
.ps a.ps-ruta small { color: #555; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ps a.ps-knapp:link, .ps a.ps-knapp:visited, .ps a.ps-knapp:hover { color: #fff; }
/* Johan 2026-11-05 (namnlös.png): texten klipptes mitt i en rad - utfyllnaden lag inne i det klippta elementet.
   Marginal i stallet, tre hela rader med "...", och bredare rutor (pa telefon fortfarande tva i bredd). */
.ps-rutor { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ps a.ps-ruta strong { padding: 10px 12px 0; line-height: 1.3; }
.ps a.ps-ruta small { padding: 0; margin: 4px 12px 12px; font-size: .85rem; line-height: 1.35; max-height: calc(1.35em * 3); }
@media (max-width: 420px) { .ps-rutor { grid-template-columns: 1fr 1fr; gap: 10px; } }