/**
 * Phase 5: minimal above-the-fold rules for blog list/article (loaded before design system).
 */
.qb-scope .qb-card {
  contain: layout style;
}
.qb-scope img[loading="lazy"] {
  content-visibility: auto;
}

/* Phase 5: font scale + reading mode + RTL helpers + skeleton */
/* !important: @tailwindcss/typography (.qb-prose / .qb-prose-lg) sets font-size with high specificity */
html.qb-font-s .qb-scope .qb-prose,
html.qb-font-s .qb-scope .qb-article-body,
html.qb-font-s .qb-scope .blog_description {
  font-size: 0.9375rem !important;
}
html.qb-font-m .qb-scope .qb-prose,
html.qb-font-m .qb-scope .qb-article-body,
html.qb-font-m .qb-scope .blog_description {
  font-size: 1.125rem !important;
}
html.qb-font-l .qb-scope .qb-prose,
html.qb-font-l .qb-scope .qb-article-body,
html.qb-font-l .qb-scope .blog_description {
  font-size: 1.4rem !important;
}
html.qb-reading-mode .qb-scope aside,
html.qb-reading-mode .qb-scope .wk-sidebar,
html.qb-reading-mode .qb-scope .wk_share_bar,
html.qb-reading-mode .qb-scope .qb-booking-sticky {
  display: none !important;
}
html.qb-reading-mode .qb-scope .wkblock.qb-max-w-prose,
html.qb-reading-mode .qb-scope article.qb-max-w-prose {
  max-width: 48rem !important;
}
.qb-scope[dir="rtl"] .qb-ms-2 {
  margin-inline-start: 0;
  margin-inline-end: 0.5rem;
}
.qb-skeleton {
  min-height: 1em;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, var(--color-base-300, #e5e5e5) 25%, var(--color-base-200, #f5f5f5) 50%, var(--color-base-300, #e5e5e5) 75%);
  background-size: 200% 100%;
  animation: qb-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes qb-skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* FO 2026: skip target + reduced-motion reading bar (PRD §7) */
#qb-main-content {
  scroll-margin-top: 0.5rem;
}

.qb-scope .qb-skip-feed-link:focus {
  clip: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  position: static !important;
  overflow: visible !important;
  outline: 2px solid var(--color-primary, #6366f1);
  outline-offset: 2px;
}

.qb-blog-main {
  padding-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .qb-reading-bar,
  .qb-reading-bar-inner {
    display: none !important;
  }
  .qb-reading-bar-inner {
    animation: none !important;
  }
}