/* =====================================================================
   NOCTIS v2 — lists.css
   shared layout for /bars/ and /coffee/ — editorial zigzag list.
   each item: a list-card with image one side, name + quote + tags +
   meta on the other. Even-indexed cards mirror so the eye zigzags
   down the page.
   ===================================================================== */

.list-page {
  padding: clamp(7rem, 12vw, 11rem) var(--pad-x) var(--section-y);
  background: var(--bg);
  color: var(--fg);
}

.list-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 56ch;
  margin-bottom: clamp(4rem, 9vw, 7rem);
}
.list-page__head h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
  margin: 0;
  color: var(--fg);
}
[lang^="zh"] .list-page__head h1 { letter-spacing: 0; }
.list-page__head .lead {
  font-family: var(--font-sans);
  font-size: var(--type-lead);
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0;
  max-width: 40ch;
}

/* ---- cards ------------------------------------------------------- */
.list-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vw, 8rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Zigzag — every other entry flips so image alternates sides. */
.list-card:nth-child(even) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.list-card:nth-child(even) .list-card__figure { order: 2; }

.list-card__figure {
  display: block;
  color: inherit;
  text-decoration: none;
}
.list-card__figure .img {
  aspect-ratio: 4 / 3;
}

.list-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.list-card__num {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.list-card__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg);
  transition: color var(--t-base) var(--ease-out);
}
[lang^="zh"] .list-card__name { letter-spacing: 0; }

.list-card__quote {
  margin: var(--space-4) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--type-h4);
  line-height: 1.42;
  color: var(--fg-soft);
  max-width: 36ch;
}

.list-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.list-card__tag {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 5px 10px 4px;
  border: 1px solid var(--line);
  transition:
    color        var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
.list-card__figure:hover ~ .list-card__body .list-card__tag,
.list-card:hover .list-card__tag {
  color: var(--fg-soft);
  border-color: var(--line-soft);
}

.list-card__meta {
  margin: var(--space-5) 0 0;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* image hover — defocus the warm tint, scale slightly */
.list-card__figure .img > img {
  transition:
    filter    var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}
.list-card__figure:hover .img > img.is-loaded {
  filter: var(--img-tint-hover);
  transform: scale(1.025);
}
.list-card__figure:hover ~ .list-card__body .list-card__name,
.list-card:hover .list-card__name {
  color: var(--accent);
}

/* mobile — stack, no zigzag */
@media (max-width: 760px) {
  .list-card,
  .list-card:nth-child(even) {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .list-card:nth-child(even) .list-card__figure { order: 0; }
  .list-card__figure .img { aspect-ratio: 4 / 3; }
  .list-card__name { font-size: clamp(1.75rem, 7vw, 2.25rem); }
}