/* collection-tiles — overlay photo tiles, each tile one anchor. The frame wears
 * .sk-on-media, so the legibility floor is the shared contract's. An empty
 * image slot reflows to type on surface for free. */

/* A tile that IS an anchor: block posture, no underline, ambient ink. The focus ring is the
 * kit's floor, which every focusable thing gets. */
.sk-collection-tile {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.sk-collection-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 2px;
}

/* The tile's link posture is its own, above; its focus ring is the kit's
 * floor, which every focusable thing gets. */
/* The copy sits ON the picture, so the frame carries its own overlay posture
 * and no stage floor: the tile's height is its ratio. */
.sk-collection-tile-frame {
  position: relative;
  --sk-collection-tile-step: var(--sk-text-h3-size);
  --sk-collection-tile-gap: calc(
    var(--kit-type-base) * 0.4 + var(--sk-collection-tile-step) * 0.23
  );
  display: flex;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--sk-media-radius);
  min-height: 0;
  /* ONE number on both axes: the phone rung folds the air on the inline edges only. */
  padding: calc(var(--sk-gutter) * var(--sk-air));
  aspect-ratio: 3 / 2;
}

/* The linked-imagery hover settle comes from the kit-wide rule on the
 * image atom; nothing to author here. */

/* The label rides .sk-link but the TILE is the anchor, so its hover draws the
 * span's underline. */
.sk-collection-tile-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.6em;
  transition: transform 0.35s var(--sk-ease-out);
}
.sk-collection-tile:hover .sk-collection-tile-link {
  background-size: 100% 1px;
}
.sk-collection-tile:hover .sk-collection-tile-link::after {
  transform: translateX(5px);
}

/* Media fills the frame; the copy lifts over the veil and anchors
 * bottom-left, on the s register's beat. The title BALANCES its wrap and
 * wears the theme's title dials. */
.sk-collection-tile-media {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
  background: none;
}
.sk-collection-tile-copy {
  position: relative;
  z-index: 2;
  max-width: 34rem;
  margin: auto auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sk-collection-tile-gap);
  min-width: 0;
}
.sk-collection-tile-copy > * {
  margin: 0;
}
.sk-collection-tile-copy > .sk-collection-tile-title {
  margin-bottom: calc(var(--sk-collection-tile-gap) * (var(--sk-rhythm-title, 1) - 1));
}
.sk-collection-tile-title {
  text-wrap: balance;
  border-width: var(--kit-edge-title);
  border-style: var(--kit-edge-style-title);
  border-color: currentcolor;
  border-radius: var(--kit-round-title);
  padding: var(--kit-pad-title);
}