/* ===========================================================================
   Home mint banner (mb-). The collection that is about to mint, printed as one
   wide poster at the top of the board. Tokens only: every colour, rule, shadow
   and type step comes from rarepad.css. Nothing here invents a palette.
   Owned by the banner agent. Layout: the art fills the block edge to edge and a
   solid paper panel carries the words, so no text ever sits on the picture.
   =========================================================================== */

.mb { position: relative; margin: 0 0 var(--s6); border: var(--line); background: var(--paper-deep); box-shadow: var(--raise); overflow: hidden; }

/* the art. Absolute on a wide screen so the panel prints over it, a plain band
   above the panel on a phone, where a 380px column has no room for both. */
.mb-art { position: absolute; inset: 0; }
.mb-art img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 42%; }
/* the picture reads paper at the left edge, so the panel meets it on a hard
   rule rather than floating in the middle of a character */
.mb-art::after { content: ""; position: absolute; inset: 0; background-image: var(--dither-12); opacity: .18; pointer-events: none; }

.mb-in { position: relative; display: flex; align-items: center; min-height: 400px; padding: var(--s4); }
.mb-panel { position: relative; width: min(510px, 92%); border: var(--line); background: var(--paper); box-shadow: var(--raise); padding: var(--s3) var(--s4) var(--s4); min-width: 0; }

.mb-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.mb-top .rp-eyebrow { margin-left: auto; }
.mb-name { word-break: normal; overflow-wrap: break-word; hyphens: none; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.04; }
.mb-desc { margin-top: var(--s2); }

/* the printed facts: pieces, price, creator fee. Key recessed, value in ink. */
.mb-facts { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.mb-fact { display: inline-flex; align-items: baseline; gap: 6px; border: var(--line); background: var(--paper-deep); padding: 2px 6px; font: 600 var(--t-11)/1.5 var(--font-mono); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.mb-fact i { font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track); color: var(--ink-60); }

/* the state of the drop, the point of the whole block */
.mb-state { margin-top: var(--s3); border-top: var(--line); padding-top: var(--s3); }
.mb-clock { display: block; margin-top: var(--s1); font: 500 var(--t-28)/1 var(--font-mono); font-variant-numeric: lining-nums tabular-nums; }
.mb-clock.is-off { color: var(--ink-60); }
.mb-note { margin-top: var(--s2); }
.mb-next { margin-top: var(--s1); font: 500 var(--t-11)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track); }
.mb-next b { background: var(--signal); color: var(--signal-ink); padding: 0 3px; font-weight: 700; }

/* minted of the whole run */
.mb-prog { margin-top: var(--s3); }
.mb-prog .rp-eyebrow { display: block; margin-bottom: var(--s1); }
.mb-bar { height: 14px; border: var(--line); background: var(--paper-deep); background-image: var(--dither-12); overflow: hidden; }
.mb-bar-fill { display: block; height: 100%; width: 0; background: var(--signal); transition: width 320ms steps(12); }
.mb-bar-note { margin-top: var(--s2); }

/* the six rarities. The split is a fixed fact of the collection, not a chain
   read, and the caption above the strip says so. */
.mb-rar-hd { display: flex; align-items: baseline; gap: var(--s1) var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.mb-rar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s2); }
.mb-rar li { display: flex; min-width: 0; overflow: hidden; white-space: nowrap; align-items: center; gap: 5px; border: var(--line-soft); padding: 3px 5px; font: 500 var(--t-10)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track); color: var(--ink-60); }
.mb-rar b { font-weight: 700; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.mb-sw { width: 10px; height: 10px; flex: none; border: 1px solid var(--ink); background: var(--paper); }
.mb-sw[data-tier="2"] { background-image: var(--dither-25); }
.mb-sw[data-tier="3"] { background-image: var(--dither-50); }
.mb-sw[data-tier="4"] { background-image: var(--dither-75); }
.mb-sw[data-tier="5"] { background: var(--ink); }
.mb-sw[data-tier="6"] { background: var(--signal); }

.mb-count { margin-top: var(--s3); }
.mb-act { margin-top: var(--s3); }

/* ---- wide: the panel prints in two columns so the whole block keeps the
   proportions of a banner, roughly 3 to 1, and a 1500 by 500 grab of the top of
   the page holds all of it. The words on the left, the count on the right. --- */
@media (min-width: 1100px) {
  .mb-in { min-height: 364px; }
  .mb-panel { width: min(700px, 50%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 272px); gap: var(--s4); align-items: start; }
  .mb-count { margin-top: 0; padding-left: var(--s4); border-left: var(--line-soft); align-self: stretch; }
}

/* ---- phone: the art becomes a band, the panel becomes the sheet under it --- */
@media (max-width: 860px) {
  .mb-in { display: block; padding: 0; min-height: 0; }
  .mb-art { position: static; display: block; }
  .mb-art img { height: auto; aspect-ratio: 3 / 1; object-position: center; }
  .mb-panel { width: 100%; border: 0; border-top: var(--line); box-shadow: none; padding: var(--s4); }
}
@media (max-width: 560px) {
  .mb { margin-bottom: var(--s5); }
  .mb-clock { font-size: var(--t-20); }
  .mb-art img { aspect-ratio: 5 / 2; }
}