/* ══════════════════════════════════════════════════════
   VIEWER.CSS — inline post viewer overlay for index.html
   Report-style layout: title → meta → sumário → body
══════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────── */

.post-viewer {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: #ffffff;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.post-viewer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.post-viewer__body {
  padding-top: 72px;
  padding-bottom: 220px;
}

/* Column: 85% of carousel max-width (860px), centred */
.post-viewer__main {
  width: min(731px, calc(85vw - 27.2px));
  margin-left: auto;
  margin-right: auto;
}

/* ── Custom properties ───────────────────────────────── */

.post-viewer {
  --v-black:   #000000;
  --v-font-ui: 'Roboto Mono', 'Inter', monospace;
  --v-font:    'Inter', -apple-system, sans-serif;
  --v-rule:    rgba(0,0,0,0.2);
  --v-muted:   rgba(0,0,0,0.5);
}

/* ── Article shell ───────────────────────────────────── */

.post-viewer .post-article {
  -webkit-font-smoothing: antialiased;
  color: var(--v-black);
}

/* ── Title ───────────────────────────────────────────── */

.post-viewer .post-report-title {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: clamp(24px, 3.5vw, 44px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--v-black);
  margin: 0 0 3.5rem 0;
  text-align: left;
}

/* ── Meta rows ───────────────────────────────────────── */

.post-viewer .post-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin-bottom: 0.6rem;
}

.post-viewer .post-meta-row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 0;
  margin-top: 0.6rem;
}

.post-viewer .post-meta-row--2 .pmf:nth-child(1) { justify-self: start; }
.post-viewer .post-meta-row--2 .pmf:nth-child(2) { justify-self: center; }
.post-viewer .post-meta-row--2 .pmf:nth-child(3) { justify-self: end; }

/* Individual field: label + value */
.post-viewer .pmf {
  font-family: var(--v-font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(0,0,0,0.5);
  display: flex;
  gap: 0.6em;
  align-items: baseline;
}

/* Field label (uppercase key) */
.post-viewer .pmk {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: rgba(0,0,0,0.5);
}

/* ── Tag chips ────────────────────────────────────────── */

.post-viewer .pmf-tag {
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.22);
  padding: 1px 5px;
  font-family: var(--v-font-ui);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  margin-right: 4px;
  line-height: 1.6;
  vertical-align: middle;
}

/* ── Horizontal rule ─────────────────────────────────── */

.post-viewer .post-report-rule {
  border: none;
  border-top: 1px solid var(--v-rule);
  margin: 0;
}

/* ── Vertical spacers ────────────────────────────────── */

.post-viewer .post-report-gap      { height: 3.5rem; }
.post-viewer .post-report-gap--sm  { height: 1.6rem; }

/* ── Sumário section ─────────────────────────────────── */

.post-viewer .post-summary-label {
  font-family: var(--v-font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  margin: 0 0 0.6rem 0;
}

.post-viewer .post-summary-text {
  font-family: var(--v-font-ui);
  font-size: 10px;
  line-height: 1.62;
  color: rgba(0,0,0,0.5);
  margin: 0.85rem 0 0 0;
}

/* ── Body ────────────────────────────────────────────── */

.post-viewer .post-body {
  font-family: var(--v-font);
  font-size: 0.970rem;
  line-height: 1.62;
  color: var(--v-black);
  hyphens: auto;
  font-variant-numeric: oldstyle-nums;
}

.post-viewer .post-body > * + * { margin-top: 1.4em; }

.post-viewer .post-body p         { margin-bottom: 0.75em; }
.post-viewer .post-body p + p     { text-indent: 2em; margin-top: 0; }

.post-viewer .post-body h2 + p,
.post-viewer .post-body blockquote + p { text-indent: 0; }

.post-viewer .post-body h2 {
  font-family: var(--v-font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-black);
  text-indent: 0;
}

.post-viewer .post-body blockquote {
  border-left: 1px solid var(--v-black);
  padding-left: 1.25rem;
  font-style: italic;
  color: var(--v-black);
  text-indent: 0;
}

.post-viewer .post-body strong { font-weight: 600; }
.post-viewer .post-body em     { font-style: italic; }

@media (min-width: 768px)  { .post-viewer .post-body { font-size: 1.035rem; } }
@media (min-width: 1280px) { .post-viewer .post-body { font-size: 1.100rem; } }

/* ── Reference panel (fixed right: main image + gallery) ─ */

.viewer-ref-figure {
  position: fixed;
  top: 32px;
  right: calc(24px + 1vw);
  width: clamp(120px, calc(33.25vw - min(243px, 28.25vw) - 10px), 226px);
  cursor: zoom-in;
  z-index: 46;
  pointer-events: auto;
}

/* Main image — 20% opacity, brightens on figure hover (same pattern as gallery) */
.viewer-ref-figure > img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.2;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
}
.viewer-ref-figure > img:hover { opacity: 1; }

.viewer-ref-figure figcaption { display: none; }

/* ── Thumbnail gallery (below main image) ─────────────── */

.viewer-ref-gallery {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  cursor: default;
}

.vr-gallery-item {
  cursor: zoom-in;
  margin: 0;
  position: relative; /* anchor for the number overlay */
}

/* Number overlaid on top-left of each thumbnail */
.vr-gallery-num {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 7px;
  letter-spacing: 0.04em;
  color: #000000;
  pointer-events: none;
  line-height: 1;
}

.vr-gallery-item > img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.2;
  transition: opacity 0.25s;
}
/* Each thumbnail brightens independently */
.vr-gallery-item:hover > img { opacity: 1; }

/* ── Lightbox ────────────────────────────────────────── */

.viewer-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.viewer-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Container: wraps the image tightly; meta anchors to its right edge */
.vlb-container {
  position: relative; /* containing block for .vlb-meta */
  line-height: 0;
}

.vlb-container > img {
  max-height: 85vh;
  max-width: 55vw; /* leave room for meta panel on the right */
  object-fit: contain;
  display: block;
}

/* ── Lightbox metadata panel ─────────────────────────── */
/* left: 100% = right edge of the image (container shrinks to img width) */

.vlb-meta {
  position: absolute;
  left: calc(100% + 2.5vw);
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  line-height: normal; /* reset line-height: 0 inherited from .vlb-container */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  cursor: default;
}

.vlb-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Hide the TÍTULO label — title shows on its own */
#vlb-field-title .vlb-label { display: none; }

.vlb-label {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

.vlb-title-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.3;
}

.vlb-value {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.5);
}

.vlb-source-link {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  word-break: break-all;
}
.vlb-source-link:hover { color: #fff; }

/* ── Inline image references in body ─────────────────── */

.post-viewer .img-ref {
  font-family: var(--v-font-ui);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.5);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
}

.post-viewer .img-ref:hover {
  color: var(--v-black);
}

/* ── Hide mural-only controls when viewer is open ────── */
body.viewer-open .zoom-btn { display: none; }