/* ===================================================================
   scores.css — De Vakantie-Score (herbruikbaar over alle bestemmingen)
   Werkt samen met /assets/scores.js. Progressive enhancement: zonder JS
   staan de scores + balken gewoon statisch in de HTML.
   Kleuren met fallback, in de huisstijl (cream/earth/amber/green).
   =================================================================== */

.vakantie-score {
  position: relative;
  background: var(--cream, #FDFAF6);
  border: 1px solid rgba(61, 43, 31, .08);
  border-radius: 16px;
  padding: 1.5rem 1.6rem 1.6rem;
}
.vs-head { padding-right: 78px; }
.vs-head h2 { margin: 0 0 .25rem; }

/* gemiddelde-badge rechtsboven */
.vs-badge {
  position: absolute; top: 1.3rem; right: 1.4rem;
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 4px 13px rgba(61, 43, 31, .18);
}
.vs-badge-num { font-size: 1.4rem; font-weight: 800; line-height: 1; font-family: 'Playfair Display', serif; }
.vs-badge-lbl { font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: .12rem; opacity: .92; }
.vs-badge.groen { background: var(--green, #3DAE7A); }
.vs-badge.amber { background: var(--amber, #E8892A); }
.vs-badge.rood  { background: #D9645C; }
@media (max-width: 480px) {
  .vs-badge { width: 54px; height: 54px; top: 1.1rem; right: 1.1rem; }
  .vs-badge-num { font-size: 1.15rem; }
  .vs-head { padding-right: 64px; }
}
.vs-sub { margin: 0 0 1.2rem; font-size: .88rem; color: var(--muted, #7A6A5A); line-height: 1.5; }

.vs-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.vs-row {
  display: grid;
  grid-template-columns: 150px 1fr 30px;
  grid-template-areas: "label bar num" "why why why";
  align-items: center; gap: .25rem .9rem;
}
.vs-label { grid-area: label; font-weight: 600; font-size: .9rem; color: var(--earth, #3D2B1F); }
.vs-bar { grid-area: bar; height: 10px; border-radius: 6px; background: #EADED0; overflow: hidden; }
.vs-fill { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .85s cubic-bezier(.22,1,.36,1); }
.vs-num { grid-area: num; text-align: right; font-weight: 800; font-size: .95rem; color: var(--earth, #3D2B1F); }
.vs-why { grid-area: why; font-size: .78rem; color: var(--muted, #7A6A5A); line-height: 1.45; }

/* kleurbanden: 8-10 groen · 5-7 amber · 1-4 rood */
.vs-row[data-band="groen"] .vs-fill { background: var(--green, #3DAE7A); }
.vs-row[data-band="amber"] .vs-fill { background: var(--amber, #E8892A); }
.vs-row[data-band="rood"]  .vs-fill { background: #D9645C; }

/* geen-JS / statische staat: balk meteen op breedte (JS animeert anders van 0) */
.no-js .vs-fill, .vs-fill.is-static { transition: none; }

@media (max-width: 560px) {
  .vs-row { grid-template-columns: 112px 1fr 26px; }
  .vs-label { font-size: .82rem; }
}