/*****************************************
***  Home page — navigation tiles       ***
***  Scoped: only .tile-* classes.      ***
*****************************************/

.tile-grid {
  width: 90vw;
  max-width: 1500px;
  margin: 0 auto 3.5rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  text-align: left;
}

/* The whole tile is the link — in the old markup the anchor wrapped only the
   photo, so clicking the label did nothing. */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  background-color: #0e0e13;
  text-decoration: none;
  grid-column: span 6;
  /* Fixed heights rather than aspect-ratio: older iOS ignores the latter. */
  height: 180px;
}

.tile-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .55s cubic-bezier(.2, .6, .2, 1);
}

/* Gradient scrim: transparent at the top so the photo reads, opaque at the
   bottom so the label always has contrast regardless of the image. */
.tile::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(8, 8, 12, .10) 0%,
      rgba(8, 8, 12, .30) 45%,
      rgba(8, 8, 12, .86) 100%);
  transition: background .3s ease;
}

.tile-label {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: .95rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: 'anton', Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1.05;
  font-size: clamp(1.3rem, .85rem + 1.1vw, 1.95rem);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

/* chevron that nudges on hover */
.tile-label::after {
  content: '';
  flex: none;
  width: .38em;
  height: .38em;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  transition: transform .25s ease, opacity .25s ease;
}

.tile:hover .tile-img,
.tile:focus-visible .tile-img {
  transform: scale(1.05);
}

.tile:hover::after,
.tile:focus-visible::after {
  background: linear-gradient(180deg,
      rgba(8, 8, 12, .02) 0%,
      rgba(8, 8, 12, .22) 45%,
      rgba(8, 8, 12, .82) 100%);
}

.tile:hover .tile-label::after,
.tile:focus-visible .tile-label::after {
  transform: rotate(45deg) translate(.16em, -.16em);
  opacity: 1;
}

.tile:focus-visible {
  outline: 2px solid #8585eb;
  outline-offset: 3px;
}

/*** breakpoints — 1 up on phones, 2 up on tablets, 3 + 2 + 1 on desktop ***/

@media (min-width: 700px) {

  .tile-third,
  .tile-half {
    grid-column: span 3;
  }

  .tile {
    height: 240px;
  }

  .tile-full {
    height: 150px;
  }
}

@media (min-width: 1080px) {
  .tile-third {
    grid-column: span 2;
  }

  .tile-half {
    grid-column: span 3;
  }

  .tile {
    height: 300px;
  }

  .tile-full {
    height: 170px;
  }
}

.tile-full {
  grid-column: span 6;
  height: 150px;
}

@media (prefers-reduced-motion: reduce) {

  .tile-img,
  .tile::after,
  .tile-label::after {
    transition: none;
  }

  .tile:hover .tile-img {
    transform: none;
  }
}