/* ─────────────────────────────────────────────────────────────────────────────
   snk-event-offers.css — template='store-offer', paid game elements as product
   cards. Ported byte-for-byte from the approved mockup
   (public_html/_mockups/event-offers/event-offers.css).

   Scoped under #event-page like the rest of the event-page styles (snacknap-ui.css
   scopes .snk-paid the same way), so it inherits the page's token set and flips
   light/dark for free.

   Design language deliberately reuses what already exists:
     - gold #eaa320/#f5c14f  = the site's established "paid" semantic
     - .reward-chip          = box contents (real chips, real icons)
     - .snk-bonus-item       = auto-pulled bonus pills from munch_events_bonuses

   QUIRK GUARD: header.php:141 sets a global body{line-height:26px} as a FIXED PX
   value, which inherits into every descendant that does not set its own. On the
   10-12px text here that would be a ~2.3x strut and gaping line gaps. EVERY
   text-bearing rule below therefore sets its own line-height. Verified by
   tools/graphics-export/_offer-lh.mjs — do not remove a line-height without
   re-running it.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Grid ────────────────────────────────────────────────────────────────────
   1 offer  → full width.  2+ offers → side-by-side so "same price, more stuff"
   is legible at a glance (the real Event Ticket vs Ultra Ticket Box pattern). */
#event-page .snk-offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 16px;
  padding: 18px;
  /* Cards take their natural height. Stretch (the grid default) would pad the
     shorter card out to match the taller one — an Event Ticket with four bonus
     pills next to an Ultra Ticket Box with two chips leaves a ~400px void above
     the box's CTA. A ragged bottom edge reads better than a hole. */
  align-items: start;
}
@media (max-width: 575.98px) {
  #event-page .snk-offers { padding: 14px; gap: 14px; }
}

/* ── Offer card ───────────────────────────────────────────────────────────── */
#event-page .snk-offer {
  display: flex;
  flex-direction: column;
  background: var(--snk-surface);
  border: 1px solid var(--snk-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: box-shadow .18s ease, transform .18s ease;
}
#event-page .snk-offer:hover {
  box-shadow: 0 6px 20px rgba(16, 24, 40, .08);
  transform: translateY(-2px);
}
html[data-bs-theme=dark] #event-page .snk-offer:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

/* The gold rail is the paid signal — one thin line, not a whole yellow panel. */
#event-page .snk-offer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #f5c14f, #eaa320);
  flex: 0 0 auto;
}

/* ── Head: identity left, price right ─────────────────────────────────────── */
#event-page .snk-offer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 13px;
}
#event-page .snk-offer-id { min-width: 0; }

#event-page .snk-offer-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--snk-slate);
  line-height: 1.2;
  margin-bottom: 4px;
}
#event-page .snk-offer-kind .lucide { width: 12px; height: 12px; }

#event-page .snk-offer-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--snk-text);
  line-height: 1.3;
  margin: 0;
}

/* Price pill — the thing people scan for, so it gets the gold. */
#event-page .snk-offer-price {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: linear-gradient(135deg, #f5c14f, #eaa320);
  color: #3a2e00;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -.01em;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(234, 163, 32, .32);
  white-space: nowrap;
}
/* PokéCoin-priced boxes read differently (no currency symbol, coin icon). */
#event-page .snk-offer-price.is-coins {
  background: linear-gradient(135deg, #ffd766, #f2b632);
}
#event-page .snk-offer-price img { width: 15px; height: 15px; align-self: center; }

/* Free / no-price offers (GO Fest 2026: Global is genuinely free) */
#event-page .snk-offer-price.is-free {
  background: var(--snk-surface-2);
  color: var(--snk-ink-700);
  border: 1px solid var(--snk-border);
  box-shadow: none;
}

/* ── Flags row: channel + exclusivity ─────────────────────────────────────── */
#event-page .snk-offer-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 13px;
}
#event-page .snk-offer-chan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--snk-surface-2);
  color: var(--snk-ink-700);
  border: 1px solid var(--snk-border);
}
#event-page .snk-offer-chan .lucide { width: 12px; height: 12px; }
/* Channel is a fact, not decoration — each gets its own hue so the difference
   between "open your app" and "open a browser" is pre-attentive. */
#event-page .snk-offer-chan.chan-in_game_shop {
  background: color-mix(in srgb, #3a5a9c 10%, var(--snk-surface));
  border-color: color-mix(in srgb, #3a5a9c 26%, var(--snk-surface));
  color: var(--snk-accent);
}
#event-page .snk-offer-chan.chan-web_store {
  background: color-mix(in srgb, #16a34a 10%, var(--snk-surface));
  border-color: color-mix(in srgb, #16a34a 26%, var(--snk-surface));
  color: #15803d;
}
html[data-bs-theme=dark] #event-page .snk-offer-chan.chan-web_store { color: #4ade80; }
#event-page .snk-offer-chan.chan-in_person_tickets {
  background: color-mix(in srgb, #9333ea 10%, var(--snk-surface));
  border-color: color-mix(in srgb, #9333ea 26%, var(--snk-surface));
  color: #7e22ce;
}
html[data-bs-theme=dark] #event-page .snk-offer-chan.chan-in_person_tickets { color: #c084fc; }

#event-page .snk-offer-excl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, #eaa320 16%, var(--snk-surface));
  border: 1px solid color-mix(in srgb, #eaa320 38%, var(--snk-surface));
  color: #8a5d05;
}
/* Sits next to .snk-offer-chan, so it matches that chip's icon exactly. Without
   this rule lucide falls back to its 24px default — a 2.4x ratio against 10px
   text, twice every other chip on the card. Verified by _offer-icons.mjs. */
#event-page .snk-offer-excl .lucide { width: 12px; height: 12px; }
html[data-bs-theme=dark] #event-page .snk-offer-excl { color: #f5c14f; }

/* ── Sections: Included / Unlocks ─────────────────────────────────────────── */
#event-page .snk-offer-sec {
  padding: 13px 16px;
  border-top: 1px dashed var(--snk-border);
}
#event-page .snk-offer-sec-h {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--snk-slate);
  line-height: 1.2;
  margin-bottom: 9px;
}
#event-page .snk-offer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* "Everything in the Event Ticket" — an offer that contains another offer.
   Real pattern: the Ultra Ticket Box IS the ticket + a bonus item. */
#event-page .snk-offer-ref {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #eaa320 9%, var(--snk-surface));
  border: 1px dashed color-mix(in srgb, #eaa320 40%, var(--snk-surface));
  font-size: 12.5px;
  font-weight: 600;
  color: var(--snk-ink-700);
  line-height: 1.25;
}
#event-page .snk-offer-ref .lucide { width: 14px; height: 14px; color: #eaa320; }

/* Auto-pulled bonus pills — same atoms as the Bonuses grid, tighter. */
#event-page .snk-offer-bonuses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
#event-page .snk-offer-bonuses .snk-bonus-item { margin: 0; }
#event-page .snk-offer-srcnote {
  display: block;
  margin-top: 9px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--snk-slate-400);
}
#event-page .snk-offer-srcnote a { color: inherit; text-decoration: underline; }

/* ── Foot: CTA ────────────────────────────────────────────────────────────── */
#event-page .snk-offer-foot {
  margin-top: auto;
  padding: 13px 16px;
  border-top: 1px solid var(--snk-border);
  background: var(--snk-surface-2);
}
#event-page .snk-offer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: linear-gradient(135deg, #f5c14f, #eaa320);
  border: none;
  color: #3a2e00;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.2;
  border-radius: 999px;
  padding: 9px 16px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(234, 163, 32, .32);
  transition: transform .15s ease, box-shadow .15s ease;
}
#event-page .snk-offer-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(234, 163, 32, .45);
  color: #3a2e00;
}
#event-page .snk-offer-cta .lucide { width: 14px; height: 14px; }

/* In-game shop has no URL to link to. Saying "Visit Web Store" there is a lie —
   which is exactly what the current hardcoded strip does. So: a statement. */
#event-page .snk-offer-nolink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--snk-ink-700);
  text-align: center;
}
#event-page .snk-offer-nolink .lucide { width: 14px; height: 14px; color: var(--snk-slate); flex: 0 0 auto; }

/* ── Fine print — collapsed by default ────────────────────────────────────── */
#event-page .snk-offer-fine { border-top: 1px solid var(--snk-border); }
#event-page .snk-offer-fine > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--snk-slate);
  user-select: none;
}
#event-page .snk-offer-fine > summary::-webkit-details-marker { display: none; }
#event-page .snk-offer-fine > summary:hover { color: var(--snk-ink-700); }
#event-page .snk-offer-fine > summary .lucide {
  width: 13px; height: 13px;
  transition: transform .18s ease;
}
#event-page .snk-offer-fine[open] > summary .lucide.chev { transform: rotate(90deg); }

#event-page .snk-offer-fine-body { padding: 2px 16px 14px; }
#event-page .snk-offer-fine-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
#event-page .snk-offer-fine-body li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--snk-ink-600);
}
#event-page .snk-offer-fine-body li .lucide {
  width: 13px; height: 13px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--snk-slate-400);
}

/* Deadline is time-critical, not boilerplate — it gets to stay visible. */
#event-page .snk-offer-until {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-top: 1px dashed var(--snk-border);
  background: color-mix(in srgb, #eaa320 6%, var(--snk-surface));
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #8a5d05;
}
html[data-bs-theme=dark] #event-page .snk-offer-until { color: #e8c879; }
#event-page .snk-offer-until .lucide { width: 13px; height: 13px; flex: 0 0 auto; }

/* ── Block-level intro + local-currency footnote ──────────────────────────── */
#event-page .snk-offer-note {
  padding: 0 18px 16px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--snk-slate);
}
@media (max-width: 575.98px) { #event-page .snk-offer-note { padding: 0 14px 14px; } }