/* Vendors page: booked cards and the "still to book" cards, each crowned with a fine-line mark. */

.vd-section { margin-top: 3rem; }
.vd-heading { display: flex; align-items: center; gap: 1.25rem; font: 400 0.72rem var(--ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.4rem; }
.vd-heading::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.vd-sub { font-size: 0.88rem; margin: 0; }

.vd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3rem 1.25rem; padding-top: 2.6rem; }

.vd-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 3.1rem 1.4rem 1.3rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.vd-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .vd-card, .vd-card:hover { transition: none; transform: none; } }

/* The crown: a white disc with a hairline ring inside, sitting on the card's top edge. */
.vd-badge {
  position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; background: var(--white); border: 1px solid var(--line-strong); color: var(--accent-deep);
}
.vd-badge::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--line); pointer-events: none; }

.vd-eyebrow { font: 400 0.66rem var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0; }
.vd-name { font: 400 1.65rem/1.15 var(--display); margin: 0.1rem 0 0; overflow-wrap: anywhere; }
.vd-contact { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }
.vd-when { font-size: 0.86rem; color: var(--muted); margin: 0; }
.vd-when.is-late { color: var(--accent-deep); font-style: italic; }
.vd-note { font-size: 0.76rem; line-height: 1.5; color: var(--muted); margin: 0.2rem 0 0; max-width: 24ch; }
.vd-money { font-size: 0.84rem; color: var(--ink-soft); margin: 0.2rem 0 0; }
.vd-links { display: flex; gap: 1.1rem; justify-content: center; margin: 0.3rem 0 0; }
.vd-links a { font: 400 0.7rem var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid transparent; }
.vd-links a:hover { border-bottom-color: currentColor; }

.vd-shortlist { list-style: none; margin: 0.5rem 0 0; padding: 0; width: 100%; text-align: left; font-size: 0.88rem; }
.vd-shortlist li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.vd-shortlist a { text-decoration: none; }
.vd-shortlist form { margin: 0; }

.vd-actions { margin-top: auto; padding-top: 1rem; display: grid; gap: 0.35rem; width: 100%; }
.vd-card > .vd-action { margin-top: auto; }
.vd-action {
  display: block; padding: 0.7rem 0.5rem 0.2rem; border-top: 1px solid var(--line); text-decoration: none;
  font: 400 0.74rem var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
}
.vd-booked > .vd-action { width: 100%; margin-top: auto; padding-top: 0.9rem; }
.vd-action:hover { color: var(--accent-deep); }
.vd-action-quiet { font-size: 0.8rem; color: var(--muted); }
.vd-suggest { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.vd-suggest:hover { border-bottom-color: currentColor; }

.vd-empty { margin-top: 1.25rem; padding: clamp(2rem, 5vw, 3rem) 1.5rem; text-align: center; background: var(--white); border: 1px dashed var(--line-strong); border-radius: 18px; }
.vd-empty-title { font: 400 1.8rem/1.2 var(--display); margin: 0 0 0.5rem; }
.vd-empty .muted { max-width: 46ch; margin: 0 auto 1.25rem; }

.vd-add { scroll-margin-top: 1rem; }

/* Public vendor directory (/vendors) reuses the cards above. */
.dir { max-width: 1080px; margin: 0 auto; }
.dir .eyebrow a { color: inherit; text-decoration: none; }
.dir-cat { text-decoration: none; color: inherit; }
.dir-cat .vd-name { font-size: 1.5rem; }
.dir .vd-empty { position: relative; padding-top: 3.5rem; margin-top: 3rem; }
.dir-badge { top: -31px; }
.dir-blurb { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 0.4rem 0 0; }
.dir-supplier .vd-action { margin-top: auto; width: 100%; padding-top: 0.9rem; }