/* Project single (dsmt_project CPT) — page-specific styles, converted from single-project-template.html <style> */

@keyframes tsInfinityBorder { to { stroke-dashoffset: 0; } }

/* Breadcrumb */
.dsmt-proj-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--dsmt-font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--dsmt-ink-3);
  padding: 18px var(--dsmt-gutter); border-bottom: 1px solid var(--dsmt-line);
}
.dsmt-proj-breadcrumb a { color: var(--dsmt-ink-3); transition: color 0.15s; }
.dsmt-proj-breadcrumb a:hover { color: var(--dsmt-blue); }
.dsmt-proj-breadcrumb .dsmt-sep { opacity: 0.4; }

/* Project hero */
.dsmt-proj-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; min-height: 85vh; align-items: stretch; border-bottom: 1px solid var(--dsmt-line); }
@media(max-width:900px){ .dsmt-proj-hero { grid-template-columns: 1fr; min-height: auto; } }

.dsmt-proj-visual {
  background: var(--dsmt-bg-2); border-right: 1px solid var(--dsmt-line);
  padding: clamp(32px,5vw,64px); display: flex; flex-direction: column;
  justify-content: center; gap: 16px; position: relative; overflow: hidden;
}
@media(max-width:900px){ .dsmt-proj-visual { border-right: none; border-bottom: 1px solid var(--dsmt-line); min-height: 420px; } }

.dsmt-browser-chrome { background: #fff; border-radius: var(--dsmt-radius-lg); box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; flex: 1; display: flex; flex-direction: column; }
.dsmt-browser-bar { background: #F0F0F5; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #E0E0E8; flex-shrink: 0; }
.dsmt-browser-dots { display: flex; gap: 6px; }
.dsmt-browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.dsmt-dot-red   { background: #FF5F57; }
.dsmt-dot-amber { background: #FFBD2E; }
.dsmt-dot-green { background: #28C941; }
.dsmt-browser-url { flex: 1; background: #fff; border: 1px solid #DDDDE4; border-radius: 6px; padding: 4px 10px; font-family: var(--dsmt-font-mono); font-size: 0.65rem; color: var(--dsmt-ink-3); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsmt-browser-screen { flex: 1; background: #1A2E1A; position: relative; overflow: hidden; min-height: 320px; }
.dsmt-browser-screen img { width: 100%; height: 100%; object-fit: contain; }

.dsmt-screen-ph { position: absolute; inset: 0; background: linear-gradient(160deg, #0D1F0D 0%, #1B3A1B 40%, #0A180A 100%); display: flex; align-items: center; justify-content: center; padding: 32px; text-align: center; }
.dsmt-screen-ph-msg { font-family: var(--dsmt-font-mono); font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.6; color: rgba(255,255,255,0.45); max-width: 26ch; }

/* Right panel: project info */
.dsmt-proj-info { padding: clamp(36px,5vw,72px) clamp(28px,4vw,64px); display: flex; flex-direction: column; justify-content: center; gap: 0; position: relative; }
.dsmt-proj-title { font-family: var(--dsmt-font-head); font-weight: 800; font-size: clamp(2.2rem,4.5vw,4rem); line-height: 1.0; letter-spacing: -0.04em; color: var(--dsmt-ink); margin-bottom: 28px; }
.dsmt-proj-divider { width: 48px; height: 2px; background: var(--dsmt-blue); border-radius: 2px; margin-bottom: 24px; }
.dsmt-proj-desc { font-size: clamp(0.9rem,1.1vw,1.02rem); color: var(--dsmt-ink-2); line-height: 1.75; margin-bottom: 28px; max-width: 48ch; }
.dsmt-proj-outcomes { list-style: none; display: grid; gap: 8px; margin-bottom: 32px; }
.dsmt-proj-outcomes li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--dsmt-ink-2); line-height: 1.5; }
.dsmt-proj-outcomes li::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: var(--dsmt-blue-dim); border: 1.5px solid var(--dsmt-blue-mid);
  flex-shrink: 0; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232D6EF5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.dsmt-proj-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Features */
.dsmt-feat-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,3vw,40px) clamp(32px,5vw,72px); }
@media(max-width:640px){ .dsmt-feat-check-grid { grid-template-columns: 1fr; } }
.dsmt-feat-check-item { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding-bottom: clamp(20px,2.5vw,32px); border-bottom: 1px solid var(--dsmt-line); }
.dsmt-feat-check-item:last-child, .dsmt-feat-check-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.dsmt-feat-check-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--dsmt-blue-dim); border: 1.5px solid var(--dsmt-blue-mid); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; color: var(--dsmt-blue); }
.dsmt-feat-check-icon svg { width: 16px; height: 16px; }
.dsmt-feat-check-title { font-family: var(--dsmt-font-head); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; color: var(--dsmt-ink); margin-bottom: 6px; }
.dsmt-feat-check-desc { font-size: 0.875rem; color: var(--dsmt-ink-2); line-height: 1.65; }

/* Gallery — masonry. Real screenshots render at their own natural aspect
   ratio (no crop/stretch); only the empty-state placeholder tile (no
   image uploaded yet) gets a fixed box, since it has no intrinsic image
   size to size itself by. "Wide" no longer spans two grid columns — true
   masonry has no equivalent of a single item spanning multiple columns
   — so the field now only affects layout as much as the image's own
   natural width does within its column.

   Base rule below (CSS multi-column) is the no-JS fallback — it packs
   reasonably but can leave a column short since a break-inside:avoid
   item that doesn't fit just moves to the next column instead of the
   layout backfilling that gap. assets/js/pages/project-single.js
   upgrades this to real shortest-column packing once loaded, adding
   .dsmt-gallery-js and swapping in .dsmt-gallery-col children — the
   rules after the fallback only apply once that's happened. */
.dsmt-proj-gallery { columns: 4 240px; column-gap: clamp(8px, 1vw, 12px); }
@media(max-width:900px){ .dsmt-proj-gallery { columns: 2 220px; } }
@media(max-width:480px){ .dsmt-proj-gallery { columns: 1; } }
.dsmt-gallery-item { break-inside: avoid; margin-bottom: clamp(8px, 1vw, 12px); border-radius: var(--dsmt-radius); overflow: hidden; background: var(--dsmt-bg-2); border: 1px solid var(--dsmt-line); position: relative; display: block; }
.dsmt-gallery-item img { display: block; width: 100%; height: auto; }
.dsmt-gallery-item.dsmt-gal-empty { aspect-ratio: 3/4; }
@media(max-width:900px){ .dsmt-gallery-item.dsmt-gal-empty.dsmt-wide { aspect-ratio: 4/3; } }

/* JS-packed layout: container becomes a flex row of columns; the JS
   groups items into .dsmt-gallery-col children instead of relying on
   CSS multi-column, so the item's own margin-bottom would double up
   with the column's gap — zeroed out here since the column supplies it. */
.dsmt-proj-gallery.dsmt-gallery-js { columns: unset; column-gap: 0; display: flex; align-items: flex-start; gap: clamp(8px, 1vw, 12px); }
.dsmt-gallery-col { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 12px); flex: 1 1 0; min-width: 0; }
.dsmt-gallery-js .dsmt-gallery-item { margin-bottom: 0; }

/* Clickable (real-image) tiles open the lightbox — see project-single.js.
   Placeholder tiles have no data-idx and stay non-interactive. */
.dsmt-gallery-item[data-idx] { cursor: zoom-in; }
.dsmt-gallery-item[data-idx] img { transition: transform 0.3s ease; }
.dsmt-gallery-item[data-idx]:hover img { transform: scale(1.03); }
.dsmt-gallery-item[data-idx]:focus-visible { outline: 2px solid var(--dsmt-blue); outline-offset: 2px; }

.dsmt-gal-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; }
.dsmt-gal-ph-bg { position: absolute; inset: 0; background: linear-gradient(160deg, var(--dsmt-bg-3), var(--dsmt-line)); }
.dsmt-gal-ph-label { position: relative; z-index: 1; font-family: var(--dsmt-font-mono); font-size: 0.58rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.35); padding: 3px 8px; border-radius: 4px; width: fit-content; }
/* Distinct placeholder tint per tile, matching the design mockup's varied fills */
.dsmt-gallery-item:nth-child(1) .dsmt-gal-ph-bg { background: linear-gradient(160deg,#0D1F0D,#2E5C2E); }
.dsmt-gallery-item:nth-child(2) .dsmt-gal-ph-bg { background: linear-gradient(160deg,#2E4A1A,#1A3010); }
.dsmt-gallery-item:nth-child(3) .dsmt-gal-ph-bg { background: linear-gradient(160deg,#3D2E1A,#2A1F0F); }
.dsmt-gallery-item:nth-child(4) .dsmt-gal-ph-bg { background: linear-gradient(160deg,#1A2E1A,#0D1F0D); }
.dsmt-gallery-item:nth-child(5) .dsmt-gal-ph-bg { background: linear-gradient(160deg,#1A1A2E,#0D0D1F); }
.dsmt-gallery-item:nth-child(6) .dsmt-gal-ph-bg { background: linear-gradient(160deg,#2E1A1A,#1F0D0D); }

/* Next project */
.dsmt-next-proj { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--dsmt-line); border-bottom: 1px solid var(--dsmt-line); }
@media(max-width:640px){ .dsmt-next-proj { grid-template-columns: 1fr; } }
.dsmt-next-proj-cell { padding: clamp(28px,4vw,48px) clamp(24px,3vw,40px); display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; transition: background 0.2s; position: relative; }
.dsmt-next-proj-cell:hover { background: var(--dsmt-bg-2); }
.dsmt-next-proj-cell + .dsmt-next-proj-cell { border-left: 1px solid var(--dsmt-line); }
@media(max-width:640px){ .dsmt-next-proj-cell + .dsmt-next-proj-cell { border-left: none; border-top: 1px solid var(--dsmt-line); } }
.dsmt-next-dir { font-family: var(--dsmt-font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dsmt-ink-3); }
.dsmt-next-name { font-family: var(--dsmt-font-head); font-weight: 700; font-size: clamp(1.1rem,2vw,1.6rem); letter-spacing: -0.03em; color: var(--dsmt-ink); }
.dsmt-next-meta { font-size: 0.82rem; color: var(--dsmt-ink-3); }
.dsmt-next-arr { font-size: 1.25rem; color: var(--dsmt-ink-3); transition: transform 0.2s, color 0.2s; position: absolute; top: clamp(28px,4vw,48px); right: clamp(24px,3vw,40px); }
.dsmt-next-proj-cell:hover .dsmt-next-arr { transform: translateX(4px); color: var(--dsmt-blue); }
.dsmt-next-proj-cell:first-child .dsmt-next-arr { transform: translateX(0); }
.dsmt-next-proj-cell:first-child:hover .dsmt-next-arr { transform: translateX(-4px); }

/* Gallery lightbox — built and appended to <body> by project-single.js
   the first time a gallery image is opened; hidden until then. */
.dsmt-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(10,10,10,0.92); padding: clamp(16px,4vw,48px); }
.dsmt-lightbox.dsmt-lightbox-open { display: flex; }
.dsmt-lightbox-figure { position: relative; max-width: 100%; max-height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dsmt-lightbox-img { display: block; max-width: 100%; max-height: calc(100vh - 160px); border-radius: var(--dsmt-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.dsmt-lightbox-caption { color: rgba(255,255,255,0.75); font-size: 0.85rem; text-align: center; max-width: 60ch; }
.dsmt-lightbox-counter { color: rgba(255,255,255,0.55); font-family: var(--dsmt-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; }
.dsmt-lightbox-close { position: absolute; top: -48px; right: 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dsmt-lightbox-close:hover { background: rgba(255,255,255,0.18); }
/* z-index needed: prev/next are siblings of .dsmt-lightbox-figure with no
   stacking order otherwise, so without it the browser paints them in
   source order (prev, then the image, then next) — on a narrow screen
   where the image renders close to full width, that let the image
   visually sit on top of (hide) the prev arrow specifically, since it
   comes before the figure in the markup while next comes after. */
.dsmt-lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dsmt-lightbox-nav:hover { background: rgba(255,255,255,0.18); }
.dsmt-lightbox-prev { left: clamp(8px,3vw,32px); }
.dsmt-lightbox-next { right: clamp(8px,3vw,32px); }
@media(max-width:640px){ .dsmt-lightbox-nav { width: 40px; height: 40px; font-size: 1.3rem; } .dsmt-lightbox-close { top: -44px; } }
html.dsmt-lightbox-locked, html.dsmt-lightbox-locked body { overflow: hidden; }