/* ══════════════════════════════════════════════════════════════
   PATTERN — Dimension cards
   Card grid for displaying scored dimensions with stats, term tags
   and a frequency bar. Used to show NLP/lexicon-based dimension
   analysis (e.g. trend frequencies across foresight documents).

   Markup:
     <div class="dimension-grid">
       <article class="dimension-card">
         <h2>Digitalisering</h2>
         <div class="dimension-stats">
           <div class="stat">
             <span class="stat-value">72%</span>
             <span class="stat-label">Frekvens</span>
           </div>
           <div class="stat">
             <span class="stat-value">142</span>
             <span class="stat-label">Träffar</span>
           </div>
         </div>
         <div class="dimension-terms">
           <span class="term-tag">AI</span>
           <span class="term-tag">automatisering</span>
         </div>
         <div class="frequency-bar">
           <div class="frequency-fill" style="width: 72%"></div>
         </div>
       </article>
     </div>

   Used by: FRAMSYN
   Candidates: STRATEGIANALYS, JOBADS-style apps showing scored dimensions
   ══════════════════════════════════════════════════════════════ */

.dimension-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--gap, var(--s-6));
}

.dimension-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s-5);
}

.dimension-card h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.dimension-stats {
    display: flex;
    gap: var(--s-8);
    margin: var(--s-3) 0;
}

.dimension-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: var(--s-3) 0;
}

.term-tag {
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .dimension-grid { grid-template-columns: 1fr; }
}