/* /public/assets/css/volcano-country-index.css — "Volcanoes by country" section on /{lang}/volcanoes.
   Uses the volcano theme tokens from volcanoes.css (--v-ink, --v-muted, --v-line, --v-coral, --v-blue, --v-soft). */

.vci-featured,.vci-grid{list-style:none;margin:0;padding:0;display:grid}
.vci-featured{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.vci-featured li,.vci-grid li{min-width:0}

.vci-card{display:flex;flex-direction:column;gap:11px;height:100%;box-sizing:border-box;padding:16px 16px 15px;background:#fff;border:1px solid var(--v-line);border-radius:12px;color:var(--v-ink);text-decoration:none;box-shadow:0 3px 10px #172c4006;transition:border-color .15s,box-shadow .15s,transform .15s}
.vci-card:hover{border-color:#c6d2de;box-shadow:0 8px 22px #172c4012;transform:translateY(-1px)}
.vci-card:focus-visible,.vci-pill:focus-visible{outline:2px solid var(--v-blue);outline-offset:2px}
.vci-card__head{display:flex;align-items:center;gap:10px;min-width:0}
.vci-card__head img,.vci-pill img{flex:none;border-radius:2px;box-shadow:0 0 0 1px #172c4018;object-fit:cover}
.vci-card__name{flex:1;min-width:0;font-size:15px;font-weight:650;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
.vci-card__count{flex:none;font-size:11px;color:var(--v-muted);white-space:nowrap}
.vci-card__count b{font-size:20px;font-weight:700;letter-spacing:-.5px;color:var(--v-ink);margin-right:2px;font-variant-numeric:tabular-nums}

.vci-bar{display:block;height:6px;border-radius:99px;background:var(--v-soft);overflow:hidden}
.vci-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f2a27a,var(--v-coral))}

.vci-status{display:flex;flex-wrap:wrap;gap:6px}
.vci-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:99px;background:var(--v-soft);color:var(--v-muted);font-size:11px;line-height:1.35}
.vci-chip i{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.vci-chip b{font-weight:700}
.vci-chip.reported{color:#ba5349;background:#fff0ec}
.vci-chip.elevated{color:#9b6d24;background:#fff5df}

.vci-known{font-size:12px;line-height:1.55;color:var(--v-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.vci-known>span{font-weight:600;color:var(--v-ink)}

.vci-subtitle{margin:28px 0 12px;font-size:13px;font-weight:650;color:var(--v-ink)}
.vci-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.vci-pill{display:flex;align-items:center;gap:9px;min-height:44px;box-sizing:border-box;padding:8px 12px;background:#fff;border:1px solid var(--v-line);border-radius:9px;color:var(--v-ink);text-decoration:none;font-size:13px;line-height:1.3;transition:border-color .15s,background .15s}
.vci-pill:hover{border-color:#c6d2de;background:#fbfcfd}
.vci-pill__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vci-pill>b{flex:none;font-size:12px;font-weight:700;color:var(--v-muted);font-variant-numeric:tabular-nums}

.vci-dot{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;position:relative}
.vci-dot.reported{background:var(--v-coral)}
.vci-dot.elevated{background:#d89536}
.vci-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:11px;color:var(--v-muted)}
.vci-legend>span{display:inline-flex;align-items:center;gap:7px}
.vci-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:1100px){.vci-featured{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .vci-featured{grid-template-columns:1fr;gap:10px}
  .vci-card{padding:14px;gap:9px}
  .vci-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vci-pill{gap:7px;padding:7px 10px;font-size:12px}
  .vci-pill__name{white-space:normal;overflow-wrap:anywhere}
}