/* BBQ, fire pits & hog roast page (owner brief 2026-10-25): BBQ tiers, hog & spit roast tiers and the fire pit band.
   Loads after canapes-page.css and corporate-page.css and reuses their cb-* cards and co-* blocks. */

/* Hero: the three services as one bold line, with the sub-headline under it */
.menu-page main .bq-hero .mhero-copy{max-width:700px}
.menu-page main .bq-hero h1{font-size:clamp(2.7rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.02em;font-weight:500;text-transform:uppercase}
.menu-page main .bq-hero .bq-word{white-space:nowrap}
.menu-page main .bq-hero .bq-dot{color:var(--gold-light);font-size:.6em;vertical-align:.18em;margin-inline:.08em}
.menu-page main .bq-sub{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.2;letter-spacing:-.02em;color:#fff;margin-top:18px}
.menu-page main .bq-sub em{color:var(--gold-light)}
.menu-page main .bq-hero .mhero-description{margin-top:18px;max-width:560px}

/* Hero fire (owner request 2026-10-25): a charcoal bed, flickering flames and rising smoke along the bottom of the hero.
   Sits above the photo and below the words; the site's ember sparks still play on top. */
.menu-page main .bq-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.menu-page main .bq-coals{position:absolute;left:-2%;right:-2%;bottom:0;height:70px;
  background:radial-gradient(ellipse 6% 40% at 6% 100%,#ff7a1acc,#0000 70%),radial-gradient(ellipse 5% 35% at 19% 100%,#ffb347b3,#0000 70%),radial-gradient(ellipse 7% 45% at 33% 100%,#ff5a0fcc,#0000 70%),radial-gradient(ellipse 5% 38% at 47% 100%,#ffa23ab3,#0000 70%),radial-gradient(ellipse 7% 44% at 61% 100%,#ff6a14cc,#0000 70%),radial-gradient(ellipse 5% 36% at 75% 100%,#ffb347b3,#0000 70%),radial-gradient(ellipse 7% 46% at 89% 100%,#ff5a0fcc,#0000 70%),linear-gradient(0deg,#1a0a04 0%,#2b120699 40%,#0000);
  filter:blur(3px);animation:bq-coals 3.2s ease-in-out infinite alternate}
.menu-page main .bq-fx::before{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(0deg,#ff6a1499 0%,#ff4a0a40 35%,#0000 100%);mix-blend-mode:screen;animation:bq-coals 2.4s ease-in-out infinite alternate}
.menu-page main .bq-flames span{position:absolute;bottom:-30px;left:var(--x);width:190px;height:calc(var(--h) * 1.35);margin-left:-95px;transform-origin:50% 100%;
  background:radial-gradient(ellipse 40% 70% at 50% 100%,#fff6c8 0%,#ffd76a 16%,#ff9a1f 34%,#ff5a0a 54%,#ff3c0000 74%);
  border-radius:45% 55% 40% 40%/75% 75% 25% 25%;filter:blur(10px);mix-blend-mode:screen;opacity:.85;
  animation:bq-flicker var(--t) ease-in-out var(--d) infinite alternate}
.menu-page main .bq-flames span:nth-child(3n){width:120px;margin-left:-60px;height:calc(var(--h) * 1.7);filter:blur(6px)}
.menu-page main .bq-flames span:nth-child(3n+1){animation-direction:alternate-reverse}
/* Lower flames under the words on the left, so the chef's credit line stays readable */
.menu-page main .bq-flames span:nth-child(-n+6){height:calc(var(--h) * .75)}
.menu-page main .bq-smoke span{position:absolute;bottom:60px;left:var(--x);width:340px;height:340px;margin-left:-170px;border-radius:50%;
  background:radial-gradient(circle,#ece6de70 0%,#bdb7b033 40%,#0000 70%);filter:blur(18px);opacity:0;
  animation:bq-smoke var(--t) linear var(--d) infinite}
@keyframes bq-flicker{
  0%{transform:scale(1,1) skewX(0deg);opacity:.75}
  35%{transform:scale(.92,1.12) skewX(3deg);opacity:.9}
  70%{transform:scale(1.06,.88) skewX(-3deg);opacity:.7}
  100%{transform:scale(.96,1.18) skewX(2deg);opacity:.88}
}
@keyframes bq-smoke{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  15%{opacity:.75}
  60%{opacity:.4}
  100%{transform:translate(60px,-560px) scale(1.9);opacity:0}
}
@keyframes bq-coals{0%{opacity:.8}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .menu-page main .bq-flames span,.menu-page main .bq-smoke span,.menu-page main .bq-coals{animation:none}
  .menu-page main .bq-smoke span{opacity:.3;transform:translateY(-120px) scale(1.2)}
}
@media(max-width:600px){
  .menu-page main .bq-flames span{width:80px;margin-left:-40px;height:calc(var(--h) * .6)}
  .menu-page main .bq-flames span:nth-child(even){display:none}
  .menu-page main .bq-smoke span{width:200px;height:200px;margin-left:-100px}
}

/* Fire pit band: words first, photo second, with its own price and buttons */
.menu-page main .bq-fire .co-visit-inner{grid-template-columns:1.15fr 1fr}
.menu-page main .bq-fire .co-visit-inner>div>p:last-child{margin-top:0}
.menu-page main .bq-fire h2+p{color:#c9d2e6;margin-top:18px;max-width:560px;line-height:1.75}
.menu-page main .bq-fire-price{font-family:var(--serif);font-size:3rem;line-height:1.1;letter-spacing:-.04em;color:var(--gold-light);margin-top:26px}
.menu-page main .bq-fire-price small{font-family:var(--sans);font-size:.8125rem;letter-spacing:.04em;color:#c2cce0;margin-right:4px}
.menu-page main .bq-fire-price span{font-family:var(--sans);font-size:.875rem;letter-spacing:0;color:#c2cce0}
.menu-page main .bq-fire-list{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid #3d4c76;display:grid;gap:10px;max-width:560px}
.menu-page main .bq-fire-list li{position:relative;padding-left:24px;font-size:.9375rem;line-height:1.55;color:#dbe1ef}
.menu-page main .bq-fire-list li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:1.5px solid var(--gold-light);border-bottom:1.5px solid var(--gold-light);transform:rotate(-45deg)}
.menu-page main .bq-fire-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

@media(max-width:900px){
  .menu-page main .bq-fire .co-visit-inner{grid-template-columns:1fr}
  .menu-page main .bq-fire .co-visit-photo{order:-1}
}
@media(max-width:600px){
  .menu-page main .bq-hero h1{font-size:2.35rem}
  .menu-page main .bq-sub{font-size:1.5rem;margin-top:14px}
  .menu-page main .bq-fire-price{font-size:2.5rem}
  .menu-page main .bq-fire-actions .button{width:100%}
}