/* Content blocks for the hosting FAQ and game pages.
   Uses the shared theme tokens from styles.css, so light and dark follow the site toggle. */
.vc-section { padding: 4rem 0; }
.vc-section + .vc-section { padding-top: 0; }
.vc-hero { padding: 4.5rem 0 2.5rem; }
.vc-hero .hero-title { margin-bottom: 1rem; }
.vc-breadcrumb { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1.25rem; }
.vc-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.vc-breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.6; }
.vc-breadcrumb a { color: inherit; text-decoration: none; }
.vc-breadcrumb a:hover { text-decoration: underline; }
.vc-lead { font-size: 1.125rem; color: var(--muted-foreground); max-width: 48rem; margin: 0 auto 1rem; text-wrap: pretty; }
.vc-lead strong { color: var(--foreground); }
.vc-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .vc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vc-grid.vc-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.vc-card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; }
.vc-card h2, .vc-card h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.5rem; }
.vc-card p, .vc-card li { color: var(--muted-foreground); font-size: 0.95rem; }
.vc-card ul { padding-left: 1.1rem; }
.vc-card li + li { margin-top: 0.35rem; }
.vc-card a, .vc-faq a, .vc-note a, .vc-lead a { color: var(--primary); }
a.vc-card { display: block; text-decoration: none; transition: border-color 0.3s ease, transform 0.3s ease; }
a.vc-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.vc-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 0.75rem; }
.vc-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 36rem; }
.vc-table th, .vc-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.vc-table thead th { font-weight: 600; background: var(--card); }
.vc-table tbody tr:last-child td, .vc-table tbody tr:last-child th { border-bottom: 0; }
.vc-table tbody th { font-weight: 600; }
.vc-table td { color: var(--muted-foreground); }
.vc-table a { color: var(--primary); font-weight: 500; }
.vc-note { font-size: 0.85rem; color: var(--muted-foreground); margin-top: 1rem; }
.vc-faq { display: grid; grid-template-columns: 1fr; gap: 1rem 2rem; }
@media (min-width: 900px) { .vc-faq { grid-template-columns: repeat(2, 1fr); } }
.vc-faq-item { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.vc-faq-item h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.4rem; }
.vc-faq-item p { color: var(--muted-foreground); font-size: 0.95rem; }
.vc-faq-item p + p { margin-top: 0.5rem; }
.vc-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.vc-subhead { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.vc-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.vc-tags span { font-size: 0.8rem; border: 1px solid var(--border); border-radius: 9999px; padding: 0.15rem 0.65rem; color: var(--muted-foreground); }