/* DCDG project spotlights: shared styles for the Selected Work section.
   Uses the site's own fonts and colors (Fraunces, Public Sans, Space Mono; cream, charcoal, ochre).
   Scoped to .dcdg-* classes so nothing else on the site changes. */

/* ---------- Photo viewer (sits in .pillar-media) ---------- */
.dcdg-viewer button { font: inherit; color: inherit; cursor: pointer; }
.dcdg-viewer :focus-visible, .dcdg-spot :focus-visible { outline: 2px solid var(--accent-2, #B08A4E); outline-offset: 3px; }

.dcdg-stage { position: relative; aspect-ratio: 4 / 3; background: var(--inverse-surface, #3D3D3D); overflow: hidden; touch-action: pan-y; }
.dcdg-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.dcdg-stage img.is-on { opacity: 1; }
.dcdg-stage img.is-plan { object-fit: contain; background: #FFFFFF; padding: 4%; }
.dcdg-stage img.is-whole { object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .dcdg-stage img { transition: none; } }
.dcdg-open { position: absolute; inset: 0; z-index: 1; background: none; border: 0; cursor: zoom-in !important; }
.dcdg-viewer .dcdg-enlarge {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  border: 1px solid var(--inverse-line, rgba(234,228,214,.28)); background: rgba(33,30,26,.62);
  color: var(--inverse-content, #EAE4D6) !important;
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px;
}
.dcdg-viewer .dcdg-enlarge:hover { background: rgba(33,30,26,.85); }

.dcdg-caption { margin: 12px 0 0; font-family: var(--copy, sans-serif); font-size: 14px; line-height: 1.5; color: var(--content-soft, #4A463F); min-height: 2.6em; }

/* Keep the photos in view while reading a long project description (computer screens only) */
@media (min-width: 861px) { [data-dcdg-proj] .pillar-media { position: sticky; top: 96px; } }

/* Same look as the site's .gallery-nav */
.dcdg-nav { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.dcdg-viewer .dcdg-nav button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line, #C7BFA9);
  background: var(--surface-panel, #F4F0E6); color: var(--content, #211E1A);
  font-family: var(--mono, monospace); font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease;
}
.dcdg-viewer .dcdg-nav button:hover { border-color: var(--accent-2, #B08A4E); }
.dcdg-count { font-family: var(--mono, monospace); font-size: 11px; color: var(--content-soft, #4A463F); margin-left: 2px; white-space: nowrap; }

.dcdg-thumbs { display: flex; gap: 6px; overflow-x: auto; margin-top: 14px; padding-bottom: 4px; scrollbar-width: thin; }
.dcdg-viewer .dcdg-thumbs button { flex: 0 0 auto; width: 64px; height: 48px; padding: 0; border: 2px solid transparent; background: none; opacity: .62; }
.dcdg-viewer .dcdg-thumbs button[aria-current="true"] { border-color: var(--accent-2, #B08A4E); opacity: 1; }
.dcdg-viewer .dcdg-thumbs button:hover { opacity: 1; }
.dcdg-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcdg-thumbs img.is-plan { object-fit: contain; background: #FFFFFF; }

/* ---------- Project spotlight text (sits in .pillar-copy, under the tags) ---------- */
.dcdg-spot { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line, #C7BFA9); }
.dcdg-spot-label {
  font-family: var(--body, sans-serif); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2, #B08A4E); margin: 0 0 10px;
}
.dcdg-spot h4 { font-family: var(--display, serif); font-weight: 600; font-size: 1.35rem; line-height: 1.2; margin: 0 0 4px; letter-spacing: -.01em; color: var(--content, #211E1A); }
.dcdg-spot-kind { font-family: var(--mono, monospace); font-size: 11.5px; letter-spacing: .03em; color: var(--content-soft, #4A463F); margin: 0 0 14px; }
.dcdg-spot-text { color: var(--content-soft, #4A463F); font-size: 15.5px; max-width: 52ch; margin: 0 0 18px; }
.dcdg-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line, #C7BFA9); max-width: 52ch; }
.dcdg-facts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #C7BFA9); font-size: 14px; color: var(--content, #211E1A); }
.dcdg-facts span { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--content-soft, #4A463F); padding-top: 2px; }
@media (max-width: 480px) { .dcdg-facts li { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Full-screen lightbox (built by the script, shared by all projects) ---------- */
.dcdg-lb { position: fixed; inset: 0; z-index: 1000; background: #1E1C19; color: #EAE4D6; display: none; height: 100vh; height: 100dvh; grid-template-rows: auto 1fr auto; font-family: var(--copy, sans-serif); }
.dcdg-lb.is-open { display: grid; }
.dcdg-lb button { font: inherit; color: inherit; cursor: pointer; }
.dcdg-lb :focus-visible { outline: 2px solid #B08A4E; outline-offset: 3px; }
.dcdg-lb__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 18px clamp(16px, 3vw, 32px); font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.dcdg-lb__close { border: 1px solid rgba(234,228,214,.35); border-radius: 999px; background: none; padding: 7px 14px; font-family: var(--mono, monospace) !important; font-size: 11.5px !important; letter-spacing: .06em; text-transform: uppercase; }
.dcdg-lb__stage { position: relative; display: grid; place-items: center; padding: 0 clamp(56px, 7vw, 96px); min-height: 0; touch-action: pan-y; }
.dcdg-lb__stage img { max-width: 100%; max-height: calc(100vh - 11.5rem); max-height: calc(100dvh - 11.5rem); width: auto; height: auto; object-fit: contain; display: block; }
.dcdg-lb__stage img.is-plan { background: #FFFFFF; padding: 20px; max-height: calc(100vh - 14rem); max-height: calc(100dvh - 14rem); }
.dcdg-lb__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(234,228,214,.35); background: none; font-family: var(--mono, monospace) !important; font-size: 15px !important; }
.dcdg-lb__arrow:hover { border-color: #B08A4E; }
.dcdg-lb__arrow--prev { left: clamp(8px, 2vw, 24px); } .dcdg-lb__arrow--next { right: clamp(8px, 2vw, 24px); }
.dcdg-lb__cap { text-align: center; margin: 0; padding: 16px clamp(16px, 3vw, 32px) 24px; color: rgba(234,228,214,.78); font-size: 15px; min-height: 3.5rem; }
@media (max-width: 600px) { .dcdg-lb__arrow { display: none; } .dcdg-lb__stage { padding: 0 8px; } }