/**
 * Icon tiles.
 *
 * The three-across frame is the kit's `.grid.grid--3`, and the heading row is the
 * kit's `.section-head--row`, so neither is repeated here. This file adds the
 * tile: a gold top rule, a gold icon well, and a lift on hover.
 *
 * The gold treatment is the canonical one for this section. `why-finas.html`
 * draws the rule and the gold well; `partners.html` draws the same six tiles
 * without the rule and with a blue well. That is a style variant, which a
 * section is not allowed to expose (AGENTS.md §1.2), so both pages get the gold
 * one – these tiles speak to employers on both, and gold is the employer accent
 * throughout the design.
 *
 * Ported from `_mockups/why-finas.html`, the `.p-talent` and `.p-tile` rules.
 */

/* The kit's grid gap is --s-4; the mock-up sets these tiles a notch tighter so
   two rows of three read as one block. Only the gap is changed – the columns and
   the breakpoints stay the kit's. */
.icon-tiles__list { gap: var(--s-3); }

.icon-tiles__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 76px;
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-block-start: 3px solid var(--gold);
  border-radius: var(--r-m);
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
  font-size: var(--text-base);
  transition:
    transform var(--dur-normal) var(--ease-out-soft),
    box-shadow var(--dur-normal) var(--ease-out-soft);
}
.icon-tiles__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
}
/* The label is a <b> in a tile that is already bold display type, so it inherits
   rather than compounding into a second weight. */
.icon-tiles__item b { font-weight: inherit; }

.icon-tiles__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-m);
  flex: none;
  background: var(--gold-tint-15);
  color: var(--gold-deep);
  display: grid;
  place-items: center;
}
.icon-tiles__icon svg {
  width: 20px;
  height: 20px;
}