/* Headcount v2: logos layer (runtimes row, platform and model marquees, grid).
   Requires tokens.css first. Rendered by assets/js/logos.js into [data-logos] mounts.
   Heights are fixed per mode so space is reserved before the JS runs (no layout shift). */

[data-logos]{
  --hc-pill-h:44px; --hc-plate:30px; --hc-ico:18px; --hc-gap:12px;
  --hc-head:34px; --hc-foot:0px; --hc-rows:3;
  display:block; position:relative; width:100%; box-sizing:border-box;
}
[data-logos] *{box-sizing:border-box}
[data-logos][data-label="none"]{--hc-head:0px}
[data-logos="models"]{--hc-rows:2; --hc-foot:38px}
@media (min-width:1040px){[data-logos="models"]:not([data-rows]){--hc-rows:1}}
[data-logos][data-rows="1"]{--hc-rows:1}
[data-logos][data-rows="2"]{--hc-rows:2}
[data-logos][data-rows="3"]{--hc-rows:3}
[data-logos][data-footnote="on"]{--hc-foot:38px}
[data-logos][data-footnote="off"]{--hc-foot:0px}

/* reserved heights (match the rendered layout exactly) */
[data-logos]:not([data-mode]):not([data-logos="runtimes"]),
[data-logos][data-mode="marquee"]{
  min-height:calc(var(--hc-head) + var(--hc-rows) * var(--hc-pill-h) + (var(--hc-rows) - 1) * var(--hc-gap) + var(--hc-foot));
}
[data-logos="runtimes"]:not([data-mode]),
[data-logos][data-mode="tiles"]{min-height:calc(var(--hc-head) + 142px + var(--hc-foot))}
[data-logos][data-mode="compact"]{min-height:calc(var(--hc-head) + 78px + var(--hc-foot))}
/* grid: reserved for the two single-group grids (30 platforms, 12 models) with the default headline */
[data-logos][data-mode="grid"]{--hc-foot:38px;--hc-grid-gap:10px;--hc-sub:36px;--hc-title:calc(14px + clamp(28px,4.2vw,44px) * 1.08)}
[data-logos][data-mode="grid"][data-sub="none"]{--hc-sub:0px}
[data-logos][data-mode="grid"][data-footnote="off"]{--hc-foot:0px}
[data-logos="platforms"][data-mode="grid"]{--hc-grid-rows:6}
[data-logos="models"][data-mode="grid"]{--hc-grid-rows:3}
[data-logos="platforms"][data-mode="grid"],[data-logos="models"][data-mode="grid"]{
  min-height:calc(var(--hc-head) + var(--hc-title) + var(--hc-sub) + 36px - 18px + var(--hc-grid-rows) * var(--hc-pill-h) + (var(--hc-grid-rows) - 1) * var(--hc-grid-gap) + var(--hc-foot));
}

/* head */
.hc-logos__head{margin:0 0 18px;text-align:center}
[data-align="left"] .hc-logos__head{text-align:left}
.hc-logos__eyebrow{margin:0;line-height:16px;height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-logos__title{margin:14px 0 0;font:600 clamp(28px,4.2vw,44px)/1.08 var(--f-sans);letter-spacing:-.025em;color:var(--ink)}
.hc-logos__title b{font-weight:600;color:var(--acc);font-variant-numeric:tabular-nums}
.hc-logos__sub{margin:12px auto 0;max-width:560px;font:400 16px/1.5 var(--f-sans);color:var(--mut)}
[data-align="left"] .hc-logos__sub{margin-left:0}
.hc-logos__foot{margin:20px 0 0;height:18px;line-height:18px;font:400 11px/18px var(--f-mono);letter-spacing:.02em;color:var(--mut-2);text-align:center}
[data-align="left"] .hc-logos__foot{text-align:left}

/* shared icon */
.hc-ico{display:block;width:var(--hc-ico);height:var(--hc-ico);flex:none;overflow:visible;fill:currentColor}

/* plate: brand-tinted dark square holding a mark. --c, --c-bg, --c-line, --c-glow are set per logo by JS */
.hc-plate{
  --hc-mono-frame:0;
  position:relative; flex:none; display:grid; place-items:center;
  width:var(--hc-plate); height:var(--hc-plate); border-radius:8px;
  color:var(--c,var(--ink)); background:var(--c-bg,rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 1px var(--c-line,var(--line-2));
}
.hc-plate.is-mono .hc-ico{width:calc(var(--hc-plate) - 2px);height:calc(var(--hc-plate) - 2px)}
.hc-plate.is-self{background:none;box-shadow:none}
/* wide wordmarks (WooCommerce, Cal.com): wider plate, mark scaled up, overflow is transparent */
.hc-plate.is-wide{width:calc(var(--hc-plate) * 1.9)}
.hc-plate.is-wide .hc-ico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--hc-plate) * 1.9 - 8px);height:calc(var(--hc-plate) * 1.9 - 8px)}
.hc-plate.is-self .hc-ico{width:100%;height:100%}

/* pill (marquee + grid) */
.hc-pill{
  display:inline-flex; align-items:center; gap:10px; flex:none;
  height:var(--hc-pill-h); padding:0 16px 0 6px; border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 70%),var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  white-space:nowrap; transition:border-color .25s var(--ease),background-color .25s;
}
.hc-pill__txt{display:flex;align-items:baseline;gap:7px;min-width:0}
.hc-pill__name{font:500 14px/1 var(--f-sans);color:var(--ink-2);letter-spacing:-.005em;flex:none}
.hc-pill__maker{font:400 10.5px/1 var(--f-mono);color:var(--mut-2);letter-spacing:.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-pill:hover{border-color:var(--line-2)}
.hc-pill:hover .hc-plate{box-shadow:inset 0 0 0 1px var(--c-line,var(--line-2)),0 0 18px -4px var(--c-glow,transparent)}
.hc-pill:hover .hc-pill__name{color:var(--ink)}

/* marquee */
.hc-mq{
  display:flex; flex-direction:column; gap:var(--hc-gap); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.hc-mq__row{height:var(--hc-pill-h);overflow:hidden;contain:layout paint}
.hc-mq__track{
  display:flex; width:max-content; height:100%;
  animation:hc-mq-x var(--hc-dur,60s) linear infinite; will-change:transform;
}
.hc-mq__row[data-dir="right"] .hc-mq__track{animation-direction:reverse}
.hc-mq__group{display:flex;gap:var(--hc-gap);padding-right:var(--hc-gap);flex:none;margin:0;padding-left:0;list-style:none}
.hc-mq__group > li{display:flex}
.hc-mq:hover .hc-mq__track,
.hc-mq:focus-within .hc-mq__track,
.hc-mq.is-off .hc-mq__track{animation-play-state:paused}
@keyframes hc-mq-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* static fallback (reduced motion): all logos once, wrapped */
.hc-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.hc-wrap > li{display:flex}
[data-align="left"] .hc-wrap{justify-content:flex-start}

/* runtime tiles */
.hc-rt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.hc-rt__item{
  position:relative; overflow:hidden; height:142px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:0;
  padding:20px 8px 0; border-radius:var(--r); text-align:center;
  border:1px solid var(--line);
  background:radial-gradient(90% 70% at 50% 0%,var(--c-bg,transparent),transparent 70%),linear-gradient(180deg,var(--surface),var(--bg-2));
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.hc-rt__item::after{content:"";position:absolute;inset:0 20% auto;height:1px;background:linear-gradient(90deg,transparent,var(--c-line,var(--line-2)),transparent)}
.hc-rt__item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.hc-rt__item .hc-plate{--hc-plate:56px;border-radius:15px;box-shadow:inset 0 0 0 1px var(--c-line,var(--line-2)),0 14px 34px -14px var(--c-glow,transparent)}
.hc-rt__item .hc-plate .hc-ico{width:30px;height:30px}
.hc-rt__item .hc-plate.is-mono .hc-ico{width:54px;height:54px}
.hc-rt__item .hc-plate.is-self .hc-ico{width:56px;height:56px}
.hc-rt__name{margin-top:14px;font:600 15px/18px var(--f-sans);color:var(--ink);letter-spacing:-.01em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hc-rt__maker{margin-top:5px;font:400 10.5px/14px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* compact dock (hero): one row of plates with captions */
.hc-dock{display:grid;grid-template-columns:repeat(var(--hc-n,6),minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;max-width:560px}
[data-align="center"] .hc-dock,[data-logos]:not([data-align]) .hc-dock{margin-inline:auto}
.hc-dock__item{display:flex;flex-direction:column;align-items:center;gap:8px;height:78px;text-align:center}
.hc-dock__item .hc-plate{--hc-plate:42px;border-radius:12px}
.hc-dock__item .hc-plate .hc-ico{width:22px;height:22px}
.hc-dock__item .hc-plate.is-mono .hc-ico{width:40px;height:40px}
.hc-dock__item .hc-plate.is-self .hc-ico{width:42px;height:42px}
.hc-dock__name{font:500 11.5px/14px var(--f-sans);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}

/* grid mode */
.hc-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.hc-grid > li{display:flex;min-width:0}
.hc-grid .hc-pill{width:100%;min-width:0}
.hc-grid .hc-pill__name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hc-grid__label{margin:28px 0 12px;font:500 11px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.hc-grid__label:first-child{margin-top:0}
[data-mode="grid"] .hc-logos__head{margin-bottom:36px}

/* responsive */
@media (max-width:1100px){
  .hc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  [data-logos="platforms"][data-mode="grid"]{--hc-grid-rows:8}
}
@media (max-width:900px){
  .hc-rt{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-logos="runtimes"]:not([data-mode]),[data-logos][data-mode="tiles"]{min-height:calc(var(--hc-head) + 2 * 142px + 12px + var(--hc-foot))}
  .hc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-logos="platforms"][data-mode="grid"]{--hc-grid-rows:10}
  [data-logos="models"][data-mode="grid"]{--hc-grid-rows:4}
}
@media (max-width:720px){
  [data-logos]{--hc-pill-h:40px;--hc-plate:28px;--hc-ico:16px;--hc-gap:10px}
  .hc-pill{gap:9px;padding:0 13px 0 5px;border-radius:11px}
  .hc-pill__name{font-size:13px}
  .hc-mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
  .hc-rt{gap:10px}
  .hc-rt__item{height:132px;padding-top:18px}
  [data-logos="runtimes"]:not([data-mode]),[data-logos][data-mode="tiles"]{min-height:calc(var(--hc-head) + 2 * 132px + 10px + var(--hc-foot))}
  .hc-rt__item .hc-plate{--hc-plate:50px;border-radius:14px}
  .hc-rt__item .hc-plate .hc-ico{width:27px;height:27px}
  .hc-rt__item .hc-plate.is-mono .hc-ico{width:48px;height:48px}
  .hc-rt__item .hc-plate.is-self .hc-ico{width:50px;height:50px}
  .hc-rt__name{font-size:14px;margin-top:12px}
  .hc-rt__maker{font-size:9.5px;letter-spacing:.06em}
  .hc-dock{gap:4px}
  .hc-dock__item .hc-plate{--hc-plate:40px;border-radius:11px}
  .hc-dock__item .hc-plate .hc-ico{width:21px;height:21px}
  .hc-dock__item .hc-plate.is-mono .hc-ico{width:38px;height:38px}
  .hc-dock__item .hc-plate.is-self .hc-ico{width:40px;height:40px}
  .hc-dock__name{font-size:11px}
  .hc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hc-grid .hc-pill{padding-right:10px}
  .hc-grid .hc-pill__name{white-space:normal;line-height:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:0 1 auto}
  .hc-grid .hc-pill__txt{flex-direction:column;align-items:flex-start;gap:3px}
  .hc-grid .hc-pill__maker{font-size:9.5px;max-width:100%}
  [data-logos="models"],[data-logos][data-footnote="on"]{--hc-foot:48px}
  [data-logos][data-footnote="off"]{--hc-foot:0px}
  .hc-logos__foot{height:32px;margin-top:16px;line-height:16px;font-size:10.5px}
  [data-logos][data-mode="grid"]{--hc-foot:48px;--hc-grid-gap:8px;--hc-sub:34.5px}
  [data-logos="platforms"][data-mode="grid"]{--hc-grid-rows:15}
  [data-logos="models"][data-mode="grid"]{--hc-grid-rows:6}
  .hc-logos__sub{font-size:15px}
}

@media (max-width:520px){
  [data-logos][data-mode="grid"]{--hc-sub:57px}
}

@media (prefers-reduced-motion:reduce){
  .hc-mq__track{animation:none}
  .hc-rt__item,.hc-rt__item:hover{transform:none}
}