/* =========================================================================
   PUMP KITCHENS AE — dish cards
   Used by the landing-page teaser, the menu-page preview, and the blurred
   slab behind the lock. Pre-launch there is no filter/search UI: the menu is
   a curated showcase, not a browsable database.
   ========================================================================= */

/* ---------- page header (menu page) ---------- */
/* the menu page opens on the green ground rather than another black slab */
.page-hero {
  background: var(--forest);
  color: var(--d-hi);
  padding-block: clamp(120px, 17vh, 220px) clamp(56px, 7vw, 100px);
}
.page-hero .eyebrow { color: var(--accent); }
.page-hero__in { max-width: 62ch; }
.page-hero .eyebrow { margin-bottom: clamp(16px, 2vw, 26px); }
.page-hero h1 { margin-bottom: clamp(18px, 2.2vw, 30px); }
.page-hero .lede { color: var(--d-mid); }
.page-hero__meta {
  margin-top: clamp(28px, 3.4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-lo);
}

/* ---------- the grid ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}

/* ---------- dish card ---------- */
.dish {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow var(--t-hover) var(--e-out), transform var(--t-hover) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .dish:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(169, 203, 164, 0.5),
                0 14px 38px rgba(18, 22, 26, 0.09);
  }
}
/* padding lives on the body so a photo can sit flush to the card edges */
.dish__body { padding: clamp(18px, 1.7vw, 26px); }

/* cursor spotlight */
.dish__spot {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
              rgba(169, 203, 164, 0.16), transparent 62%);
  transition: opacity 0.4s var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .dish:hover .dish__spot { opacity: 1; }
  .dish--photo:hover .dish__img { transform: scale(1.06); }
}

/* ---------- dish photo ---------- */
.dish__media {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--haze-soft);
  overflow: hidden;
}
.dish__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.7s var(--e-out);
}
.dish--photo .dish__body { padding-top: clamp(16px, 1.5vw, 22px); }

/* ---------- text ---------- */
.dish__course {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 10px;
}
.dish__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.dish__name {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.02;
  color: var(--t-hi);
}
.dish__price {
  flex: none;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--accent-deep);
  letter-spacing: 0.01em;
}
.dish__desc {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--t-mid);
}
.dish__macros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--rule-soft);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-lo);
}
.dish__macros b {
  font-weight: 600;
  color: var(--t-hi);
  font-size: 12px;
  margin-right: 3px;
}

/* ---------- legal note ---------- */
.menu__legal {
  margin-top: clamp(36px, 4.5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  justify-content: space-between;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-lo);
}
.section--deep .menu__legal,
.section--dark .menu__legal {
  border-color: var(--d-rule-soft);
  color: var(--d-lo);
}

@media (max-width: 560px) {
  .menu-grid { grid-template-columns: 1fr; }
}