/* Responsible Wagering — frames responsible-wagering-page (16:243) and
 * mobile-responsible-wagering (44:4). The workspace itself is pages/legal.css
 * (its defaults are this page's numbers); here: hero specifics and the
 * operator-information band (04). */

.lhero--rw .lhero__text { display: contents; }

/* ── 04 operator information ──────────────────────────────────────────── */
.opinfo { display: flex; align-items: center; gap: 48px; min-height: 300px; padding: 80px var(--container-pad); background: var(--color-card-2); }
.opinfo__main { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.opinfo__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border-light); }   /* Figma LINE */
.opinfo__title { font-family: var(--font-display); font-size: 24px; line-height: 26px; text-transform: uppercase; color: var(--color-ink); }
.opinfo__text { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }   /* 32 after the title */
.opinfo__p { font-size: 15px; line-height: 24px; color: var(--color-ink); }
.opinfo__p--lead { font-size: 16px; line-height: 26px; color: var(--color-ink-2); }
.opinfo__box {
  display: flex; flex-direction: column; gap: 6px; flex: none; width: 400px; max-width: 100%; padding: 20px;   /* the mockup box (200px) holds "XXXX"; the unified operator block needs room */
  background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--color-ink-2);
}
.opinfo__fact { display: flex; gap: 12px; }
.opinfo__fact dt { flex: none; width: 120px; font-weight: 700; color: var(--color-muted-3); }
.opinfo__fact dd { min-width: 0; overflow-wrap: anywhere; }
.opinfo__link { color: var(--color-purple); text-decoration: none; }
.opinfo__link:hover { text-decoration: underline; }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .lhero--rw .lhero__text { display: flex; }

  .opinfo { flex-direction: column; align-items: stretch; gap: 12px; min-height: 0; padding: 16px var(--container-pad); background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border); }
  .opinfo__main { display: contents; }
  .opinfo__title { order: 1; font-size: 16px; line-height: 17px; color: var(--color-brand); }
  .opinfo__line { order: 2; background: var(--color-border); }
  .opinfo__text { order: 3; gap: 8px; margin: 0; }
  .opinfo__p { font-size: 13px; line-height: 18px; color: var(--color-text); }
  .opinfo__p--lead { font-size: 13px; line-height: 18px; color: var(--color-muted); }
  .opinfo__box { order: 4; gap: 4px; width: auto; margin-top: -4px; padding: 12px; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); font-size: 12px; line-height: 16px; color: var(--color-muted); }
  .opinfo__fact { flex-direction: column; gap: 2px; }
  .opinfo__fact dt { width: auto; }
}