/* ==========================================================================
   Owner-operator guides — hub, cards, CTA band, teaser block.
   Scoped under .vics-guides. Tokens and type match assets/css/article.css so
   a guide reads like a Vics article without carrying any blog signal.
   Mobile-first: one column, two up from 700px, three up from 1024px.
   ========================================================================== */
.vics-guides, .vics-guides *, .vics-guides *::before, .vics-guides *::after { box-sizing: border-box; }
.vics-guides {
	--vb-ink: #080A18; --vb-blue: #3572FF; --vb-body: #42423D; --vb-muted: #7F7C75; --vb-line: #DBDBD8;
	--vb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-family: var(--vb-font); -webkit-font-smoothing: antialiased;
}
.vics-guides a { text-decoration: none; }
.vics-guides h1, .vics-guides h2, .vics-guides h3 { text-shadow: none; }

.oog-eyebrow {
	display: block; color: var(--vb-blue); font-weight: 500;
	font-size: 10px; line-height: 12px; letter-spacing: 1.4px; text-transform: uppercase;
}

/* ============================ HUB ============================ */
.oog-hub { background: #fff; padding: 120px 0 90px; }
.oog-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: 11px; line-height: 13px; }
.oog-crumb a { color: var(--vb-muted); }
.oog-crumb a:hover { color: var(--vb-blue); }
.oog-crumb__sep { color: var(--vb-line); }
.oog-crumb__cur { color: var(--vb-ink); font-weight: 700; }

.oog-hub__title { margin: 16px 0 0; max-width: 900px; color: var(--vb-ink); font-weight: 600; font-size: 34px; line-height: 40px; letter-spacing: -1px; }
.oog-hub__sub { margin: 16px 0 0; max-width: 640px; color: var(--vb-body); font-size: 16px; line-height: 27px; }
.oog-hub__intro { margin: 24px 0 0; max-width: 700px; color: var(--vb-body); font-size: 16px; line-height: 28px; }
.oog-hub__intro p { margin: 0 0 16px; }
.oog-hub__empty { margin: 40px 0 0; color: var(--vb-muted); font-size: 15px; }

/* ============================ CARDS ============================ */
.oog-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }

.oog-card {
	display: flex; flex-direction: column; min-height: 220px; padding: 26px 24px 22px;
	border: 1px solid var(--vb-line); background: #fff; color: var(--vb-ink);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.oog-card:hover { border-color: var(--vb-blue); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(8,10,24,.07); }
.oog-card__label { display: block; color: var(--vb-blue); font-weight: 500; font-size: 10px; line-height: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.oog-card__title { display: block; margin-top: 14px; color: var(--vb-ink); font-weight: 600; font-size: 20px; line-height: 27px; letter-spacing: -.4px; }
.oog-card__text { display: block; margin-top: 12px; color: var(--vb-body); font-size: 14px; line-height: 23px; }
.oog-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; }
.oog-card__read { color: var(--vb-blue); font-weight: 600; font-size: 12px; letter-spacing: .6px; }
.oog-card__draft {
	font-style: normal; font-weight: 600; font-size: 9px; letter-spacing: 1px;
	color: #8A6A00; background: #FFF4D6; border: 1px solid #F0DFA8; padding: 3px 7px;
}

/* «Coming next» — same card, no link, no hover */
.oog-card--muted { min-height: 0; background: #FAFAF8; border-style: dashed; cursor: default; }
.oog-card--muted:hover { border-color: var(--vb-line); transform: none; box-shadow: none; }
.oog-card--muted .oog-card__title { color: var(--vb-muted); font-size: 17px; line-height: 24px; }
.oog-card--muted .oog-card__label { color: var(--vb-muted); }

.oog-next { margin-top: 64px; }
.oog-next__label { display: block; color: var(--vb-muted); font-weight: 600; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; }
.oog-next .oog-grid { margin-top: 20px; }

/* ============================ CTA BAND ============================ */
.oog-cta {
	display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
	margin-top: 72px; padding: 40px 28px; background: #121210;
}
.oog-cta__title { margin: 0; color: #fff; font-weight: 600; font-size: 26px; line-height: 34px; letter-spacing: -.8px; }
.oog-cta__text { margin: 12px 0 0; max-width: 520px; color: rgba(255,255,255,.8); font-size: 15px; line-height: 25px; }
.oog-cta__btn {
	flex: none; padding: 16px 28px; background: var(--vb-blue); color: #fff;
	font-weight: 600; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
	transition: background .2s ease;
}
.oog-cta__btn:hover { background: #1F5BE8; color: #fff; }

/* ============================ TEASER on /owner-operators/ ============================ */
.oog-teaser { background: #fff; padding: 80px 0; }
.oog-teaser__title { margin: 16px 0 0; max-width: 760px; color: var(--vb-ink); font-weight: 600; font-size: 30px; line-height: 38px; letter-spacing: -1px; }
.oog-teaser__sub { margin: 14px 0 0; max-width: 620px; color: var(--vb-body); font-size: 16px; line-height: 27px; }
.oog-teaser__btn {
	display: inline-block; margin-top: 32px; padding: 16px 30px;
	border: 1px solid var(--vb-ink); color: var(--vb-ink);
	font-weight: 600; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.oog-teaser__btn:hover { background: var(--vb-ink); border-color: var(--vb-ink); color: #fff; }

/* "More owner-operator guides" inside a guide reuses the same cards */
.oog-guide .oog-grid { margin-top: 24px; }
.oog-guide .oog-card { min-height: 0; }

/* ============================ BREAKPOINTS ============================ */
@media (min-width: 700px) {
	.oog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.oog-hub { padding: 150px 0 110px; }
	.oog-hub__title { font-size: 44px; line-height: 52px; letter-spacing: -1.6px; }
	.oog-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 52px 48px; }
	.oog-teaser__title { font-size: 38px; line-height: 46px; }
}
@media (min-width: 1024px) {
	.oog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
	.oog-hub__title { font-size: 52px; line-height: 60px; letter-spacing: -2px; }
	.oog-hub__sub, .oog-hub__intro { font-size: 17px; line-height: 28px; }
	.oog-teaser { padding: 110px 0; }
	.oog-teaser__title { font-size: 42px; line-height: 50px; letter-spacing: -1.6px; }
	.oog-cta { padding: 56px 60px; }
	.oog-cta__title { font-size: 32px; line-height: 40px; }
}

/* ==================== HEADER ON THE WHITE HUB PAGE ====================
   The theme header is fixed and transparent with white logo/menu/burger —
   built for the dark heroes every other template opens with. The hub opens
   white, so the header disappears into it. Same fix the theme already uses
   for its one other white page (#page-leadform-2): repaint the header ink.
   Only the hub needs it — the guide article keeps the dark .va-head hero.
   Scoped by template body class, not by page slug, so it survives renames. */
body.page-template-owner-operator-guides .header__wrapper a.logo svg path.text { fill: #080A18; }
body.page-template-owner-operator-guides .burger .line { background-color: #080A18; }
/* burger sits on top of the black mobile overlay once it is open */
body.page-template-owner-operator-guides .burger.active .line { background-color: #fff; }

@media (min-width: 993px) {
	body.page-template-owner-operator-guides .header .menu > li > a { color: #080A18; }
	body.page-template-owner-operator-guides .header .menu > li > a:before { background-color: #080A18; }
	body.page-template-owner-operator-guides .header .menu li.light a { color: #fff; }
	body.page-template-owner-operator-guides .header .phone svg path { fill: #080A18; }
}
/* mobile menu open = black full-screen overlay behind the logo, so the ink flips back */
body.page-template-owner-operator-guides .header__wrapper:has(.menu.active) a.logo svg path.text { fill: #fff; }

/* Vic's in-article CTA (inline banner), added 2026-09-30. One visual system; only .va-cta__title and .va-cta__text change per placement. */
.art-body .va-inline-cta{--va-cta-img:url('https://vicsfreight.com/wp-content/themes/Starbriges/assets/images/hero-bg.png');--va-road:url('https://vicsfreight.com/wp-content/themes/Starbriges/assets/images/cta/road.svg')}
.art-body .va-inline-cta{margin:40px 0;padding:32px 36px;min-height:236px;display:flex;align-items:center}
.art-body .va-inline-cta__road{position:absolute;inset:0;z-index:0;pointer-events:none;left:auto;width:58%;background:var(--va-road) right bottom/100% 100% no-repeat;opacity:.13}
.art-body .va-inline-cta__glow{position:absolute;z-index:0;right:4%;bottom:6%;width:46%;height:70%;pointer-events:none;background:radial-gradient(closest-side,rgba(120,160,255,.28),rgba(120,160,255,0) 100%)}
.art-body .va-inline-cta__copy{position:relative;z-index:2;max-width:52%}
.art-body .va-inline-cta__logo{display:block;width:104px;height:auto;margin:0}
.art-body .va-inline-cta .va-cta__title{color:#fff;margin:14px 0 0;padding:0;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.3px}
.art-body .va-inline-cta .va-cta__text{color:rgba(255,255,255,.8);margin:10px 0 0;font-size:15px;line-height:1.5}
.art-body .va-inline-cta .va-cta__btn,.art-body .va-inline-cta .va-cta__btn:hover{color:#fff;text-decoration:none;margin-top:20px;font-size:14px;padding:12px 20px}
.art-body .va-inline-cta__truck{position:absolute;z-index:1;right:3%;bottom:20px;width:38%;max-width:340px;height:auto;margin:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 18px 14px rgba(0,0,0,.45))}
.art-body .va-inline-cta__shadow{position:absolute;z-index:1;right:4%;bottom:12px;width:36%;max-width:320px;height:22px;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0))}
@media (max-width:767px){
 .art-body .va-inline-cta{display:block;padding:188px 22px 26px;min-height:0}
 .art-body .va-inline-cta__copy{max-width:none}
 .art-body .va-inline-cta__truck{top:22px;bottom:auto;right:50%;transform:translateX(50%);width:260px;max-width:none}
 .art-body .va-inline-cta__shadow{top:160px;bottom:auto;right:50%;transform:translateX(50%);width:230px;max-width:none;height:18px}
 .art-body .va-inline-cta__road{width:100%;height:190px}
 .art-body .va-inline-cta__glow{top:0;bottom:auto;right:10%;width:80%;height:190px}
 .art-body .va-inline-cta .va-cta__title{font-size:21px}
}