/* Our Beer page template (page-our-beer-template.php / cbco-ourbeer-page.php), 2026-10-05.
 * Over cbco-location.css. Header = the Weddings option C pattern: the brewery reel uncovered as
 * a band, eyebrow / H1 / lede / buttons on navy beneath it. The catalog keeps css/cbco-beers.css;
 * the Beer Finder pair sits on cream so it does not run into the navy newsletter band. */

body div.container-wrap.cbco-ob { padding-top: 0 !important; padding-bottom: 0 !important; background: #f8f5ee; }

/* ---------- video band ---------- */
.cbco-ob__vband { position: relative; background: var(--lp-deep); }
.cbco-ob__vband-media { position: relative; height: min(50vw, calc(100vh - 240px)); min-height: 280px; overflow: hidden; }
.cbco-ob__vband img.cbco-loc__hero-img { opacity: 1; object-position: 50% 55%; }
.cbco-ob__vband-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, rgba(var(--lp-shade), 0), rgba(var(--lp-shade), .7)); pointer-events: none; }
.cbco-ob video.cbco-ob__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.cbco-ob video.cbco-ob__video.is-playing { opacity: 1; }
.cbco-ob button.cbco-ob__vbtn { position: absolute; right: 20px; top: 20px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: rgba(1, 15, 82, .35); color: #fff; cursor: pointer; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.cbco-ob button.cbco-ob__vbtn[hidden] { display: none; }
.cbco-ob button.cbco-ob__vbtn:hover { background: var(--lp-ember); border-color: var(--lp-ember); }
.cbco-ob .cbco-ob__vbtn span { width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; }
.cbco-ob .cbco-ob__vbtn.is-paused span { width: 0; height: 0; border: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }

/* ---------- header on navy ---------- */
.cbco-ob__hero { background: var(--lp-navy); }
.cbco-ob__hero .cbco-loc__hero-in, body .container-wrap.cbco-ob .cbco-ob__hero .cbco-loc__hero-in { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "eyebrow eyebrow" "h1 lede" "h1 ctas"; column-gap: clamp(32px, 5vw, 80px); row-gap: 18px; align-items: start; padding-top: 56px !important; padding-bottom: 64px !important; }
.cbco-ob__hero .cbco-loc__eyebrow { grid-area: eyebrow; color: var(--lp-on-dark-accent); }
.cbco-loc h1.cbco-ob__h1 { grid-area: h1; max-width: 15ch; font-size: clamp(36px, 4.6vw, 62px); }
.cbco-ob__hero p.cbco-loc__lede { grid-area: lede; align-self: end; }
.cbco-ob__hero .cbco-loc__ctas { grid-area: ctas; }
.cbco-ob .cbco-loc__fact small { display: block; font-size: 13px; color: var(--lp-muted); }

/* ---------- catalog ---------- */
.cbco-ob__cat { padding: clamp(48px, 6vw, 80px) 0 clamp(52px, 7vw, 92px); scroll-margin-top: 90px; }
.cbco-ob .cbco-ob__cat-head { background: transparent; }
.cbco-ob__cat .beers { margin-top: 0; }

/* ---------- Beer Finder pair ---------- */
.cbco-ob__find { background: var(--lp-cream); }
.cbco-ob__find .cbco-loc__pair-txt h2 { margin-bottom: 14px; }
.cbco-ob__find .cbco-loc__pair-ph { min-height: 400px; }
.cbco-ob__find .cbco-loc__pair-ph img, .cbco-loc .cbco-ob__find .cbco-loc__pair-ph img { object-position: center 15%; }
.cbco-loc p.cbco-ob__find-text { color: var(--lp-muted); font-size: 17px; max-width: 46ch; }
.cbco-ob__zip { margin: 24px 0 0; max-width: 380px; }
/* Salient sizes every form label at 30px !important (see the Gravity Forms label fix in style.css) */
body .cbco-ob form.cbco-ob__zip label { display: block; margin: 0 0 6px; padding: 0; font-family: 'Oswald', Arial, sans-serif !important; text-transform: uppercase; letter-spacing: .12em !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 500 !important; color: var(--lp-ember-deep) !important; }
.cbco-ob__zip-row { display: flex; background: #fff; border: 2px solid var(--lp-navy); border-radius: 999px; padding: 4px; }
.cbco-ob .cbco-ob__zip input[type="text"] { flex: 1; min-width: 0; margin: 0; padding: 0 16px; height: 44px; border: 0; background: transparent; box-shadow: none; outline: 0; font-family: 'Oswald', Arial, sans-serif; font-size: 18px; letter-spacing: .06em; color: var(--lp-ink); }
.cbco-ob .cbco-ob__zip-row:focus-within { box-shadow: 0 0 0 3px rgba(250, 117, 0, .35); }
.cbco-ob button.cbco-ob__zip-btn { margin: 0; border: 0; border-radius: 999px; padding: 0 22px; height: 44px; background: var(--lp-navy); color: #fff; cursor: pointer; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 500; line-height: 1; }
.cbco-ob button.cbco-ob__zip-btn:hover { background: var(--lp-deep); }

/* ---------- bottom block options (2026-10-05, ?cbco_obfind=a|b|c) ---------- */
/* A — photo band */
.cbco-ob__fa .cbco-loc__hero-in, body .container-wrap.cbco-ob .cbco-ob__fa .cbco-loc__hero-in { min-height: 480px; gap: 16px; padding-top: 80px !important; padding-bottom: 80px !important; }
.cbco-ob__fa img.cbco-loc__hero-img { object-position: 60% 55%; }
.cbco-ob__fa h2 { color: #fff; max-width: 14ch; }
.cbco-ob__fa .cbco-loc__eyebrow { color: var(--lp-on-dark-accent); }
.cbco-ob__fa .cbco-ob__zip { margin-top: 6px; width: 100%; }
body .cbco-ob .cbco-ob__fa form.cbco-ob__zip label { color: var(--lp-on-dark-accent) !important; }
.cbco-ob__fa .cbco-ob__zip-row { border-color: #fff; }
.cbco-ob__fa-links, .cbco-ob__fc-links { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.cbco-ob .cbco-ob__fa-links a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.cbco-ob .cbco-ob__fa-links a:hover { color: var(--lp-on-dark-accent); }

/* B — pick a can */
.cbco-ob__fb-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 24px 48px; align-items: end; margin-bottom: 34px; }
.cbco-ob__fb .cbco-ob__zip { margin: 0; max-width: none; }
.cbco-loc ul.cbco-ob__fb-cans { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cbco-ob__fb .cbco-trade__can-ph { aspect-ratio: 3 / 4; }
.cbco-ob__fb .cbco-trade__can-ph img, .cbco-loc .cbco-ob__fb .cbco-trade__can-ph img { mix-blend-mode: multiply; } /* can shots on an off-white ground blend into the white card */

/* C — ember strip */
.cbco-ob__fc { background: var(--lp-ember); color: var(--lp-deep); }
.cbco-ob__fc-in, body .container-wrap.cbco-ob .cbco-ob__fc-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px 56px; align-items: center; padding-top: clamp(48px, 5.5vw, 72px) !important; padding-bottom: clamp(48px, 5.5vw, 72px) !important; }
.cbco-ob__fc .cbco-loc__eyebrow { color: var(--lp-deep); opacity: .8; }
.cbco-ob__fc h2 { margin: 8px 0 10px; color: var(--lp-deep); }
.cbco-loc .cbco-ob__fc p { font-size: 17px; color: var(--lp-deep); max-width: 44ch; }
.cbco-ob__fc .cbco-ob__zip { margin: 0; max-width: none; }
body .cbco-ob .cbco-ob__fc form.cbco-ob__zip label { color: var(--lp-deep) !important; }
.cbco-ob__fc .cbco-ob__zip-row { border-color: var(--lp-deep); }
.cbco-ob__fc button.cbco-ob__zip-btn { background: var(--lp-deep); }
.cbco-ob__fc button.cbco-ob__zip-btn:hover { background: var(--lp-navy); }
.cbco-loc p.cbco-ob__fc-links { margin-top: 14px; font-size: 13px; }
.cbco-ob .cbco-ob__fc-links a { color: var(--lp-deep); text-decoration: underline; text-underline-offset: 4px; }
.cbco-ob .cbco-ob__fc-links a:hover { color: #fff; }
.cbco-ob__fc .cbco-ob__zip-row:focus-within { box-shadow: 0 0 0 3px rgba(1, 15, 82, .35); }

@media (max-width: 1000px) { .cbco-loc ul.cbco-ob__fb-cans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.cbco-ob__fb-head, .cbco-ob__fc-in { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .cbco-loc ul.cbco-ob__fb-cans { grid-template-columns: 1fr 1fr; } }

@media (max-width: 760px) {
	.cbco-ob__vband-media { height: 62vw; min-height: 0; }
	.cbco-ob button.cbco-ob__vbtn { top: auto; bottom: 12px; right: 14px; width: 36px; height: 36px; }
	.cbco-ob__hero .cbco-loc__hero-in, body .container-wrap.cbco-ob .cbco-ob__hero .cbco-loc__hero-in { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "h1" "lede" "ctas"; padding-top: 32px !important; padding-bottom: 44px !important; }
	.cbco-ob__find .cbco-loc__pair-ph { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .cbco-ob video.cbco-ob__video { transition: none; } }