/* Blogul, categoriile și articolele (src/site/blog-brand.mjs) după Brand book, Ediția 3, peste brand.css. Mobil întâi. Antetul e prima pagină a
   blogului: articolul cel mai nou, mare, pe bleumarin; titlurile articolelor sunt în Lora, ca într-o publicație. Fără cutii în jurul cardurilor:
   imaginea, titlul și linii fine. Pe alb, #8a6530 la text mic; pe bleumarin, #d9bd8f. Pe telefon nimic nu e fix sau lipit de ecran; de la
   1024 px, coloana articolului însoțește lectura. */

/* Regulile vechi `.oxx li` dau text închis: aici totul moștenește culoarea benzii */
.oxx .ob :where(li, span) { color: inherit; }

/* Antetul */
.oxx .ob-hero { padding: calc(var(--oxc-head-h) + 20px) 0 32px; background: var(--oxc-navy); color: #d9e2ee; }
.oxx .ob-hero.has-finder { padding-bottom: 84px; }
.oxx .ob-hero :focus-visible { outline-color: #fff; }
.oxx .ob-mast { margin-bottom: 20px; }
.oxx .ob-mast h1 { font: 400 clamp(2rem, 1.2rem + 3.4vw, 3.5rem)/1.1 var(--oh-serif); letter-spacing: -.012em; color: #fff; }
.oxx .ob-mast p { margin-top: 6px; max-width: 46ch; line-height: 1.45; }

/* Imaginile: 3:2; un afiș cu altă proporție sau o imagine mică se vede întreagă, peste propria imagine estompată (de la 768 px) */
.oxx .ob-frame { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--oh-r); background: var(--oxc-tint); }
.oxx .ob-frame img { width: 100%; height: 100%; object-fit: cover; }
.oxx .ob-frame.is-whole img { object-fit: scale-down; }
.oxx .ob-frame.is-blank { display: grid; place-items: center; background: var(--oxc-navy); color: #d9bd8f; }
.oxx .ob-hero .ob-frame.is-blank { background: var(--oxc-blue); color: #d9bd8f; }

/* Cel mai nou articol */
.oxx .ob-cover { display: grid; gap: 16px; color: #fff; }
.oxx .ob-cover-txt { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.oxx .ob-new { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #d9bd8f; }
.oxx .ob-cover h2 { font: 400 clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem)/1.18 var(--oh-serif); color: #fff; text-decoration: underline transparent 1px; text-underline-offset: .14em; transition: text-decoration-color .15s; }
.oxx .ob-cover:hover h2 { text-decoration-color: currentColor; }
.oxx .ob-deck { display: none; }
.oxx .ob-read { display: inline-flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 15.5px; font-weight: 600; color: #fff; }
.oxx .ob-read .oh-go { width: 32px; height: 32px; background: rgb(255 255 255 / .12); }
.oxx .ob-cover:hover .oh-go { transform: translateX(3px); }

/* Data și timpul de citit */
.oxx .ob-when { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 13.5px; line-height: 1.35; color: var(--oxc-mute); font-variant-numeric: tabular-nums; }
.oxx .ob-when > * + * { padding-left: 10px; border-left: 1px solid var(--oxc-line-2); }
.oxx .ob-hero .ob-when { color: #c4cfde; }
.oxx .ob-hero .ob-when > * + * { border-color: rgb(255 255 255 / .24); }

/* Următoarele articole, în antet: de la 768 px */
.oxx .ob-side { display: none; }

/* Căutarea și subiectele, peste marginea antetului */
.oxx .ob-finder-wrap { position: relative; z-index: 2; margin-top: -60px; }
/* Pe telefon, subiectele se derulează pe două rânduri: lista începe imediat sub casetă */
.oxx .ob-finder { grid-template-columns: minmax(0, 1fr); }
.oxx .ob-topics { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-content: start; gap: 2px; margin: 0 -12px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.oxx .ob-topics::-webkit-scrollbar { display: none; }
.oxx .ob-topics button { display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 8px 9px 7px; border: 0; border-radius: 8px; background: none; font: 400 16.5px/1.35 var(--oh-serif); color: var(--oxc-navy); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.oxx .ob-topics button:focus-visible { outline-offset: -2px; }
.oxx .ob-topics small { font: 600 12.5px/1 var(--oxc-font); color: #8a6530; font-variant-numeric: tabular-nums; }
.oxx .ob-topics button:hover { background: var(--oxc-tint); }
.oxx .ob-topics button[aria-pressed="true"] { background: var(--oxc-navy); color: #fff; }
.oxx .ob-topics button[aria-pressed="true"] small { color: #d9bd8f; }
.oxx .ob-blog:not([data-blog-ready]) .ob-topics { display: none; }

/* Lista: pe telefon, rânduri cu miniatura în stânga */
.oxx .ob-sec { padding-top: clamp(32px, 2vw + 20px, 56px); }
.oxx .ob-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin-bottom: 14px; scroll-margin-top: 76px; }
.oxx .ob-list > li { border-top: 1px solid var(--oxc-line); }
.oxx .ob-list > li[hidden], .oxx .ob-list:not(.is-filtered) > li.is-lead { display: none; }
.oxx .ob-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px 0; color: var(--oxc-navy); }
.oxx .ob-card > div { min-width: 0; }
.oxx .ob-card .ob-frame { aspect-ratio: 4 / 3; border-radius: 10px; }
.oxx .ob-card .ob-frame.is-whole img { object-fit: cover; object-position: 50% 16%; }
.oxx .ob-tag { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; line-height: 1.3; color: #8a6530; }
.oxx .ob-tag:empty { display: none; }
.oxx .ob-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 400 1.0625rem/1.28 var(--oh-serif); color: var(--oxc-navy); text-decoration: underline transparent 1px; text-underline-offset: .14em; transition: text-decoration-color .15s; }
.oxx .ob-card:hover h3 { text-decoration-color: currentColor; }
.oxx .ob-card .ob-when { margin-top: 6px; }

.oxx .ob-more { display: flex; justify-content: center; margin-top: 10px; }
.oxx .ob-more[hidden], .oxx .ob-empty[hidden] { display: none; }
.oxx .ob-more svg { flex: none; margin-right: 10px; }

.oxx .ob-empty { display: grid; gap: 8px; justify-items: start; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--oh-r); background: var(--oxc-soft); }
.oxx .ob-empty h3 { font: 400 clamp(1.25rem, 1.15rem + .6vw, 1.6rem)/1.25 var(--oh-serif); color: var(--oxc-navy); }
.oxx .ob-empty .oh-btn { margin-top: 6px; padding-right: 20px; }
.oxx .ob-none { display: grid; gap: 10px; justify-items: start; padding-top: var(--oh-sec); }

/* Categoriile din Brain */
.oxx .ob-cats { margin-top: clamp(32px, 2vw + 20px, 56px); }
.oxx .ob-cats h2 { margin-bottom: 10px; font-size: clamp(1.25rem, 1.15rem + .6vw, 1.6rem); }
.oxx .ob-cats ul { display: flex; flex-wrap: wrap; gap: 6px; }
.oxx .ob-cat { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 11px 0 13px; border-radius: 10px; background: var(--oxc-soft); box-shadow: inset 0 0 0 1px var(--oxc-line); font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--oxc-ink); transition: background .15s, box-shadow .15s; }
.oxx .ob-cat small { font-size: 12.5px; font-weight: 600; color: #8a6530; font-variant-numeric: tabular-nums; }
.oxx .ob-cat:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--oxc-navy); }
.oxx .ob-cat[aria-current] { background: var(--oxc-navy); box-shadow: none; color: #fff; }
.oxx .ob-cat[aria-current] small { color: #d9bd8f; }

/* Programarea */
.oxx .ob-end-sec { padding: clamp(32px, 2vw + 20px, 56px) 0 var(--oh-sec); }
.oxx .ob-end { display: grid; gap: 16px; padding: 20px; border-radius: var(--oh-r); background: var(--oxc-soft); }
.oxx .ob-end h2 { font-size: clamp(1.375rem, 1.2rem + .9vw, 2rem); }
.oxx .ob-end p { margin-top: 4px; }
.oxx .ob-end-cta { display: grid; gap: 8px; }

/* ——— Articolul: antetul refolosește coperta blogului, cu titlul deasupra imaginii pe telefon */
.oxx .ob-post .ob-cover .ob-frame { order: 2; }
.oxx .ob-cover h1 { font: 400 clamp(1.75rem, 1.3rem + 2vw, 2.75rem)/1.16 var(--oh-serif); letter-spacing: -.01em; color: #fff; }
.oxx .ob-cover h1.is-long { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.2; }
.oxx .ob-post .ob-cover-txt { min-width: 0; }

/* Caseta: cuprinsul și rezumatul pliate pe telefon, distribuirea la vedere; rânduri despărțite de linii fine */
.oxx .ob-rail { position: relative; z-index: 2; margin-top: -60px; padding: 0 14px; border-radius: var(--oh-r); background: #fff; box-shadow: 0 30px 60px -36px rgb(13 35 64 / .5), 0 0 0 1px rgb(13 35 64 / .05); color: var(--oxc-ink); }
.oxx .ob-rail > * + * { border-top: 1px solid var(--oxc-line); }
.oxx .ob-fold summary { display: flex; align-items: center; gap: 10px; min-height: 54px; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--oxc-navy); list-style: none; cursor: pointer; }
.oxx .ob-fold summary::-webkit-details-marker { display: none; }
.oxx .ob-fold summary > svg { flex: none; color: var(--oh-gold-d); }
.oxx .ob-fold summary small { margin-left: auto; font-size: 13.5px; font-weight: 400; color: var(--oxc-mute); white-space: nowrap; }
.oxx .ob-chev { display: inline-grid; margin-left: auto; transition: transform .2s; }
.oxx .ob-fold summary small + .ob-chev { margin-left: 0; }
.oxx .ob-fold[open] .ob-chev { transform: rotate(180deg); }
.oxx .ob-fold-in { padding-bottom: 14px; }
.oxx .ob-fold[data-fixed] summary { min-height: 44px; pointer-events: none; cursor: default; }
.oxx .ob-fold[data-fixed] :is(.ob-chev, small) { display: none; }

.oxx .ob-toc a { display: block; padding: 8px 10px; border-left: 2px solid var(--oxc-line); font-size: 15px; line-height: 1.35; color: var(--oxc-body); transition: color .15s, border-color .15s; }
.oxx .ob-toc a:hover { border-color: var(--oxc-navy); color: var(--oxc-navy); }
.oxx .ob-toc a[aria-current] { border-color: var(--oh-gold); color: var(--oxc-navy); font-weight: 600; }

.oxx .ob-ai { display: flex; flex-wrap: wrap; gap: 6px; }
.oxx .ob-ai a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: 10px; background: var(--oxc-soft); box-shadow: inset 0 0 0 1px var(--oxc-line); font-size: 14.5px; font-weight: 500; line-height: 1.2; color: var(--oxc-ink); transition: background .15s, box-shadow .15s; }
.oxx .ob-ai a:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--oxc-navy); }
.oxx .ob-note { margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--oxc-mute); }
.oxx .ob-ok { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #8a6530; }
.oxx .ob-ok:empty { display: none; }

.oxx .ob-share { padding: 10px 0 12px; }
.oxx .ob-share-t { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--oxc-navy); }
.oxx .ob-share ul { display: flex; flex-wrap: wrap; gap: 6px; }
.oxx .ob-share li:has(> [hidden]) { display: none; }
.oxx .ob-sh { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px; background: var(--oxc-soft); box-shadow: inset 0 0 0 1px var(--oxc-line); color: var(--oxc-navy); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.oxx .ob-sh:hover { background: var(--oxc-navy); box-shadow: none; color: #fff; }

/* Textul: o coloană lizibilă, cu titlurile în Lora */
.oxx .ob-main { min-width: 0; padding-top: 32px; }
.oxx .ob-prose { font-size: 17px; line-height: 1.7; color: var(--oxc-body); overflow-wrap: anywhere; }
.oxx .ob-prose > * + * { margin-top: 1em; }
.oxx .ob-prose > p:first-child { font-size: 1.1em; line-height: 1.55; color: var(--oxc-ink); }
.oxx .ob-prose h2 { margin-top: 1.9em; font: 400 clamp(1.5rem, 1.25rem + 1.1vw, 2rem)/1.2 var(--oh-serif); color: var(--oxc-navy); scroll-margin-top: 84px; }
.oxx .ob-prose h3 { margin-top: 1.5em; font: 600 1.12em/1.3 var(--oxc-font); color: var(--oxc-ink); scroll-margin-top: 84px; }
.oxx .ob-prose :is(h4, h5) { margin-top: 1.25em; font: 600 1em/1.35 var(--oxc-font); color: var(--oxc-ink); }
.oxx .ob-prose a { color: var(--oxc-blue); text-decoration: underline; text-decoration-color: var(--oh-gold); text-underline-offset: 3px; }
.oxx .ob-prose :is(b, strong) { font-weight: 600; color: var(--oxc-ink); }
.oxx .ob-prose li + li { margin-top: .4em; }
.oxx .ob-prose ul > li { position: relative; padding-left: 20px; }
.oxx .ob-prose ul > li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--oh-gold); }
.oxx .ob-prose ol { padding-left: 1.4em; list-style: decimal; }
.oxx .ob-prose ol > li::marker { font-weight: 600; color: #8a6530; }
.oxx .ob-prose :is(li ul, li ol) { margin-top: .4em; }
.oxx .ob-prose img { border-radius: 10px; }
.oxx .ob-prose > img { margin-block: 1.5em; }
.oxx .ob-prose video { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--oxc-navy); }
.oxx .ob-prose hr { margin-block: 1.75em; border: 0; border-top: 1px solid var(--oxc-line); }

/* După text */
.oxx .ob-post-end { display: grid; gap: 14px; margin-top: 36px; padding-top: 8px; border-top: 1px solid var(--oxc-line); }
.oxx .ob-post-end .ob-share { padding-bottom: 0; }
.oxx .ob-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.oxx .ob-svcs { margin-top: 32px; }
.oxx .ob-svcs h2 { margin-bottom: 8px; font-size: clamp(1.25rem, 1.15rem + .6vw, 1.6rem); }
.oxx .ob-svcs a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--oxc-line); color: var(--oxc-ink); }
.oxx .ob-svcs li:last-child a { border-bottom: 1px solid var(--oxc-line); }
.oxx .ob-svcs a > span:not(.oh-ic) { flex: 1; min-width: 0; display: grid; gap: 1px; }
.oxx .ob-svcs b { font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--oxc-navy); }
.oxx .ob-svcs small { font-size: 13.5px; line-height: 1.3; color: var(--oxc-mute); }
.oxx .ob-post .ob-end-sec { padding-bottom: 0; }
.oxx .ob-rel { padding-block: clamp(36px, 2vw + 24px, 64px) var(--oh-sec); }

@media (min-width: 480px) { .oxx .ob-end-cta { display: flex; flex-wrap: wrap; } }

@media (min-width: 768px) {
  .oxx .ob-frame.is-whole::before { content: ""; position: absolute; inset: -28px; z-index: -1; background: var(--ob-wash) center / cover; filter: blur(22px); }
  .oxx .ob-hero { padding-bottom: 44px; }
  .oxx .ob-hero.has-finder { padding-bottom: 88px; }
  .oxx .ob-mast { margin-bottom: 20px; }
  .oxx .ob-cover { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 28px; }
  .oxx .ob-cover .ob-frame { order: 2; }
  .oxx .ob-prose { font-size: 18px; }
  .oxx .ob-main { max-width: 700px; }
  .oxx .ob-rail { padding-inline: 18px; }
  .oxx .ob-cover.is-text { grid-template-columns: minmax(0, 1fr); }
  .oxx .ob-cover-txt { gap: 10px; }
  .oxx .ob-cover h2 { font-size: clamp(1.5rem, .6rem + 1.9vw, 2.5rem); }
  .oxx .ob-read { margin-top: 6px; }

  .oxx .ob-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .16); }
  .oxx .ob-side a { display: block; color: #fff; }
  .oxx .ob-side .ob-frame { display: none; }
  .oxx .ob-side h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 400 1.0625rem/1.3 var(--oh-serif); color: #fff; text-decoration: underline transparent 1px; text-underline-offset: .14em; transition: text-decoration-color .15s; }
  .oxx .ob-side a:hover h3 { text-decoration-color: currentColor; }
  .oxx .ob-side .ob-when { margin-top: 6px; }

  .oxx .ob-finder .os-q { grid-column: 1 / -1; }
  .oxx .ob-topics { grid-column: 1 / -1; display: flex; flex-wrap: wrap; margin: 0 -2px; padding: 0; overflow: visible; }

  /* Carduri: imaginea, eticheta, titlul; fără chenar. Eticheta își păstrează locul, deci titlurile încep pe aceeași linie. */
  .oxx .ob-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; margin-top: 4px; }
  .oxx .ob-list > li { border: 0; }
  .oxx .ob-list:not(.is-filtered) > li.is-side { display: none; }
  .oxx .ob-card { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 0; }
  .oxx .ob-card > div { display: flex; flex: 1; flex-direction: column; width: 100%; }
  .oxx .ob-card .ob-frame { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--oh-r); }
  .oxx .ob-card .ob-frame.is-whole img { object-fit: scale-down; object-position: 50% 50%; }
  .oxx .ob-tag:empty { display: block; min-height: 1.3em; }
  .oxx .ob-card h3 { font-size: 1.3rem; line-height: 1.24; }
  .oxx .ob-card .ob-when { margin-top: auto; padding-top: 8px; }
  .oxx .ob-more { margin-top: 36px; }

  .oxx .ob-end { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(24px, 3vw, 40px); }
  .oxx .ob-end-cta { flex: none; flex-wrap: nowrap; }
}

@media (min-width: 1024px) {
  .oxx .ob-hero { padding-top: calc(var(--oxc-head-h) + 28px); }
  .oxx .ob-mast { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
  .oxx .ob-mast p { flex: none; max-width: none; margin: 0; }
  .oxx .ob-deck { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 52ch; line-height: 1.5; color: #d9e2ee; }
  .oxx .ob-cover { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .oxx .ob-side a { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 14px; }
  .oxx .ob-side .ob-frame { display: block; aspect-ratio: 4 / 3; border-radius: 10px; }
  .oxx .ob-side .ob-frame.is-whole img { object-fit: cover; object-position: 50% 16%; }
  .oxx .ob-finder { grid-template-columns: minmax(300px, 4fr) minmax(0, 9fr); align-items: center; gap: 12px 24px; }
  .oxx .ob-finder .os-q, .oxx .ob-topics { grid-column: auto; }
  .oxx .ob-topics button { font-size: 17px; }
  .oxx .ob-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; margin-top: 8px; }

  /* Articolul: coloana cu cuprinsul însoțește lectura; lista cuprinsului se derulează în ea când e prea lungă */
  .oxx .ob-reading { display: grid; grid-template-columns: 320px minmax(0, 700px); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .oxx .ob-rail { position: sticky; top: calc(var(--oxc-head-h) + 28px); padding-block: 6px; }
  .oxx .ob-toc ol { max-height: calc(100vh - var(--oxc-head-h) - 372px); min-height: 120px; overflow: auto; overscroll-behavior: contain; }
  .oxx .ob-toc a { padding-block: 6px; font-size: 14.5px; }
  .oxx .ob-fold-in { padding-bottom: 12px; }
  .oxx .ob-main { padding-top: 48px; }
}