/*
 * js/pages/explore/explore.css: what Explore adds on top of pons.css and css/ponduo.css. The launch card, the
 * section panels, the sort pill and the spotlight are pons's own classes; this file only fills what a static page
 * needs (the spotlight's position, which pons sets from GSAP, the chips wrapping on phones instead of widening the
 * page, the honest empty states).
 */

/* the sort and window chips wrap on phones (pons lets them overflow to 438px at 390) */
@media (max-width: 720px) {
  .launch-explore-filters { gap: 8px; }
  .launch-explore-filter-group.tabs-pill .tabs-list { flex-wrap: wrap; overflow: visible; row-gap: 2px; }
  .launch-explore-filter-group.tabs-pill .tabs-list:has(> .tabs-tab:nth-of-type(4)) { border-radius: 18px; }
}

.launch-explore-grid { transition: opacity var(--duration-fast) var(--ease-out); }
.launch-explore-grid.is-switching { opacity: .55; }
.launch-explore-pagination { margin-top: 16px; justify-content: center; }
.launch-explore-empty { padding: 4px 2px; }
.launch-card-mcap { cursor: help; }
.launch-card-badges { flex-wrap: wrap; }

/* the honest states: not deployed, nothing yet, could not read */
.ponduo-explore-note { padding: 28px 28px 30px; display: grid; gap: 14px; justify-items: start; }
.ponduo-explore-note h1, .ponduo-explore-note h2 { font-size: 24px; font-weight: 400; margin: 0; letter-spacing: var(--tracking); }
.ponduo-explore-note p { color: var(--text-muted); font-size: 14px; line-height: 1.55; max-width: 56ch; margin: 0; }
.ponduo-explore-note .ui-btn { width: auto; padding: 0 18px; }
@media (max-width: 768px) { .ponduo-explore-note { padding: 22px 20px 24px; } }

/* ------------------------------------------------------------------ spotlight (pons positions it from GSAP) */
.spotlight-backdrop { display: block; }
.spotlight-panel { left: 0; right: 0; margin: 0 auto; top: 12vh; max-height: min(76vh, 720px); display: flex; flex-direction: column; }
@media (max-width: 620px) { .spotlight-panel { top: 12px; max-height: calc(100dvh - 24px); } }
.spotlight-results { overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
.spotlight-empty { padding: 18px 20px 20px; color: var(--text-muted); font-size: 14px; }
.spotlight-result-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spotlight-result-logo .ui-icon { opacity: .55; }
.spotlight-backdrop.ponduo-spot-enter { animation: ponduo-spot-fade .28s cubic-bezier(.22, 1, .36, 1) both; }
.spotlight-backdrop.is-leaving { opacity: 0; transition: opacity .22s ease; }
@keyframes ponduo-spot-fade { from { opacity: 0; } to { opacity: 1; } }
.spotlight-filter-options { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .spotlight-backdrop.ponduo-spot-enter { animation: none; } }

/* phones: the 44px touch target for the note's button */
@media (max-width: 768px) { .ponduo-explore-note .ui-btn, .launch-explore-empty .ui-btn { min-height: 44px; } }

/* the state badge (Genesis, Sold out, Upcoming) reads on light pictures too: pons's dark chip in both themes */
html[data-theme=dark] .launch-card-grad-badge { background: #111111c2; }

/* ------------------------------------------------------------------ before deploy: what Ponduo is, example cards */
.ponduo-explore-soon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 28px 40px; align-items: center; padding: 40px 40px 44px; }
.ponduo-soon-copy { display: grid; gap: 14px; justify-items: start; }
.ponduo-soon-kicker { color: var(--text-subtle); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.ponduo-soon-copy h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 400; letter-spacing: -.02em; line-height: 1.06; margin: 0; }
.ponduo-soon-copy p { color: var(--text-muted); font-size: 15px; line-height: 1.6; max-width: 50ch; margin: 0; }
.ponduo-soon-copy .ponduo-soon-line { color: var(--text-primary); }
.ponduo-soon-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ponduo-soon-actions .ui-btn { width: auto; padding: 0 18px; }
.ponduo-soon-cards { list-style: none; margin: 0; padding: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ponduo-soon-cards li { display: grid; gap: 8px; justify-items: center; }
.ponduo-soon-cards li:nth-child(1) { transform: rotate(-4deg) translateY(10px); }
.ponduo-soon-cards li:nth-child(2) { transform: translateY(-6px); }
.ponduo-soon-cards li:nth-child(3) { transform: rotate(4deg) translateY(10px); }
.ponduo-soon-cards svg { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 14px 34px #00000059; }
.ponduo-soon-cards small { color: var(--text-subtle); font-size: 11px; }
@media (max-width: 900px) {
  .ponduo-explore-soon { grid-template-columns: minmax(0, 1fr); padding: 26px 22px 30px; }
  .ponduo-soon-cards { max-width: 440px; width: 100%; justify-self: center; }
}
@media (max-width: 768px) { .ponduo-soon-actions .ui-btn { min-height: 44px; } }

/* ------------------------------------------------------------------ Trending: the $PONDUO coin card */
.ponduo-coin-out { color: var(--text-subtle); flex: none; }