/* Homeschool Town — business claim flow (/ClaimBusiness) and standalone business
   profile (/businesses/{slug}). Brand register, same warm system as /Share — reuses
   .field/.picks/.picker from submit.css for the create-new form. */

.claim { max-width: 40rem; margin-inline: auto; }

/* ================= Search / claim-or-create picker ================= */
.claim-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-7); }
.claim-row {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  background: var(--surface); background-image: var(--grad-surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
}
.claim-row__main { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.claim-row__title { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; color: var(--ink); }
.claim-row__addr { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--t-sm); color: var(--muted); }
.claim-row__action { flex: none; }
.claim-row__status {
  flex: none; display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--t-sm); font-weight: 500; color: var(--muted);
}
.claim-row__status--done { color: var(--primary); }
.claim-row__status--pending { color: var(--warning); }
.claim-empty {
  list-style: none; padding: var(--s-6); text-align: center; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
}

.claim-newcta {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center;
  padding: var(--s-7) var(--s-5); border-top: 1px solid var(--border);
}
.claim-newcta p { color: var(--muted); }

/* ================= Claim confirmation (read-only summary + lean form) ================= */
.claim-confirm { display: flex; flex-direction: column; gap: var(--s-5); }
.claim-summary {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); background: var(--clay-tint); border: 1px solid var(--border-warm); border-radius: var(--r-lg);
}
.claim-summary__title { font-size: var(--t-h2); }
.claim-summary__addr { display: inline-flex; align-items: center; gap: 0.4em; color: var(--ink-soft); font-size: var(--t-sm); }
.claim-confirm__note { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; max-width: 56ch; }

/* ================= Claim conflict (already claimed / pending review) ================= */
.claim-conflict {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-7) var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
}
.claim-conflict__icon { color: var(--primary); font-size: 2rem; line-height: 1; }
.claim-conflict h2 { font-size: var(--t-h2); max-width: 28ch; }
.claim-conflict p { color: var(--muted); max-width: 50ch; line-height: 1.55; }
.claim-conflict__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }

.claim-photo-note {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-bottom: var(--s-6); padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  color: var(--muted); font-size: var(--t-sm); line-height: 1.5;
}
.claim-photo-note .icon { flex: none; color: var(--clay); font-size: 1.1em; margin-top: 0.1em; }

.claim-entry { display: inline-flex; margin-top: var(--s-7); }

/* ================= Business panel (Place.cshtml, claimed-alongside) ================= */
.biz-panel {
  margin-top: var(--s-7); padding: clamp(var(--s-5), 4vw, var(--s-6));
  background: var(--clay-tint); border: 1px solid var(--border-warm); border-radius: var(--r-xl);
}
.biz-panel__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); flex-wrap: wrap; }
.biz-panel__head h2 { font-size: var(--t-h3); margin: 0; }
.biz-panel__manage { margin-left: auto; }
.biz-panel__note { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.5; max-width: 56ch; margin-bottom: var(--s-4); }
/* ---- Business photo filmstrip (scrapbook prints) ----
   Each shot is a "photo print": white matte, faint tilt, warm resting shadow. The
   resting shadow is deliberate — prints sit ON the scrapbook page like map pins sit
   on terrain (Floating-Marker Exception), not like content cards. Click opens the
   lightbox below; biz-gallery.js wires it up. */
.biz-gallery { position: relative; margin-block: var(--s-5); }
.biz-gallery__strip {
  display: flex; gap: var(--s-4); overflow-x: auto; padding: var(--s-2) var(--s-1) var(--s-3);
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.biz-gallery__strip::-webkit-scrollbar { display: none; }
.biz-gallery__shot {
  flex: none; scroll-snap-align: start; cursor: zoom-in;
  padding: var(--s-2) var(--s-2) var(--s-3); /* photo-print matte, deeper foot like a real print */
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out-quart), box-shadow var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart);
}
.biz-gallery__shot:nth-child(odd) { transform: rotate(-0.7deg); }
.biz-gallery__shot:nth-child(even) { transform: rotate(0.7deg); }
.biz-gallery__shot:hover, .biz-gallery__shot:focus-visible {
  transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-warm);
}
.biz-gallery__shot img {
  display: block; width: clamp(11rem, 30vw, 15rem); aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: calc(var(--r-md) - 4px);
}
/* One photo: let it breathe full-width instead of a lonely thumbnail */
.biz-gallery--single .biz-gallery__shot { width: 100%; transform: none; }
.biz-gallery--single .biz-gallery__shot img { width: 100%; aspect-ratio: 16 / 9; }

.biz-gallery__nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: var(--z-base);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--border-warm); color: var(--primary);
  cursor: pointer; box-shadow: var(--shadow-sm); /* floats over the strip — pin/popover exception */
  transition: background var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart);
}
.biz-gallery__nav:hover { background: var(--clay-tint); box-shadow: var(--shadow-md); }
.biz-gallery__nav--prev { left: calc(-1 * var(--s-2)); }
.biz-gallery__nav--next { right: calc(-1 * var(--s-2)); }

/* ---- Lightbox (native <dialog>, top layer) ---- */
.lightbox {
  width: 100dvw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: var(--s-5); border: 0; background: transparent;
  display: none; align-items: center; justify-content: center;
}
.lightbox[open] { display: flex; animation: lightbox-in var(--dur) var(--ease-out-quart); }
.lightbox::backdrop { background: oklch(0.20 0.015 45 / 0.90); backdrop-filter: blur(6px); }
@keyframes lightbox-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

.lightbox__stage { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin: 0; min-width: 0; }
.lightbox__stage img {
  max-width: min(92vw, 68rem); max-height: 78dvh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--r-lg);
  padding: var(--s-2); background: var(--bg); /* same photo-print matte as the strip */
  box-shadow: var(--shadow-lg);
}
.lightbox__meta {
  display: flex; align-items: baseline; gap: var(--s-4); max-width: 60ch;
  font-size: var(--t-sm); line-height: 1.5; text-align: center;
}
.lightbox__caption { color: oklch(0.93 0.015 55); }
.lightbox__count { flex: none; color: oklch(0.76 0.02 50); font-variant-numeric: tabular-nums; }

.lightbox__close {
  position: fixed; top: var(--s-4); right: var(--s-4);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.12); border: 1px solid oklch(1 0 0 / 0.25); color: oklch(0.97 0.005 55);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out-quart);
}
.lightbox__close:hover { background: oklch(1 0 0 / 0.24); }
.lightbox__nav {
  position: fixed; top: 50%; translate: 0 -50%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; border-radius: var(--r-pill); font-size: 1.2rem;
  /* warm dark scrim, not white-on-glass — the arrows overlap the photo on narrow
     screens and must stay legible over light images */
  background: oklch(0.24 0.02 45 / 0.62); border: 1px solid oklch(1 0 0 / 0.28); color: oklch(0.97 0.005 55);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out-quart);
}
.lightbox__nav:hover { background: oklch(0.24 0.02 45 / 0.85); }
.lightbox__nav--prev { left: var(--s-4); }
.lightbox__nav--next { right: var(--s-4); }

@media (max-width: 40rem) {
  .lightbox { padding: var(--s-3); }
  .lightbox__nav--prev { left: var(--s-2); }
  .lightbox__nav--next { right: var(--s-2); }
  .lightbox__stage img { max-height: 70dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .biz-gallery__shot, .biz-gallery__nav, .lightbox__close, .lightbox__nav { transition: none; }
  .biz-gallery__shot:nth-child(odd), .biz-gallery__shot:nth-child(even) { transform: none; }
  .biz-gallery__shot:hover, .biz-gallery__shot:focus-visible { transform: none; }
  .lightbox[open] { animation: none; }
}
.biz-panel__facts { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.biz-fact { display: flex; align-items: flex-start; gap: var(--s-2); min-width: 0; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }
.biz-fact .icon { flex: none; color: var(--primary); margin-top: 0.15em; }
.biz-fact a {
  color: var(--primary); text-decoration: underline; text-underline-offset: 2px;
  display: inline-flex; align-items: flex-start; gap: var(--s-2); min-width: 0;
  overflow-wrap: anywhere;
}
.biz-fact a .icon { margin-top: 0.15em; }
.biz-fact a:hover { color: var(--primary-hover); }

/* Owner-authored description (Feature 8a+) — real content where the duplicate Call
   button used to sit, shared by the claimed-alongside panel and the standalone profile. */
.biz-desc { color: var(--ink); font-size: var(--t-sm); line-height: 1.6; max-width: 60ch; margin-bottom: var(--s-5); }

/* Coupon (Feature 9) — available at any tier, gated by sign-in rather than Paid. The code
   blurs for anonymous visitors (description stays readable) so there's something to sign
   in for, shared by the claimed-alongside panel and the standalone profile. */
.biz-coupon {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--clay-tint); border-radius: var(--r-lg);
  padding: var(--s-4); margin-bottom: var(--s-5);
}
.biz-coupon__icon { color: var(--clay); flex: none; margin-top: 0.1em; }
.biz-coupon__desc { font-size: var(--t-sm); color: var(--ink); margin-bottom: var(--s-2); }
.biz-coupon__code { font-weight: 700; letter-spacing: 0.04em; font-size: var(--t-body); color: var(--ink); }
.biz-coupon__code--blurred { filter: blur(4px); user-select: none; pointer-events: none; }
.biz-coupon__reveal {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2);
  font-size: var(--t-sm); color: var(--primary); text-decoration: underline; text-underline-offset: 2px;
}
.biz-coupon__reveal:hover { color: var(--primary-hover); }

/* Paid tier's one phone/website CTA — replaces the old separate quick-actions buttons,
   so "front and center" contact info lives in a single place instead of two. */
.biz-fact--cta {
  padding: var(--s-2) var(--s-3); background: var(--surface); border: 1px solid var(--border-warm);
  border-radius: var(--r-md); transition: background-color var(--dur) var(--ease-out-quart), transform var(--dur) var(--ease-out-quart);
}
.biz-fact--cta a { text-decoration: none; font-weight: 500; }
.biz-fact--cta:hover { background: var(--clay-tint); transform: translateY(-1px); }

/* ================= Standalone business profile (/businesses/{slug}) ================= */
.biz { max-width: 46rem; margin-inline: auto; }
.biz__cat { margin-bottom: var(--s-3); }
.biz__title { font-size: var(--t-display); line-height: 1.04; margin-bottom: var(--s-4); text-wrap: balance; }
.biz__badge-row { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.biz__manage-link { margin-left: auto; }
.biz__map { margin: var(--s-6) 0; border-radius: var(--r-lg); overflow: hidden; }
.biz__map .article-map__canvas { height: clamp(14rem, 32vw, 18rem); }
.biz__owner {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-7);
  padding-top: var(--s-5); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--t-sm);
}