/* ============================================================
   Template board scaffold — fixed-size frames, scaled to fit,
   with fullscreen focus. Used by Social Templates + Banners.
   Each .board carries --w / --h (natural px) and data-display.
   ============================================================ */

.gallery { display: flex; flex-wrap: wrap; gap: 38px 30px; align-items: flex-start; }
.gallery.col { flex-direction: column; align-items: stretch; }

@media (max-width: 640px) {
  .gallery { flex-direction: column; gap: 28px 0; }
  .board { width: 100%; }
  .board-cap { flex-wrap: wrap; gap: 8px; }
  .board-cap .bc-dlwrap { margin-left: 0; }
}

.board { margin: 0; }
.board-cap { display: flex; align-items: baseline; gap: 12px; margin-bottom: 13px; flex-wrap: wrap; }
.board-cap .bc-dir { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 19px; color: var(--ink); }
.board-cap .bc-meta { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mocha); }
.board-cap .bc-focus { margin-left: auto; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--berry); background: none; border: 1px solid color-mix(in oklab, var(--berry) 30%, transparent); border-radius: 100px; padding: 6px 12px; cursor: pointer; transition: background .2s, color .2s; }
.board-cap .bc-focus:hover { background: var(--berry); color: var(--snow); }
.board-cap .bc-dlwrap { display: inline-flex; gap: 6px; margin-left: 6px; }
.board-cap .bc-dl { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: none; border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); border-radius: 100px; padding: 6px 11px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.board-cap .bc-dl:hover { border-color: var(--ink); background: var(--ink); color: var(--snow); }

.holder { position: relative; overflow: hidden; background: #fff; box-shadow: 0 16px 44px rgba(50,44,40,.15), 0 2px 6px rgba(50,44,40,.08); }
.frame { position: absolute; top: 0; left: 0; transform-origin: top left; overflow: hidden; }

/* focus overlay */
body.has-focus { overflow: hidden; }
.focus-layer { position: fixed; inset: 0; z-index: 300; background: color-mix(in oklab, var(--ink) 78%, black); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; }
.focus-layer.on { display: flex; }
.focus-layer .holder { box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.focus-close { position: fixed; top: 22px; right: 26px; z-index: 310; width: 44px; height: 44px; border-radius: 50%; border: 0; background: color-mix(in oklab, var(--snow) 14%, transparent); color: var(--snow); font-size: 20px; cursor: pointer; transition: background .2s; }
.focus-close:hover { background: color-mix(in oklab, var(--snow) 26%, transparent); }
.focus-hint { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 310; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in oklab, var(--snow) 60%, transparent); }

@media print {
  .topbar, footer, .page-head, .section-intro, .board-cap, .hub-toolbar { display: none !important; }
  .gallery { display: block; }
  .board { break-inside: avoid; page-break-inside: avoid; margin: 0 0 24px; }

  /* Wenn ein Board mit data-printing markiert ist, alle anderen ausblenden */
  body:has([data-printing]) .board:not([data-printing]) { display: none !important; }
  body:has([data-printing]) .section-intro { display: none !important; }
  body:has([data-printing]) .page-head { display: none !important; }
}