/* PVR redesign, blog index (EN + ES): search, topic chips, dense article list. 
   Generated page: preview/tools/build_blog_index.py. Behaviour: blog.js. */

.bl-hero { padding: clamp(36px, 5vw, 64px) 0 clamp(18px, 2.6vw, 28px); }
.bl-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; margin: 14px 0 16px; }
.bl-hero h1 em { font-style: italic; color: var(--accent-ink); padding-bottom: 0.06em; }
.bl-hero .sub { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.125rem); max-width: 62ch; }

.bl-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(36px, 4vw, 60px); align-items: start; }

/* search + topics: a sticky sidebar on wide screens (a bar of chips clipped the last topics), a bar under the nav below 1100px */
.bl-bar { position: sticky; top: calc(var(--nav-h) + 16px); z-index: 20; }
.bl-bar-in { display: grid; gap: 10px; padding-top: 16px; }
.bl-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 10px 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); color: var(--faint); cursor: text; transition: border-color 160ms ease, box-shadow 200ms ease; }
.bl-search:focus-within { border-color: rgba(178, 157, 247, 0.55); box-shadow: 0 0 0 4px rgba(109, 79, 216, 0.18); }
.bl-search svg { flex: none; }
.bl-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--text); font: 500 15px/1 var(--font); text-overflow: ellipsis; }
.bl-search input::placeholder { color: var(--faint); font-weight: 400; }
.bl-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.bl-search kbd { flex: none; font: 600 11px/1 var(--font); color: var(--faint); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 7px; }
.bl-search.has-q kbd { display: none; }
.bl-clear { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(236, 235, 242, 0.08); color: var(--text); cursor: pointer; }
.bl-clear[hidden] { display: none; }
.bl-clear:hover { background: rgba(236, 235, 242, 0.16); }
.bl-side-h { margin: 16px 0 2px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.bl-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-chips::-webkit-scrollbar { display: none; }
.bl-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--muted); font: 600 14.5px/1 var(--font); text-align: left; white-space: nowrap; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
.bl-chip .bl-s { display: none; }
.bl-chip i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.bl-chip:hover { color: var(--text); background: rgba(236, 235, 242, 0.05); }
.bl-chip[aria-pressed="true"] { background: rgba(109, 79, 216, 0.16); color: var(--text); }
.bl-chip[aria-pressed="true"] i { color: var(--accent-ink); }
.bl-chip:active, .bl-pick button:active { transform: scale(0.97); }

.bl-main { padding-bottom: clamp(56px, 7vw, 104px); }
.bl-status { margin: 22px 0 6px; font-size: 13.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* start here: one card per intent (buy, learn, fix) */
.bl-start { margin: 6px 0 clamp(36px, 4.5vw, 56px); }
.bl-start-h, .bl-sec-head h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; }
.bl-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.bl-feat { display: flex; flex-direction: column; gap: 6px; }
.bl-feat-img { display: block; aspect-ratio: 16 / 10; margin-bottom: 8px; border-radius: var(--r-surface); overflow: hidden; background: var(--bg-3); }
.bl-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.bl-feat:hover .bl-feat-img img { transform: scale(1.04); }
.bl-feat-title { font-size: 18px; font-weight: 650; line-height: 1.3; letter-spacing: -0.015em; transition: color 160ms ease; }
.bl-feat:hover .bl-feat-title { color: var(--accent-ink); }
.bl-feat .bl-ex { -webkit-line-clamp: 2; }

/* topic sections */
.bl-sec { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 90px); }
.bl-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.bl-n { font-size: 14px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.bl-sec-head p { flex-basis: 100%; color: var(--muted); font-size: 14.5px; }
.bl-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.bl-pick span { margin-right: 2px; font-size: 13.5px; color: var(--faint); }
.bl-pick button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); color: var(--text); font: 500 13.5px/1 var(--font); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.bl-pick button i { font-style: normal; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bl-pick button:hover { border-color: rgba(178, 157, 247, 0.5); background: rgba(109, 79, 216, 0.1); }

.bl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); margin-top: 10px; }
.bl-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.bl-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--bg-3); }
.bl-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.bl-item:hover .bl-thumb img { transform: scale(1.05); }
/* head-to-head: the two products on plates, a small vs badge between them */
.bl-thumb { position: relative; }
.bl-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; background: none; }
.bl-duo.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl-duo .p, .bl-solo .p { display: grid; place-items: center; min-width: 0; background: var(--plate); overflow: hidden; }
.bl-solo .p { width: 100%; height: 100%; }
.bl-duo img, .bl-solo img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.bl-duo b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--bg); box-shadow: 0 0 0 2px var(--bg); color: var(--accent-ink); font: 700 10px/1 var(--font); letter-spacing: 0.02em; text-transform: uppercase; }
.bl-duo.brand { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }   /* stacked: brand names need the width */
.bl-duo.brand .p { background: var(--bg-3); }
.bl-duo.brand img { width: auto; max-width: 70%; height: auto; max-height: 46%; object-fit: contain; mix-blend-mode: normal; filter: brightness(0) invert(1); opacity: 0.88; }
.bl-duo .wm { font: 700 13px/1 var(--font); letter-spacing: -0.01em; color: var(--text); opacity: 0.88; }
.bl-body { display: grid; gap: 4px; min-width: 0; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; line-height: 1.4; }
.bl-tag { color: var(--accent-ink); font-weight: 600; }
.bl-time { color: var(--faint); }
.bl-title { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--text); transition: color 160ms ease; }
.bl-item:hover .bl-title { color: var(--accent-ink); }
.bl-ex { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 1.45; }
/* while filtering: no start row, sections closer together */
.bl-start[hidden] ~ .bl-sec { margin-top: 10px; }
.bl-item[hidden], .bl-sec[hidden], .bl-start[hidden], .bl-empty[hidden] { display: none; }

.bl-empty { padding: 64px 0 24px; text-align: center; }
.bl-empty p { margin-bottom: 18px; font-size: 17px; color: var(--text); }

@media (max-width: 1100px) {
  .bl-layout { display: block; }
  .bl-bar { top: var(--nav-h); margin: 0 calc(-1 * clamp(16px, 4vw, 40px)); padding: 0 clamp(16px, 4vw, 40px); background: rgba(11, 10, 15, 0.9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
  .bl-bar.stuck { border-bottom-color: var(--line); }
  .bl-bar-in { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 0; }
  .bl-search { max-width: 560px; }
  .bl-side-h { display: none; }
  /* every topic visible, wrapped on two or three rows (the user: "le scroll horizontal n'est pas clair") */
  .bl-chips { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .bl-chip { flex: none; justify-content: center; gap: 6px; height: 38px; padding: 0 12px; border-color: var(--line-2); border-radius: 999px; font-size: 14px; }
  .bl-chip .bl-l { display: none; }
  .bl-chip .bl-s { display: inline; }
  .bl-chip:hover { background: none; border-color: rgba(236, 235, 242, 0.3); }
  .bl-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
  .bl-chip[aria-pressed="true"] i { color: rgba(11, 10, 15, 0.55); }
}
@media (max-width: 900px) {
  .bl-search kbd { display: none; }
  .bl-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* phones: the bar scrolls away (nav + two sticky rows took a fifth of the screen); start-here cards swipe */
  .bl-bar { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: none; }
  .bl-feats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 16px -16px 0; padding: 0 16px 4px; gap: 14px; }
  .bl-feats::-webkit-scrollbar { display: none; }
  .bl-feat { scroll-snap-align: start; }
  .bl-feat-title { font-size: 16.5px; }
  .bl-chips { gap: 6px; }
  .bl-chip { height: 34px; padding: 0 12px; font-size: 13.5px; }
  .bl-item { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px 0; }
  .bl-thumb { border-radius: 10px; }
  .bl-title { font-size: 15.5px; }
  .bl-ex { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-thumb img, .bl-feat-img img { transition: none; }
}