/* Learning-trail cards.
   The seven trails used to be text rows in a list. They are now cards that lead
   with the painting of their own place on the valley map, so a child chooses by
   looking rather than by reading, and every card states the name of the game it
   starts. Loaded after studio.css and only touches .trail-row and its children. */

/* Cards are capped at 280px, which is half the 560px painting they carry, so a
   cover is drawn 1:1 on a normal display and still has pixels in hand on a 2x
   one. The cap is the layout obeying the art: the crops stay at 35% of the map
   because a wider window made three of the seven places look like each other. */
#trail-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,280px));
  justify-content:center;
  gap:1.6rem;
}

/* The card is one button. Everything inside it is a span, so there is a single
   tap target covering the whole card rather than a small arrow to aim at. */
.trail-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  width:100%;
  padding:0;
  overflow:hidden;
  text-align:left;
  background:var(--cream);
  border:1px solid #b9c3a8;
  border-radius:6px 22px 6px 22px;
  box-shadow:0 3px 0 #cdd1b2;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.trail-row:hover{transform:translateY(-3px);box-shadow:0 8px 18px #17465526}

.trail-cover{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  background:var(--mist);
  overflow:hidden;
}
.trail-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* A warm wash at the foot of the picture so the number stays readable over
   whichever part of the painting happens to sit behind it. */
.trail-cover::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  background:linear-gradient(transparent,#0f3a3aa8);
  pointer-events:none;
}
.trail-row .trail-number{
  position:absolute;
  left:14px;
  bottom:8px;
  z-index:2;
  font:700 1.8rem var(--display);
  color:var(--cream);
  text-shadow:0 2px 6px #0d3131,0 0 14px #0d3131;
}

.trail-copy{
  display:block;
  padding:1rem 1.2rem .4rem;
}
.trail-place{
  display:block;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--coral);
}
.trail-row strong{
  display:block;
  margin-top:.25rem;
  font:700 clamp(1.3rem,1.7vw,1.55rem)/1.1 var(--display);
}
.trail-row small{
  display:block;
  margin-top:.35rem;
  font-size:.88rem;
  line-height:1.45;
}
.trail-ages{
  display:block;
  margin-top:.5rem;
  font-size:.76rem;
  font-weight:700;
  color:#4a5d4a;
}

/* The confirmation the owner asked for: the card says which game it opens,
   by name, rather than leaving a bare arrow to be guessed at. */
.trail-go{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-top:auto;
  padding:.85rem 1.2rem 1rem;
  font-weight:800;
  font-size:.92rem;
  color:var(--ink);
}
.trail-go-label{text-decoration:underline;text-underline-offset:5px}
.trail-row .arrow{font-size:1.35rem;line-height:1}
.trail-row:hover .trail-go-label{text-decoration-thickness:2px}

@media(max-width:700px){
  #trail-list{grid-template-columns:minmax(0,280px);gap:1.3rem}
  /* The mobile rule in studio.css forces a three-column grid onto .trail-row.
     A card is a column, so that is overridden here rather than edited there. */
  .trail-row{grid-template-columns:none;gap:0}
  .trail-copy{padding:.9rem 1rem .3rem}
  .trail-row small{font-size:.85rem}
  .trail-go{padding:.75rem 1rem .9rem}
}

@media(prefers-reduced-motion:reduce){
  .trail-row,.trail-row:hover{transform:none;transition:none}
}