/* A limited-time event: its banner on the home page and the dialog behind "View details". The
   event's accent is amber, on the card and overlay surfaces of either theme. Tokens and shared
   components only (see docs/DESIGN.md). */
@layer pages {
  .home-event { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
    border-color: color-mix(in srgb, var(--amber) 30%, var(--border-subtle));
    background: linear-gradient(100deg, var(--amber-soft), transparent 58%), var(--surface-1); }
  .home-event.interactive:hover { border-color: color-mix(in srgb, var(--amber) 55%, var(--border-subtle)); }
  .home-event-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .home-event-text .hint { margin-top: 2px; }
  .home-event-text .hint .icon { margin-right: 6px; color: var(--text-3); }
  .home-event-cta { flex: none; }
  .event-kicker { color: var(--amber-text); }

  /* The event's emblem: an amber tile with its icon. */
  .event-art { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: var(--r-md); color: var(--amber-text);
    background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); box-shadow: var(--highlight); }
  .event-art.lg { width: 72px; height: 72px; border-radius: var(--r-lg); }

  /* The dialog. */
  .event-dialog { width: min(520px, 100%); background: radial-gradient(120% 45% at 50% 0%, var(--amber-soft), transparent 72%), var(--surface-overlay); }
  .event-close { position: absolute; top: var(--sp-3); right: var(--sp-3); }
  .event-dialog-head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding-top: var(--sp-2); text-align: center; }
  .event-dialog-head .event-art { margin-bottom: var(--sp-3); }
  .event-dialog-head h2 { margin: 0; }
  .event-intro { margin-top: var(--sp-4); color: var(--text-2); text-align: center; }
  .event-tasks { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
  .event-tasks li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .event-task-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); color: var(--amber-text); background: var(--amber-soft); }
  .event-tasks b { display: block; }
  .event-tasks .hint { margin-top: 2px; }
  .event-countdown { margin-top: var(--sp-4); }
  .event-countdown .icon { color: var(--amber-text); }
  .event-go { margin-top: var(--sp-5); }

  @media (max-width: 560px) {
    .home-event { flex-wrap: wrap; padding: var(--sp-4); }
    .home-event-cta { width: 100%; --btn-h: var(--h-md); }
  }
}