/* mouldshop-icon-grid.css — bespoke skin for the Mouldshop Icon Grid paragraph (M2, DEC-0005).
   Loaded via MouldshopHead. Tokens from mouldshop.css (--ms-*). Defensive: works 1..N cells. */

.ms-icongrid {
  --ms-icongrid-cols: 4;
  /* TASK-0078 / DEC-0054: no max-width and no inline centring on a component root.
     This used to cap at var(--ms-page-width), which DUPLICATED the container ladder
     inside a container that is already on it -- measured 1288 inside 1288 at 1440.
     The row's container owns the width now; this element fills it. */
  /* `margin: 0 auto` became `margin-block: 0`: only the INLINE half was the
     centring; dropping the shorthand outright would also have discarded the
     deliberate zero block margin. */
  margin-block: 0;
  padding: 2.5rem 1.25rem;
}

.ms-icongrid-heading {
  font-family: var(--ms-font-head, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  color: var(--ms-ink);
  text-align: center;
  margin: 0 0 2rem;
}

.ms-icongrid-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ms-icongrid-cols), minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 989px) {
  .ms-icongrid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 749px) {
  .ms-icongrid-list { grid-template-columns: 1fr; }
}

.ms-icongrid-cell { position: relative; }

.ms-icongrid-cellinner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  padding: 1.75rem 1.25rem;
  background: #fff;
  border: 1px solid var(--ms-border, #e6e9f0);
  border-radius: 12px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* THE HOVER STATE IS THE SOURCE OF TRUTH (TASK-0124, docs/reference/HERO_ICON_GRID_IDLE_CYCLE.md
   Contract 1). The same three properties as before, unchanged; each selector list is now
     1. hover (the original rule, as it was),
     2. keyboard focus on the cell's link (added: same look for keyboard users),
     3. the IDLE state - Custom/mouldshop-icon-idle-cycle.js lights one cell at a time - gated
        behind [data-ms-idle-cycle]:not(:hover) on the GRID, so the moment the pointer is over
        the grid the auto-highlight drops and only the real hover shows. That gate is the whole
        "yields to the mouse" mechanism; the script does no styling. */
.ms-icongrid-cell:has(.ms-icongrid-celllink):hover .ms-icongrid-cellinner,
.ms-icongrid-cell:has(.ms-icongrid-celllink:focus-visible) .ms-icongrid-cellinner,
[data-ms-idle-cycle]:not(:hover) .ms-icongrid-cell.is-idle-active .ms-icongrid-cellinner {
  box-shadow: 0 12px 28px rgba(10, 41, 121, .12);
  border-color: var(--ms-blue, #6CB2DE);
  transform: translateY(-2px);
}

/* THE TINT LAYER FADES WITH THE LIFT (guide Contract 2). DIAG: in 11 of the 12 BON icon files
   on this box the FIRST shape is .bon-svg-lightblue - the light "shadow" tint under the dark body
   (BON-SVG-icon-60 has none). Keyed on that CLASS, not on path:first-of-type, so an icon drawn in
   another order can never lose its body instead. Same .18s as the cell. */
.ms-icongrid-icon .bon-svg-lightblue {
  transition: opacity .18s ease;
}

.ms-icongrid-cell:has(.ms-icongrid-celllink):hover .bon-svg-lightblue,
.ms-icongrid-cell:has(.ms-icongrid-celllink:focus-visible) .bon-svg-lightblue,
[data-ms-idle-cycle]:not(:hover) .ms-icongrid-cell.is-idle-active .bon-svg-lightblue {
  opacity: 0;
}

/* EXCLUDED CELL ("Exclude from highlight", data-ms-idle-exclude): never auto-lit (the script
   skips it) and fully static on hover too - guide §4's excluded block. */
.ms-icongrid-cell[data-ms-idle-exclude] .ms-icongrid-cellinner,
.ms-icongrid-cell[data-ms-idle-exclude] .bon-svg-lightblue {
  transition: none;
}

.ms-icongrid-cell[data-ms-idle-exclude]:has(.ms-icongrid-celllink):hover .ms-icongrid-cellinner,
.ms-icongrid-cell[data-ms-idle-exclude]:has(.ms-icongrid-celllink:focus-visible) .ms-icongrid-cellinner {
  box-shadow: none;
  border-color: var(--ms-border, #e6e9f0);
  transform: none;
}

.ms-icongrid-cell[data-ms-idle-exclude]:has(.ms-icongrid-celllink):hover .bon-svg-lightblue,
.ms-icongrid-cell[data-ms-idle-exclude]:has(.ms-icongrid-celllink:focus-visible) .bon-svg-lightblue {
  opacity: 1;
}

/* MOBILE / TOUCH (guide §4 "why mobile is separate"): there is no hover to yield to, so the idle
   state is an INSTANT swap with no motion - the border and shadow appear, the tint drops, nothing
   moves or fades. Separate class (is-idle-active-mobile) and a faster cycle, set by the script. */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
  .ms-icongrid-cell.is-idle-active-mobile .ms-icongrid-cellinner {
    border-color: var(--ms-blue, #6CB2DE);
    box-shadow: 0 12px 28px rgba(10, 41, 121, .12);
    transform: none;
    transition: none;
  }

  .ms-icongrid-cell.is-idle-active-mobile .bon-svg-lightblue {
    opacity: 0;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-icongrid-cellinner,
  .ms-icongrid-icon .bon-svg-lightblue {
    transition: none;
  }
}

/* Icon box. HEIGHT is the fixed dimension and width is free, because the reference's own
   strip icons are a wide artboard (77mm x 36mm viewBox) rendered into a 32px-tall box — pinning
   both axes would squash them. Applies to the inline <svg> and the raster fallback alike. */
.ms-icongrid-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  max-width: 100%;
}
.ms-icongrid-icon img,
.ms-icongrid-icon svg {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Two-tone contract, same class names the operator's icon files carry. Reachable only because
   the SVG is inlined; a sprite <use> would put a shadow boundary in the way. */
.ms-icongrid-icon .bon-svg-lightblue { fill: #c4e0f2; }
.ms-icongrid-icon .bon-svg-darkblue  { fill: #0a2979; }

.ms-icongrid-title {
  font-family: var(--ms-font-head, "Montserrat", sans-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ms-ink);
}

.ms-icongrid-text {
  font-family: var(--ms-font-body, "Roboto", sans-serif);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ms-muted-ink);
}

/* stretched overlay link — whole cell clickable, no nested-anchor markup */
.ms-icongrid-celllink {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  z-index: 1;
  font-size: 0;
}