/* ==========================================================================
   JOBSITE CALCULATORS — homepage-only styles
   Loaded alongside base.css only by index.html.
   ========================================================================== */

/* --------------------------------- hub grid ------------------------------ */
.calc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin: 2rem 0;
}
@media (max-width: 860px) { .calc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-tile {
  background: var(--paper); border: var(--border); border-radius: var(--radius);
  padding: 1.4rem; text-decoration: none; display: block;
  box-shadow: var(--shadow-card);
  transition: transform .12s ease, border-color .12s ease;
  position: relative;
}
.calc-tile:hover { transform: translateY(-2px); border-color: var(--safety-500); }
.calc-tile .num {
  font-family: var(--font-mono); font-size: .72rem; color: var(--steel-600);
}
.calc-tile h3 { margin: .4rem 0 .4rem; color: var(--charcoal); }
.calc-tile p { font-size: .88rem; margin: 0; color: var(--steel-600); }

.hero-band {
  background: var(--charcoal); color: var(--paper); padding: 3rem 0 3.5rem;
  border-bottom: 4px solid var(--safety-500);
}
.hero-band h1 { color: var(--paper); }
.hero-band p { color: var(--steel-300); max-width: 60ch; font-size: 1.05rem; }

/* --------------------------- favorites (homepage) ------------------------- */
.favorite-star {
  position: absolute; top: .45rem; right: .45rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--steel-600); padding: .45rem;
}
.favorite-star[aria-pressed="true"] { color: var(--safety-500); }
.favorite-star:hover { color: var(--safety-600); }
.favorites-section { margin: 1.5rem 0 0; }