/* Bayshore BEC — shared components layered on top of each page's inline theme.
   Uses the existing design tokens (--amber, --deep, --border, --display, --mono …)
   so nothing here introduces a second visual identity. */

/* ------------------------------------------------------------------ layout
   The source site shipped no responsive rules; these keep the header and the
   fixed-column grids from forcing sideways scroll on phones. */
/* The logo lockup is ~320px wide against the old text wordmark's ~140px, so the
   link row needs to tighten before it wraps or collides with the CTA. */
@media (min-width: 1121px) and (max-width: 1440px) {
  nav .nav-links { gap: 1.3rem; }
  nav .nav-links a { font-size: 0.65rem; letter-spacing: 0.11em; white-space: nowrap; }
}
@media (min-width: 1121px) { nav .nav-links a { white-space: nowrap; } }

@media (max-width: 1120px) {
  nav { flex-wrap: wrap; gap: 0.7rem 1rem; padding: 0.85rem 1.25rem; }
  nav .logo { font-size: 1.2rem; }
  nav .nav-cta { margin-left: auto; }
  nav .nav-links { order: 3; width: 100%; flex-wrap: wrap; gap: 0.9rem 1.25rem; }
}
@media (max-width: 900px) {
  .cg { grid-template-columns: 1fr; gap: 2.5rem; }
  .sidebar { position: static; }
  .panel-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  .time-slots { grid-template-columns: 1fr; }
  .ph { padding: 1.5rem; }
  .cs { padding: 3rem 1.5rem; }
  nav .nav-links a { font-size: 0.64rem; letter-spacing: 0.1em; }
}

/* --------------------------------------------------------------- documents */
.bx-docs { display: flex; flex-direction: column; gap: 1px;
  background: var(--border); border: 1px solid var(--border); }
.bx-doc { background: var(--deep); padding: 1.1rem 1.25rem; display: flex; gap: 0.9rem;
  align-items: flex-start; text-decoration: none; transition: background 0.2s; }
.bx-doc:hover, .bx-doc:focus-visible { background: var(--surface); outline: none; }
.bx-doc:focus-visible { box-shadow: inset 0 0 0 2px var(--amber); }
.bx-doc-ico { flex-shrink: 0; width: 15px; height: 19px; margin-top: 2px; background: var(--amber);
  clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 100%, 0 100%); }
.bx-doc-body { min-width: 0; }
.bx-doc-label { font-family: var(--display); font-size: 1rem; letter-spacing: 0.03em;
  color: var(--white); line-height: 1.25; }
.bx-doc-note { font-size: 0.76rem; color: var(--muted); line-height: 1.5; margin-top: 0.25rem; }
.bx-doc-meta { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--amber); margin-top: 0.45rem; }
.bx-note { font-size: 0.76rem; color: var(--muted); line-height: 1.6;
  padding: 0.9rem 1.25rem; background: var(--deep); border: 1px solid var(--border);
  border-top: none; }

/* =================================================================== photos
   Every photo set picks one of three layouts. The set is the unit of meaning —
   a repair, a mock-up, an elevation — so each gets its own heading and format. */
.bx-set { max-width: 1400px; }
.bx-set + .bx-set { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--border); }
.bx-set-head { display: flex; align-items: baseline; gap: 0.9rem;
  flex-wrap: wrap; margin-bottom: 1.4rem; }
.bx-set-title { font-family: var(--display); font-size: 1.45rem; letter-spacing: 0.04em;
  color: var(--white); }
.bx-set-sub { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--amber); }
.bx-set-count { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-left: auto; }

/* shared photo frame ---------------------------------------------------- */
.bx-shot { display: block; width: 100%; margin: 0; padding: 0; text-align: left;
  background: var(--deep); border: 1px solid var(--border); cursor: zoom-in;
  transition: border-color 0.25s, transform 0.25s; }
.bx-shot:hover, .bx-shot:focus-visible { border-color: var(--amber); outline: none; }
.bx-frame { overflow: hidden; display: block; }
.bx-frame img { width: 100%; height: auto; display: block;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
/* roll-over enlarge: the photo grows inside a fixed frame, so the grid never reflows */
.bx-shot:hover .bx-frame img, .bx-shot:focus-visible .bx-frame img { transform: scale(1.06); }
.bx-shot figcaption { font-size: 0.76rem; color: var(--muted); line-height: 1.5;
  padding: 0.7rem 0.9rem; transition: color 0.2s; }
.bx-shot:hover figcaption { color: var(--white); }

/* 1) showcase — one or two photos, given real presence ------------------ */
.bx-showcase { display: grid; gap: 1.5rem; }
.bx-showcase.is-pair { grid-template-columns: 1fr 1fr; }
.bx-showcase .bx-frame { max-height: 70vh; display: grid; place-items: center;
  background: var(--black); }
.bx-showcase .bx-frame img { max-height: 70vh; width: 100%; object-fit: contain; }
.bx-showcase figcaption { font-size: 0.85rem; padding: 1rem 1.15rem; }
@media (max-width: 760px) { .bx-showcase.is-pair { grid-template-columns: 1fr; } }

/* 2) grid — masonry that respects each photo's real shape ---------------- */
.bx-grid { columns: 3; column-gap: 1.25rem; }
.bx-grid .bx-shot { break-inside: avoid; margin-bottom: 1.25rem; }
@media (max-width: 1100px) { .bx-grid { columns: 2; } }
@media (max-width: 640px)  { .bx-grid { columns: 1; } }

/* 3) sequence — walk a repair left to right, in order -------------------- */
.bx-seq-wrap { position: relative; }
.bx-seq { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 27%);
  gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 1rem;
  scrollbar-width: thin; scrollbar-color: var(--amber) var(--surface); }
.bx-seq::-webkit-scrollbar { height: 6px; }
.bx-seq::-webkit-scrollbar-track { background: var(--surface); }
.bx-seq::-webkit-scrollbar-thumb { background: var(--amber); }
.bx-seq .bx-shot { scroll-snap-align: start; }
.bx-seq .bx-frame { aspect-ratio: 3 / 4; }
.bx-seq .bx-frame img { height: 100%; object-fit: cover; }
.bx-step { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; color: var(--amber);
  padding: 0.75rem 0.9rem 0; }
.bx-seq-nav { display: flex; gap: 0.5rem; margin-top: 0.9rem; align-items: center; }
.bx-seq-nav button { background: none; border: 1px solid var(--border-bright); color: var(--white);
  font-size: 1rem; line-height: 1; padding: 0.5rem 0.85rem; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s; }
.bx-seq-nav button:hover:not(:disabled) { background: var(--amber); color: var(--black);
  border-color: var(--amber); }
.bx-seq-nav button:disabled { opacity: 0.3; cursor: default; }
.bx-seq-rail { flex: 1; height: 1px; background: var(--border-bright); position: relative; }
.bx-seq-rail i { position: absolute; inset: 0 auto 0 0; background: var(--amber);
  transition: width 0.2s, left 0.2s; }
@media (max-width: 640px) { .bx-seq { grid-auto-columns: 78%; } }

/* --------------------------------------------------------------- lightbox */
.bx-lb { position: fixed; inset: 0; z-index: 999; display: none; background: rgba(6, 8, 11, 0.96); }
.bx-lb.is-open { display: grid; grid-template-rows: 1fr auto; }
.bx-lb-stage { display: grid; place-items: center; min-height: 0; padding: 3.5rem 4.5rem 0; }
.bx-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bx-lb-bar { padding: 1rem 1.5rem 1.5rem; text-align: center; }
.bx-lb-cap { font-size: 0.85rem; color: var(--white); line-height: 1.5; }
.bx-lb-count { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em;
  color: var(--amber); text-transform: uppercase; margin-top: 0.4rem; }
.bx-lb button { position: absolute; background: none; border: 1px solid var(--border-bright);
  color: var(--white); cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 0.55rem 0.85rem;
  transition: background 0.2s, border-color 0.2s; }
.bx-lb button:hover, .bx-lb button:focus-visible { background: var(--amber); color: var(--black);
  border-color: var(--amber); outline: none; }
.bx-lb-close { top: 1.25rem; right: 1.25rem; }
.bx-lb-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.bx-lb-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .bx-lb-stage { padding: 3.5rem 0.75rem 0; }
  .bx-lb-prev { left: 0.4rem; } .bx-lb-next { right: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bx-shot, .bx-doc, .bx-lb button, .bx-frame img, .bx-seq { transition: none; scroll-behavior: auto; }
  .bx-shot:hover .bx-frame img { transform: none; }
}

/* ------------------------------------------------------------------- logo
   Nav uses a horizontal lockup and the footer a stacked one, both cut from the
   supplied artwork by scripts/make-logo.py. If either file is missing the <img>
   removes itself and the BAYSHORE BEC text wordmark shows instead. */
.logo-img, .ft-logo-img { display: none; }
.logo.has-img .logo-img { display: block; height: 42px; width: auto; }
.logo.has-img .logo-txt { display: none; }
.ft-logo.has-img .ft-logo-img { display: block; height: 62px; width: auto; }
.ft-logo.has-img .ft-logo-txt { display: none; }
@media (max-width: 620px) { .logo.has-img .logo-img { height: 34px; } }

/* ------------------------------------------------- grouped trade navigation */
.sn-group { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--amber); margin: 2rem 0 0.75rem; }
.sn-group:first-of-type { margin-top: 0; }
.sn { margin-bottom: 0.5rem; }
.sn-item { padding: 0.9rem 1rem; }