/* vrv-blog.css
   Voyager RV blog: post page, blog list and preview ("Bold Voyager" look).
   Every class starts with "vrvb-" so nothing clashes with the site's older CSS.
   Sizes are in px because the site's Bootstrap 3 sets the root font size to 10px. */

.vrvb {
    --vrvb-accent: #d0021b;
    --vrvb-accent-dark: #a60216;
    --vrvb-link: #c7081b;
    --vrvb-ink: #0f1115;
    --vrvb-text: #25282e;
    --vrvb-muted: #6b7078;
    --vrvb-line: #e7e8ea;
    --vrvb-soft: #f4f5f6;
    --vrvb-dark: #0f1115;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--vrvb-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
.vrvb *, .vrvb *::before, .vrvb *::after { box-sizing: border-box; }
.vrvb :where(a) { color: inherit; text-decoration: none; }
.vrvb :where(a):hover { color: inherit; text-decoration: none; }
.vrvb a:focus-visible { outline: 3px solid rgba(208, 2, 27, .45); outline-offset: 2px; border-radius: 4px; }
.vrvb img { max-width: 100%; height: auto; display: block; border: 0; }
.vrvb svg { flex: none; }
.vrvb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Undo the site's global tag styles (p margins, mobile p padding, heading fonts) */
.vrvb :where(h1, h2, h3, h4, p) { font-family: inherit; }
.vrvb :where(p, h1, h2, h3, h4, ul, ol, li, figure, figcaption, blockquote) { padding: 0; margin: 0; }

/* Room for the site menu, which floats over the top of every page */
.vrvb-top { height: 122px; background: var(--vrvb-dark); }

.vrvb-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.vrvb-narrow { max-width: 768px; margin: 0 auto; padding: 0 24px; }

/* ---------- Blog bar (under the site menu) ---------- */
.vrvb-bar { background: var(--vrvb-dark); border-top: 1px solid rgba(255,255,255,.06); }
.vrvb-bar__inner { display: flex; align-items: center; gap: 30px; min-height: 62px; }
.vrvb-bar__brand { font-weight: 800; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.vrvb-bar__cats { display: flex; gap: 24px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.vrvb-bar__cats::-webkit-scrollbar { display: none; }
.vrvb-bar__cats a { font-size: 14px; font-weight: 500; color: #9ba1ab; white-space: nowrap; padding: 20px 0 18px; border-bottom: 3px solid transparent; line-height: 1; }
.vrvb-bar__cats a:hover { color: #fff; }
.vrvb-bar__cats a.is-active { color: #fff; border-bottom-color: var(--vrvb-accent); }
.vrvb-search { display: flex; align-items: center; gap: 8px; background: #1d2027; border-radius: 999px; padding: 8px 16px; color: #8b919b; width: 210px; margin: 0; }
.vrvb-search:focus-within { box-shadow: 0 0 0 2px rgba(208, 2, 27, .55); }
.vrvb-search input { border: 0; background: transparent; outline: 0; font: 400 14px/1.2 inherit; color: #fff; width: 100%; padding: 0; margin: 0; box-shadow: none; height: auto; -webkit-appearance: none; appearance: none; }
.vrvb-search input::placeholder { color: #8b919b; }

/* ---------- Post header: cover photo behind the title ---------- */
.vrvb-hero { position: relative; padding: 120px 0 70px; background: var(--vrvb-dark) center / cover no-repeat; color: #fff; }
.vrvb-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,16,.30) 0%, rgba(10,12,16,.62) 45%, rgba(10,12,16,.92) 100%); }
.vrvb-hero > * { position: relative; }
.vrvb-hero--plain { padding: 64px 0 56px; }
.vrvb-crumbs { font-size: 14px; color: #b3b8c0; margin: 0 0 22px; display: flex; gap: 8px; flex-wrap: wrap; line-height: 1.4; }
.vrvb-crumbs a:hover { color: #fff; }
.vrvb-chip { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--vrvb-accent); color: #fff; padding: 7px 12px; border-radius: 4px; margin: 0 0 16px; line-height: 1.3; }
.vrvb-chip:hover { background: var(--vrvb-accent-dark); }
.vrvb-title { font-size: 58px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin: 0 0 16px; }
.vrvb-dek { font-size: 23px; line-height: 1.45; color: #d7dae0; margin: 0 0 30px; font-weight: 400; }
.vrvb-meta { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #c3c7ce; line-height: 1.3; }
.vrvb-avatar { width: 42px; height: 42px; border-radius: 8px; background: var(--vrvb-accent); color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.vrvb-meta b { display: block; color: #fff; font-weight: 600; }
.vrvb-meta__sub { display: flex; align-items: center; gap: 6px; }
.vrvb-hero__credit { position: absolute; right: 24px; bottom: 16px; font-size: 12px; color: #9ba1ab; max-width: 420px; text-align: right; line-height: 1.4; }

/* ---------- Post body ---------- */
.vrvb-content { max-width: 768px; margin: 0 auto; padding: 44px 24px 0; }
.vrvb-content::after { content: ""; display: table; clear: both; }
.vrvb-content p { font-size: 19px; line-height: 1.78; color: var(--vrvb-text); margin: 0 0 1.3em; font-weight: 400; }
.vrvb-content h2 { display: flex; align-items: center; gap: 14px; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--vrvb-ink); margin: 1.9em 0 0.65em; }
.vrvb-content h2::before { content: ""; width: 30px; height: 5px; background: var(--vrvb-accent); flex: none; }
.vrvb-content h3 { font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: var(--vrvb-ink); margin: 1.7em 0 0.55em; }
.vrvb-content h4 { font-size: 16px; line-height: 1.3; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vrvb-ink); margin: 1.6em 0 0.5em; }
.vrvb-content > h2:first-child, .vrvb-content > h3:first-child { margin-top: 0.3em; }
.vrvb-content a { color: var(--vrvb-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.vrvb-content a:hover { color: var(--vrvb-ink); }
.vrvb-content strong, .vrvb-content b { font-weight: 700; color: var(--vrvb-ink); }
.vrvb-content ul, .vrvb-content ol { margin: 0 0 1.5em; padding: 0; list-style: none; }
/* Next to a wrapped photo each bullet moves over with its text; below the photo, items go full width again */
.vrvb-content li, .vrvb-content blockquote { display: flow-root; }
.vrvb-content li { position: relative; font-size: 19px; line-height: 1.7; color: var(--vrvb-text); margin: 0 0 0.7em; padding-left: 30px; }
.vrvb-content li > ul, .vrvb-content li > ol { margin: 0.6em 0 0; }
.vrvb-content ul > li::before { content: ""; position: absolute; left: 7px; top: 0.72em; width: 8px; height: 8px; background: var(--vrvb-accent); }
.vrvb-content li li::before { background: transparent; border: 2px solid var(--vrvb-accent); }
.vrvb-content ol { counter-reset: vrvb-num; }
.vrvb-content ol > li { counter-increment: vrvb-num; }
.vrvb-content ol > li::before { content: counter(vrvb-num) "."; position: absolute; left: 0; top: 0; font-size: 17px; font-weight: 800; color: var(--vrvb-accent); }
.vrvb-content blockquote { margin: 2em 0; padding: 2px 0 2px 26px; border-left: 6px solid var(--vrvb-accent); font-size: 23px; line-height: 1.45; font-weight: 700; color: var(--vrvb-ink); }
.vrvb-content blockquote p { font-size: inherit; line-height: inherit; color: inherit; margin: 0 0 0.6em; }
.vrvb-content blockquote p:last-child { margin: 0; }
.vrvb-content hr { border: 0; height: 1px; background: var(--vrvb-line); margin: 2.6em 0; }

/* Photos: placement, text wrap and sizes set in the editor */
.vrvb-content figure { margin: 2.2em 0; }
.vrvb-content .image { display: table; margin-left: auto; margin-right: auto; clear: both; }
.vrvb-content .image img { width: 100%; border-radius: 8px; }
.vrvb-content .image.image_resized { display: block; max-width: 100%; }
.vrvb-content .image > figcaption { display: table-caption; caption-side: bottom; font-size: 15px; line-height: 1.5; color: #7d828a; padding-top: 10px; }
.vrvb-content .image.image_resized > figcaption { display: block; }
.vrvb-content .image-style-align-left { float: left; margin: 0.4em 32px 1em 0; clear: none; }
.vrvb-content .image-style-align-right { float: right; margin: 0.4em 0 1em 32px; clear: none; }
.vrvb-content .image-style-side { float: right; margin: 0.4em 0 1em 32px; max-width: 50%; }
.vrvb-content .image-style-block-align-left { margin-left: 0; margin-right: auto; }
.vrvb-content .image-style-block-align-right { margin-left: auto; margin-right: 0; }

/* Tables, video and raw HTML boxes from the editor */
.vrvb-content figure.table { display: table; width: 100%; margin: 2em 0; }
.vrvb-content figure.table > table { width: 100%; border-collapse: collapse; font-size: 17px; }
.vrvb-content figure.table th, .vrvb-content figure.table td { border: 1px solid var(--vrvb-line); padding: 10px 14px; text-align: left; vertical-align: top; }
.vrvb-content figure.table th { background: var(--vrvb-dark); color: #fff; font-weight: 700; }
.vrvb-content .media { clear: both; margin: 2em 0; }
.vrvb-content .media iframe { border-radius: 8px; }
.vrvb-content .raw-html-embed { margin: 1.6em 0; }

/* ---------- End of post: tags and share ---------- */
.vrvb-endbar { max-width: 768px; margin: 40px auto 0; padding: 0 24px; }
.vrvb-endbar__row { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--vrvb-line); padding-top: 24px; }
.vrvb-endbar__left { display: flex; flex-direction: column; gap: 12px; }
.vrvb-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.vrvb-tags a { font-size: 13px; font-weight: 600; background: var(--vrvb-soft); color: #43474e; padding: 6px 12px; border-radius: 4px; line-height: 1.2; }
.vrvb-tags a:hover { background: var(--vrvb-dark); color: #fff; }
.vrvb-back { font-size: 15px; font-weight: 700; color: var(--vrvb-ink); display: inline-flex; align-items: center; gap: 8px; }
.vrvb-back:hover { color: var(--vrvb-accent); }
.vrvb-share { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--vrvb-muted); }
.vrvb-share a { width: 42px; height: 42px; border-radius: 8px; border: 1px solid #dcdee1; background: #fff; color: var(--vrvb-ink); display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s, color .15s; }
.vrvb-share a:hover { border-color: var(--vrvb-dark); background: var(--vrvb-dark); color: #fff; }
.vrvb-share a.is-done { border-color: #1a7f37; background: #fff; color: #1a7f37; }

/* ---------- Call to action (dark band) ---------- */
.vrvb-cta { max-width: 1140px; margin: 48px auto 0; padding: 0 24px; }
.vrvb-cta__box { background: var(--vrvb-dark); border-radius: 14px; padding: 40px 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; }
.vrvb-cta__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ff5a6e; margin: 0 0 8px; line-height: 1.3; }
.vrvb-cta__title { font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 0 10px; }
.vrvb-cta__text { font-size: 17px; line-height: 1.6; color: #aab0ba; margin: 0; }
.vrvb-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.vrvb-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; padding: 16px 22px; border-radius: 8px; border: 2px solid transparent; white-space: nowrap; transition: transform .15s, background .15s, color .15s; }
.vrvb-btn:hover { transform: translateY(-1px); }
.vrvb .vrvb-btn--primary { background: var(--vrvb-accent); color: #fff; }
.vrvb .vrvb-btn--primary:hover { background: var(--vrvb-accent-dark); color: #fff; }
.vrvb .vrvb-btn--ghost { border-color: #fff; color: #fff; }
.vrvb .vrvb-btn--ghost:hover { background: #fff; color: var(--vrvb-ink); }
.vrvb .vrvb-btn--dark { background: var(--vrvb-dark); color: #fff; }

/* ---------- Cards ---------- */
.vrvb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; }
.vrvb-card { display: block; }
.vrvb-card__img { overflow: hidden; border-radius: 10px; background: var(--vrvb-soft); aspect-ratio: 16 / 10; }
.vrvb-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.vrvb-card:hover .vrvb-card__img img { transform: scale(1.04); }
.vrvb-card__noimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 48px; font-weight: 800; color: #fff; background: var(--vrvb-dark); }
.vrvb-card__cat { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vrvb-accent); margin: 16px 0 6px; line-height: 1.3; }
.vrvb-card__title { font-size: 21px; line-height: 1.28; font-weight: 800; color: var(--vrvb-ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.vrvb-card:hover .vrvb-card__title { color: var(--vrvb-accent); }
.vrvb-card__excerpt { font-size: 15px; line-height: 1.55; color: #5b6068; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vrvb-card__date { font-size: 14px; color: #8a8f96; line-height: 1.4; }

/* ---------- More posts (end of a post) ---------- */
.vrvb-related { border-top: 1px solid var(--vrvb-line); margin-top: 72px; padding: 60px 0 70px; }
.vrvb-related__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.vrvb-related__title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--vrvb-ink); margin: 0; line-height: 1.2; }
.vrvb-related__all { font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vrvb-accent); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ---------- Blog list ---------- */
.vrvb-listhead { background: var(--vrvb-dark); color: #fff; padding: 64px 0 56px; }
.vrvb-listhead__title { font-size: 52px; line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin: 0 0 12px; }
.vrvb-listhead__intro { font-size: 19px; line-height: 1.5; color: #b9bec6; margin: 0; max-width: 640px; }
.vrvb-listbody { padding-top: 56px; padding-bottom: 80px; }
.vrvb-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; align-items: center; margin-bottom: 64px; }
.vrvb-feature__img { overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 11; background: var(--vrvb-soft); }
.vrvb-feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.vrvb-feature:hover .vrvb-feature__img img { transform: scale(1.03); }
.vrvb-feature .vrvb-card__cat { margin-top: 0; }
.vrvb-feature__title { font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; color: var(--vrvb-ink); margin: 0 0 12px; }
.vrvb-feature:hover .vrvb-feature__title { color: var(--vrvb-accent); }
.vrvb-feature__dek { font-size: 19px; line-height: 1.45; color: #4a4f56; margin: 0 0 12px; font-weight: 500; }
.vrvb-feature__excerpt { font-size: 16px; line-height: 1.6; color: #5b6068; margin: 0 0 20px; }
.vrvb-feature__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vrvb-feature__more { font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vrvb-accent); display: inline-flex; align-items: center; gap: 6px; }
.vrvb-pages { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; }
.vrvb-pages a, .vrvb-pages span { min-width: 44px; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid #dcdee1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--vrvb-ink); }
.vrvb-pages a:hover { border-color: var(--vrvb-ink); }
.vrvb-pages .is-current { background: var(--vrvb-dark); border-color: var(--vrvb-dark); color: #fff; }
.vrvb-empty { text-align: center; padding: 40px 24px 20px; }
.vrvb-empty p { font-size: 18px; color: #5b6068; margin: 0 0 22px; }

/* ---------- Preview notice ---------- */
.vrvb-note { background: #fff8e1; color: #6d5200; border-bottom: 1px solid #f3dd9b; font-size: 15px; font-weight: 600; text-align: center; padding: 10px 16px; line-height: 1.4; }

/* ---------- Tablets and phones ---------- */
@media (max-width: 980px) {
    .vrvb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vrvb-feature { grid-template-columns: 1fr; gap: 24px; }
    .vrvb-cta__box { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .vrvb-bar__inner { gap: 0 18px; flex-wrap: wrap; }
    .vrvb-search { order: 3; width: 100%; margin: 0 0 12px; }
    .vrvb-hero { padding: 90px 0 48px; }
    .vrvb-hero--plain { padding: 44px 0 40px; }
    .vrvb-hero__credit { display: none; }
    .vrvb-title { font-size: 36px; }
    .vrvb-dek { font-size: 19px; }
    .vrvb-content p, .vrvb-content li { font-size: 18px; }
    .vrvb-content h2 { font-size: 25px; }
    .vrvb-content h3 { font-size: 21px; }
    .vrvb-content .image-style-align-left, .vrvb-content .image-style-align-right, .vrvb-content .image-style-side { float: none; width: 100% !important; max-width: 100%; margin: 1.6em 0; }
    .vrvb-cta__box { padding: 30px 26px; }
    .vrvb-listhead { padding: 44px 0 40px; }
    .vrvb-listhead__title { font-size: 36px; }
    .vrvb-feature__title { font-size: 28px; }
}
@media (max-width: 600px) {
    .vrvb-grid { grid-template-columns: 1fr; }
    .vrvb-related__head { flex-direction: column; gap: 6px; }
    .vrvb-bar__brand { width: 100%; padding-top: 14px; }
    .vrvb-bar__cats a { padding: 14px 0 12px; }
    .vrvb-btn { white-space: normal; }
}