/* Inner pages (party packs, catering, about). Loaded after /style.css. */

/* Page header band */
.page-hero {
  border-bottom: 3px solid var(--orange);
  background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)), url("/img/flames.jpg") center / cover no-repeat;
  background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)), image-set(url("/img/flames.avif") type("image/avif"), url("/img/flames.webp") type("image/webp"), url("/img/flames.jpg") type("image/jpeg")) center / cover no-repeat;
  padding: 40px 16px 56px;
}
.page-hero-inner { max-width: 788px; margin: 0 auto; } /* matches .page-body text column (820 minus 2 x 16px padding) */
.crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .9rem; color: rgba(255,255,255,.7); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--orange); }
.crumbs a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { text-decoration: underline; }
.page-hero h1 { font-size: clamp(1.8rem, 4.5vw, 2.7rem); line-height: 1.15; margin-bottom: .45em; }
.lede { font-size: 1.15rem; line-height: 1.65; color: rgba(255,255,255,.9); margin: 0 0 1.4em; max-width: 62ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Body copy */
.page-body { max-width: 820px; margin: 0 auto; padding: 56px 16px 72px; }
.page-body section + section { margin-top: 48px; }
.page-body h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.page-body h3 { font-size: 1.1rem; font-weight: 700; margin: 1.4em 0 .35em; }
.page-body p { margin: 0 0 1em; color: rgba(255,255,255,.88); line-height: 1.7; }
.page-body ul { margin: 0 0 1em; padding-left: 1.2em; line-height: 1.7; color: rgba(255,255,255,.88); }
.page-body li + li { margin-top: .3em; }
.page-body a:not(.btn) { color: var(--orange); font-weight: 600; text-underline-offset: 3px; }
.page-body a:focus-visible, .crumbs a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Pack cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 8px 0 20px; }
.card { padding: 24px 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-top: 3px solid var(--orange); border-radius: 12px; }
.card h3 { font-family: var(--heading); font-weight: 400; font-size: 1.5rem; margin: 0 0 .2em; }
.card .serves { font-weight: 700; color: var(--orange); margin-bottom: .6em; }
.card p:last-child { margin-bottom: 0; }

/* Callout box, same look as the home page visit block */
.callout { padding: 20px 22px; background: rgba(255,255,255,.05); border-left: 3px solid var(--orange); border-radius: 8px; }
.callout p:last-child { margin-bottom: 0; }
.callout .btn { margin-top: 4px; }

/* Facts list (address, hours, phone) */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 1em; }
.facts dt { font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); padding-top: .25em; }
.facts dd { margin: 0; color: rgba(255,255,255,.9); }
.facts dd a { display: inline-flex; align-items: center; min-height: 44px; }
.page-body li a[href^="tel:"] { display: inline-block; padding: 10px 0; }

/* Numbered steps */
.steps { counter-reset: step; list-style: none; padding-left: 0 !important; }
.steps li { counter-increment: step; position: relative; padding-left: 2.4em; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: .1em; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center; }

/* Questions */
.faq h3 { margin-top: 1.6em; }
.faq h3:first-of-type { margin-top: .4em; }

/* Links to the other pages */
.more { border-top: 1px solid rgba(255,255,255,.12); padding-top: 32px; }
.more ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.more li + li { margin-top: 0; }
.more a:not(.btn) { display: block; padding: 14px 16px; border: 1px solid rgba(247,148,29,.45); border-radius: 10px; text-decoration: none; min-height: 44px; }
.more a:not(.btn):hover { background: rgba(247,148,29,.1); }

@media (max-width: 800px) {
  .page-hero { padding: 28px 16px 44px; }
  .page-body { padding-top: 44px; }
}

@media (max-width: 420px) {
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 10px; }
}