@import url('/styles.css?v=lottery-rework-4');

.info-shell { width: min(980px, calc(100% - 24px)); margin: 22px auto 52px; }
.info-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--cobalt) 34%, var(--line)); border-radius: 20px; background: linear-gradient(110deg, color-mix(in srgb, var(--mint) 82%, var(--surface)), color-mix(in srgb, var(--cobalt-soft) 72%, var(--surface))); box-shadow: var(--shadow); }
.info-top img { width: 154px; height: auto; }
.info-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.info-nav a { min-height: 40px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--cobalt) 32%, var(--line)); border-radius: 11px; color: color-mix(in srgb, var(--cobalt) 74%, var(--ink)); background: color-mix(in srgb, var(--surface) 74%, var(--cobalt-soft)); text-decoration: none; font-size: 12px; font-weight: 800; }
.info-nav a[aria-current="page"] { color: #fff; background: linear-gradient(135deg, var(--cobalt), var(--teal)); }
.info-hero { margin-top: 18px; padding: clamp(24px, 5vw, 50px); border: 2px solid color-mix(in srgb, var(--cobalt) 42%, var(--line)); border-radius: 30px; color: #fff; background: linear-gradient(120deg, var(--deep), color-mix(in srgb, var(--cobalt) 70%, var(--deep))); box-shadow: var(--shadow); }
.info-hero .eyebrow { color: #ffe29c; }
.info-hero h1 { max-width: 760px; margin: 7px 0 13px; font-size: clamp(30px, 5vw, 54px); }
.info-hero p { max-width: 760px; margin: 0; color: #d8eeea; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.info-card { min-width: 0; padding: 24px; border: 2px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.info-card:nth-child(4n+1) { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--mint) 62%, var(--surface))); }
.info-card:nth-child(4n+2) { border-color: color-mix(in srgb, var(--cobalt) 45%, var(--line)); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--cobalt-soft) 58%, var(--surface))); }
.info-card:nth-child(4n+3) { border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--amber-soft) 60%, var(--surface))); }
.info-card:nth-child(4n) { border-color: color-mix(in srgb, var(--deep) 40%, var(--line)); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--mint) 34%, var(--cobalt-soft))); }
.info-card h2 { margin-bottom: 11px; color: color-mix(in srgb, var(--cobalt) 72%, var(--ink)); }
.info-card p, .info-card li, .info-card dd { color: var(--muted); }
.info-card ol, .info-card ul { margin: 0; padding-left: 1.3em; }
.info-card li + li { margin-top: 7px; }
.info-card dl { margin: 0; }
.info-card dt { margin-top: 12px; font-weight: 850; }
.info-card dd { margin: 4px 0 0; }
.info-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.info-links a { min-height: 44px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--cobalt) 34%, var(--line)); border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--cobalt), var(--teal)); text-decoration: none; font-weight: 800; }
.info-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 72%, var(--mint)); color: var(--muted); font-size: 12px; }
.info-footer a { color: var(--cobalt); font-weight: 800; }
@media (max-width: 700px) {
  .info-shell { margin-top: 10px; }
  .info-top { grid-template-columns: 1fr auto; padding: 8px; }
  .info-top img { width: 128px; }
  .info-nav { grid-column: 1 / -1; justify-content: stretch; }
  .info-nav a { flex: 1 1 80px; text-align: center; }
  .info-grid { grid-template-columns: 1fr; gap: 11px; }
  .info-hero { margin-top: 11px; padding: 24px 18px; border-radius: 22px; }
  .info-card { padding: 18px; }
}