/* ============================================================
   NovaHome Group — catalogue flipbook
   Self-hosted replacement for the Publuu viewer. Two layouts:
   · spread  — wide screens: a book, two pages, 3D page turn
   · strip   — narrow screens: one page at a time, swipe
   Needs css/tokens.css. Behaviour lives in js/flipbook.js; with
   JavaScript off the pages simply stack vertically.
   ============================================================ */

html, body { margin: 0; padding: 0; background: var(--ink-900); color: var(--cream); min-height: 100%; }
* { box-sizing: border-box; }
.fb-body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.fb-body a { color: inherit; }

:root {
  --fb-ratio: 0.75;           /* page width ÷ height, set per catalogue */
  --fb-top: 64px;             /* header height */
  --fb-bottom: 56px;          /* control bar height */
  --fb-thumbs: 96px;          /* thumbnail strip height when open */
  --fb-ease: cubic-bezier(.4, .05, .2, 1);
  --fb-turn: .95s;
}

/* ---------- header ---------- */
.fb-top { position: fixed; top: 0; left: 0; right: 0; height: var(--fb-top); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 clamp(14px, 3vw, 32px); background: linear-gradient(180deg, rgba(8,8,7,.92) 0%, rgba(8,8,7,.6) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline-faint); }
.fb-top__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.fb-top__brand img { height: 30px; width: auto; display: block; filter: drop-shadow(0 0 12px rgba(243,210,92,.18)); }
.fb-top__brand span { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--amber); white-space: nowrap; }
.fb-top__title { flex: 1; min-width: 0; text-align: center; }
.fb-top__title b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2vw, 22px); line-height: 1.1; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-top__title small { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--stone); margin-top: 3px; }
.fb-top__actions { display: flex; align-items: center; gap: 4px; }

/* icon buttons, shared by header + control bar */
.fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--parchment); font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: color .2s, background .2s, border-color .2s; }
.fb-btn svg { width: 20px; height: 20px; flex: none; }
.fb-btn:hover { color: var(--gold-100); background: rgba(212,169,60,.08); }
.fb-btn:focus-visible { outline: 2px solid rgba(236,200,88,.65); outline-offset: 2px; }
.fb-btn[aria-pressed="true"] { color: #100B04; background: var(--gold-400); }
.fb-btn--text { border-color: var(--hairline-gold); padding: 0 16px; }
.fb-btn--text:hover { border-color: var(--gold-400); }
.fb-btn__label { display: none; }
@media (min-width: 760px) { .fb-btn__label { display: inline; } }

/* back to the catalogues page — always visible, label only when there's room */
.fb-btn--back { flex: none; margin-right: 4px; padding: 0 12px 0 8px; border-color: var(--hairline-gold); color: var(--gold-100); }
.fb-btn--back:hover { border-color: var(--gold-400); }

.fb-lang { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 1px solid var(--hairline-gold); border-radius: 999px; margin-left: 6px; }
.fb-lang a { font-weight: 700; font-size: 11px; letter-spacing: .12em; color: var(--stone); text-decoration: none; padding: 0 12px; border-radius: 999px; line-height: 1.4; min-height: 44px; display: inline-flex; align-items: center; }
.fb-lang a[aria-current="page"] { color: #100B04; background: var(--gold-400); }
.fb-lang a:hover { color: var(--gold-100); }
.fb-lang a[aria-current="page"]:hover { color: #100B04; }

/* ---------- stage ---------- */
.fb { position: relative; min-height: 100vh; min-height: 100dvh; padding: var(--fb-top) 0 var(--fb-bottom); display: flex; flex-direction: column; }
.fb::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 60% at 50% 40%, #1a1407 0%, #0c0a06 55%, var(--ink-900) 100%); }
.fb::after { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .5; background: var(--texture-lattice); pointer-events: none; }
.fb__stage { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 16px clamp(56px, 6vw, 90px); }
.fb.has-thumbs .fb__stage { padding-bottom: calc(var(--fb-thumbs) + 16px); }

/* page size: as tall as the viewport allows, as wide as two pages allow */
.fb {
  --fb-ph: min(calc(100vh - var(--fb-top) - var(--fb-bottom) - 40px), calc((100vw - 2 * clamp(56px, 6vw, 90px)) / 2 / var(--fb-ratio)));
  --fb-ph: min(calc(100dvh - var(--fb-top) - var(--fb-bottom) - 40px), calc((100vw - 2 * clamp(56px, 6vw, 90px)) / 2 / var(--fb-ratio)));
  --fb-pw: calc(var(--fb-ph) * var(--fb-ratio));
}
.fb.has-thumbs {
  --fb-ph: min(calc(100vh - var(--fb-top) - var(--fb-bottom) - var(--fb-thumbs) - 40px), calc((100vw - 2 * clamp(56px, 6vw, 90px)) / 2 / var(--fb-ratio)));
  --fb-ph: min(calc(100dvh - var(--fb-top) - var(--fb-bottom) - var(--fb-thumbs) - 40px), calc((100vw - 2 * clamp(56px, 6vw, 90px)) / 2 / var(--fb-ratio)));
}

/* ---------- the book (spread layout) ---------- */
.fb__book { position: relative; width: calc(2 * var(--fb-pw)); height: var(--fb-ph); perspective: 3000px; transform-style: preserve-3d; transition: transform var(--fb-turn) var(--fb-ease); will-change: transform; }
.fb__book::before { /* soft ground shadow */ content: ""; position: absolute; left: 4%; right: 4%; bottom: -6%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 70%); filter: blur(10px); z-index: 0; }
.fb__book[data-pos="cover"] { transform: translateX(calc(var(--fb-pw) * -0.5)); }
.fb__book[data-pos="end"]   { transform: translateX(calc(var(--fb-pw) *  0.5)); }
.fb__sheet { position: absolute; top: 0; left: 50%; width: var(--fb-pw); height: var(--fb-ph); transform-origin: left center; transform-style: preserve-3d; transition: transform var(--fb-turn) var(--fb-ease); }
.fb__sheet.is-flipped { transform: rotateY(-180deg); }
.fb__face { position: absolute; inset: 0; overflow: hidden; background: var(--ink-800); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.fb__face--back { transform: rotateY(180deg); }
.fb__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* gutter shading — the page darkens slightly towards the spine */
.fb__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.fb__face--front::after { background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 6%, rgba(0,0,0,0) 14%); }
.fb__face--back::after  { background: linear-gradient(270deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 6%, rgba(0,0,0,0) 14%); }
/* while a sheet is mid-turn it lifts off the book */
.fb__sheet.is-turning .fb__face { box-shadow: 0 30px 80px rgba(0,0,0,.75); }
.fb__face--empty { background: transparent; box-shadow: none; }
.fb__face--empty::after { display: none; }
/* spine */
.fb__book::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55) 15%, rgba(0,0,0,.55) 85%, rgba(0,0,0,0)); z-index: 2; pointer-events: none; }
.fb__book[data-pos="cover"]::after, .fb__book[data-pos="end"]::after { opacity: 0; }

/* page-turn hit zones (desktop) */
.fb__zone { position: absolute; top: 0; bottom: 0; width: 50%; cursor: pointer; background: none; border: 0; padding: 0; z-index: 3; }
.fb__zone--prev { left: 0; cursor: w-resize; }
.fb__zone--next { right: 0; cursor: e-resize; }
.fb__zone:focus-visible { outline: 2px solid rgba(236,200,88,.65); outline-offset: -4px; }

/* arrows beside the book */
.fb__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hairline-gold-strong); background: rgba(8,8,7,.55); color: var(--gold-100); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; transition: background .2s, border-color .2s, opacity .3s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fb__arrow svg { width: 22px; height: 22px; }
.fb__arrow:hover { background: rgba(212,169,60,.16); border-color: var(--gold-400); }
.fb__arrow:focus-visible { outline: 2px solid rgba(236,200,88,.65); outline-offset: 3px; }
.fb__arrow[disabled] { opacity: .25; cursor: default; pointer-events: none; }
.fb__arrow--prev { left: clamp(6px, 1.5vw, 20px); }
.fb__arrow--next { right: clamp(6px, 1.5vw, 20px); }

/* ---------- the strip (narrow layout) ---------- */
.fb__pages { list-style: none; margin: 0; padding: 0; }
.fb--strip .fb__pages { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px; padding: 0 16px; width: 100%; }
.fb--strip .fb__pages::-webkit-scrollbar { display: none; }
.fb--strip .fb__pages li { flex: none; scroll-snap-align: center; scroll-snap-stop: always; width: var(--fb-sw); }
.fb--strip .fb__pages img { display: block; width: 100%; height: auto; background: var(--ink-800); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.fb--strip .fb__stage { padding: 12px 0; }
.fb--strip { --fb-sw: min(calc(100vw - 32px), calc((100dvh - var(--fb-top) - var(--fb-bottom) - 40px) * var(--fb-ratio))); }
.fb--strip.has-thumbs { --fb-sw: min(calc(100vw - 32px), calc((100dvh - var(--fb-top) - var(--fb-bottom) - var(--fb-thumbs) - 40px) * var(--fb-ratio))); }
.fb--strip .fb__pages li:first-child { margin-left: calc((100vw - var(--fb-sw)) / 2 - 16px); }
.fb--strip .fb__pages li:last-child  { margin-right: calc((100vw - var(--fb-sw)) / 2 - 16px); }
.fb--strip .fb__book, .fb--strip .fb__arrow, .fb--strip .fb__zone { display: none; }
.fb--spread .fb__pages { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* kept for no-JS + screen readers */

/* no JavaScript: a plain vertical column */
.fb--nojs .fb__stage { display: block; padding: 24px 16px; }
.fb--nojs .fb__pages { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.fb--nojs .fb__pages img { width: 100%; height: auto; display: block; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.fb--nojs .fb__bar, .fb--nojs .fb__arrow, .fb--nojs .fb__zone, .fb--nojs .fb__thumbs { display: none; }

/* ---------- control bar ---------- */
.fb__bar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--fb-bottom); z-index: 30; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0 12px; background: linear-gradient(0deg, rgba(8,8,7,.94) 0%, rgba(8,8,7,.7) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--hairline-faint); }
.fb__count { font-family: var(--font-numeral); font-weight: 600; font-size: 18px; color: var(--cream); letter-spacing: .04em; min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; }
.fb__count small { color: var(--stone); font-weight: 500; }

/* ---------- thumbnails ---------- */
.fb__thumbs { position: fixed; left: 0; right: 0; bottom: var(--fb-bottom); height: var(--fb-thumbs); z-index: 29; display: none; align-items: center; gap: 10px; padding: 0 16px; overflow-x: auto; scrollbar-width: thin; background: rgba(8,8,7,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--hairline-faint); }
.fb.has-thumbs .fb__thumbs { display: flex; }
.fb__thumb { flex: none; height: 64px; aspect-ratio: var(--fb-ratio); border: 1px solid transparent; border-radius: 2px; padding: 0; background: var(--ink-700); cursor: pointer; overflow: hidden; opacity: .7; transition: opacity .2s, border-color .2s, transform .2s; }
.fb__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fb__thumb:hover { opacity: 1; }
.fb__thumb[aria-current="true"] { opacity: 1; border-color: var(--gold-400); transform: translateY(-2px); }
.fb__thumb:focus-visible { outline: 2px solid rgba(236,200,88,.65); outline-offset: 2px; }

/* ---------- zoom overlay ---------- */
.fb__zoom { position: fixed; inset: 0; z-index: 40; background: rgba(8,8,7,.96); display: none; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.fb__zoom.is-open { display: block; }
.fb__zoom img { display: block; width: min(1600px, 160vw); max-width: none; height: auto; margin: 72px auto 40px; box-shadow: 0 30px 90px rgba(0,0,0,.7); }
@media (min-width: 900px) { .fb__zoom img { width: min(1600px, 92vw); } }
.fb__zoom-close { position: fixed; top: 12px; right: 12px; z-index: 41; }

/* ---------- toast ---------- */
.fb__toast { position: fixed; left: 50%; bottom: calc(var(--fb-bottom) + 16px); transform: translate(-50%, 12px); z-index: 45; padding: 10px 18px; border-radius: 999px; background: var(--gold-400); color: #100B04; font-size: 12px; font-weight: 700; letter-spacing: .08em; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.fb__toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- footer ---------- */
.fb-foot { position: relative; z-index: 1; padding: 22px 16px calc(var(--fb-bottom) + 22px); text-align: center; font-size: 11px; letter-spacing: .06em; color: var(--stone-faint); }
.fb-foot a { color: var(--stone); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }
.fb-foot a:hover { color: var(--gold-100); }
.fb--spread + .fb-foot { display: none; } /* the book fills the screen; the footer only matters in the strip/no-JS layouts */

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fb__book, .fb__sheet, .fb__thumb, .fb__toast { transition: none !important; }
}
.fb--instant .fb__book, .fb--instant .fb__sheet { transition: none !important; } /* first paint of a deep link */

/* a phone held sideways: shrink the chrome so the page gets the height */
@media (max-height: 450px) {
  :root { --fb-top: 44px; --fb-bottom: 44px; }
  .fb-top__title b { font-size: 15px; }
  .fb--strip { --fb-sw: min(calc(100vw - 32px), calc((100dvh - var(--fb-top) - var(--fb-bottom) - 12px) * var(--fb-ratio))); }
  .fb--strip .fb__stage { padding: 4px 0; }
}
/* On a phone the header keeps only brand, title and language; the tools move
   down into the control bar next to the page counter. */
.fb__bar-extra { display: none; }
@media (max-width: 759px) {
  :root { --fb-top: 56px; --fb-bottom: 56px; --fb-thumbs: 84px; }
  .fb-top { padding: 0 8px; gap: 8px; }
  .fb-top__brand span { display: none; }
  .fb-top__title small { display: none; }
  .fb-top__actions > .fb-btn { display: none; }
  .fb-lang { margin-left: 0; }
  .fb__bar { gap: 0; padding: 0 6px; justify-content: space-between; }
  .fb__bar-extra { display: inline-flex; }
  .fb__bar-extra--lead { margin-right: auto; }
  .fb__bar-extra--tail { margin-left: auto; }
  .fb__count { min-width: 76px; font-size: 16px; }
  .fb__thumb { height: 56px; }
}