/* Story page (page-story-template.php / cbco-story.php), 2026-10-05.
 * Loads on top of cbco-location.css + cbco-careers.css (hero, facts, paired row,
 * numbers band, location cards, closing duo). This file adds the timeline: a sticky
 * year rail on the left, one column of stories down a line, each with a dot and a
 * kind chip coloured by Medal / Opening / Beer / Milestone; photo stories get the
 * photo beside the text, photo-less ones stay compact. */

.cbco-loc h1.cbco-sty__h1 { max-width: 11ch; }
.cbco-sty img.cbco-loc__hero-img { object-position: 50% 35%; }
.cbco-sty .cbco-sty__pair-ph img, .cbco-loc .cbco-sty__pair-ph img { object-position: center 40%; }

/* numbers band under the paired row: four across */
.cbco-loc .cbco-sty__nums { margin-top: 40px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 30px clamp(24px, 3vw, 40px); }
@media (max-width: 860px) { .cbco-loc .cbco-sty__nums { grid-template-columns: 1fr 1fr; } }

/* ---------- the timeline ---------- */
.cbco-sty__tl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.cbco-sty__years { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--lp-line); }
.cbco-loc .cbco-sty__years a { font-family: 'Oswald', Arial, sans-serif; font-size: 17px; font-weight: 500; letter-spacing: .04em; color: var(--lp-muted); text-decoration: none; padding: 5px 0 5px 16px; margin-left: -2px; border-left: 2px solid transparent; font-variant-numeric: tabular-nums; transition: color .15s, border-color .15s; }
.cbco-loc .cbco-sty__years a:hover { color: var(--lp-navy); }
.cbco-loc .cbco-sty__years a.is-on { color: var(--lp-ember-deep); border-left-color: var(--lp-ember); font-weight: 700; }

.cbco-sty__line { position: relative; max-width: 940px; padding-left: 44px; }
.cbco-sty__line::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 30px; width: 2px; background: linear-gradient(var(--lp-navy), var(--lp-ember)); opacity: .35; }
.cbco-sty__year { scroll-margin-top: 100px; padding-bottom: 18px; }
.cbco-loc h3.cbco-sty__yr { position: relative; margin: 0 0 18px -44px; display: flex; align-items: center; }
.cbco-sty__yr span { display: inline-block; background: var(--lp-navy); color: #fff; border-radius: 999px; padding: 6px 16px; font-size: 22px; font-weight: 700; letter-spacing: .04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cbco-sty__year + .cbco-sty__year h3.cbco-sty__yr { margin-top: 18px; }

.cbco-sty__story { position: relative; margin-bottom: 18px; }
.cbco-sty__dot { position: absolute; left: -39px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--acc); }
.cbco-sty__story.is-medal .cbco-sty__dot { background: var(--acc); box-shadow: 0 0 0 4px rgba(221, 153, 51, .25); }
.cbco-sty__card { background: var(--lp-paper); border: 1px solid var(--lp-line); border-left: 4px solid var(--acc); border-radius: 12px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); transition: box-shadow .2s ease, transform .2s ease; }
.cbco-sty__story:hover .cbco-sty__card { box-shadow: 0 12px 28px rgba(1, 32, 127, .1); transform: translateY(-2px); }
.cbco-sty__story.has-ph .cbco-sty__card { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
.cbco-sty__ph { display: block; position: relative; min-height: 220px; background: var(--lp-cream); }
.cbco-sty__ph img, .cbco-loc .cbco-sty__ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%; }
.cbco-loc .cbco-sty__ph.is-png img { object-fit: contain; padding: 18px; }
.cbco-sty__body { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cbco-sty__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cbco-sty__kind { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 600; color: #fff; background: var(--acc); border-radius: 999px; padding: 3px 10px; }
.cbco-sty__story.is-medal .cbco-sty__kind { color: var(--lp-deep); }
.cbco-sty__meta time { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--lp-muted); }
.cbco-loc .cbco-sty__body h4 { font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.1; letter-spacing: .01em; color: var(--lp-navy); margin: 0; padding: 0; text-wrap: balance; }
.cbco-sty__text { font-size: 15.5px; color: var(--lp-muted); }
.cbco-loc .cbco-sty__text p { margin: 0 0 .7em; }
.cbco-loc .cbco-sty__text p:last-child { margin-bottom: 0; }
.cbco-sty__text a { color: var(--lp-navy); text-decoration: underline; text-underline-offset: 3px; }

.cbco-sty__end { position: relative; display: flex; align-items: center; gap: 14px; margin-left: -44px; padding-top: 6px; }
.cbco-sty__end > span { width: 24px; height: 24px; border-radius: 50%; background: var(--lp-ember); box-shadow: 0 0 0 6px rgba(250, 117, 0, .18); flex: 0 0 auto; }
.cbco-loc .cbco-sty__end p { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; color: var(--lp-navy); }
.cbco-sty__end a { color: var(--lp-ember-deep); text-decoration: none; margin-left: 6px; }
.cbco-sty__end a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the today head runs a little wider than the usual 62ch */
.cbco-loc .cbco-sty__today-head { max-width: 72ch; }

@media (max-width: 960px) {
	/* the rail becomes a row of year chips above the line (not sticky: the 2025 plugin navigator overlapped titles on phones) */
	.cbco-sty__tl { grid-template-columns: 1fr; gap: 22px; }
	.cbco-sty__years { position: static; flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 2px solid var(--lp-line); gap: 0; scrollbar-width: none; }
	.cbco-sty__years::-webkit-scrollbar { display: none; }
	.cbco-loc .cbco-sty__years a { padding: 8px 12px; margin: 0 0 -2px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
	.cbco-loc .cbco-sty__years a.is-on { border-bottom-color: var(--lp-ember); }
}
@media (max-width: 640px) {
	.cbco-sty__line { padding-left: 30px; }
	.cbco-sty__line::before { left: 7px; }
	.cbco-loc h3.cbco-sty__yr, .cbco-sty__end { margin-left: -30px; }
	.cbco-sty__dot { left: -29px; top: 22px; width: 12px; height: 12px; }
	.cbco-sty__story.has-ph .cbco-sty__card { grid-template-columns: 1fr; }
	.cbco-sty__ph { min-height: 0; aspect-ratio: 16 / 10; }
	.cbco-sty__body { padding: 16px 18px 18px; }
}