/* Village Businesses (rebuilt 2026-09-29).
   Market day on the village main street: bunting strung across the opening, the filters as the
   street's signposts, and every family business a little shopfront with its own striped awning
   (it unrolls as the shop comes into view) and its family photo framed as the shop window, which
   catches the light when you look closer. Changing the filters settles the matching shops back into
   place. The invitation at the end is an empty shopfront waiting for the next family, a chalkboard
   and a note pinned beside it. Card markup and small-biz.js hooks are unchanged. Scoped to body.p-vb. */

.p-vb main :is(h1, h2, h3, h4) { color: var(--navy); }
.p-vb main a { text-decoration: none; }
.p-vb .container { max-width: 1200px; }

/* ---------- opening: bunting across the market ---------- */
.p-vb .vb-hero { padding-top: clamp(58px, 6vw, 84px); }
.p-vb .vb-bunting { position: absolute; top: 0; left: 0; width: 100%; height: clamp(46px, 5vw, 70px); z-index: 1; pointer-events: none; overflow: visible; }
.p-vb .vb-string { fill: none; stroke: #9d7128; stroke-width: 2; }
.p-vb .vb-flag { transform-box: fill-box; transform-origin: 50% 0; filter: drop-shadow(0 3px 2px rgba(60, 40, 10, .18)); }
.p-vb .vb-flag--gold { fill: var(--gold); }
.p-vb .vb-flag--brick { fill: #c9744e; }
.p-vb .vb-flag--blue { fill: var(--blue); }
.p-vb .vb-flag--sage { fill: var(--sage); }
.p-vb .vb-flag--navy { fill: var(--navy); }
.p-vb .vb-hero .lede { font-size: clamp(18px, 1.55vw, 20.5px); line-height: 1.6; }

/* ---------- the street ---------- */
.p-vb .vb-street { padding-top: clamp(40px, 5vw, 72px); }

/* filters: two street signs */
.p-vb .biz-filter {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px clamp(16px, 2.4vw, 28px);
  margin: 0 0 clamp(34px, 4vw, 52px);
  padding: 20px clamp(18px, 3vw, 32px) 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.p-vb .biz-filter::before {
  content: "";
  width: 86px;
  height: 86px;
  align-self: center;
  border-radius: 50%;
  background: url("/images/village/pictogram-wayfinder-192.webp") center 58% / 64px auto no-repeat, radial-gradient(circle at 50% 60%, var(--gold-soft), var(--cream) 72%);
  box-shadow: inset 0 0 0 6px var(--paper), 0 0 0 1.5px #ead9ae;
}
.p-vb .biz-filter > div { min-width: 0; }
.p-vb .biz-filter label {
  position: relative;
  display: inline-block;
  margin: 0 0 10px;
  padding: 7px 28px 7px 14px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--paper);
  background: var(--navy);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  border-radius: 6px 0 0 6px;
}
.p-vb .biz-filter > div:nth-of-type(2) label {
  padding: 7px 14px 7px 28px;
  background: var(--sage-ink);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
  border-radius: 0 6px 6px 0;
}
.p-vb .biz-filter select {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 2px solid #ddd3bb;
  border-radius: 14px;
  background-color: #fff;
  font: 600 16.5px/1.2 var(--f-body);
  color: var(--navy);
  cursor: pointer;
}
.p-vb .biz-filter select:hover { border-color: var(--navy); }
.p-vb .biz-count {
  align-self: center;
  margin: 18px 0 0;
  padding: 8px 14px 9px;
  font: 400 21px/1.1 var(--f-hand);
  color: var(--navy);
  background: #fbf0cf;
  border-radius: 4px;
  rotate: 2deg;
  box-shadow: 0 10px 14px -10px rgba(60, 40, 10, .5);
  white-space: nowrap;
}

/* the shops */
.p-vb .business-list { gap: clamp(22px, 2.6vw, 34px); align-items: stretch; }
.p-vb .business-list > .card {
  --aw: var(--navy);
  --frame: #c99a45;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 58px clamp(18px, 2vw, 24px) 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px 18px 10px 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  scroll-margin-top: calc(var(--osv-header-h) + 20px);
}
.p-vb .business-list > .card:nth-child(4n+2) { --aw: var(--brick); --frame: #9fb1ce; }
.p-vb .business-list > .card:nth-child(4n+3) { --aw: var(--sage-ink); --frame: #d7a43e; }
.p-vb .business-list > .card:nth-child(4n+4) { --aw: var(--blue-ink); --frame: #b8a07a; }
/* the awning */
.p-vb .business-list > .card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: repeating-linear-gradient(90deg, var(--aw) 0 36px, #f3ead3 36px 72px);
  filter: drop-shadow(0 4px 3px rgba(29, 44, 76, .2));
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 22px no-repeat, radial-gradient(circle 18px at 50% 0, #000 98%, transparent 100%) 0 22px / 36px 18px repeat-x;
  mask: linear-gradient(#000, #000) 0 0 / 100% 22px no-repeat, radial-gradient(circle 18px at 50% 0, #000 98%, transparent 100%) 0 22px / 36px 18px repeat-x;
  transform-origin: top;
}
/* the shop window: the family's photo in a painted frame */
.p-vb .business-list .biz-media {
  position: relative;
  margin: 0 0 18px;
  border: 7px solid var(--frame);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 10px 16px -12px rgba(29, 44, 76, .5);
}
.p-vb .business-list .biz-media img { border-radius: 4px; }
.p-vb .business-list .biz-media::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -70%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: rotate(18deg);
  pointer-events: none;
}
.p-vb .business-list .tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.p-vb .business-list .pill { background: var(--cream); color: var(--navy); border: 1px solid var(--line); font-weight: 700; }
.p-vb .business-list .pill--gold { background: var(--gold-soft); color: var(--gold-dark); border-color: rgba(180, 134, 31, .35); }
.p-vb .business-list .card h3 { font-size: clamp(21px, 1.8vw, 24px); line-height: 1.15; margin: 0 0 10px; }
.p-vb .business-list .card p { font-size: 16.5px; line-height: 1.58; color: var(--text); }
.p-vb .business-list .card a:not(.btn) { color: var(--navy); font-weight: 800; box-shadow: inset 0 -2px 0 rgba(215, 164, 62, .55); }
.p-vb .business-list .card a:not(.btn):hover { color: var(--gold-dark); }
.p-vb .business-list .card .note { font-size: 15px; color: var(--muted); margin-top: 6px; }
.p-vb .business-list .card .btn-row { margin-top: auto !important; padding-top: 14px; gap: 10px; }
.p-vb .business-list .card .btn-row .btn { white-space: normal; text-align: center; line-height: 1.25; }
.p-vb .biz-more {
  align-self: flex-start;
  gap: 8px;
  padding: 0 16px;
  margin: 2px 0 6px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--navy);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
}
.p-vb .biz-more::after { content: "+"; font-size: 18px; line-height: 1; color: var(--gold-dark); }
.p-vb .biz-more[aria-expanded="true"]::after { content: "\2212"; }
.p-vb .biz-more:hover { background: var(--gold); text-decoration: none; }

/* ---------- the invitation: an empty shopfront, a chalkboard, a pinned note ---------- */
.p-vb .vb-join { padding-top: clamp(56px, 7vw, 100px); }
.p-vb .vb-join-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
.p-vb .vb-vacant {
  --aw: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 76px clamp(22px, 4vw, 48px) clamp(30px, 4vw, 44px);
  text-align: center;
  background: var(--gold-soft);
  border-radius: var(--r-lg) var(--r-lg) 12px 12px;
  box-shadow: var(--shadow);
}
.p-vb .vb-awning {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: repeating-linear-gradient(90deg, var(--navy) 0 44px, #f3ead3 44px 88px);
  filter: drop-shadow(0 4px 3px rgba(29, 44, 76, .2));
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 26px no-repeat, radial-gradient(circle 22px at 50% 0, #000 98%, transparent 100%) 0 26px / 44px 22px repeat-x;
  mask: linear-gradient(#000, #000) 0 0 / 100% 26px no-repeat, radial-gradient(circle 22px at 50% 0, #000 98%, transparent 100%) 0 26px / 44px 22px repeat-x;
  transform-origin: top;
}
.p-vb .vb-vacant-plot {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #fff8e6, var(--paper) 72%);
  box-shadow: inset 0 0 0 7px var(--gold-soft), 0 0 0 1.5px rgba(180, 134, 31, .35);
}
.p-vb .vb-vacant-plot img { width: 92px; height: auto; }
.p-vb .vb-vacant h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; margin: 0 0 14px; }
.p-vb .vb-vacant p { font-size: 17.5px; line-height: 1.6; color: var(--text); max-width: 32em; margin: 0 auto 22px; }
.p-vb .vb-vacant .btn { font-size: 17.5px; min-height: 54px; padding: 15px 28px; }
.p-vb .vb-side { display: grid; gap: clamp(26px, 3vw, 36px); }
.p-vb .vb-chalk {
  padding: 26px 28px 24px;
  color: #fbf6e8;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .07), transparent 60%), #26332e;
  border-radius: 10px;
  box-shadow: inset 0 0 0 8px #a67a2c, inset 0 0 0 10px #8a6322, 0 20px 30px -18px rgba(29, 44, 76, .6);
  rotate: -1deg;
}
.p-vb main .vb-chalk h3 { color: #fbf6e8; font-family: var(--f-hand); font-weight: 400; font-size: 30px; letter-spacing: 0; margin: 0 0 8px; }
.p-vb .vb-chalk p { margin: 0; font-size: 16.5px; line-height: 1.6; color: #efe9da; }
.p-vb .vb-chalk a { color: var(--gold); font-weight: 800; }
.p-vb .vb-chalk a:hover { color: #f3d58c; }
.p-vb .vb-note {
  position: relative;
  margin: 0;
  padding: 30px 26px 24px;
  background: var(--paper);
  border: 0;
  border-radius: 6px;
  rotate: 1deg;
  box-shadow: 0 18px 26px -18px rgba(60, 40, 10, .6);
}
.p-vb .vb-note h4 { font-size: 20px; margin: 0 0 8px; }
.p-vb .vb-note p { font-size: 16px; line-height: 1.55; color: var(--text); margin: 0 0 14px; }
.p-vb .vb-note p:last-child { margin: 0; }
.p-vb .vb-pin {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--brick) 32% 100%);
  box-shadow: 0 5px 6px -2px rgba(0, 0, 0, .35);
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .p-vb .vb-flag { animation: vb-flutter 5s ease-in-out infinite; }
  /* a shop opens for the day: the awning unrolls as it comes into view */
  .js .p-vb .business-list > .card.osv-reveal::before { transform: scaleY(0); }
  .js .p-vb .business-list > .card.osv-reveal.in::before { transform: scaleY(1); transition: transform .8s .2s var(--spring); }
  .p-vb .business-list > .card { transition: translate .4s var(--spring), box-shadow .4s var(--ease); }
  .p-vb .business-list > .card:hover { translate: 0 -6px; box-shadow: var(--shadow-lift); }
  .p-vb .business-list > .card:hover::before, .js .p-vb .business-list > .card.osv-reveal.in:hover::before { transform: scaleY(1.18); transition: transform .5s var(--spring); }
  /* looking in the window catches the light */
  .p-vb .business-list .biz-media::after { transition: left .9s var(--ease); }
  .p-vb .business-list > .card:hover .biz-media::after { left: 130%; }
  .p-vb .business-list .biz-media img { transition: transform .7s var(--ease); }
  .p-vb .business-list > .card:hover .biz-media img { transform: scale(1.04); }
  /* after the filters change, the shops that match settle back into place */
  .p-vb .business-list > .card.vb-arrive { animation: vb-arrive .6s var(--ease) both; }
  .p-vb .biz-count.vb-arrive { animation: vb-sign .6s var(--spring); }
  .p-vb .vb-note .vb-pin { transition: transform .3s; }
  .p-vb .vb-note:hover .vb-pin { animation: vb-wiggle .6s var(--ease); }
  .p-vb .vb-awning { transition: transform .5s var(--spring); }
  .p-vb .vb-vacant:hover .vb-awning { transform: scaleY(1.16); }
  .p-vb .vb-vacant-plot img { transition: transform .6s var(--spring); }
  .p-vb .vb-vacant:hover .vb-vacant-plot img { transform: translateY(-6px) rotate(-3deg); }
}
@keyframes vb-flutter { 50% { transform: rotate(6deg); } }
@keyframes vb-arrive { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vb-sign { 30% { rotate: -3deg; scale: 1.08; } 100% { rotate: 2deg; scale: 1; } }
@keyframes vb-wiggle { 30% { transform: rotate(-16deg); } 60% { transform: rotate(12deg); } }

/* ---------- widths ---------- */
@media (min-width: 701px) and (max-width: 1099px) {
  .p-vb .grid-2.business-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .p-vb .biz-filter { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .p-vb .biz-count { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }
  .p-vb .vb-join-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 700px) {
  .p-vb .grid-2.business-list { grid-template-columns: 1fr; }
  .p-vb .biz-filter { grid-template-columns: 1fr 1fr; padding: 18px 16px 20px; }
  .p-vb .biz-filter::before { display: none; }
}
@media (max-width: 480px) {
  .p-vb .biz-filter { grid-template-columns: 1fr; gap: 14px; }
  .p-vb .business-list > .card { padding-inline: 16px; }
  .p-vb .business-list .card .btn-row .btn { flex: 1 1 100%; justify-content: center; }
  .p-vb .vb-note { rotate: 0deg; }
}
@media print {
  .p-vb .vb-bunting, .p-vb .business-list > .card::before, .p-vb .vb-awning, .p-vb .vb-pin { display: none; }
}