/* Memoria in direction A (round 4, 13 Nov 2026), laid out like the home and the artist page.
   Laptops: the nights on the left as the home's list, one photo in the middle at the flyer's size,
   the roster on the right (shell.css). Phones: each night as a label and a sideways strip. */

.mem {
  display: grid;
  grid-template-columns: var(--list-w) minmax(0, 1fr) var(--list-w);
  align-items: start;
  /* The photo's top edge sits where the home's flyer sits. */
  padding-top: calc(var(--top-r) + (100svh - var(--top-r) - var(--bot-r) - var(--fh)) / 2);
  min-height: 100svh;
}
/* Words dissolve into black as they scroll under the logo, as on the artist page. */
.mem::before {
  content: "";
  position: fixed;
  z-index: 25;
  top: 0; left: 0; right: 0;
  height: var(--top-r);
  background: linear-gradient(var(--ink) 80%, transparent);
  pointer-events: none;
}

/* ---------- the nights on the left, in the home's list type ---------- */

.mem__info {
  grid-column: 1;
  grid-row: 1 / span 2;
  /* Pinned to the screen like the roster, so it holds still when the page bounces at its end
     (Miguel's recording, 15 Nov 2026: sticky rode the bounce, the fixed roster did not). */
  position: fixed;
  z-index: 5;
  left: 0;
  top: calc(var(--top-r) + 1rem);
  width: var(--list-w);
  max-height: calc(100svh - var(--top-r) - 1rem - var(--bot-r));
  overflow-y: auto;
  scrollbar-width: none;
}
.mem__title, .mem__sub, .mem__all { margin-left: var(--gutter); }
.mem__title { margin-top: 0; margin-bottom: 0; font: inherit; font-size: 0.8125rem; line-height: 1.35; letter-spacing: 0.12em; color: var(--cream); }
.mem__sub { margin-top: 0.15rem; margin-bottom: 2.2rem; line-height: 1.5; }
.mem__nights { list-style: none; margin: 0; padding: 0; }
.mem__all { margin-top: 1.2rem; line-height: 1.95; }

.night {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  align-items: start;
  padding: 0 1rem 1.1rem 0;
}
.night__n {
  padding: 0.1rem 0 0 1.5rem;
  color: var(--cream-dim);
  opacity: var(--faint);
  font-variant-numeric: tabular-nums;
}
.night__hit {
  display: block;
  color: var(--cream-dim);
  transform-origin: left center;
  transition: color 200ms var(--ease-out), transform var(--release);
}
.night__hit:active { transform: scale(0.97); transition: color 200ms var(--ease-out), transform var(--press); }
.night__name, .strip__name { display: block; font-size: 0.8125rem; line-height: 1.35; color: var(--cream); }
.night__meta, .strip__meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; margin-top: 0.15rem; line-height: 1.5; }
.night__arrow {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.4em;
  vertical-align: 0.05em;
  opacity: 0;
  transform: translate(-0.12em, 0.12em);
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}
/* The night in the middle is lit; hovering any night lights it and shows the arrow to its page. */
@media (hover: hover) {
  .night:hover .night__hit { color: var(--cream); }
  .night:hover .night__n { opacity: 1; color: var(--cream); }
  .night__hit:hover .night__arrow { opacity: 1; transform: none; }
}
.night.is-lit .night__hit, .night__hit:focus-visible { color: var(--cream); }
.night.is-lit .night__n { opacity: 1; color: var(--cream); }
.night__hit:focus-visible .night__arrow { opacity: 1; transform: none; }

/* ---------- the photo in the middle: black and white, colour on hover ---------- */

.mem__stage { grid-column: 2; grid-row: 1; justify-self: center; width: var(--fw); margin: 0; }
.mem__stage[hidden] { display: none; }
.mem__frame {
  position: relative;
  display: block;
  width: var(--fw);
  height: var(--fh);
  overflow: hidden;
  background: var(--ash);
  transition: transform var(--release);
}
.mem__frame:active { transform: scale(0.985); transition: transform var(--press); }
.mem__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(1);
  transition: filter 200ms var(--ease-out), opacity 200ms ease-in-out;
}
.mem__img.is-on { opacity: 1; }
@media (hover: hover) { .mem__frame:hover > .mem__img { filter: none; } }
.mem__frame:active > .mem__img, .mem__frame:focus-visible > .mem__img { filter: none; }
.mem__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0.7rem 0 0;
  color: var(--cream-dim);
  line-height: 1.5;
}
[data-count] { font-variant-numeric: tabular-nums; }
.mem__steps { display: flex; gap: 0.2rem; margin-right: -0.5rem; }
.mem__step { padding: 0 0.5rem; }

.mem__end { grid-column: 2; grid-row: 2; justify-self: center; width: var(--fw); }

/* The strips are the phone's way through the photos. */
.mem__strips { display: none; }

/* ---------- phones and tablets ---------- */

@media (max-width: 959px) {
  .mem {
    --pw: min(72vw, 22rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: calc(var(--top-r) + 1.6rem);
  }
  .mem::before { background: var(--ink); }
  .mem__info { display: contents; }
  .mem__title, .mem__sub, .mem__all { margin-left: 0; text-align: center; }
  .mem__title { font-size: 0.9375rem; }
  .mem__sub { margin-bottom: 0; }
  .mem__nights, .mem__stage { display: none; }

  .mem__strips { display: block; order: 3; }
  .mem__all { order: 4; align-self: center; margin-top: 3rem; padding: 0 0.25rem; line-height: 44px; }
  .mem__end { order: 5; width: 100%; padding: 0 1.25rem; }

  .strip { margin-top: 2.6rem; }
  .strip__label { display: block; width: max-content; max-width: calc(100% - 2.5rem); margin: 0 auto; padding: 0.55rem 0.25rem; text-align: center; }
  .strip__name { font-size: 0.9375rem; }
  .strip__meta { justify-content: center; color: var(--cream-dim); }
  .strip .night__arrow { opacity: 0.55; transform: none; }
  /* One photo centred, the next peeking in, snapping photo by photo. No library. */
  .strip__track {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0 calc((100% - var(--pw)) / 2);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .strip__track::-webkit-scrollbar { display: none; }
  .strip__track > li { flex: 0 0 var(--pw); scroll-snap-align: center; }
  .strip__photo { display: block; width: 100%; transition: transform var(--release); }
  .strip__photo:active { transform: scale(0.985); transition: transform var(--press); }
  .strip__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ash); filter: grayscale(1); transition: filter 200ms var(--ease-out); }
  .strip__photo:active img, .strip__photo:focus-visible img { filter: none; }
}
@media (max-width: 959px) and (hover: hover) {
  .strip__photo:hover img { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mem__frame:active, .strip__photo:active, .night__hit:active { transform: none; }
}

/* Test link only: the body already leaves room for the MODO PRUEBA bar and --top-r counts it, so
   the page takes the body's room back rather than counting the bar twice. */
.has-pb .mem { margin-top: calc(-1 * var(--pb)); }