/* bk_deals.css — the deals explorer (/deals, /en/deals), 2026-09-17.
   The cards are the homepage deck's own cards (bkx_hot_deals_core.railCardHTML)
   in the homepage's own material (bkx.css --x-* tokens, with their values as fallbacks — no palette of its own); only the container is new: a grid instead of
   a coverflow, with category chips and a sort. Tokens fall back to bkx.css values. */

.bkd {
  max-width: 1240px; margin: 0 auto; padding-block: 28px 64px; padding-inline: clamp(16px, 4vw, 40px);
  color: var(--x-ink, #F5F1E8);
}
.bkd h1 { font-size: clamp(28px, 4.2vw, 44px); margin: 0 0 10px; letter-spacing: -.02em; font-weight: 600; }
.bkd__lede { color: var(--x-ink-2, #C3C6CC); max-width: 70ch; line-height: 1.7; margin: 0 0 6px; }
.bkd__fine { color: var(--x-ink-3, #8E939C); font-size: 13px; max-width: 70ch; line-height: 1.6; margin: 0 0 20px; }

.bkd__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; }
.bkd__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.bkd__chips legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bkd__chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--x-line-2, rgba(240, 236, 226, .18)); background: var(--x-raised, #0C1119); color: var(--x-ink-2, #C3C6CC);
  font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .2s var(--x-ease, cubic-bezier(.22, 1, .36, 1)), color .2s var(--x-ease, cubic-bezier(.22, 1, .36, 1)), background-color .2s var(--x-ease, cubic-bezier(.22, 1, .36, 1));
}
.bkd__chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bkd__chip:hover { border-color: var(--x-gold, #E3BE79); color: var(--x-ink, #F5F1E8); }
.bkd__chip:has(input:checked) { background: var(--x-gold, #E3BE79); border-color: var(--x-gold, #E3BE79); color: var(--x-on-gold, #10131A); }
.bkd__chip:has(input:focus-visible) { outline: 3px solid var(--x-gold, #E3BE79); outline-offset: 2px; }
.bkd__chip b { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; }
.bkd__sort { display: inline-flex; align-items: center; gap: 8px; color: var(--x-ink-2, #C3C6CC); font-size: 14px; }
.bkd__sort select {
  font: inherit; min-height: 44px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--x-line-2, rgba(240, 236, 226, .18)); background: var(--x-raised, #0C1119); color: var(--x-ink, #F5F1E8);
}
.bkd__sort select:focus-visible { outline: 3px solid var(--x-gold, #E3BE79); outline-offset: 2px; }
.bkd__origin { display: inline-flex; align-items: center; gap: 8px; color: var(--x-ink-2, #C3C6CC); font-size: 14px; }
.bkd__origin select { font: inherit; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--x-line-2, rgba(240, 236, 226, .18)); background: var(--x-raised, #0C1119); color: var(--x-ink, #F5F1E8); }
.bkd__why { color: var(--x-ink-3, #8E939C); font-size: 13px; margin: 0 0 16px; line-height: 1.6; min-height: 1.6em; }
.bkd__state { color: var(--x-ink-2, #C3C6CC); }
.bkd__fresh { color: var(--x-ink-3, #8E939C); font-size: 13px; line-height: 1.6; margin: -10px 0 16px; }
.bkd__fresh:empty { display: none; }

/* The chips, the selects, the explanation, the freshness line and the grid are
   all shaped by the fares, so none of them is laid out until the fares are in:
   they appear together in one frame, in place of a skeleton of the grid. Laid
   out empty and filled later, every block grew in turn and pushed the page
   down under the reader (CLS 0.32-0.43 when /api/hot-deals answered after
   first paint). Twelve placeholder cards keep the fine print and the footer
   below the fold while the page waits, so nothing already visible moves. */
.bkd__explorer[aria-busy="true"] .bkd__bar,
.bkd__explorer[aria-busy="true"] [data-bkd-why],
.bkd__explorer[aria-busy="true"] [data-bkd-fresh],
.bkd__explorer[aria-busy="true"] [data-bkd-grid],
.bkd__explorer[data-bkd-failed] .bkd__bar,
.bkd__explorer[data-bkd-failed] [data-bkd-why],
.bkd__explorer[data-bkd-failed] [data-bkd-fresh],
.bkd__explorer:not([aria-busy="true"]) [data-bkd-skel] { display: none; }
.bkd__skel > div {
  min-block-size: 300px; border-radius: 18px;
  border: 1px solid var(--x-line, rgba(240, 236, 226, .10)); background: var(--x-raised, #0C1119);
}

.bkd__grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
}
.bkd__grid .jn-deal {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-block-size: 300px; padding: 1rem 1.05rem 1.1rem; border-radius: 18px;
  border: 1px solid var(--x-line, rgba(240, 236, 226, .10)); background: var(--x-raised, #0C1119); overflow: hidden; text-decoration: none; color: var(--x-ink, #F5F1E8);
  transition: border-color .25s var(--x-ease, cubic-bezier(.22, 1, .36, 1));
}
.bkd__grid .jn-deal:hover, .bkd__grid .jn-deal:focus-visible { border-color: var(--x-gold, #E3BE79); }
.bkd__grid .jn-deal:focus-visible { outline: 3px solid var(--x-gold, #E3BE79); outline-offset: 2px; }
.bkd__grid .jn-deal__img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: transform .7s var(--x-ease, cubic-bezier(.22, 1, .36, 1)); }
.bkd__grid .jn-deal:hover .jn-deal__img { transform: scale(1.04); }
.bkd__grid .jn-deal__plate {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding: 1rem; text-align: center;
  font-family: "Frank Ruhl Libre", Georgia, serif; font-size: 1.3rem; color: var(--x-ink-3, #8E939C);
  background: linear-gradient(150deg, #101823, #070B12);
}
.bkd__grid .jn-deal::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,7,12,.08) 0%, rgba(4,7,12,.10) 34%, rgba(4,7,12,.94) 100%);
}
.bkd__grid .jn-deal__body { position: relative; z-index: 2; display: grid; gap: .12rem; }
.bkd__grid .jn-deal__where { font-size: 1.12rem; font-weight: 600; line-height: 1.2; }
.bkd__grid .jn-deal__when { font-size: .8rem; color: var(--x-ink-2, #C3C6CC); unicode-bidi: isolate; }
.bkd__grid .jn-deal__price { display: flex; align-items: baseline; gap: .18rem; margin-block-start: .45rem; color: var(--x-gold, #E3BE79); }
.bkd__grid .jn-deal__price b { font-size: 1.55rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bkd__grid .jn-deal__price span { font-size: .95rem; }
.bkd__grid .jn-deal__approx { font-size: .8rem; color: var(--x-ink-3, #8E939C); margin-inline-start: .4rem; }
.bkd__grid .jn-deal__unit, .bkd__grid .jn-deal__src, .bkd__grid .jn-deal__obs { font-size: .75rem; color: var(--x-ink-3, #8E939C); line-height: 1.45; }
.bkd__grid .jn-deal__badge { color: var(--x-gold, #E3BE79); font-weight: 600; }
.bkd__grid .jn-deal__cta { display: inline-flex; align-items: center; gap: .3rem; margin-block-start: .55rem; font-size: .82rem; font-weight: 600; color: var(--x-gold, #E3BE79); }
.bkd__grid .jn-deal__cta::after { content: "\2190"; }
html[lang^="en"] .bkd__grid .jn-deal__cta::after { content: "\2192"; }
.bkd__more { margin: 18px 0 0; display: flex; justify-content: center; }
.bkd__more button {
  font: inherit; font-weight: 600; min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--x-line-2, rgba(240, 236, 226, .18)); background: var(--x-raised, #0C1119); color: var(--x-ink, #F5F1E8); cursor: pointer;
}
.bkd__more button:hover { border-color: var(--x-gold, #E3BE79); }
.bkd__withheld { margin: 28px 0 0; color: var(--x-ink-3, #8E939C); font-size: 13px; line-height: 1.6; max-width: 72ch; }

@media (max-width: 520px) {
  .bkd__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bkd__grid .jn-deal { min-block-size: 250px; padding: .8rem .8rem .9rem; border-radius: 14px; }
  .bkd__skel > div { min-block-size: 250px; border-radius: 14px; }
  .bkd__grid .jn-deal__where { font-size: 1rem; }
  .bkd__grid .jn-deal__price b { font-size: 1.3rem; }
  .bkd__grid .jn-deal__unit, .bkd__grid .jn-deal__src, .bkd__grid .jn-deal__obs { font-size: .75rem; }
}
@media (max-width: 359px) { .bkd__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .bkd__grid .jn-deal__img, .bkd__chip, .bkd__grid .jn-deal { transition: none; }
  .bkd__grid .jn-deal:hover .jn-deal__img { transform: none; }
}