/* ==========================================================================
   GourmetBites hero
   ========================================================================== */

#gb-hero { position: relative; overflow: hidden; }

/* Oversized decorative glyph, low opacity, behind everything */
#gb-hero::before {
  content: 'restaurant';
  font-family: 'Material Symbols Outlined';
  position: absolute;
  top: -80px;
  right: -60px;
  font-size: 620px;
  line-height: 1;
  color: var(--gb-accent);
  opacity: 0.07;
  transform: rotate(12deg);
  pointer-events: none;
  z-index: 0;
}
#gb-hero > .e-con-inner, #gb-hero > .elementor-widget-wrap { position: relative; z-index: 1; }
#gb-hero-left, #gb-hero-right { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Delivery pill
   -------------------------------------------------------------------------- */
.gb-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--gb-r-pill);
  background: rgba(183, 16, 42, 0.10);
  border: 1px solid rgba(183, 16, 42, 0.20);
  color: var(--gb-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.gb-hero-pill .material-symbols-outlined { font-size: 18px; }

/* --------------------------------------------------------------------------
   Headline emphasis: same family, italic, accent
   -------------------------------------------------------------------------- */
#gb-hero-title .gb-em {
  color: var(--gb-accent);
  font-style: italic;
  /* italic descenders need breathing room at tight leading */
  line-height: 1.15;
  display: inline-block;
  padding-bottom: 0.04em;
}
#gb-hero-title .elementor-heading-title { max-width: 12ch; }
#gb-hero-sub { max-width: 46ch; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
#gb-hero-btn-primary .elementor-button,
#gb-hero-btn-ghost .elementor-button {
  box-shadow: none;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
#gb-hero-btn-primary .elementor-button { box-shadow: 0 8px 24px -6px rgba(183, 16, 42, 0.35); }
#gb-hero-btn-primary .elementor-button:hover,
#gb-hero-btn-ghost .elementor-button:hover { transform: scale(1.02); }
#gb-hero-btn-primary .elementor-button:active,
#gb-hero-btn-ghost .elementor-button:active { transform: scale(0.98); }

/* --------------------------------------------------------------------------
   Hero image + floating glass badges
   -------------------------------------------------------------------------- */
#gb-hero-right { min-height: 420px; }
#gb-hero-img img {
  width: 100%;
  max-width: 440px;
  height: auto;
  filter: drop-shadow(0 26px 42px rgba(39, 23, 23, 0.20));
}

.gb-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--gb-r-md);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--gb-shadow);
  z-index: 3;
}
.gb-float--tl { top: 4%;  left: -4%; }
.gb-float--br { bottom: 6%; right: -4%; }

.gb-float__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--gb-r-pill);
  font-size: 20px;
  flex: 0 0 auto;
}
.gb-float__ico--accent { background: rgba(183, 16, 42, 0.10); color: var(--gb-accent); }
.gb-float__ico--sec    { background: rgba(142, 78, 20, 0.10); color: var(--gb-secondary); }

.gb-float__label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gb-ink-muted);
  line-height: 1;
}
.gb-float__value { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.2; }
.gb-float__value--accent { color: var(--gb-accent); }
.gb-float__value--sec    { color: var(--gb-secondary); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #gb-hero::before { font-size: 420px; opacity: 0.05; }
  .gb-float--tl { left: 0; }
  .gb-float--br { right: 0; }
}
@media (max-width: 767px) {
  #gb-hero-title .elementor-heading-title { max-width: none; }
  #gb-hero-right { min-height: 320px; }
  #gb-hero-img img { max-width: 300px; }
  .gb-float { padding: 10px 12px; gap: 9px; }
  .gb-float__ico { width: 32px; height: 32px; font-size: 17px; }
  .gb-float__value { font-size: 13px; }
  .gb-float--tl { top: 0; left: 0; }
  .gb-float--br { bottom: 0; right: 0; }
  #gb-hero::before { font-size: 280px; top: -30px; right: -40px; }
}