/* Travespert blog listing (/blogs/, [travespert_blogs]). Uses tokens.css + blog-cards.css. */
body.tv-blogs-page #brx-content > h1 { display: none; }
body.tv-blogs-page { overflow-x: hidden; }
body.tv-blogs-page #brx-content { padding-top: 0; }

.tv-bl { color: var(--tv-body); }
.tv-bl-wrap { max-width: var(--tv-container); margin: 0 auto; padding: 0 var(--tv-gutter); box-sizing: border-box; }

/* Hero (same amber wash as /events/), full-bleed out of the #brx-content column */
.tv-bl-hero {
  position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw);
  background: linear-gradient(180deg, var(--tv-primary-tint) 0%, #fffaf0 100%);
  padding: clamp(44px, 6vw, 80px) 0 clamp(36px, 5vw, 56px);
}
.tv-bl-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L140 50 250 85 400 22 520 80 660 34 800 92 940 44 1080 76 1200 38 1200 110 Z' fill='%23e59a1a' opacity='.10'/%3E%3C/svg%3E") bottom / 100% 110px no-repeat;
}
.tv-bl-hero .tv-bl-wrap { position: relative; z-index: 1; }
.tv-bl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: var(--tv-fs-sm); font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tv-primary-hover);
}
.tv-bl-eyebrow::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--tv-primary); }
.tv-bl-h1 { font-size: var(--tv-fs-h1); font-weight: 800; color: var(--tv-ink); letter-spacing: var(--tv-ls-display); line-height: var(--tv-lh-tight); margin: 0 0 16px; max-width: 24ch; }
.tv-bl-lead { font-size: var(--tv-fs-lead); line-height: var(--tv-lh-body); color: var(--tv-body); margin: 0; max-width: 60ch; }

.tv-bl-sec { padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 7vw, 88px); }
.tv-bl-empty { text-align: center; color: var(--tv-muted); padding: 48px 0; }

/* Pagination */
.tv-bpag { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(32px, 5vw, 52px); flex-wrap: wrap; }
.tv-bpag__list { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.tv-bpag__list li { margin: 0; }
.tv-bpag__n, .tv-bpag__a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--tv-hairline); border-radius: var(--tv-radius-pill);
  background: var(--tv-canvas); color: var(--tv-ink);
  font-size: var(--tv-fs-body); font-weight: 700; line-height: 1; text-decoration: none;
  transition: background var(--tv-transition), border-color var(--tv-transition), color var(--tv-transition), box-shadow var(--tv-transition);
}
a.tv-bpag__n:hover, a.tv-bpag__a:hover { border-color: var(--tv-primary); background: var(--tv-primary-tint); color: var(--tv-ink); text-decoration: none; }
.tv-bpag__n.is-cur { background: var(--tv-primary); border-color: var(--tv-primary); color: var(--tv-on-primary); box-shadow: var(--tv-shadow-cta); }
.tv-bpag__a svg { width: 16px; height: 16px; flex: none; }
.tv-bpag__a.is-off { opacity: .45; cursor: not-allowed; }
.tv-bpag__gap { color: var(--tv-muted); padding: 0 2px; }
.tv-bpag a:focus-visible { outline: 2px solid var(--tv-ink); outline-offset: 2px; }

@media (max-width: 640px) {
  .tv-bpag { gap: 8px; }
  .tv-bpag__a span { display: none; }
  .tv-bpag__a { padding: 0; width: 44px; }
}

/* Hero image */
.tv-bl-hero { background: var(--tv-dark); padding: clamp(80px, 11vw, 150px) 0 clamp(56px, 8vw, 96px); }
.tv-bl-hero::after { display: none; }
.tv-bl-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.tv-bl-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.2) 100%); }
.tv-bl-hero .tv-bl-h1 { color: #fff; }
.tv-bl-hero .tv-bl-lead { color: rgba(255,255,255,.92); }
.tv-bl-hero .tv-bl-eyebrow { color: var(--tv-primary); }
@media (max-width: 640px) { .tv-bl-hero__scrim { background: rgba(0,0,0,.55); } }