/* Site-wide extras (Sept 2026). Loaded on every page after style.css. */

/* Data tables on hub pages (tracker, licensing, province pages). Mirrors payment-table.css. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 28px; }
.data-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; background: #1E293B; border-radius: 12px; overflow: hidden; }
.data-table thead th { padding: 14px 16px; font-size: 13px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 1px; text-align: left; background: #162032; border-bottom: 1px solid rgba(148, 163, 184, 0.08); white-space: nowrap; }
.data-table tbody td { padding: 14px 16px; font-size: 15px; line-height: 1.5; color: #CBD5E1; border-bottom: 1px solid rgba(148, 163, 184, 0.06); vertical-align: top; font-weight: 300; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(148, 163, 184, 0.04); }
.data-table td strong, .data-table td a { color: #ffffff; font-weight: 600; }
.data-table td a { text-decoration: none; border-bottom: 1px solid rgba(249, 115, 22, 0.45); }
.data-table td a:hover { color: #F97316; }
.data-table .cell-open { color: #4ADE80; font-weight: 600; }
.data-table .cell-monopoly { color: #FBBF24; font-weight: 600; }
.data-table .cell-none { color: #94A3B8; }
.data-table-note { font-size: 13px; color: #94A3B8; font-weight: 300; margin: -16px 0 28px; }
.data-table-note a { color: #F97316; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) {
  .data-table thead th { padding: 16px 20px; }
  .data-table tbody td { padding: 16px 20px; font-size: 16px; }
}

/* Links inside provider card text on /software-providers/ (Full guide, game links). Mirrors the hub.css text-link style (Oct 2026). */
.provider-grid .provider-card .provider-card-text a { color: #F97316; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(249, 115, 22, 0.4); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.provider-grid .provider-card .provider-card-text a:hover { text-decoration-color: #F97316; }

/* Studio pages (/software-providers/<studio>/) and game guides (/casino-games/<game>/), Oct 2026. hub-section-wide lets body paragraphs use the full content width. data-table-figures is for the short-value number tables (RTP, house edge, cost per C$100): equal column widths so the last column does not swallow the free space, headers may wrap. screenshot-row lays screenshots out in rows: the frames share one height (subgrid), the shorter image is centred on the frame background, nothing is cropped, and captions sit in their own row; screenshot-row-phone-single centres a lone phone screenshot; from 768px it becomes a panel with the phone on the left and its caption beside it, so the row has no empty side columns. */
.hub-section.hub-section-wide .hub-section-intro { max-width: none; }
.data-table.data-table-figures { table-layout: fixed; }
.data-table.data-table-figures thead th { white-space: normal; }
.screenshot-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0 0 32px; }
.screenshot-row .image-block { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; margin: 0; }
.screenshot-row .image-block .image-frame { display: flex; align-items: center; }
.screenshot-row .image-block.image-block-portrait { width: 100%; max-width: 320px; margin: 0 auto; }
.screenshot-row-phones { justify-content: center; }
@media (min-width: 640px) {
  .screenshot-row-phones { grid-template-columns: repeat(2, minmax(0, 320px)); gap: 32px; }
}
@media (min-width: 768px) {
  .screenshot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .screenshot-row-phones { grid-template-columns: repeat(2, minmax(0, 320px)); gap: 48px; }
  .screenshot-row-phones-centre { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); }
}
.screenshot-row.screenshot-row-phone-single { grid-template-columns: minmax(0, 320px); justify-content: center; }
@media (min-width: 768px) {
  .screenshot-row.screenshot-row-phone-single { grid-template-columns: minmax(0, 1fr); padding: 32px 40px; background: #131A2E; border-radius: 14px; }
  .screenshot-row.screenshot-row-phone-single .image-block.image-block-portrait { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto; grid-row: auto; column-gap: 40px; align-items: center; width: 100%; max-width: none; margin: 0; }
  .screenshot-row.screenshot-row-phone-single .image-block .image-caption { padding: 0; max-width: 520px; font-size: 17px; color: #94A3B8; }
}