/* Home page navigation tiles: a flush row of image tiles, inset to the same
   width as the book and download grids below it.
   Four across on wide screens, two across (so 2x2 for four tiles) on narrow
   ones. Tile height is fixed, so the viewport width alone decides each tile's
   aspect ratio; the artwork covers the tile and the browser crops it to
   whatever that ratio turns out to be, anchored on the file's Kirby focus
   point (passed in as --tile-focus). The label is centred over a scrim
   derived from the tile's own colour, so white text stays legible whatever
   colour the Panel sets. */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(var(--tile-cols, 4), 1fr);
  /* Same 10% inset as `.home-grid-wrap .responsive-grid` in index.css. Both
     are children of <main>, so the percentages resolve against the same
     containing block and the edges line up. */
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 2rem;
}

/* The tile row is the first thing inside <main>, so what sits above it is the
   page heading block in .header2. index.css gives both .h1 and .intro a 3rem
   bottom margin (they collapse to one 3rem gap); pull that in on pages that
   actually carry tiles, so the row sits closer under the heading. */
body:has(.home-tiles) .h1,
body:has(.home-tiles) .intro {
  margin-bottom: 1rem;
}

.tile {
  /* fixed tile height; width — and therefore the crop — follows the viewport */
  --tile-height: 9rem;
  /* darkened tint of this tile's own colour, used for the text scrim */
  --tile-scrim: color-mix(in srgb, var(--tile-color, #000) 54%, #000);
  /* label colour; index.css paints every link darkcyan, so tiles opt out */
  --tile-ink: var(--color-white);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tile-height);
  overflow: hidden;
  background-color: var(--tile-color, var(--color-light));
}

/* index.css sets `a:link`/`a:visited` to darkcyan, which outranks a plain
   `.tile` rule on specificity — hence the pseudo-classes here. */
.tile:link,
.tile:visited {
  color: var(--tile-ink);
}

/* Fill the tile, crop the overflow, never distort. --tile-focus carries the
   file's Kirby focus point as an `x% y%` pair, so that point stays in frame as
   the tile's aspect ratio changes; it falls back to the centre when no focus
   point is set in the Panel. */
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--tile-focus, center);
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Even scrim over the whole tile, strongest in the middle where the label
   sits. The first declaration is a neutral fallback for engines without
   color-mix(). */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.38);
  background: color-mix(in srgb, var(--tile-scrim) 45%, transparent);
}

.tile-label {
  position: relative;
  z-index: 2;
  max-width: 100%;
  padding: 1rem 1.25rem;
  color: var(--tile-ink);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.35);
}

.tile:hover .tile-label,
.tile:focus-visible .tile-label {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  .home-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .tile {
    --tile-height: 6rem;
  }
  .tile-label {
    padding: 0.75rem;
    font-size: 1rem;
  }
}