/* ===== Hero (Homepage) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  /* top padding clears the fixed navbar (~90px); keeps hero within one viewport */
  padding: 124px 0 64px;
  box-sizing: border-box;
  background: radial-gradient(
      90% 70% at 80% 10%,
      rgba(25, 48, 57, 0.55),
      transparent 60%
    ),
    var(--bg);
  overflow: hidden;
}
.hero > .container { width: 100%; }
.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: center;
}
.hero__title { margin-bottom: 26px; }
.hero__line { display: block; }
.hero__lead { margin-bottom: 38px; }
.hero__actions {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}
.hero__rating {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.85rem;
}
.hero__rating strong { font-size: 1.05rem; }
.hero__stars {
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 2px;
}
.hero__rating small { color: var(--text-muted); }
.hero__visual {
  position: relative;
  height: 520px;
}

@keyframes dish-spin-in {
  0%   { opacity: 0; transform: scale(2.2) rotate(120deg); }
  60%  { opacity: 1; }
  85%  { transform: scale(0.98) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.hero__dish {
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border-soft);
}
.dish-spin-in {
  opacity: 0;
  animation: dish-spin-in 2.2s cubic-bezier(0.08, 0.92, 0.3, 1) forwards;
}
.hero__dish--soup.dish-spin-in  { animation-delay: 0.35s; }
.hero__dish--pasta.dish-spin-in { animation-delay: 0.6s; }
.hero__dish--bowl.dish-spin-in  { animation-delay: 0.85s; }
@media (prefers-reduced-motion: reduce) {
  .dish-spin-in { opacity: 1; animation: none; }
}
.hero__dish--pasta { width: 320px; height: 320px; right: 30px; top: 150px; z-index: 2; }
.hero__dish--soup  { width: 210px; height: 210px; right: 280px; top: 30px; z-index: 3; }
.hero__dish--bowl  { width: 190px; height: 190px; right: 250px; top: 330px; z-index: 3; }
.hero__badge {
  position: absolute;
  right: 0;
  top: 420px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 29, 34, 0.92);
  border: 1px solid var(--border);
  padding: 12px 18px;
  border-radius: 10px;
  font-family: var(--font-label);
  font-size: 0.8rem;
}
.hero__badge i { color: var(--gold); }
.hero__badge small { color: var(--text-muted); font-size: 0.7rem; }

/* ===== Page hero (interior pages) ===== */
.page-hero {
  padding: 160px 0 80px;
  background: radial-gradient(
      80% 60% at 70% 20%,
      rgba(25, 48, 57, 0.4),
      transparent 60%
    ),
    var(--bg);
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.page-hero .heading-xl { margin-bottom: 20px; }
.page-hero .lead { margin: 0 auto; }

/* ===== Blog hero ===== */
.blog-hero {
  padding: 160px 0 80px;
  background: radial-gradient(
      80% 60% at 70% 20%,
      rgba(25, 48, 57, 0.4),
      transparent 60%
    ),
    var(--bg);
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}

@media (max-width: 980px) {
  /* stacked layout can exceed viewport → flow from top instead of centering */
  .hero { align-items: flex-start; min-height: 0; padding: 124px 0 72px; }
  .hero__inner { grid-template-columns: 1fr; gap: 60px; }
  .hero__visual { height: 440px; }
}
@media (max-width: 540px) {
  .hero__visual {
    height: 360px;
    transform: scale(0.82);
    transform-origin: center;
  }
}