/* Single vendor page (Bricks template 4269): light header, About / Find this vendor (left), upcoming market cards
   and a Connect / Share card (right). Same structure as market-single.css, light colours. ACSS tokens only.
   Bricks blocks default to flex columns with a content gap, so blocks here set their own gap.
   Market cards: market-card.css. */

/* ---------- Buttons: ACSS button classes (btn--primary, btn--outline; owner decision 11 Oct 2026), set on the Bricks
   elements by staging-scripts/apply-vendor-single-staging.php. The styles below are only for the map "Reset" button,
   a signed Bricks code element that can't take global classes. ---------- */
.vendor-single__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-xs) / 2);
  min-block-size: calc(var(--space-xs) * 3.25);
  padding: 0 var(--space-s);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-s);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.vendor-single__button--outline {
  border-color: var(--neutral-light);
  background: var(--white);
  color: var(--text-dark, var(--neutral-ultra-dark));
}
.vendor-single__button--outline:hover {
  background: var(--neutral-ultra-light);
  color: var(--text-dark, var(--neutral-ultra-dark));
}
.vendor-single__hero :is(a, button):focus-visible,
.vendor-single__body :is(a, button):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* ---------- Header (light) ---------- */
.vendor-single__hero {
  padding-block: var(--space-m) var(--space-xl);
  background: var(--neutral-ultra-light);
  color: var(--text-dark, var(--neutral-ultra-dark));
}
.vendor-single__hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-l);
}
.vendor-single__hero-text {
  gap: var(--space-s);
  min-inline-size: 0;
}
.vendor-single__eyebrow {
  margin: 0 0 calc(var(--space-xs) / 3 - var(--space-s)); /* sits close to the name (cancels most of the column gap) */
  line-height: 1.2;
  color: var(--primary-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vendor-single__title {
  margin: 0;
  font-size: var(--h1);
  line-height: var(--heading-line-height);
}
.vendor-single__subtitle {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  color: var(--text-dark-muted);
  font-size: var(--text-s);
}
.vendor-single__subtitle > * + *::before {
  content: "·";
  margin-inline: calc(var(--space-xs) / 2);
}
/* "3 locations" leads the line in bold teal. */
.vendor-single__highlight {
  color: var(--primary-dark);
  font-weight: 700;
}
.vendor-single__tags {
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(var(--space-xs) / 2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vendor-single__tags > li {
  inline-size: auto; /* Bricks blocks are full width by default */
}
.vendor-single__tag {
  display: inline-flex;
  padding: calc(var(--space-xs) / 4) var(--space-xs);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-dark, var(--neutral-ultra-dark));
  font-size: var(--text-xs);
  text-decoration: none;
}
.vendor-single__tag:hover {
  border-color: var(--primary-dark);
  color: var(--primary-dark);
}
.vendor-single__actions {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Photos: the original Gallery Bravo layout; a single photo shows at 4:3; no photo shows the initial. */
.vendor-single__media {
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.vendor-single__media .gallery-bravo[data-grid-gallery-images="1"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
}
.vendor-single__media .gallery-bravo[data-grid-gallery-images="1"] > li:first-child {
  aspect-ratio: 4 / 3;
}
/* One photo: no named areas, so place it normally (otherwise it asks for "featured" and lands in a third
   implicit column) and drop the figure's 4px inset so it lines up with the content edge. */
.vendor-single__media .gallery-bravo[data-grid-gallery-images="1"] > * {
  grid-area: auto;
}
.vendor-single__media .gallery-bravo[data-grid-gallery-images="1"] :is(figure, img) {
  padding: 0;
}
.vendor-single__media:has(.gallery-bravo) .vendor-single__media-empty {
  display: none;
}
.vendor-single__media-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  /* A slightly darker grey than the light header (owner request): the coloured initial sits on a neutral box, like
     the market page's darker box on its dark header. */
  background: var(--neutral-light-trans-40);
}
/* Owner's "Edit my listing" above the eyebrow. */
.vendor-single__owner {
  margin-block-end: var(--space-xs);
}
.vendor-single__initial {
  display: grid;
  place-items: center;
  inline-size: calc(var(--space-xl) * 1.5);
  block-size: calc(var(--space-xl) * 1.5);
  border-radius: var(--radius-50);
  background: var(--sv-initial-bg, var(--primary)); /* owner's avatar colour (inc/owner-colors.php) */
  color: var(--sv-initial-fg, var(--white));
  font-size: var(--h2);
}

/* Breadcrumb (site header template): blended into the light header. */
main > .brxe-section:has(.brxe-breadcrumbs) {
  padding-block-start: var(--space-s);
  background: var(--neutral-ultra-light);
}
main .brxe-breadcrumbs {
  padding-inline: 0;
  background: transparent;
}
main .brxe-breadcrumbs a.item {
  text-decoration: none;
}
main .brxe-breadcrumbs a.item:hover {
  color: var(--primary-ultra-dark);
}

/* ---------- Body ---------- */
.vendor-single__body {
  padding-block: var(--space-xl);
}
.vendor-single__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-xl);
}
.vendor-single__main {
  gap: var(--space-xl);
  min-inline-size: 0;
  overflow-wrap: anywhere; /* long pasted URLs must not widen the page on phones */
}
.vendor-single__section {
  gap: var(--space-s);
}
.vendor-single__section-head {
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
}
.vendor-single__heading {
  margin: 0;
  font-size: var(--h3);
}
.vendor-single__heading--small {
  font-size: var(--h4);
}
.vendor-single__count {
  display: grid;
  place-items: center;
  min-inline-size: 2em; /* a circle for 1–2 digits, a pill beyond */
  block-size: 2em;
  padding-inline: calc(var(--space-xs) / 2);
  border-radius: var(--radius-circle);
  background: var(--primary-ultra-light);
  color: var(--primary-dark);
  font-size: var(--text-s);
  font-weight: 700;
}
.vendor-single__posted {
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-dark-muted);
  font-size: var(--text-s);
}
.vendor-single__posted :is(.sidavatar, .sidavatar-fallback) {
  display: grid;
  place-items: center;
  inline-size: calc(var(--space-xs) * 2.25);
  block-size: calc(var(--space-xs) * 2.25);
  border-radius: var(--radius-50);
  color: var(--white);
  font-size: var(--text-s);
  object-fit: cover;
}
.vendor-single__description {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--text-dark, var(--neutral-ultra-dark));
  font-size: var(--text-m);
  line-height: 1.7;
}
.vendor-single__description > p {
  margin: 0;
}

/* Find this vendor: one boxed module, map on top and the numbered locations below
   (a click moves the map: theme single-vendor-map.js). */
.vendor-single__locator {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-xl);
  background: var(--white);
}
.vendor-single__locator > * {
  inline-size: 100%;
}
.vendor-single__map {
  gap: 0;
}
/* Square map and tiles inside the module (site image styles round every img, which also rounds the map tiles). */
.vendor-single__map :is(.wpgb-map-facet, .leaflet-tile) {
  border-radius: 0;
}
.vendor-single__locations {
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--neutral-light);
  list-style: none;
}
.vendor-single__location {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: calc(var(--space-xs) / 2) var(--space-s);
  line-height: 1.35;
}
.vendor-single__location + .vendor-single__location {
  border-block-start: 1px solid var(--neutral-light);
}
.vendor-single__location.address-active {
  background: var(--primary-ultra-light);
}
.vendor-single__location-number {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: var(--radius-50);
  background: var(--danger-semi-dark);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
}
.vendor-single__location-show {
  flex: 1;
  min-block-size: calc(var(--space-xs) * 3.25);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-dark, var(--neutral-ultra-dark));
  font: inherit;
  font-size: var(--text-s);
  font-weight: 400;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}
.vendor-single__location-show:hover {
  color: var(--primary-dark);
}
.vendor-single__directions {
  flex: none;
  color: var(--primary-dark);
  font-size: var(--text-s);
  font-weight: 500;
  text-decoration: none;
  padding-block: calc(var(--space-xs) / 3); /* 24px+ target (WCAG 2.5.8) */
}
.vendor-single__directions:hover {
  color: var(--primary-ultra-dark);
}
/* Reset map (theme button #custom-reset, wired by single-vendor-map.js): right end of the heading row. */
.vendor-single__reset {
  margin-inline-start: auto;
}

.vendor-single__report {
  align-self: flex-start; /* last item in the sidebar */
  font-size: var(--text-s);
}

/* ---------- Sidebar ---------- */
.vendor-single__aside {
  gap: var(--space-l);
  min-inline-size: 0;
}
.vendor-single__markets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vendor-single__markets > li {
  list-style: none;
}
.vendor-single__markets .market-card__city {
  margin-block-end: var(--space-s);
}
.vendor-single__card {
  gap: var(--space-s);
  padding: var(--space-s);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--neutral-ultra-light) 50%, var(--white));
}
.vendor-single__label {
  margin: 0;
  color: var(--primary-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vendor-single__connect {
  gap: calc(var(--space-xs) / 2);
}
/* The social list is always output; hide it when the vendor has no links. */
.vendor-single__socials:not(:has(li)) {
  display: none;
}
/* Contact / Log in / Call / Website: full-width stacked buttons in the Connect card. */
.vendor-single__card .vendor-single__actions {
  flex-direction: column;
  align-items: stretch;
}
.vendor-single__card .vendor-single__actions:not(:has(a, button)) {
  display: none;
}
/* Room between the buttons and the social icons (only when there are buttons). */
.vendor-single__actions:has(a, button) + .vendor-single__socials {
  margin-block-start: var(--space-xs);
}
.vendor-single__socials {
  display: flex;
  flex-direction: row; /* the list is a Bricks block (column by default) */
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vendor-single__socials > li {
  inline-size: auto; /* Bricks blocks are full width by default */
}
.vendor-single__social {
  display: grid;
  place-items: center;
  inline-size: calc(var(--space-xs) * 3.25);
  block-size: calc(var(--space-xs) * 3.25);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-50);
  background: var(--white);
  color: var(--text-dark, var(--neutral-ultra-dark));
}
.vendor-single__social:hover {
  background: var(--neutral-ultra-light);
  color: var(--primary-dark);
}
.vendor-single__share {
  gap: calc(var(--space-xs) / 2);
}
/* Share icons: 44px touch targets; the row is pulled back so the first icon lines up with the label. */
.vendor-single__share a {
  display: grid;
  place-items: center;
  inline-size: calc(var(--space-xs) * 3.25);
  block-size: calc(var(--space-xs) * 3.25);
  color: var(--text-dark, var(--neutral-ultra-dark));
}
.vendor-single__share .brxe-post-sharing {
  gap: 0;
  margin-inline-start: calc(var(--space-xs) * -.8);
}

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
  .vendor-single__hero-inner {
    grid-template-columns: var(--grid-2);
  }
  /* Tablets keep two columns (sidebar about 40%). Both columns sticky: only the shorter one moves. */
  .vendor-single__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-l);
  }
  .vendor-single__main,
  .vendor-single__aside {
    position: sticky;
    inset-block-start: calc(var(--header-height, 0px) + var(--space-m));
  }
}
@media (min-width: 992px) {
  .vendor-single__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--width-s) * 1.45));
    gap: var(--space-xl);
  }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  .vendor-single__location {
    flex-wrap: wrap;
  }
}

/* ---------- Phones: Connect card right after the header, then About / Find, then markets and Report ---------- */
@media (max-width: 767px) {
  .vendor-single__aside {
    display: contents;
  }
  .vendor-single__card {
    order: -1;
  }
  .vendor-single__aside > :not(.vendor-single__card) {
    order: 1;
  }
}

/* Share in the header, under the category tags: label and icons on one row. */
.vendor-single__hero .vendor-single__share {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-xs);
}
.vendor-single__hero .vendor-single__share .brxe-post-sharing {
  margin-inline-start: calc(var(--space-xs) * -.5);
}
/* The Connect card only holds the contact buttons and socials now: hide it when the vendor has neither. */
.vendor-single__card:not(:has(a, button)) {
  display: none;
}