/* 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; flex: none; min-width: 200px; padding: 20px; white-space: nowrap;   /* the mockup box (200px) holds "XXXX"; the real licence number needs the box to hug */
  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: 14px; line-height: 25px; color: var(--color-ink-2);
}

/* ── 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); }
}