:root{
  --snap-bg:#fff;
  --snap-ink:#0e1116;
  --snap-muted:#667085;
  --snap-line:#eef1f4;
  --snap-pill:#f5f7fa;
  --snap-accent:#2a6ee2;
  --snap-shadow: 0 2px 16px rgba(16,24,40,.06);
  --snap-radius:16px;
}

.snapshot{ padding: 24px 0 28px; background: var(--snap-bg); color: var(--snap-ink); }
.snapshot__title{ font-size: clamp(20px, 2.6vw, 24px); margin: 0 0 6px; letter-spacing: -0.01em; }
.snapshot__intro{ color: var(--snap-muted); margin: 0 0 18px; }

.snapshot__grid{
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.snap-card{
  position: relative; background:#fff; border:1px solid var(--snap-line);
  border-radius: var(--snap-radius); box-shadow: var(--snap-shadow);
  padding: 18px; cursor: pointer;
  transition: transform .08s ease, box-shadow .14s ease, border-color .14s ease;
}
.snap-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 28px rgba(16,24,40,.08); }
.snap-card:focus-visible{ outline: 2px solid var(--snap-accent); outline-offset: 4px; }

.snap-kicker{
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--snap-muted);
}
.snap-kicker .dot{ width:6px; height:6px; border-radius: 999px; background: var(--snap-accent); opacity: .9; }

.snap-headline{
  font-weight: 800; letter-spacing: -.02em; margin: 8px 0 4px;
  font-size: clamp(22px, 4.2vw, 30px); line-height: 1.05;
}
.snap-title{ margin: 0 0 4px; font-size: 16px; letter-spacing: .005em; }

.snap-sub{ color: var(--snap-muted); font-size: 14px; margin: 0 0 8px; }
.snap-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.snap-tag{ font-size: 12px; color: #0b1220; background: var(--snap-pill); border: 1px solid var(--snap-line); padding: 4px 8px; border-radius: 999px; }

.snap-footer{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--snap-line);
  color: var(--snap-muted); font-size: 12px;
}
.snap-cta{ display: inline-flex; align-items: center; gap: 8px; color: var(--snap-accent); font-weight: 600; }
.snap-cta svg{ width:16px; height:16px; }

/* Modal */
.snapshot-modal{
  width: min(840px, 96vw);
  border: 1px solid var(--snap-line);
  border-radius: 20px; padding: 0;
  box-shadow: 0 24px 80px rgba(15,23,42,.18);
  color: var(--snap-ink);
}
.snapshot-modal__hd{
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--snap-line);
}
.snapshot-modal__title{ font-size: 18px; margin: 0; }
.snapshot-modal__bd{ padding: 18px; }
.snapshot-modal__ft{
  padding: 14px 18px; border-top: 1px solid var(--snap-line);
  display: flex; justify-content: flex-end; gap: 8px;
}

.snap-sources{ display: grid; gap: 10px; }
.snap-source{ border: 1px solid var(--snap-line); border-radius: 12px; padding: 12px; background: #fff; }
.snap-source a{ color: var(--snap-accent); text-decoration: none; }
.snap-source small{ display: block; color: var(--snap-muted); }

.btn{
  appearance: none; border: 1px solid var(--snap-line); background: #fff; color: #0b1220;
  border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 600;
}
.btn--primary{ background: var(--snap-accent); color: white; border-color: transparent; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .snap-card{ transition: none; }
}

/* --- Mobile-only collapse --- */
.snap-toggle{
  display: none; /* hidden by default; shown only on mobile via media query */
  margin-top: 10px; padding: 8px 10px;
  font-size: 14px; font-weight: 600;
  border: 1px solid var(--snap-line); background: #fff; border-radius: 10px;
  color: var(--snap-ink); cursor: pointer;
}

@media (max-width:560px){
  /* show only kicker + headline + title until expanded */
  .snap-card.is-collapsed .snap-body{ display: none; }
  .snap-card .snap-toggle{ display: inline-flex; align-items:center; gap:8px; }
}

.snapshot__help{
  margin: 24px 0 8px; padding: 10px 12px; border: 1px solid var(--snap-line);
  border-radius: 14px; background: #fcfdff; font-size: 13px; color: var(--snap-muted);
}
.snapshot__note{ font-size: 12px; color: var(--snap-muted); margin-top: 8px; }


/* Mobile collapse: show kicker + headline only */
@media (max-width: 560px){
  .snapshot-card { position: relative; }
  .snapshot-card.is-collapsed .snap-body { display: none; }
  .snapshot-card .snap-toggle {
    display: inline-flex; gap:8px; align-items:center;
    margin-top:10px; padding:8px 10px; font-size:14px;
    border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer;
  }
}