/* Strategy Partners — work galleries (Eric's real screenshots).
   Scoped to body.c1; uses the Concept 1 tokens from concept1.css. Colors are
   inherited tokens only; the color pass comes last. */

body.c1 #galleries { display: grid; gap: 22px; margin-top: 30px; }

body.c1 .c1-gal {
  background: var(--c1-surface); border: 1px solid var(--c1-line);
  border-radius: 14px; padding: 24px 24px 28px; scroll-margin-top: 84px;
}
body.c1 .c1-gal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
body.c1 .c1-gal-head .c1-status { margin-bottom: 0; align-self: center; }
body.c1 .c1-gal-head h3 { font-size: 1.3rem; margin: 0; min-width: 0; }
body.c1 .c1-gal-links { margin: 0 0 0 auto; font-size: .9rem; display: flex; gap: 16px; }
body.c1 .c1-gal-wait { color: var(--c1-text-faint); font-size: .92rem; margin: 6px 0 0; }

body.c1 .c1-gal button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* lead picture: the website's front page, shown whole */
body.c1 .c1-gal-lead {
  display: block; width: 100%; padding: 0; background: #0a1020;
  border: 1px solid var(--c1-line); border-radius: 10px; overflow: hidden;
}
body.c1 .c1-gal-lead img { display: block; width: 100%; height: auto; }

body.c1 .c1-gal-group { margin-top: 22px; }
body.c1 .c1-gal-group h4 {
  margin: 0 0 10px; font-size: .68rem; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--c1-text-dim);
}
body.c1 .c1-gal-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }

body.c1 .c1-gal-thumb {
  display: flex; flex-direction: column; gap: 8px; padding: 0; background: none; border: 0;
  width: calc((100% - 28px) / 3); min-width: 0; text-align: left;
}
body.c1 .c1-gal-thumb.is-phone { width: 170px; }
body.c1 .c1-gal-thumb img {
  display: block; width: 100%; height: auto; background: #0a1020;
  border: 1px solid var(--c1-line); border-radius: 8px;
  transition: border-color .16s ease;
}
/* an iPhone / phone-dashboard shot sits in a phone-shaped frame */
body.c1 .c1-gal-thumb.is-phone img { border: 5px solid #0d1526; outline: 1px solid var(--c1-line-strong); border-radius: 22px; }
body.c1 .c1-gal-cap { font-size: .8rem; line-height: 1.35; color: var(--c1-text-dim); }
@media (hover: hover) and (pointer: fine) {
  body.c1 .c1-gal-thumb:hover img, body.c1 .c1-gal-lead:hover { border-color: var(--c1-blue-bright); }
}
body.c1 .c1-gal button:focus-visible { outline: 2px solid var(--c1-blue-bright); outline-offset: 3px; }

/* ---- lightbox ---- */
body.c1 .c1-lb, .c1-lb {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0;
  border: 0; background: rgba(3,6,12,.94); color: #e9eefc;
}
.c1-lb[open] { display: flex; align-items: center; justify-content: center; }
.c1-lb::backdrop { background: rgba(3,6,12,.94); }
.c1-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(92vw, 1400px); }
.c1-lb-img { display: block; max-width: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto; border-radius: 8px; }
.c1-lb-img.is-phone { max-height: calc(100dvh - 130px); border: 6px solid #0d1526; border-radius: 28px; }
.c1-lb-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: .9rem; color: #a6b6d6; text-align: center; }
.c1-lb-kind { font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; font-size: .68rem; color: #7db0ff; align-self: center; }
.c1-lb-count { color: #7e8fb2; }
.c1-lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(17,26,45,.9); color: #e9eefc; border: 1px solid rgba(122,156,222,.42);
  font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.c1-lb-btn:focus-visible { outline: 2px solid #7db0ff; outline-offset: 3px; }
.c1-lb-close { top: 14px; right: 14px; }
.c1-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.c1-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .c1-lb-btn:hover { border-color: #7db0ff; } }

@media (max-width: 640px) {
  body.c1 .c1-gal { padding: 18px 14px 22px; }
  body.c1 .c1-gal-head h3 { flex: 1 1 100%; }
  body.c1 .c1-gal-links { margin-left: 0; width: 100%; }
  /* rows become a swipeable strip */
  body.c1 .c1-gal-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
  body.c1 .c1-gal-thumb { flex: 0 0 76%; width: auto; scroll-snap-align: start; }
  body.c1 .c1-gal-thumb.is-phone { flex-basis: 150px; }
  .c1-lb-prev, .c1-lb-next { top: auto; bottom: 16px; transform: none; }
  .c1-lb-prev { left: 16px; } .c1-lb-next { right: 16px; }
  .c1-lb-img, .c1-lb-img.is-phone { max-height: calc(100dvh - 190px); }
}

/* ---- SP-B013 motion: viewer open/close/swap, press feedback ---- */
.c1-lb { opacity: 0; transition: opacity .4s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), overlay .4s allow-discrete, display .4s allow-discrete; }
.c1-lb[open] { opacity: 1; }
@starting-style { .c1-lb[open] { opacity: 0; } }
.c1-lb-fig { transition: transform .5s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
.c1-lb:not([open]) .c1-lb-fig { transform: scale(0.97); }
@starting-style { .c1-lb[open] .c1-lb-fig { transform: scale(0.97); } }
.c1-lb-img { transition: opacity .3s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
.c1-lb-img.is-swap { opacity: 0; transition: none; }

body.c1 .c1-gal-thumb, body.c1 .c1-gal-lead { transition: transform .16s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
body.c1 .c1-gal-thumb:active { transform: scale(0.97); }
body.c1 .c1-gal-lead:active { transform: scale(0.99); }
.c1-lb-btn { transition: transform .16s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), border-color .2s ease; }
.c1-lb-close:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .c1-lb-fig, .c1-lb:not([open]) .c1-lb-fig { transform: none; transition: none; }
  @starting-style { .c1-lb[open] .c1-lb-fig { transform: none; } }
  body.c1 .c1-gal-thumb:active, body.c1 .c1-gal-lead:active, .c1-lb-close:active { transform: none; }
}