/* Home page revamp, October 2026: freshness labels, lead story, Vidhai IQ tools grid.
   Uses the tokens defined in style.css so light and dark themes both work. */

.fresh-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}
.section__header .fresh-meta { justify-content: inherit; }
.fresh-pill {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary-muted);
  color: var(--color-primary);
}
.fresh-stamp {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.fresh-stamp:empty { display: none; }

/* Today in AI: the first story leads at double width on wide screens */
@media (min-width: 900px) {
  .card-grid--lead > .card:first-child { grid-column: span 2; }
  .card-grid--lead > .card:first-child .card__title { font-size: var(--text-lg); }
}

/* Vidhai IQ tools */
.tools-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4);
  max-width: var(--content-wide);
  margin-inline: auto;
}
.tool-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}
.tool-v2:hover, .tool-v2:focus-visible { border-color: var(--color-primary); transform: translateY(-2px); }
.tool-v2:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tool-v2__name { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.tool-v2__name sup { font-size: 0.55em; vertical-align: super; letter-spacing: 0.5px; }
.tool-v2__desc { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; }
.tool-v2__go { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.tool-v2__status {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: var(--radius-full);
}
.tool-v2__status--live { background: var(--color-primary-muted); color: var(--color-primary); }
.tool-v2__status--soon { background: rgba(251, 191, 36, 0.14); color: #b7791f; }
.tool-v2__status--dev { background: rgba(167, 139, 250, 0.14); color: #6d5bd0; }
[data-theme="dark"] .tool-v2__status--soon { color: var(--color-accent-amber); }
[data-theme="dark"] .tool-v2__status--dev { color: var(--color-accent-violet); }