/* ==========================================================================
   Blog topics — breadcrumb and related-service panel on articles, and the
   "Guides" block above the footer on service pages. Enqueued by blog-topics.php
   on those pages only.

   Everything sits outside .post-content on purpose: the theme styles
   `.single .post-content p/ul/a/h2` (22px justified paragraphs, 50px orange h2s),
   and those rules would otherwise restyle every element here.

   The theme registers each Saans weight as its own family, so weight is chosen
   by family, not font-weight.
   ========================================================================== */

.vwbt-crumbs,
.vwbt-next,
.vwbt-guides {
  --ink: #151515; --ink-2: #4C4C4C; --muted: #6B6C6F;
  --paper: #FFFFFF; --canvas: #F5F5F5; --line: #E4E2E0; --line-2: #CFCBC7;
  --dark: #1B1616; --orange: #F06A00; --orange-deep: #A83F00; --wash: #FFF2E6;
  --f-reg: "Saans-Regular", "Saans-Regular-fb", Arial, sans-serif;
  --f-med: "Saans-Medium", "Saans-Medium-fb", Arial, sans-serif;
  --f-semi: "Saans-SemiBold", "Saans-SemiBold-fb", Arial, sans-serif;
  font-family: var(--f-reg);
  color: var(--ink);
}
.vwbt-crumbs *, .vwbt-next *, .vwbt-guides * { box-sizing: border-box; }
.vwbt-crumbs a, .vwbt-next a, .vwbt-guides a { transition: none; }
.vwbt-crumbs :focus-visible, .vwbt-next :focus-visible, .vwbt-guides :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.vwbt-eyebrow { margin: 0; font-family: var(--f-med); font-size: 12.5px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vwbt-meta { font-size: 14px; line-height: 1.4; color: var(--muted); }
.vwbt-all { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-semi); font-size: 15.5px; color: var(--orange-deep); }
.vwbt-all:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- breadcrumb (article) ---------- */
/* Same measure as .post-content .container-main: 1430px wide, 40px gutters, 20px on phones. */
.vwbt-crumbs { max-width: 1430px; margin: 0 auto; padding: 26px 40px 0; }
.vwbt-crumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.vwbt-crumbs__list li { list-style: none; min-width: 0; }
.vwbt-crumbs__list li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.vwbt-crumbs__list a { color: var(--ink-2); }
.vwbt-crumbs__list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.vwbt-crumbs__list [aria-current] { color: var(--ink); }
/* the article title is already the H1 above; keep its crumb to one line */
.vwbt-crumbs__list li:last-child { flex: 1 1 12ch; overflow: hidden; }
.vwbt-crumbs__list li:last-child span { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; }

/* ---------- related service + related articles (article) ---------- */
.vwbt-next { max-width: 1430px; margin: 0 auto; padding: 0 40px 110px; }
.vwbt-next__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }

.vwbt-svc { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(28px, 3.6vw, 48px); border-radius: 26px;
  background: var(--dark); color: #fff; }
.vwbt-svc .vwbt-eyebrow { color: rgba(255, 255, 255, .6); }
.vwbt-svc__name { margin: 0; font-family: var(--f-semi); font-weight: normal; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.vwbt-svc__line { margin: 0; max-width: 46ch; font-size: 17.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.vwbt-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 4px; padding: 15px 26px; border-radius: 999px; background: var(--orange);
  color: #fff !important; font-family: var(--f-semi); font-size: 16px; line-height: 1; }
.vwbt-btn:hover { filter: brightness(1.06); }
.vwbt-svc__ind { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.vwbt-svc__ind a { font-family: var(--f-med); color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 4px; }
.vwbt-svc__ind a:hover { text-decoration-color: #fff; }
.vwbt-svc__rel { list-style: none; margin: auto 0 0; padding: 18px 0 0; width: 100%; border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: 8px; }
.vwbt-svc__rel li { list-style: none; }
.vwbt-svc__rel a { display: inline-block; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-family: var(--f-med); font-size: 14px; line-height: 1.2; color: #fff; }
.vwbt-svc__rel a:hover { border-color: #fff; }

.vwbt-read { display: flex; flex-direction: column; padding: clamp(26px, 3.2vw, 42px); border: 1px solid var(--line); border-radius: 26px; background: var(--paper); }
.vwbt-read__h { margin: 0 0 8px; font-family: var(--f-semi); font-weight: normal; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); }
.vwbt-read__list { list-style: none; margin: 0 0 22px; padding: 0; }
.vwbt-read__list li { list-style: none; display: grid; gap: 5px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.vwbt-read__list a { font-family: var(--f-med); font-size: 18.5px; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.vwbt-read__list a:hover { color: var(--orange-deep); }
.vwbt-read .vwbt-all { margin-top: auto; }

@media (max-width: 1199px) { .vwbt-crumbs { padding-inline: 40px; } .vwbt-next { padding: 0 40px 90px; } }
@media (max-width: 900px) { .vwbt-next__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .vwbt-crumbs { padding: 20px 20px 0; font-size: 14px; }
  .vwbt-next { padding: 0 20px 64px; }
  .vwbt-svc__line { font-size: 16px; }
  .vwbt-read__list a { font-size: 17px; }
}

/* ---------- guides (service pages) ---------- */
.vwbt-guides { background: var(--canvas); padding: clamp(56px, 7vw, 96px) 0; }
.vwbt-guides__wrap { max-width: 1295px; margin: 0 auto; padding: 0 40px; }
.vwbt-guides__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 32px; margin-bottom: 28px; }
.vwbt-guides__head h2 { margin: 8px 0 0; font-family: var(--f-semi); font-weight: normal; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.vwbt-guides__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vwbt-gcard { position: relative; list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 20px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--paper); transition: border-color .15s ease, transform .15s ease; }
.vwbt-gcard:hover { border-color: var(--line-2); transform: translateY(-2px); }
.vwbt-gcard:focus-within { border-color: var(--orange); }
.vwbt-gcard__topic { margin: 0; font-family: var(--f-med); font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-deep); }
.vwbt-gcard__h { margin: 0; font-family: var(--f-semi); font-weight: normal; font-size: 20px; line-height: 1.24; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.vwbt-gcard__h a { color: var(--ink); }
.vwbt-gcard__h a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.vwbt-gcard__h a:focus-visible { outline: none; }
.vwbt-gcard__ex { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.vwbt-gcard .vwbt-meta { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

@media (max-width: 1000px) { .vwbt-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .vwbt-guides__wrap { padding: 0 20px; } }
@media (max-width: 640px) { .vwbt-guides__grid { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .vwbt-gcard { transition: none; }
  .vwbt-gcard:hover { transform: none; }
}