/* ============================================================
   VooReach content templates — base.css

   The gallery chrome around a template, and the artboard wrappers.
   Nothing in this file is part of a design: it never exports.

   Post 1080x1350. Carousel slide 1080x1350. Document page A4 794x1123.
   ============================================================ */
@import url("./tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font-sans); }
body { background: #0B0D12; color: var(--canvas); min-height: 100vh; -webkit-font-smoothing: antialiased; }

.stage { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 48px 32px 96px; }
.stage-header { width: 100%; max-width: 1400px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.stage-header h1 { font-family: var(--font-display); color: var(--canvas); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.stage-header .meta { color: rgba(254,252,239,.55); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; font-weight: 600; }
.stage-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stage-controls button, .stage-controls select {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1px solid rgba(254,252,239,.18); background: rgba(254,252,239,.06);
  color: var(--canvas); cursor: pointer;
}
.stage-controls button:hover { background: rgba(254,252,239,.12); }
.stage-controls button.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.back-link { color: rgba(254,252,239,.6); text-decoration: none; font-size: 13px; font-weight: 600; }
.back-link:hover { color: var(--yellow); }

.slide-row, .post-row, .page-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; width: 100%; max-width: 1500px; }

.slide-wrap, .post-wrap {
  width: 432px; height: 540px; position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(254,252,239,.10); background: #000; flex: 0 0 auto;
}
.slide-wrap.size-md, .post-wrap.size-md { width: 540px; height: 675px; }
.slide-wrap.size-lg, .post-wrap.size-lg { width: 648px; height: 810px; }
.slide, .post { width: var(--slide-w); height: var(--slide-h); transform-origin: 0 0; transform: scale(0.4); position: relative; overflow: hidden; }
.size-md > .slide, .size-md > .post { transform: scale(0.5); }
.size-lg > .slide, .size-lg > .post { transform: scale(0.6); }

.page-wrap {
  width: 397px; height: 561px; position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(254,252,239,.10); background: #fff; flex: 0 0 auto;
}
.page-wrap.size-md { width: 496px; height: 702px; }
.page-wrap.size-lg { width: 595px; height: 842px; }
.page { width: var(--page-w); height: var(--page-h); transform-origin: 0 0; transform: scale(0.5); position: relative; overflow: hidden; }
.page-wrap.size-md > .page { transform: scale(0.625); }
.page-wrap.size-lg > .page { transform: scale(0.75); }

.slide-label, .page-label {
  position: absolute; top: 10px; left: 12px; z-index: 10; font-size: 11px; font-weight: 600;
  color: var(--canvas); letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none;
  background: rgba(11,13,18,.62); padding: 4px 10px; border-radius: var(--r-pill);
}

@media print {
  body { background: #fff; }
  .stage-header, .stage-controls { display: none !important; }
  .stage { padding: 0; gap: 0; }
  .slide-wrap, .post-wrap, .page-wrap { border: 0 !important; border-radius: 0; page-break-after: always; }
  .slide, .post, .page { transform: none !important; }
}