/* ==========================================================================
   vitti — tools.css
   Styles for the calculators hub page (/calculators/). Load after base.css.
   ========================================================================== */

.page-head{ padding:72px 0 36px; }
.page-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:16px;
}
.page-eyebrow::before{ content:""; width:14px; height:1px; background:var(--accent); }
.page-head h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(34px,5vw,58px);
  letter-spacing:-0.02em;
  line-height:1.05;
}
.page-sub{
  margin-top:16px;
  font-size:16px;
  line-height:1.6;
  color:var(--text-muted);
  max-width:60ch;
}

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
@media (max-width:1080px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; } }
@media (min-width:1600px){ .grid{ grid-template-columns:repeat(4,1fr); } }

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:215px;
  transition:border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  position:relative;
}
.card.live{ box-shadow:var(--shadow); }
.card.live:hover{ border-color:var(--border-strong); background:var(--panel-hover); transform:translateY(-2px); }
.card.soon{ opacity:0.72; }
.card.soon:hover{ opacity:1; border-color:var(--border-strong); }

.card-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.card-icon{
  width:38px; height:38px;
  border-radius:9px;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.card.soon .card-icon{ background:transparent; border:1px solid var(--border); color:var(--text-faint); }
.card-icon svg{ width:18px; height:18px; }

.status-pill{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--live-dot);
}
.status-pill.soon{ color:var(--text-faint); }
.status-pill .d{ width:5px; height:5px; border-radius:50%; }
.status-pill.live .d{ background:var(--live-dot); animation:blink 2s ease-in-out infinite; }
.status-pill.soon .d{ background:var(--text-faint); }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }

.card h3{ font-family:var(--font-body); font-weight:600; font-size:17px; margin-top:18px; }
.card p{ margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--text-muted); }
.card-foot{ margin-top:20px; display:flex; align-items:center; justify-content:space-between; }
.card-link{
  font-size:13px; font-weight:600; color:var(--text);
  text-decoration:none; display:flex; align-items:center; gap:6px;
}
.card.soon .card-link{ color:var(--text-faint); }
.card-link svg{ width:13px; height:13px; transition:transform 0.15s ease; }
.card.live:hover .card-link svg{ transform:translate(2px,-2px); }

@media (max-width:768px){
  .page-head{ padding:52px 0 28px; }
}