/* Project tiles: the 2/3 + 1/3 rhythm. Shared by the contract tiles block,
   the featured contract and the project page, so it is registered as the
   'deltaes-tiles' handle (inc/enqueue.php) and named in their block.json. */

.deltaes-tiles {
  --deltaes-tile-gap: clamp(16px, 2vw, 28px);
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) var(--deltaes-tile-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deltaes-tile { position: relative; min-width: 0; }
.deltaes-tile--wide { grid-column: span 2; }
.deltaes-tile--narrow { grid-column: span 1; }
.deltaes-tile--full { grid-column: 1 / -1; }
.deltaes-tile[hidden] { display: none; }

/* Wide and narrow photos in one row share one height: the wide tile's 3:2,
   worked out from the grid's own width (container units), so the column gap
   cannot leave the narrow photo a few pixels short. */
@container (min-width: 700px) {
  .deltaes-tile--wide .deltaes-tile__photo,
  .deltaes-tile--narrow .deltaes-tile__photo {
    aspect-ratio: auto;
    height: calc(((100cqw - 2 * var(--deltaes-tile-gap)) * 2 / 3 + var(--deltaes-tile-gap)) / 1.5);
  }
}
.deltaes-tile__photo img { transition: transform .4s var(--deltaes-ease); }
.deltaes-tile:hover .deltaes-tile__photo img { transform: scale(1.03); }

.deltaes-tile__none {
  display: grid;
  place-items: center;
  background: var(--deltaes-graphite-800);
  color: var(--deltaes-silver-300);
  font-stretch: 85%;
}

.deltaes-tile__body { padding-top: 16px; }

.deltaes-tile__title {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem);
  line-height: .95;
}
.deltaes-tile--narrow .deltaes-tile__title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); }
.deltaes-tile__title a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
/* The whole tile is the hit area. */
.deltaes-tile__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.deltaes-tile:hover .deltaes-tile__title a { text-decoration: underline; text-decoration-color: var(--deltaes-dark-bar, var(--deltaes-navy)); }
:is(.deltaes-on-dark, .deltaes-band--graphite, .deltaes-band--works) .deltaes-tile { --deltaes-dark-bar: var(--deltaes-arc); }
/* The focus ring goes round the whole tile, not the title alone. */
.deltaes-tile__title a:focus-visible { outline: none; }
.deltaes-tile__title a:focus-visible::after { outline: 3px solid var(--deltaes-focus); outline-offset: 4px; }

.deltaes-tile__meta { margin: 0; font-size: .9375rem; color: var(--deltaes-muted); }
.deltaes-tile__meta b { color: var(--deltaes-heading); font-weight: 600; margin-right: .7em; }

/* A narrow grid: one tile per row, all 4:3. A container query, not a media
   query, so it switches at exactly the width the shared-height rule above
   stops applying. */
@container (max-width: 699.98px) {
  .deltaes-tile--wide,
  .deltaes-tile--narrow,
  .deltaes-tile--full { grid-column: 1 / -1; }
  .deltaes-tile .deltaes-tile__photo { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .deltaes-tile:hover .deltaes-tile__photo img { transform: none; }
}