/* Home page navigation tiles: flush, full-bleed vertical bars, one column
   per configured tile on desktop, stacked full-width on mobile.
   Artwork sits (uncropped) against the left edge, the label is vertically
   centred in the right-hand column 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, 3), 1fr);
  width: min(100vw, 120rem);
  margin-left: calc(50% - min(50vw, 60rem));
  margin-right: calc(50% - min(50vw, 60rem));
}

.tile {
  /* share of the tile width taken by the artwork; the label gets the rest */
  --tile-art-width: 50%;
  /* darkened tint of this tile's own colour, used for the text scrim */
  --tile-scrim: color-mix(in srgb, var(--tile-color, #000) 80%, #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;
  min-height: 16rem;
  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);
}

.tile img {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tile-art-width);
  height: 100%;
  object-fit: contain;
  object-position: left center;
  padding: 1.25rem;
  box-shadow: none;
  border-radius: 0;
}

/* Brightness gradient: solid behind the text at the right edge, fading to
   fully transparent before it reaches the artwork. 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: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.44) 30%,
    rgba(0, 0, 0, 0) 62%
  );
  background: linear-gradient(
    to left,
    var(--tile-scrim) 0%,
    color-mix(in srgb, var(--tile-scrim) 72%, transparent) 30%,
    color-mix(in srgb, var(--tile-scrim) 0%, transparent) 62%
  );
}

.tile-label {
  position: relative;
  z-index: 2;
  width: calc(100% - var(--tile-art-width));
  margin-left: auto;
  padding: 1rem 1.25rem;
  color: var(--tile-ink);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  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: 1fr;
  }

  .tile {
    min-height: 12rem;
  }
}