/* Find a DJ — the booking search. Loaded after app.css on /find only. */
.find { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 4rem; }

/* ---------- the question + the controls ---------- */
.find-hero { margin: 0 calc(-1 * clamp(1rem, 4vw, 2rem)); padding: clamp(1.6rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 0; background: var(--ink); color: var(--paper); border-radius: 0 0 var(--radius) var(--radius); }
.find-hero-inner { max-width: 1180px; margin: 0 auto 1.4rem; }
.find-hero .eyebrow { color: #E9873F; }
.find-hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); color: #fff; margin-bottom: .6rem; }
.find-hero h1 .find-when-word, .find-hero h1 .find-where-word { color: #E9873F; }
.find-hero .lede { color: #bcb6aa; max-width: 620px; margin: 0; font-size: 1.02rem; }

.find-form { max-width: 1180px; margin: 0 auto; background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem 1.1rem; transform: translateY(1.6rem); }
.find-controls { display: grid; grid-template-columns: minmax(430px, 2fr) repeat(3, minmax(130px, 1fr)) auto auto; gap: .8rem; align-items: end; }
.find-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.find-field label, .find-when legend { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; color: var(--ink-3); font-weight: 700; }
.find-field select { width: 100%; }
.find-when { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.find-when legend { padding: 0; margin-bottom: .3rem; }
.seg { display: flex; background: var(--paper-2); padding: .25rem; border-radius: 999px; gap: .15rem; }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: .55rem .45rem; border-radius: 999px; font-weight: 600; font-size: .86rem; color: var(--ink-2); white-space: nowrap; transition: background .15s, color .15s; }
.seg label:hover span { color: var(--ink); }
.seg label:has(input:checked) span { background: var(--ink); color: var(--paper); }
.seg label:has(input:focus-visible) span { box-shadow: 0 0 0 3px rgba(21, 19, 15, .18); }
.find-window { margin: 0; min-height: 1.2em; }
.find-verified { align-self: end; margin-bottom: .1rem; user-select: none; }
.find-verified input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.find-verified:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.find-verified:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(21, 19, 15, .18); }
.find-go { align-self: end; }
html.js .find-go { display: none; }                  /* with JS every control searches on change */

.find-later { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--paper-2); }
html.js .find-later[data-open="false"] { display: none; }
.find-later-label { font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.find-later .chips { gap: .35rem; }
.find-day { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-2); margin-left: auto; }
.find-day input { width: auto; padding: .45rem .7rem; font-size: .9rem; }

/* ---------- results ---------- */
.find-results { padding-top: 3.4rem; }
.find-results[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity .2s; }
.find-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.find-summary h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin: 0; }
.find-summary h2 b { color: var(--accent); }
.find-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.find-grid-sm { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
.find-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s; }
.find-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.find-cover { position: relative; display: block; aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--accent) 75%, #000) 0%, #121212 100%); }
.find-card-sm .find-cover { aspect-ratio: 16 / 10; }
.find-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.find-cover .kit-initial { font-size: 3.4rem; }
.find-badge { position: absolute; top: .7rem; left: .7rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.find-play { position: absolute; right: .7rem; bottom: .7rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); transition: transform .15s var(--ease), background .15s; }
.find-play:hover { transform: scale(1.06); }
.find-play.on { background: var(--accent); color: #fff; }
.find-play .bi { width: 18px; height: 18px; fill: currentColor; }
.find-body { padding: .95rem 1.05rem 1.05rem; display: flex; flex-direction: column; gap: .3rem; }
.find-body h3 { font-size: 1.2rem; margin: 0; }
.find-body h3 a { color: inherit; }
.find-meta { margin: 0; }
.find-free { margin: .25rem 0 0; font-size: .86rem; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.find-free b { font-weight: 700; margin-right: .1rem; }
.find-day-chip { display: inline-block; padding: .12rem .5rem; border-radius: 999px; background: var(--ok-soft); color: #14603D; font-weight: 600; font-size: .78rem; }
.find-genres { margin-top: .2rem; }
.find-genres .chip-sm { margin-left: 0; }
.find-card .card-stats { margin: .35rem 0 0; font-size: .86rem; color: var(--ink-2); display: flex; gap: .9rem; }
.find-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .7rem; }
.find-actions .btn-accent { white-space: nowrap; }
.find-actions form { display: inline; }

.find-empty { background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); padding: 2.2rem 1.4rem; text-align: center; margin-bottom: 1.6rem; }
.find-empty h3 { font-size: 1.3rem; }
.find-empty p { margin-bottom: 1rem; }
.find-empty-actions { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }

.find-more { margin-top: 2.2rem; }
.find-more-title { font-size: 1.15rem; margin: 0 0 .8rem; }

/* ---------- for artists ---------- */
.find-foot { margin-top: 3rem; }
.find-foot-card { background: var(--paper-2); border-radius: var(--radius); padding: 1.6rem 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.find-foot-card h2 { font-size: 1.5rem; margin-bottom: .4rem; }
.find-foot-card p { margin: 0; max-width: 560px; }
.find-foot-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- phones ---------- */
@media (max-width: 1140px) {
  .find-controls { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .find-when { grid-column: 1 / -1; }
  .find-go { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 720px) {
  .find-controls { grid-template-columns: 1fr 1fr; }
  .find-verified { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 720px) {
  .find-hero { border-radius: 0; }
  .find-form { padding: .9rem .9rem 1rem; transform: translateY(1.2rem); }
  .seg span { padding: .5rem .3rem; font-size: .8rem; }
  .find-day { margin-left: 0; width: 100%; }
  .find-results { padding-top: 2.8rem; }
  .find-grid { grid-template-columns: 1fr; }
  .find-grid-sm { grid-template-columns: 1fr 1fr; }
  .find-card-sm .find-body { padding: .7rem .8rem .8rem; }
  .find-card-sm h3 { font-size: 1rem; }
  .find-foot-card { padding: 1.3rem 1.2rem; }
  .find-foot-actions { width: 100%; }
  .find-foot-actions .btn { flex: 1; text-align: center; }
}
@media (max-width: 420px) {
  .seg { flex-wrap: wrap; }
  .seg label { flex: 1 1 45%; }
}
@media print { .find-hero, .find-form, .find-foot, .find-actions { display: none; } }