/* ==========================================================================
   RIGCALC — 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(--chrome); 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;
  border-left: 3px solid transparent;
  position: relative;
}
.calc-tile:hover { transform: translateY(-2px); border-left-color: var(--redline-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(--asphalt); }
.calc-tile p { font-size: .88rem; margin: 0; color: var(--steel-600); }

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

/* ------------------------------ engagement: favorite star on tiles -------- */
.calc-tile.has-fav-star { position: relative; }
.tile-fav-star {
  position: absolute; top: .5rem; right: .5rem; font-size: 1.2rem;
  color: var(--steel-600);
}
.tile-fav-star:hover, .tile-fav-star.is-active { color: var(--redline-500); }

/* ------------------------------ engagement: homepage widgets -------------- */
.engage-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0; }
@media (max-width: 860px) { .engage-widgets { grid-template-columns: 1fr; } }
.engage-widget {
  background: var(--chrome); border: var(--border); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; box-shadow: var(--shadow-card);
}
.engage-widget h3 { margin-bottom: .7rem; }
.engage-list { list-style: none; margin: 0; padding: 0; }
.engage-list li {
  border-bottom: 1px solid var(--panel-300); padding: .55rem 0;
}
.engage-list li:last-child { border-bottom: none; }
.engage-list a { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; }
.engage-item-label {
  font-family: var(--font-display); font-weight: 600; font-size: .84rem;
  text-transform: uppercase; letter-spacing: .02em; color: var(--asphalt);
}
.engage-item-summary { font-family: var(--font-mono); font-size: .78rem; color: var(--steel-600); }
.engage-remove {
  background: none; border: none; color: var(--steel-600); cursor: pointer;
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  text-decoration: underline; padding: 0; margin-left: .5rem;
}
.engage-remove:hover { color: var(--redline-500); }