/* action-tiles — three full-bleed photo tiles, whole tile is the link.
 * Measured: 641x356 each at 1920. */

.atiles__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.atiles__tile {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(12.5rem, 9.375rem + 10.417vw, 18.75rem);
  padding: var(--space-md);
  color: var(--color-text-inv);
  overflow: hidden;
}
.atiles__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* These tiles carry white type over unpredictable photography, so the scrim
 * is structural rather than optional. */
.atiles__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 0.55, not 0.45. At --step-2 the label is large text (>=24px) only above
   * an ~864px viewport; below that WCAG wants 4.5 rather than 3.0, and two of
   * the three tiles measured 3.65 at 0.45. This holds 4.5 at every size. */
  background: rgb(0 0 0 / 0.55);
  transition: background-color var(--dur-base) var(--ease-out);
}
.atiles__tile:hover .atiles__bg,
.atiles__tile:focus-visible .atiles__bg { transform: scale(1.05); }
.atiles__tile:hover::before,
.atiles__tile:focus-visible::before { background: rgb(0 85 116 / 0.6); }
/* Whole tile is the target, so the press reads on the image rather than the
 * label — scaling the label would jitter the text. */
.atiles__tile:active .atiles__bg { transform: scale(1.02); }
.atiles__tile:focus-visible { outline-offset: -6px; }

.atiles__label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-align: left;
}
.atiles__icon { width: 2rem; height: 2rem; flex: none; }
.atiles__text {
  /* Rob 2026-08-21: the section role's family and tracking, one step down in
   * size. At --step-3 the three labels dominated the band; the tiles are
   * navigation, not a section heading. */
  font-size: var(--step-2);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}

@media (max-width: 992px) {
  .atiles__list { grid-template-columns: 1fr; }
  .atiles__tile { min-height: 200px; }
}

/* Grid item has to stretch so the tile fills the full band height. */
.atiles__item { display: flex; min-width: 0; }
.atiles__item > .atiles__tile { flex: 1; }

/* -- Enclosure ---------------------------------------------------------- */
.atiles__list {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  gap: var(--space-md);
}
.atiles__tile { border-radius: var(--radius-shell); }
.atiles__tile:hover .atiles__bg { transform: scale(1.06); }