/* Icon tiles — white icon tiles; wrapper clips outer corners (Figma 52px).

   The classes are `icontile`, not `icon-tile`. Salient's accent CSS claims the
   whole `icon-` namespace for its icon font, and one of those rules is

     [class*=" icon-"] { background-color: <accent> }

   which matches on the *attribute value*, so any element that carries a second
   class in front of it hits the rule. `class="h3 icon-tile-title"` did, and the
   heading came out as a navy bar with near-black text on it. Dropping the hyphen
   leaves the block name readable and puts it outside that namespace for good,
   rather than resetting each Salient rule as it is discovered. */

.icontiles {
  --tile-width: 280px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-width), 100%), 1fr));
  gap: 1.5rem; /* Figma 24px */
  border-start-end-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
  overflow: hidden;
}

@media (width >= 1280px) {
  .icontiles {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Fewer than four tiles fill the row too: four fixed columns left an empty
     cell at the end, and the wrapper's corner radius fell into it. */
  .icontiles:not(:has(> .icontile:nth-child(4))) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.icontile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.3125rem; /* Figma 37px icon → body */
  padding: 1.875rem 1.25rem; /* Figma 30px 20px */
  background-color: #ffffff;
  text-align: center;
  color: var(--color-text);
}

.icontile:has(.stretched-link:hover) .icontile-link,
.icontile:has(.stretched-link:focus-visible) .icontile-link {
  text-decoration-thickness: 2px;
}

.icontile-icon {
  display: block;
  block-size: 60px;
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
}

.icontile-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem; /* Figma 12px */
  inline-size: 100%;
}

.icontile-title {
  margin-block: 0;
  color: inherit !important;
}

.icontile-description {
  margin-block: 0;
  color: inherit !important;
}

.icontile-link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}