/* ============ Ali's BBQ · sub-page styles (story / locations / branch / catering) ============ */
/* Reuses tokens, nav, footer and buttons from site.css. */

body.subpage{background:var(--color-paper)}
.subpage main{display:block}

/* ---- shared page hero ---- */
.page-hero{position:relative;background:var(--color-char);color:var(--color-paper);overflow:hidden;
  padding:calc(var(--space-3xl) + 64px) 0 var(--space-3xl)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 84% -10%, var(--color-accent) 0%, oklch(48% 0.17 45 / 0.32) 16%, transparent 52%)}
.page-hero>*{position:relative;z-index:1}
.page-hero .eyebrow{color:var(--color-accent)}
.page-hero h1{font-family:var(--font-display);text-transform:uppercase;line-height:0.86;letter-spacing:0.005em;
  font-size:clamp(3rem,9vw,7rem);color:var(--color-paper);margin-top:var(--space-sm);max-width:18ch}
.page-hero h1 .em{color:var(--color-accent)}
.page-hero .page-sub{margin-top:var(--space-lg);font-size:var(--text-lg);color:var(--color-cream-70);max-width:54ch}
.crumbs{font-size:var(--text-xs);letter-spacing:0.18em;text-transform:uppercase;color:var(--color-cream-45)}
.crumbs a{color:var(--color-cream-45);text-decoration:none}
.crumbs a:hover{color:var(--color-accent)}

.section{padding-block:var(--space-3xl)}
.section.alt{background:var(--color-paper-3)}
.section.dark{background:var(--color-char);color:var(--color-paper)}
.section.orange{background:#DC5C14;color:var(--color-char)}
.lede{font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;color:var(--color-ink);max-width:30ch;font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.01em}
.section.dark .lede{color:var(--color-paper)}
.prose p{font-size:var(--text-lg);line-height:1.6;color:var(--color-ink);max-width:62ch}
.prose p + p{margin-top:var(--space-md)}
.section.dark .prose p{color:var(--color-cream-70)}
.split{display:grid;grid-template-columns:0.8fr 1.2fr;gap:var(--space-2xl);align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:var(--space-lg)}}

/* ---- story timeline ---- */
.timeline{margin-top:var(--space-xl);border-top:var(--rule-hair) solid var(--color-line)}
.section.dark .timeline{border-top-color:var(--color-line-dk)}
.tl-row{display:grid;grid-template-columns:6rem 1fr;gap:var(--space-lg);padding:var(--space-lg) 0;border-bottom:var(--rule-hair) solid var(--color-line);align-items:baseline}
.section.dark .tl-row{border-bottom-color:var(--color-line-dk)}
.tl-year{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-accent);line-height:1}
.tl-body h3{font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-2xl);line-height:0.95;color:inherit}
.tl-body p{margin-top:var(--space-2xs);color:var(--color-ink-70);max-width:60ch;line-height:1.55}
.section.dark .tl-body p{color:var(--color-cream-70)}
@media(max-width:560px){.tl-row{grid-template-columns:1fr;gap:var(--space-2xs)}}

/* ---- value/feature chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.chip{font-size:var(--text-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  padding:var(--space-2xs) var(--space-md);border-radius:999px;border:var(--rule-hair) solid currentColor;color:var(--color-ink-70)}
.section.dark .chip,.page-hero .chip{color:var(--color-cream-70)}
.section.orange .chip{color:var(--color-char);border-color:oklch(20% 0.03 45 / 0.4)}

/* ---- locations grid ---- */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-lg);margin-top:var(--space-xl)}
.loc-card{position:relative;display:flex;flex-direction:column;background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-line);
  border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid)}
.loc-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px oklch(20% 0.02 50 / 0.16)}
.loc-card .loc-figure{aspect-ratio:4/3;background:var(--color-char) center/cover no-repeat;position:relative}
.loc-card .loc-figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,oklch(13% 0.02 45 / 0.66))}
.loc-card .loc-area{position:absolute;left:var(--space-md);bottom:var(--space-sm);z-index:1;font-size:var(--text-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--color-cream-70)}
.loc-body{padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-2xs);flex:1}
.loc-body h3{font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-2xl);line-height:0.95;color:var(--color-ink)}
.loc-body p{font-size:var(--text-sm);color:var(--color-ink-70);line-height:1.5}
.loc-meta{margin-top:auto;padding-top:var(--space-md);display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}
.loc-meta .open{font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--color-accent-2);font-weight:700}
.loc-link{font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-sm);letter-spacing:0.04em;color:var(--color-accent-2);text-decoration:none}
.loc-card:hover .loc-link{color:var(--color-accent)}
.loc-card .stretch{position:absolute;inset:0;z-index:2}

/* ---- branch detail ---- */
.branch-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--space-2xl);align-items:start}
@media(max-width:860px){.branch-grid{grid-template-columns:1fr;gap:var(--space-xl)}}
.info-list{margin-top:var(--space-lg);border-top:var(--rule-hair) solid var(--color-line)}
.info-row{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--space-md);padding:var(--space-md) 0;border-bottom:var(--rule-hair) solid var(--color-line)}
.info-row dt{font-size:var(--text-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--color-ink-70);font-weight:700}
.info-row dd{font-size:var(--text-base);color:var(--color-ink);line-height:1.5}
.info-row dd a{color:var(--color-accent-2);text-decoration:none}
.info-row dd a:hover{text-decoration:underline}
.branch-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl)}
.branch-map{aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;border:var(--rule-hair) solid var(--color-line);background:var(--color-paper-3)}
.branch-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(0.2) contrast(1.02)}
@media(max-width:860px){.branch-map{aspect-ratio:16/10}}

/* ---- catering / contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:var(--space-xl)}}
.field{display:flex;flex-direction:column;gap:var(--space-2xs);margin-bottom:var(--space-md)}
.field label{font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--color-ink-70);font-weight:700}
.field input,.field textarea{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-ink);background:var(--color-paper-2);
  border:var(--rule-hair) solid var(--color-line-2);border-radius:var(--radius);padding:var(--space-sm) var(--space-md);transition:border-color var(--dur-short)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-accent)}
.field textarea{min-height:120px;resize:vertical}

.cta.ghost{background:transparent;color:var(--color-paper);border:var(--rule-hair) solid var(--color-cream-45)}
.cta.ghost:hover{background:var(--color-paper);color:var(--color-char)}
.page-hero .cta.ghost{color:var(--color-paper)}

/* ============ real-image integration + mascot + reveals + mobile spacing ============ */
/* nav logo badge */
.nav .mark{display:inline-flex;align-items:center;gap:10px}
.mark-badge{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}

/* hero with real photo behind the ember scrim */
.page-hero{isolation:isolate}
.page-hero .hero-photo{position:absolute;inset:0;z-index:0;background:var(--hero-img) center/cover no-repeat;opacity:0.42}
.page-hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,oklch(13% 0.02 45 / 0.45) 0%,oklch(13% 0.02 45 / 0.82) 100%)}
.page-hero .wrap{position:relative;z-index:2}
/* hero: text + mascot side by side so the mascot sits next to the title (like the menu page) */
.hero-inner{display:grid;grid-template-columns:1fr clamp(260px,33vw,460px);align-items:center;gap:clamp(var(--space-md),4vw,var(--space-2xl))}
.hero-copy{min-width:0}
.hero-mascot{width:auto;max-width:100%;height:auto;max-height:clamp(300px,44vw,540px);object-fit:contain;justify-self:center;z-index:1;pointer-events:none;
  filter:drop-shadow(0 20px 32px oklch(0% 0 0 / 0.5));animation:heroMascotIn .7s var(--ease-out) both}
@keyframes heroMascotIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-mascot{animation:none}}
/* mascot inside a content section */
.mascot-row{display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-2xl);align-items:center}
.mascot-fig{width:100%;max-width:440px;height:auto;justify-self:center;filter:drop-shadow(0 24px 36px oklch(0% 0 0 / 0.5))}
@media(max-width:820px){.mascot-row{grid-template-columns:1fr;gap:var(--space-lg)}.mascot-fig{max-width:300px;order:-1}}
@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr}
  .hero-mascot{max-height:clamp(220px,56vw,340px);margin-top:var(--space-xs)}
  .page-hero .page-sub{max-width:none}
}

/* full-width photo band */
.photo-band{position:relative;height:clamp(200px,34vw,360px);overflow:hidden}
.photo-band img{width:100%;height:100%;object-fit:cover;display:block}
.photo-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,oklch(0% 0 0 / 0.66))}
.photo-band .band-label{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(var(--space-md),5vw,var(--space-3xl)) var(--space-lg);z-index:1;
  font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.5rem,4vw,3rem);color:var(--color-paper);
  letter-spacing:0.02em;line-height:0.95;max-width:22ch;text-shadow:0 4px 22px oklch(0% 0 0 / 0.6)}

/* champions grid (story) */
.champ-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-xl)}
.champ{position:relative;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;border:var(--rule-hair) solid var(--color-line)}
.champ img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-long) var(--ease-out)}
.champ:hover img{transform:scale(1.06)}
@media(max-width:680px){.champ-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}}

/* loc-figure now holds a real <img> */
.loc-card .loc-figure{display:block}
.loc-card .loc-figure img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}

/* scroll reveal — gated behind .rv-on so content is fully visible without JS */
.rv-on [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.rv-on [data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv-on [data-rv]{opacity:1;transform:none;transition:none}}

/* mobile spacing — tighten oversized gaps */
@media(max-width:768px){
  :root{--space-3xl:80px;--space-2xl:56px;--space-xl:40px}
  .page-hero{padding:calc(var(--space-2xl) + 56px) 0 var(--space-2xl)}
}

/* responsive image crop control */
.photo-band img{object-position:center 42%}
.loc-card .loc-figure img{object-position:center 48%}
.champ img{object-position:center 40%}

/* orange section — force readable (charcoal) type; fixes invisible orange-on-orange numbers */
.section.orange .eyebrow{color:var(--color-char);opacity:.85}
.section.orange .lede{color:var(--color-char)}
.section.orange .tl-year{color:var(--color-char)}
.section.orange .tl-body h3{color:var(--color-char)}
.section.orange .tl-body p{color:oklch(20% 0.025 45 / 0.86)}
.section.orange .prose p{color:oklch(20% 0.025 45 / 0.86)}
.section.orange .timeline,.section.orange .tl-row{border-color:oklch(22% 0.03 45 / 0.34)!important}