/* Drop cards and rails (js/cards.js), shared by /drops, the home page and /me. Apple Store tiles: the art on
   white in a grey card, the name, a few muted lines, a thin bar of how many are minted. No color but the art's. */

/* A grid of cards: 4 across, 3 on a tablet, 2 on a phone. */
.dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.dcard { display: flex; flex-direction: column; min-width: 0; background: var(--tint); border-radius: var(--radius); padding: 12px; color: var(--ink); text-decoration: none; transition: transform .3s cubic-bezier(.32, .72, 0, 1), box-shadow .3s; }
@media (hover: hover) { .dcard:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .08); } }
.dcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* The art box is white and square; js/cards.js fitArt sizes the canvas in it to whole screen pixels. */
.dcard .dcard-art { aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: var(--radius-s); overflow: hidden; }
.dcard .dcard-art canvas.art { width: 100%; }
.dcard .dcard-body { display: flex; flex-direction: column; min-width: 0; padding: 14px 6px 4px; }
.dcard .dcard-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 21px; margin-bottom: 8px; }
.dcard .dcard-tick { font-size: var(--t-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.dcard .dcard-name { margin: 0; font-size: var(--t-l); font-weight: 600; letter-spacing: -.022em; line-height: 1.24; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dcard .dcard-sub { margin: 2px 0 0; font-size: var(--t-s); color: var(--muted); }
.dcard .dcard-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 12px 0 0; }
.dcard .dcard-price:empty { display: none; }
.dcard .dcard-price b { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; }
.dcard .dcard-price span { font-size: var(--t-s); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dcard .dcard-price span:first-child { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; color: var(--ink); } /* ETH alone, with no dollar rate */
/* How many of the 100 are minted: a 2 px bar, then the count. */
.dcard .dcard-bar { display: block; height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; margin-top: 14px; }
.dcard .dcard-bar i { display: block; height: 100%; border-radius: 1px; background: var(--ink); transition: width .8s ease; }
.dcard .dcard-count { margin: 6px 0 0; font-size: var(--t-s); color: var(--muted); font-variant-numeric: tabular-nums; }

/* While the drops load. */
.dcard.skeleton { transform: none !important; box-shadow: none !important; }
.dcard.skeleton .dcard-art, .dcard.skeleton b, .dcard.skeleton span { background: var(--tint-2); animation: pulse 1.2s ease-in-out infinite; }
.dcard.skeleton b, .dcard.skeleton span { display: block; height: 14px; border-radius: 7px; }
.dcard.skeleton b { width: 64%; height: 18px; margin-top: 6px; }
.dcard.skeleton span { width: 40%; margin-top: 10px; }

/* A rail: a heading, See all, arrows on a desktop, and the cards in a row that scrolls sideways and snaps. */
.rail { margin-top: 72px; }
.rail .rail-head { display: flex; align-items: center; gap: 12px 20px; margin-bottom: 20px; }
.rail .rail-head h2 { margin: 0; }
.rail .rail-all { margin-left: auto; font-size: var(--t-m); color: var(--ink); text-decoration: none; white-space: nowrap; }
.rail .rail-all:hover { text-decoration: underline; }
.rail .rail-arrows { display: none; gap: 8px; }
.rail .rail-arrows button { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.rail .rail-arrows button:disabled { opacity: .35; cursor: default; }
.rail .rail-arrows svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail.rail-fits .rail-arrows { display: none; }
@media (hover: hover) and (min-width: 641px) { .rail:not(.rail-fits) .rail-arrows { display: flex; } }
/* The padding gives the hover lift and its shadow room inside the scroller. */
.rail .rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 8px 24px; margin-block: -8px -24px; }
.rail .rail-track::-webkit-scrollbar { display: none; }
.rail .rail-track > * { scroll-snap-align: start; }

@media (max-width: 980px) {
  .dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail .rail-track { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
}
@media (max-width: 640px) {
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dcard { border-radius: 18px; padding: 8px; }
  .dcard .dcard-art { border-radius: 12px; }
  .dcard .dcard-body { padding: 12px 4px 4px; }
  /* The countdown under the chip, so the upcoming cards in a row line up whatever the time left. */
  .dcard .dcard-tick { flex-basis: 100%; }
  .rail { margin-top: 56px; }
  /* Two cards and a bit of the third, from one edge of the screen to the other. */
  .rail .rail-track { grid-auto-columns: 44%; gap: 12px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .dcard { transition: none; } .dcard:hover { transform: none; } }