/* ─── Tile component ─────────────────────────────────────────────
   Set per tile via inline CSS custom properties:
     --tile-color           : accent colour shown on hover
     --tile-image           : url() pointing to the photo
     --tile-overlay-opacity : tint strength (default 0.55)
──────────────────────────────────────────────────────────────── */

/* Boost specificity to beat the .entry-content a:not() rules in style.css */
.tile,
#main-content .entry-content a.tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;

  background-image: var(--tile-image, none);
  background-size: cover;
  background-position: center;
  background-color: var(--tile-color, #29b6d8); /* fallback / hover colour */

  border-radius: 0;       /* sharp edges */
  cursor: pointer;
  text-decoration: none;
}

/* Colour overlay — semi-transparent by default, covers photo on hover */
.tile::before,
#main-content .entry-content a.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--tile-color, #29b6d8);
  opacity: var(--tile-overlay-opacity, 0.55);
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.tile:hover::before,
.tile:focus-visible::before,
#main-content .entry-content a.tile:hover::before,
#main-content .entry-content a.tile:focus-visible::before {
  opacity: 1; /* fully opaque → solid colour */
}

/* Title — always visible in top-left corner */
.tile__title,
#main-content .entry-content a.tile .tile__title {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  z-index: 1;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
  pointer-events: none;
}

/* Touch devices: keep tinted image visible, no hover */
@media (hover: none) {
  .tile::before { opacity: var(--tile-overlay-opacity, 0.55); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .tile::before { transition: none; }
}

/* ─── Tile grid ──────────────────────────────────────────────────
   Responsive two-column grid. Tiles wrap to one column on mobile.
──────────────────────────────────────────────────────────────── */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 10px;
}