/**
 * ============================================================================
 * calculator-grid.css — .calculator-grid BEM Block
 * ============================================================================
 *
 * PURPOSE:
 *   Styles the calculator listing grid on the homepage. Each calculator
 *   gets a card in this grid with its name and brief description.
 *
 * BEM STRUCTURE:
 *   .calculator-grid             — The grid container
 *   .calculator-grid__item       — Individual calculator card
 *   .calculator-grid__link       — The full-card link wrapper
 *   .calculator-grid__name       — Calculator name heading
 *   .calculator-grid__description — Short one-line description
 *   .calculator-grid__category   — Category label (savings, borrowing, etc.)
 *
 * DESIGN DECISIONS:
 *   - Cards have subtle borders, NOT heavy shadows (anti vibe-coded)
 *   - Full card is clickable (better UX than just the title being a link)
 *   - auto-fill grid ensures natural wrapping without explicit breakpoints
 *   - Hover state is restrained — slight border colour change, not a bounce
 *
 * ============================================================================
 */

.calculator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.calculator-grid__item {
  border: var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-default);
}

.calculator-grid__item:hover {
  border-color: var(--color-accent);
}

/* Full-card link — the entire card is one clickable area */
.calculator-grid__link {
  display: block;
  padding: var(--space-lg);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.calculator-grid__link:hover {
  text-decoration: none;
  color: inherit;
}

.calculator-grid__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.calculator-grid__description {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Calculator icon — sits at the top of the card, accent-coloured.
   Uses the mask-image icon system from icons.css.
   display: block so it aligns with the left edge of the card content
   (inline-block inside a block can otherwise sit in a line box and look offset). */
.calculator-grid__icon {
  display: block;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

/* Category label — small, uppercase tag. Block so it aligns with
   icon and title (same left edge), not in a shared inline line box. */
.calculator-grid__category {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}