/* Shared timing makes opening and closing equally smooth. */
.food-card { --card-duration: 420ms; --card-easing: cubic-bezier(.22,.61,.36,1); }
.food-toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.food-image { display: block; isolation: isolate; }
.food-image img {
  object-position: var(--food-position, 50% 50%);
  transition: transform var(--card-duration) var(--card-easing), filter var(--card-duration) var(--card-easing);
}
.food-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.74);
  opacity: 0;
  transition: opacity var(--card-duration) var(--card-easing);
  pointer-events: none;
}
.food-detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 25px;
  color: #fff;
  opacity: 0;
  filter: blur(7px);
  transform: translateY(10px);
  transition: opacity var(--card-duration) var(--card-easing), filter var(--card-duration) var(--card-easing), transform var(--card-duration) var(--card-easing);
}
.food-detail-title { font-size: 22px; line-height: 1.2; font-weight: 800; margin-bottom: 12px; }
.food-description { font-size: 15px; line-height: 1.55; }
.food-name { display: block; font-size: 19px; line-height: 1.35; font-weight: 700; margin-top: 16px; letter-spacing: -.4px; }
.food-number { z-index: 3; transition: opacity var(--card-duration); }
.food-hint { position: absolute; bottom: 10px; right: 10px; z-index: 3; background: #111d; color: white; padding: 5px 8px; font-size: 10px; border-radius: 3px; transition: opacity var(--card-duration); }
.food-card.is-open .food-image img { transform: scale(1.04); filter: blur(3px); }
.food-card.is-open .food-image::after { opacity: 1; }
.food-card.is-open .food-detail { opacity: 1; filter: blur(0); transform: translateY(0); }
.food-card.is-open .food-number, .food-card.is-open .food-hint { opacity: 0; }
.food-toggle:focus-visible { outline: 3px solid #8e7600; outline-offset: 5px; }
@media (min-width: 701px) and (max-width: 1000px) {
  .food-image { aspect-ratio: .9; }
  .food-detail { padding: 18px; }
  .food-detail-title { font-size: 18px; }
  .food-description { font-size: 14px; }
}
@media (max-width: 700px) {
  .food-image { aspect-ratio: .83; }
  .food-name { font-size: 16px; margin-top: 12px; letter-spacing: -.2px; }
  .food-detail { padding: 14px; }
  .food-detail-title { font-size: 16px; line-height: 1.15; margin-bottom: 8px; }
  .food-description { font-size: 12px; line-height: 1.4; }
  .food-hint { font-size: 9px; bottom: 7px; right: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .food-card *, .food-image::after { transition: none !important; }
  .food-detail { filter: none; transform: none; }
  .food-card.is-open .food-image img { filter: none; transform: none; }
}