/* ============================================================
   VLOTE Brand Hub — hub.css
   Mobile-first chrome + board system + fullscreen editor.

   PHILOSOPHY
   · Base styles target a 375px phone. Desktop is layered on top
     via @media (min-width: 768px) — never the reverse.
   · The phone experience is a calm, airy LIST. Each template is a
     full-width preview card you can read at a glance; tapping opens
     a focused FULLSCREEN EDITOR with room to actually work.
   · Desktop keeps the familiar gallery + sticky rail + inline edit.

   Loaded after brand.css (tokens, atoms, topbar, footer) so it owns
   everything below the topbar. The page carries NO inline <style>.
   ============================================================ */

:root { --hub-topbar-h: 56px; }

/* The shell gutter is the single source of "nothing touches the edge". */
.shell { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* Belt-and-braces: the page may never scroll sideways on a phone.
   `clip` (not hidden) keeps the sticky topbar working. */
html, body { max-width: 100%; overflow-x: clip; }

/* ====================================================================
   1 · PLATFORM SECTIONS  (the mobile navigation IS this list)
   On the phone the jump-rail is hidden; the collapsible section
   headers do the navigating. Big, calm tap targets.
   ==================================================================== */
.rail { display: none; }              /* hidden on phone, restored on desktop */

.platform { border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); scroll-margin-top: calc(var(--hub-topbar-h) + 8px); }
.platform:first-of-type { border-top: 0; }

.plat-head {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "no title chev" "meta meta meta";
  align-items: center; column-gap: 12px; row-gap: 7px;
  padding: 32px 0 24px;
}
.plat-head .ph-no    { grid-area: no;    font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--berry); }
.plat-head .ph-title { grid-area: title; font-family: var(--f-display); font-weight: 500; font-size: 26px; line-height: 1.05; color: var(--ink); }
.plat-head .ph-size  { grid-area: meta;  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mocha); }
.plat-head .ph-count { grid-area: meta;  justify-self: end; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mocha); }
/* size (start) + count (end) share the one meta row beneath the title */
.plat-head .chev {
  grid-area: chev; width: 12px; height: 12px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform .25s; margin-right: 4px;
}
.platform.collapsed .chev { transform: rotate(-45deg); }
.plat-head:focus-visible { outline: 2px solid var(--berry); outline-offset: 4px; }

.plat-body { overflow: hidden; }
.platform.collapsed .plat-body { display: none; }
.plat-desc { max-width: 60ch; margin: 0 0 4px; font-size: 15px; line-height: 1.6; color: var(--earth); }
.plat-desc em { font-style: italic; color: var(--berry); }

/* ====================================================================
   2 · GALLERY + BOARD  (phone = single airy column of preview cards)
   ==================================================================== */
.gallery { display: flex; flex-direction: column; gap: 64px; padding: 28px 0 20px; }

.board {
  margin: 0; width: 100%;
  padding-top: 32px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.board:first-child { padding-top: 0; border-top: 0; }

/* Caption above each preview: title + the one primary action. */
.board-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  margin-bottom: 16px;
}
.board-cap .bc-dir  { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 18px; color: var(--ink); }
.board-cap .bc-meta { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mocha); }

/* "Bearbeiten" / "Vollbild" — the primary affordance. */
.board-cap .bc-focus {
  margin-left: auto; cursor: pointer;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--snow); background: var(--berry); border: 0; border-radius: 100px;
  padding: 10px 18px; transition: background .2s;
}
.board-cap .bc-focus:hover { background: var(--ink); }

/* Download buttons: hidden in the phone list (they live in the editor),
   shown inline on desktop. export.js injects them into .bc-dlwrap. */
.board-cap .bc-dlwrap { display: none; gap: 8px; }
.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: 8px 13px; 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); }

/* The preview canvas. board.js sets holder w/h + scales .frame. */
.holder {
  position: relative; overflow: hidden; background: #fff;
  box-shadow: 0 14px 38px rgba(50,44,40,.16), 0 2px 6px rgba(50,44,40,.07);
}
.frame { position: absolute; top: 0; left: 0; transform-origin: top left; overflow: hidden; }

/* On the phone the preview is a TAP TARGET, not an editable surface:
   kill pointer events on its contents so a tap opens the editor instead
   of fiddling with thumbnail-sized text. Scoped to .gallery so the SAME
   board becomes fully interactive once board.js moves it into the editor
   (where it is no longer a descendant of .gallery). */
.gallery .board .holder { cursor: pointer; }
.gallery .board .holder * { pointer-events: none; }
.gallery .board .holder::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 0 var(--berry); transition: box-shadow .15s;
}
.gallery .board .holder:active::after { box-shadow: inset 0 0 0 2px var(--berry); }

/* ====================================================================
   3 · FULLSCREEN EDITOR  (built by board.js; shared phone + desktop)
   ==================================================================== */
body.editing { overflow: hidden; }

.editor {
  position: fixed; inset: 0; z-index: 300; display: none;
  flex-direction: column;
  height: 100dvh;                                   /* survives the on-screen keyboard */
  background: color-mix(in oklab, var(--ink) 82%, black);
}
@supports not (height: 100dvh) { .editor { height: 100vh; } }
.editor.on { display: flex; }

.editor-top {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px calc(14px - 2px);
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid color-mix(in oklab, var(--snow) 14%, transparent);
  color: var(--snow);
}
.editor-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.editor-title .et-dir  { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 18px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-title .et-meta { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in oklab, var(--snow) 60%, transparent); }
.editor-close {
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); background: var(--snow); border: 0; border-radius: 100px; padding: 11px 20px;
  transition: background .2s;
}
.editor-close:hover { background: color-mix(in oklab, var(--snow) 80%, var(--berry)); }

.editor-stage { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; }
/* Inner wrapper is ≥ the stage so content centres when it fits and
   scrolls WITHOUT clipping the top/left when it doesn't. */
.editor-stage-inner {
  min-width: 100%; min-height: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.editor-stage .board { margin: 0; }
.editor-stage .board-cap { display: none; }       /* title/actions live in the chrome bars */
.editor-stage .holder { box-shadow: 0 24px 70px rgba(0,0,0,.45); cursor: default; }

.editor-hint {
  flex: 0 0 auto; text-align: center; padding: 0 16px 8px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in oklab, var(--snow) 46%, transparent);
}

.editor-bottom {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 9px; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in oklab, var(--snow) 14%, transparent);
  background: color-mix(in oklab, var(--ink) 90%, black);
}
.editor-bottom .eb-label {
  width: 100%; text-align: center; margin-bottom: 2px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in oklab, var(--snow) 50%, transparent);
}
.editor-bottom .bc-dlwrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
/* Download buttons (moved here from the board) restyled light-on-dark. */
.editor-bottom .bc-dl {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--snow); background: color-mix(in oklab, var(--snow) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--snow) 22%, transparent);
  border-radius: 100px; padding: 11px 18px; cursor: pointer; transition: background .2s, border-color .2s;
}
.editor-bottom .bc-dl:hover { background: color-mix(in oklab, var(--snow) 22%, transparent); border-color: transparent; }

/* ====================================================================
   4 · FLOATING TOOLBAR  (hub-ui.js) — compact, centred on phone
   ==================================================================== */
.hub-toolbar {
  left: 12px; right: 12px; bottom: 12px; transform: none;
  border-radius: 16px; padding: 8px; gap: 8px; justify-content: center;
}
.hub-toolbar .ht-brand { display: none; }
.hub-toolbar .ht-btn { flex: 0 0 auto; padding: 12px 18px; font-size: 10px; }
/* When the editor is open, the page toolbar would float over it — hide it. */
body.editing .hub-toolbar { display: none; }

/* ====================================================================
   5 · PAGE HEAD — airy on phone
   ==================================================================== */
.page-head { padding: 44px 0 12px; }
.page-head h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(32px, 9vw, 44px); line-height: 1.04; margin: 14px 0 0; }
.page-head h1 em { font-style: italic; color: var(--berry); }
.page-head p { max-width: 60ch; margin: 16px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--earth); }
.page-head p em { font-style: italic; color: var(--berry); }

/* ====================================================================
   6 · DESKTOP  (≥ 768px) — restore the familiar gallery experience
   ==================================================================== */
@media (min-width: 768px) {
  :root { --hub-topbar-h: 70px; }
  .shell { padding: 0 32px; }

  /* Sticky jump rail returns */
  .rail {
    display: block; position: sticky; top: var(--hub-topbar-h); z-index: 90;
    background: color-mix(in oklab, var(--paper) 90%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
  }
  .rail .inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; }
  .rail a {
    font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink); border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
    border-radius: 100px; padding: 7px 13px; transition: background .2s, color .2s, border-color .2s;
  }
  .rail a:hover { border-color: var(--berry); color: var(--berry); }
  .rail .spacer { flex: 1; }
  .rail .toggle-all {
    font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--berry); background: none; border: 0; cursor: pointer; padding: 7px 6px;
  }

  /* Platform header back to one tidy line */
  .platform { scroll-margin-top: calc(var(--hub-topbar-h) + 56px); }
  .plat-head { display: flex; align-items: baseline; gap: 16px; padding: 32px 0 26px; }
  .plat-head .ph-title { font-size: 30px; }
  .plat-head .ph-count { margin-left: auto; }
  .plat-head .ph-count::before { content: none; }
  .plat-head .chev { width: 13px; height: 13px; margin-left: 4px; align-self: center; }
  .plat-desc { font-size: 14.5px; }

  /* Gallery: posts wrap, banners stack — same as before */
  .gallery { flex-direction: row; flex-wrap: wrap; gap: 48px 36px; align-items: flex-start; padding: 32px 0 12px; }
  .gallery.col { flex-direction: column; align-items: stretch; }

  .board { width: auto; padding-top: 0; border-top: 0; }
  .board-cap { align-items: baseline; gap: 12px; margin-bottom: 13px; }
  .board-cap .bc-dir { font-size: 19px; }
  /* On desktop the action reads "Vollbild" and is an outline, not a fill */
  .board-cap .bc-focus {
    margin-left: auto; color: var(--berry); background: none;
    border: 1px solid color-mix(in oklab, var(--berry) 30%, transparent);
    padding: 6px 12px; font-size: 9.5px; letter-spacing: .16em;
  }
  .board-cap .bc-focus:hover { background: var(--berry); color: var(--snow); }
  .board-cap .bc-dlwrap { display: inline-flex; margin-left: 6px; gap: 6px; }
  .board-cap .bc-dl { padding: 6px 11px; }

  /* Desktop edits inline — the preview is NOT a tap target */
  .gallery .board .holder { cursor: default; }
  .gallery .board .holder * { pointer-events: auto; }
  .gallery .board .holder::after { content: none; }

  /* Editor centres the whole template with breathing room */
  .editor-stage-inner { padding: 40px; }
  .editor-top { padding-left: 28px; padding-right: 28px; }
  .editor-title .et-dir { font-size: 20px; }

  /* Restore the roomier desktop page head (hub base is phone-sized) */
  .page-head { padding: 60px 0 8px; }
  .page-head h1 { font-size: clamp(40px, 5.4vw, 60px); }
  .page-head p { font-size: 16px; }
}

/* ====================================================================
   7 · PRINT — one board at a time (export.js sets data-printing)
   ==================================================================== */
@media print {
  .topbar, .rail, footer, .page-head, .hub-toolbar,
  .editor-top, .editor-bottom, .editor-hint, .board-cap { display: none !important; }

  .editor { position: static; height: auto; background: #fff; display: block; }
  .editor-stage { overflow: visible; }
  .editor-stage-inner { display: block; padding: 0; }

  .gallery { display: block; }
  .board { break-inside: avoid; page-break-inside: avoid; margin: 0 0 24px; }

  /* When a single board is flagged for printing, hide every other one. */
  body:has([data-printing]) .board:not([data-printing]) { display: none !important; }
  body:has([data-printing]) .platform > .plat-head,
  body:has([data-printing]) .plat-desc { display: none !important; }
}