/* Home page system, sourced from the approved Home.dc.html prototype. */
.bbqr-home {
  background: #F6F2ED;
  min-height: 100vh;
  font-family: var(--font-body, Poppins, sans-serif);
  color: var(--coal, #424242);
  --art-accent: var(--ember, #D84315);
}

.h-eyebrow { font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--art-accent,#D84315); }
.h-sec { max-width:1200px; margin:0 auto; padding:0 24px; }
.h-sec--featured { padding-top:42px; padding-bottom:6px; }
.h-sec--hubs { padding-top:40px; padding-bottom:20px; }
.h-sec--recipes { padding-top:44px; padding-bottom:20px; }
.h-sec--finder { padding-top:44px; padding-bottom:22px; }
.h-sec--newsletter { padding-top:44px; padding-bottom:54px; }
.h-sechead { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 22px; }
.h-sechead h2 { font-family:var(--font-heading,'Bebas Neue'); font-size:32px; letter-spacing:.02em; color:#000; margin:0; display:inline-block; border-bottom:2px solid var(--art-accent,#D84315); padding-bottom:6px; }
.h-viewall { font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--art-accent,#D84315); text-decoration:none; white-space:nowrap; display:flex; align-items:center; gap:7px; transition:gap .15s ease; }
.h-viewall:hover { gap:11px; color:var(--flame,#FF6F00); text-decoration:none; }
.h-btn-primary { display:inline-flex; align-items:center; gap:9px; background:var(--art-accent,#D84315); color:#fff; font-family:var(--font-body); font-weight:600; font-size:15px; padding:13px 26px; border-radius:8px; text-decoration:none; transition:background .15s ease, transform .15s ease; }
.h-btn-primary:hover { background:var(--flame,#FF6F00); transform:translateY(-2px); color:#fff; text-decoration:none; }
.h-btn-ghost { display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.07); color:#fff; font-family:var(--font-body); font-weight:600; font-size:15px; padding:13px 26px; border-radius:8px; border:1.5px solid rgba(255,255,255,.45); text-decoration:none; backdrop-filter:blur(2px); transition:background .15s ease, border-color .15s ease; }
.h-btn-ghost:hover { background:rgba(255,255,255,.16); border-color:#fff; color:#fff; text-decoration:none; }
.h-vhero { position:relative; overflow:hidden; background:#161210; min-height:560px; }
.h-vhero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.h-vhero-scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(18,14,12,.70) 0%, rgba(18,14,12,.48) 38%, rgba(18,14,12,.74) 100%); }
.h-vhero-grain { position:absolute; inset:0; z-index:1; background:radial-gradient(120% 90% at 50% 0%, rgba(216,67,21,.16) 0%, rgba(216,67,21,0) 55%); }
.h-vhero-rule { position:absolute; left:0; right:0; bottom:0; height:4px; z-index:3; background:linear-gradient(90deg, #D84315 0%, #FF8A3D 50%, #D84315 100%); }
.h-vhero-inner { position:relative; z-index:2; max-width:1040px; margin:0 auto; padding:116px 24px 120px; text-align:center; }
.h-vhero h1 { font-family:var(--font-heading,'Bebas Neue'); font-size:74px; line-height:.96; letter-spacing:.015em; color:#fff; margin:18px 0 18px; text-shadow:0 2px 26px rgba(0,0,0,.4); }
.h-vhero p { font-size:19px; line-height:1.6; color:#EDE6E1; margin:0 auto 30px; max-width:620px; text-shadow:0 1px 14px rgba(0,0,0,.45); }
.h-vhero-eyebrow { display:inline-flex; align-items:center; gap:13px; color:#fff; }
.h-vhero-eyebrow span.h-eyebrow { color:#FF8A3D; }
.h-vhero-eyebrow .rule { height:1px; width:34px; background:#FF8A3D; opacity:.7; }
.h-vhero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.h-icon--xs { font-size:11px; }
.h-icon--sm { font-size:12px; }
.h-icon--hub { font-size:10px; }
.h-grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.h-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.h-hubs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.h-hub { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:5/4; text-decoration:none; display:block; box-shadow:0 4px 14px rgba(26,26,26,.06); background:#1A1A1A; }
.h-hub img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); display:block; backface-visibility:hidden; }
.h-hub:hover img { transform:scale(1.025); }
.h-hub-scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(20,16,14,.86) 0%, rgba(20,16,14,.30) 55%, rgba(20,16,14,.08) 100%); }
.h-hub-body { position:absolute; left:0; right:0; bottom:0; padding:18px 18px 17px; }
.h-hub-name { font-family:var(--font-heading,'Bebas Neue'); font-size:25px; letter-spacing:.02em; color:#fff; line-height:1; }
.h-hub-count { font-size:12px; font-weight:600; color:#F5D9CC; margin-top:5px; display:flex; align-items:center; gap:7px; }
.h-hub-arrow { width:30px; height:30px; border-radius:50%; background:var(--art-accent,#D84315); color:#fff; display:flex; align-items:center; justify-content:center; position:absolute; top:14px; right:14px; font-size:12px; opacity:0; transform:translateY(-4px); transition:opacity .2s ease, transform .2s ease; }
.h-hub:hover .h-hub-arrow { opacity:1; transform:translateY(0); }
.h-band { background:#EFE7DD; border-top:1px solid #E7DDD1; border-bottom:1px solid #E7DDD1; }
.h-band--home { margin-top:44px; padding:42px 0 44px; }
.h-featured { display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:#fff; border:1px solid #ECECEC; border-radius:16px; overflow:hidden; box-shadow:0 22px 54px rgba(26,26,26,.16); }
.h-featured,
.h-featured:hover { color:inherit; text-decoration:none; }
.h-featured-media { position:relative; min-height:380px; overflow:hidden; background:#f3eee8; }
.h-featured-media img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.h-featured-tag { position:absolute; top:16px; left:16px; background:var(--art-accent,#D84315); color:#fff; font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border-radius:6px; z-index:2; }
.h-featured-body { padding:40px 42px; display:flex; flex-direction:column; justify-content:center; }
.h-featured-title { font-family:var(--font-heading,'Bebas Neue'); font-size:42px; line-height:1.0; letter-spacing:.015em; color:#000; margin:12px 0 14px; }
.h-featured-excerpt { font-size:16px; line-height:1.65; color:var(--coal,#424242); margin:0 0 22px; }
.h-featured-meta { font-size:13px; color:#8a8a8a; margin:0 0 24px; display:flex; align-items:center; gap:10px; }
.h-featured-author { font-weight:600; color:#5C5C5C; }
.h-btn--start { align-self:flex-start; }
.h-finder { background:#1A1A1A; border-radius:16px; padding:44px 48px; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.h-finder h2 { font-family:var(--font-heading,'Bebas Neue'); font-size:38px; letter-spacing:.02em; color:#fff; margin:10px 0 12px; line-height:1.02; }
.h-finder p { font-size:15px; line-height:1.6; color:#C9C2BC; margin:0 0 22px; }
.h-chips { display:flex; flex-wrap:wrap; gap:10px; }
.h-chip { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#EDE6E1; font-size:13px; font-weight:500; padding:9px 15px; border-radius:999px; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
.h-chip:hover { background:var(--art-accent,#D84315); border-color:var(--art-accent,#D84315); color:#fff; text-decoration:none; }
.h-chip i { color:var(--flame,#FF8A3D); font-size:12px; }
.h-chip:hover i { color:#fff; }
@media (max-width:980px){
  .h-grid-4{grid-template-columns:repeat(2,1fr);} .h-hubs{grid-template-columns:repeat(2,1fr);}
  .h-grid-3{grid-template-columns:repeat(2,1fr);}
  .h-featured{grid-template-columns:1fr;} .h-featured-media{min-height:260px;} .h-featured-body{padding:30px 28px;}
  .h-finder{grid-template-columns:1fr;gap:26px;padding:34px 30px;}
}
@media (max-width:600px){
  .h-vhero h1 { font-size:48px; }
  .h-vhero-inner { padding:80px 22px 84px; }
  .h-grid-4,.h-grid-3,.h-hubs{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .h-vhero-bg {
    display:none;
  }
  .h-card,
  .h-card-img img,
  .h-hub img {
    transition:none;
  }
  .h-card:hover,
  .h-card:hover .h-card-img img,
  .h-hub:hover img {
    transform:none;
  }
}