/* =============================================================================
   furnisystems.ro — flagship v5 — blog/blog.css
   Blog-only layout grammar. Adds NO tokens: every colour, face, radius and
   spacing value is read from site.css (:root, LOCKED) and reused verbatim, the
   way assets/pages.css does for the interior pages. Loaded after site.css and
   assets/pages.css by /blog/ and every /blog/<slug>/ page.

   Rhythm: one unit (--gap-s) between every pair of top-level blocks inside
   <main class="blogmain">. The blocks carry no vertical padding of their own,
   so the measured distance between the last content of one block and the first
   content of the next IS the unit. blog/_build/qa-blog.mjs asserts it at ±14px
   on 1440, 390 and 915.
   ========================================================================== */

/* ---- one vertical unit between top-level blocks ------------------------ */
.blogmain > section + section{ margin-top:var(--gap-s); }
/* .foot pads 64px above its first content, so the last block only owes the rest */
.blogmain{ padding-bottom:max(24px, calc(var(--gap-s) - 64px)); }

/* ---- page head: eyebrow, H1, lead (index and article share it) --------- */
.bhead{ padding-top:calc(var(--hdr-h) + clamp(48px, 9vh, 108px)); }
.bhead .display--h1{ max-width:19ch; }
.bhead .lede{ margin-top:26px; max-width:58ch; font-size:var(--t-body); }
.bhead__meta{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font:500 var(--t-eyebrow)/1 var(--f-text); letter-spacing:.1em; text-transform:uppercase;
  color:var(--metal); font-variant-numeric:tabular-nums; }
.bhead__meta .sep{ opacity:.45; }

/* ---- breadcrumb -------------------------------------------------------- */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-bottom:10px;
  font-size:13px; color:var(--metal); }
.crumb a{ display:inline-flex; align-items:center; min-height:44px; }
.crumb a:hover{ color:var(--ink); }
.crumb span[aria-current]{ display:inline-flex; align-items:center; min-height:44px;
  color:var(--metal-2); max-width:52ch; }
.crumb .sep{ opacity:.45; }

/* ---- index: fora-style hairline rows ----------------------------------- */
.blist__l{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.bcard{ border-bottom:1px solid var(--hair); }
.bcard__a{
  display:grid; grid-template-columns:minmax(0, .26fr) minmax(0, .74fr);
  gap:clamp(20px, 3.4vw, 72px); align-items:start;
  padding:clamp(26px, 3.2vw, 44px) clamp(12px, 1.6vw, 28px);
  margin-inline:calc(clamp(12px, 1.6vw, 28px) * -1);
  border-radius:var(--r-card);
  transition:background-color .22s var(--ease);
}
.bcard__a:hover{ background:rgba(232,233,236,.045); }
.bcard__meta .sep{ display:none; }
.bcard__meta{ display:flex; flex-direction:column; gap:7px;
  font:500 var(--t-eyebrow)/1.1 var(--f-text); letter-spacing:.1em; text-transform:uppercase;
  color:var(--metal); font-variant-numeric:tabular-nums; padding-top:6px; }
.bcard__body{ display:block; }
.bcard__t{ display:block; margin:0; font-family:var(--f-display); font-weight:300;
  font-size:clamp(25px, 1.05rem + 1.4vw, 38px); line-height:1.1; letter-spacing:-.02em;
  color:var(--ink); max-width:24ch; }
.bcard__d{ display:block; margin-top:14px; color:var(--metal-2); font-size:16px; line-height:1.55; max-width:62ch; }
.bcard__go{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-size:15px; font-weight:500; color:var(--metal); transition:color .22s var(--ease); }
.bcard__go .arr{ display:inline-block; transition:transform .2s var(--ease); }
.bcard__a:hover .bcard__go{ color:var(--gold); }
.bcard__a:hover .arr{ transform:translateX(4px); }

/* ---- article: table of contents + prose column ------------------------- */
.post__grid{ display:grid; grid-template-columns:minmax(0, .30fr) minmax(0, .70fr);
  gap:clamp(32px, 5vw, 96px); align-items:start; }
.toc{ min-width:0; position:sticky; top:calc(var(--hdr-h) + 32px); }
.toc__l{ list-style:none; margin:14px 0 0; padding:0; display:grid; }
.toc__l a{ display:flex; align-items:center; min-height:44px; padding:8px 0 8px 16px;
  border-left:1px solid var(--hair); color:var(--metal); font-size:14px; line-height:1.35;
  transition:color .2s var(--ease), border-color .2s var(--ease); }
.toc__l a:hover{ color:var(--ink); border-color:var(--metal); }

.prose{ min-width:0; max-width:68ch; color:var(--metal-2); font-size:var(--t-body); line-height:1.7; }
.prose > * + *{ margin-top:22px; }
.prose > h2{ font-family:var(--f-display); font-weight:300; font-size:var(--t-h3);
  line-height:1.06; letter-spacing:-.025em; color:var(--ink); max-width:24ch;
  margin-top:var(--gap-m); scroll-margin-top:calc(var(--hdr-h) + 24px); }
.prose > h2:first-child{ margin-top:0; }
.prose > .psum, .prose > .faq, .prose > .srcs, .prose > .disclaim{ margin-top:var(--gap-m); }
.prose > .disclaim > * + *{ margin-top:16px; }
.prose strong{ color:var(--ink); font-weight:500; }
.prose em{ color:var(--metal); }
.prose a{ color:var(--ink); box-shadow:inset 0 -1px 0 var(--hair-strong);
  transition:color .2s var(--ease), box-shadow .2s var(--ease); }
.prose a:hover{ color:var(--gold); box-shadow:inset 0 -1px 0 var(--gold); }
.prose ul{ margin-left:0; padding-left:22px; display:grid; gap:12px; list-style:disc; }
.prose ol{ margin-left:0; padding-left:24px; display:grid; gap:12px; list-style:decimal; }
.prose li::marker{ color:var(--metal); }
.prose li > strong:first-child{ color:var(--ink); }
.prose hr{ border:0; border-top:1px solid var(--hair); margin-top:var(--gap-m); }

/* ---- comparison table: scrolls inside its own box, never the page ------ */
.tblwrap{ max-width:100%; overflow-x:auto; overscroll-behavior-x:contain;
  border:1px solid var(--hair); border-radius:var(--r-card); background:var(--surface); }
.tblwrap table{ width:100%; min-width:560px; border-collapse:collapse; font-size:15px; line-height:1.5; }
.tblwrap th{ text-align:left; vertical-align:bottom; padding:16px 18px;
  font:500 var(--t-eyebrow)/1.25 var(--f-text); letter-spacing:.08em; text-transform:uppercase;
  color:var(--metal); border-bottom:1px solid var(--hair); }
.tblwrap td{ vertical-align:top; padding:15px 18px; color:var(--metal-2); }
.tblwrap tbody tr + tr td{ border-top:1px solid var(--hair); }
.tblwrap td:first-child{ color:var(--ink); }

/* ---- "Pe scurt" summary block ------------------------------------------ */
.psum{ border:1px solid var(--hair); border-radius:var(--r-card); background:var(--surface);
  padding:clamp(24px, 2.8vw, 38px); }
.psum > h2{ font-family:var(--f-display); font-weight:300; font-size:var(--t-h3);
  line-height:1.06; letter-spacing:-.025em; color:var(--ink); margin:0;
  scroll-margin-top:calc(var(--hdr-h) + 24px); }
.psum ul{ margin-top:20px; padding-left:22px; display:grid; gap:12px; list-style:disc; }
.psum ul li::marker, .prose li::marker{ color:var(--metal); }

/* ---- FAQ: plain blocks, always in the DOM and always visible ----------- */
.faq > h2{ font-family:var(--f-display); font-weight:300; font-size:var(--t-h3);
  line-height:1.06; letter-spacing:-.025em; color:var(--ink); max-width:24ch;
  margin:0 0 22px; scroll-margin-top:calc(var(--hdr-h) + 24px); }
.faq__l{ border-top:1px solid var(--hair); }
.faq__i{ border-bottom:1px solid var(--hair); padding:24px 0; }
.faq__q{ font-family:var(--f-display); font-weight:400;
  font-size:clamp(19px, .95rem + .55vw, 24px); line-height:1.25; letter-spacing:-.01em;
  color:var(--ink); margin:0; }
.faq__a{ margin-top:12px; color:var(--metal-2); font-size:16px; line-height:1.65; }

/* ---- sources ----------------------------------------------------------- */
.srcs > h2{ font-family:var(--f-display); font-weight:300; font-size:var(--t-h3);
  line-height:1.06; letter-spacing:-.025em; color:var(--ink); margin:0 0 20px;
  scroll-margin-top:calc(var(--hdr-h) + 24px); }
.srcs ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px;
  font-size:15px; line-height:1.55; color:var(--metal); }
.srcs a{ color:var(--metal-2); box-shadow:inset 0 -1px 0 var(--hair); }
.srcs a:hover{ color:var(--gold); box-shadow:inset 0 -1px 0 var(--gold); }
.disclaim{ color:var(--metal); font-size:15px; line-height:1.6; max-width:62ch; }

/* ---- closing CTA: one pill per page ------------------------------------ */
.bcta__in{ max-width:640px; display:grid; gap:22px; justify-items:start; }
.bcta__t{ font-size:clamp(30px, 1.2rem + 2vw, 52px); max-width:16ch; }
.bcta__in p:not(.display){ color:var(--metal-2); font-size:17px; line-height:1.6; max-width:52ch; }

/* ---- related ----------------------------------------------------------- */
.brel__head{ margin-bottom:clamp(24px, 2.6vw, 40px); }
.brel__grid{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 1.6vw, 24px); }
.brel__grid .card{ height:100%; display:block; }
.brel__grid .card__t{ font-size:clamp(21px, 1rem + .7vw, 26px); max-width:22ch; }

/* ---- breakpoints ------------------------------------------------------- */
@media (max-width:900px){
  .bcard__a{ grid-template-columns:1fr; gap:14px; }
  .bcard__meta{ flex-direction:row; align-items:center; gap:10px; padding-top:0; }
  .bcard__meta .sep{ display:inline; opacity:.45; }
  .post__grid{ grid-template-columns:minmax(0, 1fr); gap:clamp(28px, 5vw, 44px); }
  .toc{ position:static; }
  .brel__grid{ grid-template-columns:minmax(0, 1fr); }
  .prose{ max-width:100%; }
  .tblwrap table{ min-width:480px; }
}
@media (max-width:600px){
  .bhead .display--h1{ max-width:100%; }
  .bcta__t{ max-width:100%; }
}
/* short landscape (915×412, 844×390): the head must not eat the whole screen,
   and a sticky TOC has nowhere to stick. */
@media (max-height:560px) and (orientation:landscape){
  .bhead{ padding-top:calc(var(--hdr-h) + 28px); }
  .toc{ position:static; }
  .post__grid{ grid-template-columns:minmax(0, 1fr); gap:clamp(24px, 4vw, 44px); }
}
@media (min-width:901px) and (max-height:560px) and (orientation:landscape){
  .brel__grid{ grid-template-columns:repeat(3, 1fr); }
}

/* ---- reduced motion: nothing moves, everything stays legible ----------- */
@media (prefers-reduced-motion: reduce){
  .bcard__a, .bcard__go, .bcard__a .arr, .toc__l a, .prose a{ transition:none; }
  .bcard__a:hover .arr{ transform:none; }
}