/* =====================================================================
   indexpages3.css — the "start here" layer on the Eat index.
   Loaded after style.css. Uses only the six brief colours, the three
   faces and the tokens style.css already defines. Nothing here touches
   the 130-card directory below it, which is left exactly as it was.
   ===================================================================== */

/* The page paints its own ground. style.css leaves untinted sections to the
   body, and the body colour there is a fixed light value, so in dark mode a
   section with no background of its own comes out white under light text.
   --bg follows the theme, so naming it here is right in both. */
#start-here, #the-list { background: var(--bg); }

/* ------------------------------------------------- the entry cards */
.eatgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 22px;
}

.eatcard {
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.eatcard:hover,
.eatcard:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--shallow) 60%, var(--line));
}
.eatcard:focus-visible { outline: 2px solid var(--shallow); outline-offset: 3px; }

.eatcard-im {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-sunk);   /* follows the theme, so no white flash before the photo paints */
}
.eatcard-im img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.eatcard:hover .eatcard-im img { transform: scale(1.06); }

.eatcard-bd {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 18px;
}

h3.eatcard-t {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--text);
}

ul.eatcard-ls {
  display: block;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-width: none;
}
li.eatcard-l {
  display: block;
  position: relative;
  margin: 0;
  padding: 3px 0 3px 15px;
  font-size: .87rem;
  line-height: 1.4;
  color: var(--text-soft);
}
li.eatcard-l::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--shallow);
}

.eatnum {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  font-size: .93em;
  letter-spacing: -.01em;
  color: var(--text);
}

.eatcard-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 15px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--pine);
}
.eatcard-go::after {
  content: "\2192";
  transition: transform .4s var(--ease);
}
.eatcard:hover .eatcard-go::after { transform: translateX(5px); }

/* Pine reads well on whitewash and goes muddy on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eatcard-go { color: var(--shallow); }
}
:root[data-theme="dark"] .eatcard-go { color: var(--shallow); }

/* ------------------------------------------- the row of guide chips */
.eatchips-lab {
  margin: 30px 0 12px;
  font-size: .88rem;
  color: var(--text-soft);
}
.eatchips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.eatchip {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eatchip .eatnum { color: var(--text-soft); font-size: .82em; }
.eatchip:hover .eatnum { color: var(--text); }

/* ------------------------------------------------------ the top ten */
.toplist {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.toprow {
  display: grid;
  grid-template-columns: 3rem 1fr 4.6rem;
  align-items: center;
  gap: 4px 16px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
}
.toprow:first-child { border-top: 0; }
.toprow:hover { background: color-mix(in srgb, var(--shallow) 8%, var(--bg-alt)); }

.toprank {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: .82rem;
  color: var(--text-soft);
}
.topmain { min-width: 0; }
.topmain a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -.012em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.topmain a:hover { border-bottom-color: var(--bougie); }
.topwhere {
  display: block;
  font-size: .8rem;
  color: var(--text-soft);
  margin-top: 3px;
}
.topprice {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .82em;
  color: var(--text-soft);
  white-space: nowrap;
  margin-left: 4px;
}
.topscore {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.topscore small { font-size: .58em; font-weight: 400; color: var(--text-soft); }

.topnote {
  margin: 16px 0 0;
  font-size: .82rem;
  color: var(--text-soft);
  max-width: 72ch;
}

/* ------------------------------------------- the note above the 130 */
.eatmethod { margin-bottom: 26px; }
.eatfacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 10px 26px;
  max-width: none;
}
.eatfacts li {
  display: block;
  position: relative;
  padding-left: 16px;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--text-soft);
}
.eatfacts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--shallow);
}

/* ---------------------------------------------------------- narrow */
@media (max-width: 720px) {
  .eatgrid { grid-template-columns: 1fr; gap: 16px; }
  .eatcard-im { aspect-ratio: 2 / 1; }
  .eatcard-bd { padding: 16px 18px; }
  .eatcard-t { font-size: 1.2rem; }
  .eatcard-go { padding-top: 13px; }

  .toprow {
    grid-template-columns: 2.1rem 1fr 4rem;
    gap: 2px 10px;
    padding: 12px 16px;
  }
  .toprank { align-self: start; padding-top: 5px; }
  .topmain a { font-size: 1.02rem; }
  .topscore { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .eatcard, .eatcard-im img, .eatcard-go::after { transition: none; }
  .eatcard:hover { transform: none; }
  .eatcard:hover .eatcard-im img { transform: none; }
}