/* Keyboard navigation for the legacy guide pages. Article layout overrides are scoped below. */
.tb-guide-skip-link {
  position: fixed;
  z-index: 10000;
  top: 1rem;
  left: 1rem;
  max-width: calc(100vw - 2rem);
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: #0F2654;
  color: #FFFCF7;
  font: 700 1rem/1.5 var(--font-body, sans-serif);
  text-decoration: underline;
  text-underline-offset: .15em;
  transform: translateY(calc(-100% - 2rem));
}
.tb-guide-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #E8890A;
  outline-offset: 3px;
}
main#main-content { scroll-margin-top: 5rem; }

/* Article hero: two complete groups instead of one tall text column
   beside an isolated image. Mobile children retain the existing flex order. */
.tb-guide-copy, .tb-guide-visual { display: contents; }
@media (min-width: 768px) {
  .hero > .container:has(> .tb-guide-copy) {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-areas: "crumb crumb" "copy visual";
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: 24px;
    align-items: start;
  }
  .hero > .container:has(> .tb-guide-copy) > .breadcrumbs { grid-area: crumb; margin: 0; }
  .hero > .container:has(> .tb-guide-copy) > .back-link { display: none; }
  .tb-guide-copy { grid-area: copy; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .tb-guide-copy > h1, .tb-guide-copy > .hero-text { margin: 0; }
  .tb-guide-copy > .hero-badge { align-self: flex-start; margin: 0; }
  .tb-guide-copy > .article-meta { margin: 8px 0 0; font-size: .875rem; line-height: 1.5; }
  .tb-guide-visual { grid-area: visual; display: flex; flex-direction: column; min-width: 0; gap: 12px; }
  .tb-guide-visual > .hero-media { margin: 0 0 4px; width: 100%; }
  .tb-guide-visual > .hero-media img { aspect-ratio: 4 / 3; object-fit: cover; }
  .hero .tb-guide-visual > .btn-cta { margin: 0; min-width: 0; width: 100%; max-width: none; }
  .tb-guide-visual > .btn-sub { margin: 0; line-height: 1.5; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tb-guide-visual > .hero-media img { aspect-ratio: 1 / 1; }
}