/* ============================================================
   Gamblerina — article / review page styles (prefix: bal)
   Loaded after styles.css on long-form pages (/it/, /it/bonus/ ...)
   ============================================================ */

.bal-article { max-width: 880px; }
.bal-article h1 { font-size: var(--bal-fs-h1); margin-bottom: var(--bal-sp-5); line-height: 1.1; }
.bal-article h2 { font-size: var(--bal-fs-h2); margin: var(--bal-sp-7) 0 var(--bal-sp-4); }
.bal-article h3 { font-size: var(--bal-fs-h3); margin: var(--bal-sp-5) 0 var(--bal-sp-3); }
.bal-article h4 { font-size: 1.05rem; margin: var(--bal-sp-4) 0 var(--bal-sp-2); }
.bal-article p { color: var(--bal-text); line-height: 1.75; margin-bottom: var(--bal-sp-4); }
.bal-article a:not(.bal-btn):not(.bal-iconbtn) { color: var(--bal-green-link); text-decoration: underline; }
.bal-article ul, .bal-article ol { margin: 0 0 var(--bal-sp-4) var(--bal-sp-5); line-height: 1.75; }
.bal-article li { margin-bottom: var(--bal-sp-2); }

.bal-article__lead { font-size: 1.1rem; color: var(--bal-text); }
.bal-article__slogan { font-family: var(--bal-font-display); font-size: 1.5rem;
  color: var(--bal-accent); margin: var(--bal-sp-5) 0; }

/* data table (key/value, no header row) */
.bal-table--data { min-width: 0; width: 100%; }
.bal-table--data th { width: 38%; color: var(--bal-text); font-weight: var(--bal-fw-semibold);
  background: var(--bal-bg-700); text-align: left; border-radius: var(--bal-r-md) 0 0 var(--bal-r-md); }
.bal-table--data td { background: var(--bal-bg-700); border-radius: 0 var(--bal-r-md) var(--bal-r-md) 0; }
.bal-table--data tr { vertical-align: top; }

/* pros / cons two columns */
.bal-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bal-sp-4); margin-bottom: var(--bal-sp-5); }
.bal-proscons__col { background: var(--bal-bg-700); border: 1px solid var(--bal-border); border-radius: var(--bal-r-lg); padding: var(--bal-sp-5); }
.bal-proscons__col h3 { margin-top: 0; }
.bal-proscons__col ul { margin-left: var(--bal-sp-4); }
.bal-proscons--pro { border-left: 3px solid var(--bal-accent); }
.bal-proscons--con { border-left: 3px solid var(--bal-magenta); }

/* generic content table (bonus / vip / reload comparison) */
.bal-ctable-wrap { display: block; width: 100%; max-width: 100%; overflow: auto hidden;
  -webkit-overflow-scrolling: touch; margin-bottom: var(--bal-sp-5); }
.bal-ctable { width: 100%; border-collapse: collapse; min-width: 520px; }
.bal-ctable th, .bal-ctable td { padding: var(--bal-sp-3) var(--bal-sp-4); text-align: left;
  border-bottom: 1px solid var(--bal-border); }
.bal-ctable thead th { background: var(--bal-bg-600); color: var(--bal-text); font-weight: var(--bal-fw-semibold); }
.bal-ctable tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }

/* callout / mood note */
.bal-callout { background: var(--bal-bg-700); border-left: 3px solid var(--bal-accent);
  border-radius: var(--bal-r-md); padding: var(--bal-sp-4) var(--bal-sp-5); margin-bottom: var(--bal-sp-5); }
.bal-callout p:last-child { margin-bottom: 0; }

/* FAQ */
.bal-faq__item { border-bottom: 1px solid var(--bal-border); padding: var(--bal-sp-4) 0; }
.bal-faq__item h3 { margin: 0 0 var(--bal-sp-2); font-size: 1.1rem; }
.bal-faq__item p { margin-bottom: 0; color: var(--bal-text-muted); }

@media (max-width: 790px) {
  .bal-proscons { grid-template-columns: 1fr; }
  .bal-table--data th { width: 42%; }
}