/* Key takeaways - card grid. Every selector scoped under .sevenvas-takeaways. */

.sevenvas-takeaways{
  --svt-orange:#F64A00;        /* accents only - never behind small white text */
  --svt-orange-deep:#D64000;   /* 4.57:1 with white; the active card ground */
  --svt-ink:#182235;
  --svt-soft:#FFF1EA;
  --svt-border:#E7E9EE;
  --svt-muted:#4A5568;
  --svt-field:#F7F7F7;
  --svt-ease:cubic-bezier(.4,0,.2,1);
  display:block;
  padding:56px 0;
  background:var(--svt-field);
  color:var(--svt-ink);
  box-sizing:border-box;
}
.sevenvas-takeaways *,
.sevenvas-takeaways *::before,
.sevenvas-takeaways *::after{box-sizing:border-box;}

.sevenvas-takeaways .svt__inner{max-width:1180px;margin:0 auto;padding:0 24px;}

.sevenvas-takeaways .svt__eyebrow{margin:0 0 14px;padding:0;line-height:0;}
.sevenvas-takeaways .svt__eyebrow-rule{
  display:inline-block;width:52px;height:3px;border-radius:2px;background:var(--svt-orange);
}

.sevenvas-takeaways .svt__title{
  margin:0 0 28px;padding:0;border:0;
  font-size:26px;line-height:1.25;font-weight:800;color:var(--svt-ink);
}

.sevenvas-takeaways .svt__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;margin:0;padding:0;
}

/* ---- resting state ---------------------------------------------------
   Odd cards sit on the section field, even cards are white with a hairline,
   so the row reads as a rhythm rather than five identical tiles. Nothing
   rests with a shadow: the moving highlight is the only lift on the page. */
.sevenvas-takeaways .svt__card{
  background:var(--svt-field);
  border:1px solid transparent;
  border-radius:20px;
  padding:24px 22px;
  min-width:0;
  transform:translateY(0) scale(1);
  box-shadow:0 0 0 rgba(214,64,0,0);
  transition:background-color .45s var(--svt-ease),
             color .45s var(--svt-ease),
             transform .45s var(--svt-ease),
             box-shadow .45s var(--svt-ease),
             border-color .45s var(--svt-ease);
  will-change:transform;
}
.sevenvas-takeaways .svt__card:nth-child(even){
  background:#FFFFFF;
  border-color:var(--svt-border);
}

.sevenvas-takeaways .svt__chip{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--svt-soft);
  color:var(--svt-orange);
  margin:0 0 14px;
  transition:background-color .45s var(--svt-ease),color .45s var(--svt-ease);
}
.sevenvas-takeaways .svt__card:nth-child(even) .svt__chip{background:#FFFFFF;}
.sevenvas-takeaways .svt__chip svg{width:21px;height:21px;display:block;}

.sevenvas-takeaways .svt__label{
  display:block;margin:0 0 8px;padding:0;
  font-size:16px;line-height:1.35;font-weight:700;color:var(--svt-ink);
  transition:color .45s var(--svt-ease);
}
.sevenvas-takeaways .svt__label-txt{display:block;}

.sevenvas-takeaways .svt__value{
  display:block;margin:0;padding:0;
  font-size:14.5px;line-height:1.6;color:var(--svt-muted);
  transition:color .45s var(--svt-ease);
}

/* ---- active state ----------------------------------------------------
   Only background, colour, transform and box-shadow change. No layout
   property is animated, so the grid never reflows and neighbours never move. */
.sevenvas-takeaways .svt__card[data-svt-active]{
  background:var(--svt-orange-deep);
  border-color:var(--svt-orange-deep);
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 40px rgba(214,64,0,.22);
}
.sevenvas-takeaways .svt__card[data-svt-active] .svt__label,
.sevenvas-takeaways .svt__card[data-svt-active] .svt__value{color:#FFFFFF;}
.sevenvas-takeaways .svt__card[data-svt-active] .svt__chip{
  background:#FFFFFF;color:var(--svt-orange-deep);
}

/* Three-up >=1024, two-up 768-1023, one column below 768.
   Five cards into three columns would leave the second row short, so the grid is
   laid out in six tracks: the first row takes three cards of two tracks each, the
   second row two cards of three tracks each. Both rows finish flush at the same
   right edge. At two-up the fifth card spans the full width for the same reason -
   an orphaned half-width card at the end reads as a mistake. */
@media (min-width:1024px){
  .sevenvas-takeaways .svt__grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .sevenvas-takeaways .svt__card{grid-column:span 2;}
  .sevenvas-takeaways .svt__card:nth-child(4),
  .sevenvas-takeaways .svt__card:nth-child(5){grid-column:span 3;}
}
@media (min-width:768px) and (max-width:1023px){
  .sevenvas-takeaways .svt__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sevenvas-takeaways .svt__card:nth-child(5){grid-column:1 / -1;}
}
@media (max-width:767px){
  .sevenvas-takeaways{padding:40px 0;}
  .sevenvas-takeaways .svt__inner{padding:0 18px;}
  .sevenvas-takeaways .svt__grid{grid-template-columns:minmax(0,1fr);}
  .sevenvas-takeaways .svt__title{font-size:23px;}
  .sevenvas-takeaways .svt__card{padding:20px 18px;}
}

/* Reduced motion: the cycle never starts (the script returns early), and every
   transition is removed so nothing can animate even if a state is set. */
@media (prefers-reduced-motion: reduce){
  .sevenvas-takeaways .svt__card,
  .sevenvas-takeaways .svt__chip,
  .sevenvas-takeaways .svt__label,
  .sevenvas-takeaways .svt__value{transition:none;}
  .sevenvas-takeaways .svt__card[data-svt-active]{
    transform:none;box-shadow:none;
  }
}