/* ============================================
   Projects (/news) and blog (/blog): hubs, project page, article page — v2
   Loaded after site.css on templates posts-hub, project, article; base look of cards (hb-*),
   project body (pj-*, pz) and article (ar-*) lives in site.css. Behaviour: js/posts.js.
   ============================================ */

/* ---------------- hub: search + two groups of filters ---------------- */
.hbx{ display: grid; gap: 14px; }
.hbx-top{ display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.hbx-search{
  flex: 1 1 320px; max-width: 560px; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px;
  border-radius: 999px; background: #fff; border: 1.5px solid rgba(10,10,12,.12); transition: border-color .25s, box-shadow .25s;
}
.hbx-search:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(250,90,32,.14); }
.hbx-search svg{ flex: none; width: 19px; height: 19px; fill: none; stroke: var(--accent-ink); stroke-width: 2.2; stroke-linecap: round; }
.hbx-search input{ flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 500 16px/1 var(--font-body); color: var(--ink); }
.hbx-search input::placeholder{ color: var(--muted); }
.hbx-search input:focus{ outline: none; }
.hbx-search input::-webkit-search-cancel-button{ cursor: pointer; }
.hbx-count{ margin: 0 0 0 auto; font: 600 14px/1.3 var(--font-display); color: var(--muted-2); font-variant-numeric: tabular-nums; }
.hbx-ind{ align-items: center; }
.hbx-label{ flex: none; margin-right: 4px; font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hbx-ind .hb-chip{ padding: 8px 14px; font-size: 13.5px; background: transparent; }
.hbx-ind .hb-chip[aria-pressed="true"]{ background: var(--accent); border-color: var(--accent); color: #fff; }
.hbx-ind .hb-chip[aria-pressed="true"] i{ color: rgba(255,255,255,.85); }
/* a chip whose group is empty under the other filter and the query */
.hb-chip.is-none{ opacity: .38; }
.hbx-empty{ margin-top: 28px; padding: clamp(26px, 4vw, 44px); border-radius: 24px; background: #fff; border: 1px dashed rgba(10,10,12,.18); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hbx-empty[hidden]{ display: none; }
.hbx-empty p{ flex: 1 1 280px; margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted-2); }
.hbx-empty b{ display: block; font: 700 20px/1.2 var(--font-display); color: var(--ink); }

/* ---------------- cards: year, video mark, spec chips ---------------- */
.hb-media{ position: relative; }
.hbx-year, .hbx-video{ position: absolute; top: 12px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 8px; color: #fff; }
.hbx-year{ left: 12px; background: rgba(10,10,12,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 11px/1 'Unbounded', var(--font-display); }
.hbx-video{ right: 12px; padding-left: 7px; background: rgba(250,90,32,.94); font: 700 10.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.hbx-video svg{ width: 11px; height: 11px; fill: #fff; }
.hb-card .hb-body{ flex: 1; }
.hb-meta{ flex-wrap: wrap; row-gap: 4px; }
.hbx-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.hbx-chips i{ padding: 6px 9px; border-radius: 8px; background: var(--paper); font: 700 11.5px/1 'Unbounded', var(--font-display); font-style: normal; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }

/* ---------------- project page ---------------- */
.pjh-tags a{ padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.82); transition: border-color .25s, color .25s; }
.pjh-tags a:first-child{ background: var(--accent); border-color: var(--accent); color: var(--ink); }
.pjh-tags a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.pjh .pjh-facts dd{ font-size: clamp(19px, 1.9vw, 27px); white-space: nowrap; overflow-wrap: normal; }
.pjx-facts-1, .pjx-facts-2{ max-width: 620px; }
.pjx-decode{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(10,10,12,.08); font: 600 14px/1.3 var(--font-display); color: var(--accent-ink); }
.pjx-decode i{ font-style: normal; transition: transform .3s var(--ease); }
.pjx-rel{ grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 36px; }
.pjx-rel .hb-name{ font-size: 16px; }
.pjx-nav{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.pjx-nav a{ display: grid; align-content: start; gap: 8px; padding: 18px 22px; border-radius: 20px; border: 1px solid rgba(10,10,12,.12); color: var(--ink); min-width: 0; transition: border-color .25s, background-color .25s; }
.pjx-nav span{ font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pjx-nav span i{ font-style: normal; color: var(--accent-ink); }
.pjx-nav b{ font: 600 16px/1.3 var(--font-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pjx-next{ text-align: right; }
.pjx-nav a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------- article page ---------------- */
.arx-progress{ position: fixed; left: 0; right: 0; top: 0; z-index: 120; height: 3px; pointer-events: none; }
.arx-progress i{ display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #ffd01a, #ff9827 54%, #fa5a20); }
.arx-ask{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(10,10,12,.08); font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.arx-ask i{ font-style: normal; color: var(--accent-ink); transition: transform .3s var(--ease); }
.arx-sum{ padding: 22px 24px 24px; border-radius: 22px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.arx-sum .br-label{ color: var(--accent-ink); }
.arx-sum ul{ margin-top: 12px; }
.arx-sum li{ font-size: 16px; line-height: 1.55; }
.pz .arx-faq{ margin-top: 2.2em; }
.arx-faq details{ border-top: 1px solid rgba(10,10,12,.12); }
.arx-faq details:last-of-type{ border-bottom: 1px solid rgba(10,10,12,.12); }
.arx-faq summary{ position: relative; padding: 16px 40px 16px 0; font: 600 17.5px/1.35 var(--font-display); color: var(--ink); cursor: pointer; list-style: none; }
.arx-faq summary::-webkit-details-marker{ display: none; }
.arx-faq summary::after{ content: "+"; position: absolute; right: 4px; top: 12px; font: 400 26px/1 var(--font-display); color: var(--accent-ink); transition: transform .3s var(--ease); }
.arx-faq details[open] summary::after{ transform: rotate(45deg); }
.arx-faq summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.arx-faq details p{ margin: 0; padding: 0 40px 18px 0; }
.pz .btn{ text-decoration: none; }
.pz .btn-accent{ color: #fff; }
.arh .arh-h1{ max-width: 24ch; text-wrap: balance; }
.arh .ph-lead{ max-width: 64ch; }
.arx-video{ margin: 1.6em 0; }
.arx-video .vd-play{ border-radius: 20px; }
.arx-video figcaption{ margin-top: 10px; font-size: 14px; color: var(--muted); }
/* tables inside articles: readable, scroll inside their own box on phones */
.pz table{ border-radius: 16px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.pz th{ font: 700 11.5px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pz td:first-child{ font-weight: 600; color: var(--ink); }
.pz tr:last-child td{ border-bottom: 0; }
.pz .pz-note{ padding: 16px 20px; border-radius: 16px; background: #fff4ec; border: 1px solid rgba(250,90,32,.22); font-size: 15.5px; line-height: 1.55; }

@media (hover: hover) and (pointer: fine){
  .pjh-tags a:hover{ border-color: var(--accent-2); color: #fff; }
  .pjx-decode:hover i, .arx-ask:hover i{ transform: translateX(4px); }
  .pjx-nav a:hover{ border-color: var(--accent); background: #fff; }
}
@media (max-width: 1100px){
  .pjx-rel{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arx-ask{ display: none; }
}
@media (max-width: 760px){
  .hbx-search{ flex-basis: 100%; max-width: none; height: 50px; }
  .hbx-count{ margin-left: 0; }
  .hbx-label{ display: none; }
  .pjx-rel{ grid-template-columns: minmax(0, 1fr); }
  .pjx-nav{ grid-template-columns: minmax(0, 1fr); }
  .pjx-next{ text-align: left; }
  .pjh .pjh-facts dd{ font-size: clamp(15px, 4.5vw, 20px); white-space: normal; }
}
@media (prefers-reduced-motion: reduce){
  .hbx-search, .pjh-tags a, .pjx-decode i, .pjx-nav a, .arx-ask i, .arx-faq summary::after{ transition: none; }
  .arx-progress{ display: none; }
}

/* article column must be able to shrink: wide tables scroll inside their own box, not the page */
.ar-grid > *{ min-width: 0; }
.pj-grid > *{ min-width: 0; }
@media (max-width: 1100px){ .ar-grid, .pj-grid{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px){
  /* a table row becomes a card: the first cell is its title, the others carry their column name */
  .pz table, .pz tbody, .pz tr, .pz td{ display: block; }
  .pz table{ overflow: visible; border: 0; background: transparent; border-radius: 0; }
  .pz thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pz tr{ padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
  .pz tr + tr{ margin-top: 8px; }
  .pz td{ padding: 0; border: 0; font-size: 15px; line-height: 1.45; }
  .pz td:first-child{ font: 700 16.5px/1.3 var(--font-display); }
  .pz td + td{ margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(10,10,12,.07); }
  .pz td + td[data-label]::before{ content: attr(data-label); display: block; margin-bottom: 2px; font: 700 10.5px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .pz td:empty{ display: none; }
}

/* the featured article keeps its photo filling the card; the text block stays at its natural height */
@media (min-width: 761px){ .hb-featured:not(.is-filtered) > .hb-card:first-child .hb-body{ flex: none; } }