/* Block: Hero Food
   Full-screen hero with food background image and title overlay
*/

.hero-food {
  position: relative;
  min-height: 101vh;
  background-size: cover;
  background-position: center;
  padding-inline: var(--space-xl);
  align-items: center;
  margin-block-start: -4rem;
  padding-block-start: 4rem;
}

.hero-food__title {
  font-family: var(--font-heading);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 0.9;
  color: var(--text-on-dark);
  text-align: center;
  text-shadow: none;
  flex: 2;
}

.hero-food__name {
  display: block; /* Makes it stack properly */
  text-shadow: var(--shadow-emboss); /* Only on the food name */
}

/* Wrapper around subtitle + category — ensures coral border always shows */
.hero-food__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-xs);
  border-block-start: 4px solid hsl(var(--clr-coral-500));
  width: fit-content;
  margin-inline: auto;
  gap: var(--space-xs);
}

.hero-food__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--text-on-dark);
  text-shadow: var(--shadow-emboss-sm);
}

/* Category badge enlarged in hero context */
.hero-food__details .detail-badge[data-type="category"] {
  font-size: var(--fs-lg);
}

.hero-food__details .detail-badge[data-type="category"] svg {
  width: 48px;
  height: 48px;
}

/* Home page specific */
.hero-food[data-page="home"] {
  display: flex;
  background-image:
    linear-gradient(to bottom, hsl(var(--clr-white)) 0%, hsl(0 0% 0% / 0.1) 34%),
    url('https://cdn.nutrepedia.com/thanksgiving.jpeg?quality=90&format=webp');
}

.logo--hero {
  font-size: 11rem;
  width: 100%;
  text-align: center;
  color: var(--text-on-dark);
  text-shadow:
    0px 0px 3px hsl(var(--clr-green-800)),
    3px 3px 3px hsl(var(--clr-yellow-500)),
    8px 8px 12px hsl(0 0% 0% / 0.9);
}

.logo--hero .logo-icon {
  height: 0.8em;
  transform: translateY(0.075em);
  filter:
    drop-shadow(0px 0px 2px hsl(var(--clr-green-900)))
    drop-shadow(4px 4px 8px hsl(0 0% 0% / 0.8));
}

@media (max-width: 768px) {
  .hero-food {
    grid-template-columns: 1fr;
    height: 300px;
  }

  .hero-food__title {
    font-size: var(--fs-xxl);
  }
}