/* ===== Blog: zoznam veľkých názvov, náhľadová karta, čipy s filtrom (FLIP), rozbaľovanie na dotyku. Spoločné pre úvod, blog a články. Logika: js/blog.js ===== */

/* --- čipy (telefón: jeden vodorovný rad, od 700 px zalamovanie) --- */
.chips-fx{position:relative;display:flex;flex-wrap:nowrap;gap:8px;margin:20px calc(var(--gut) * -1) 0;padding:5px var(--gut);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.chips-fx::-webkit-scrollbar{display:none}
.chips-fx .chip{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;padding:0 16px;white-space:nowrap;transition:color var(--dur-2) .05s,border-color var(--dur-1)}
.chip-n{font-size:var(--fs-xs);letter-spacing:.02em;color:var(--mute)}
.chip[aria-pressed="true"] .chip-n{color:#4a4a4a}
.chip-pill{position:absolute;left:0;top:0;z-index:0;width:0;height:0;border-radius:var(--r-pill);background:var(--fg);opacity:0;pointer-events:none}
.chips-fx.is-ready .chip-pill{opacity:1}
.chips-fx.is-ready .chip[aria-pressed="true"]{background:transparent;border-color:transparent;color:var(--bg)}
html:not(.js) .chips-fx{display:none}

/* --- zoznam --- */
.bl{--bln:30px;--blg:14px;display:grid;gap:0;margin-top:22px}
.bl-i[hidden]{display:none}
.bl-a{position:relative;display:grid;grid-template-columns:var(--bln) minmax(0,1fr) auto;column-gap:var(--blg);row-gap:4px;align-items:start;padding:15px 0 13px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.bl-n{grid-column:1;grid-row:1/span 2;padding-top:.75em;color:var(--mute);font-size:var(--fs-sm);letter-spacing:.06em;transition:color var(--dur-2)}
.bl-t{grid-column:2/-1;grid-row:1;font-size:clamp(24px,6.6vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1.1;text-wrap:balance;transition:transform var(--dur-3) var(--ease),opacity var(--dur-2)}
.bl-tt{padding-bottom:.05em;background:linear-gradient(currentColor,currentColor) no-repeat var(--ulx,0%) calc(100% - .05em)/0 max(2px,.05em);-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size var(--dur-3) var(--ease)}
.bl-m{grid-column:2;grid-row:2;align-self:center;color:var(--mute);font-size:var(--fs-sm);letter-spacing:.04em}
.bl-new{color:var(--fg);font-weight:500}
.bl-m>span{white-space:nowrap}
.bl-m>:not(:last-child)::after{content:" ·"}
.bl-ar{grid-column:3;grid-row:2;align-self:center;display:grid;place-items:center;width:28px;height:28px;color:var(--fg);translate:var(--mx,0px) var(--my,0px);rotate:var(--mr,0deg);transition:opacity var(--dur-2),transform var(--dur-3) var(--ease)}
.bl-ar .ico{width:26px;height:26px;grid-area:1/1}
.bl-ar .g{display:none}
.bl-ar .p{opacity:.7;transition:transform var(--dur-3) var(--ease),opacity var(--dur-2)}
.bl-i.is-open .p{transform:rotate(45deg);opacity:1}
html:not(.js) .bl-ar{display:none}

/* --- popis a náhľad: bez JS vždy vidieť, na dotyku sa rozbalia pod názvom, na počítači s myšou ich ukazuje karta --- */
.bl-x{display:grid;grid-template-rows:1fr}
.bl-x-in{min-height:0;display:grid;gap:14px;justify-items:start;padding:2px 0 14px calc(var(--bln) + var(--blg))}
.bl-pv{width:min(100%,232px);aspect-ratio:160/96;border-radius:var(--r-2);background:var(--card);box-shadow:inset 0 0 0 2px var(--surface-3);color:var(--fg)}
.bl-pv:empty{display:none}
.bl-pv svg{display:block;width:100%;height:100%}
.bl-pv *{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bl-d{max-width:52ch;color:var(--mute);font-size:var(--fs-md);line-height:1.45}
.bl-go{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-size:var(--fs-md);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.bl-go .ico{width:22px;height:22px;transition:transform var(--dur-2) var(--ease)}
html.js .bl-x{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--dur-3) var(--ease),visibility 0s var(--dur-3)}
html.js .bl-x-in{overflow:hidden}
html.js .bl-x-in>*{opacity:0;transform:translateY(8px);transition:opacity var(--dur-2),transform var(--dur-3) var(--ease)}
html.js .bl-i.is-open>.bl-x{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--dur-3) var(--ease),visibility 0s}
html.js .bl-i.is-open>.bl-x .bl-x-in>*{opacity:1;transform:none}
html.js .bl-i.is-open>.bl-x .bl-x-in>*:nth-child(2){transition-delay:.06s}
html.js .bl-i.is-open>.bl-x .bl-x-in>*:nth-child(3){transition-delay:.12s}

/* --- obrys náhľadu: čiara sa nakreslí pri zobrazení --- */
@media (prefers-reduced-motion:no-preference){
  :where(html:not(.is-paused)) .bl-pv.draw *{stroke-dasharray:1;stroke-dashoffset:1;animation:bl-draw .9s var(--ease) forwards;animation-delay:calc(var(--k,0) * 70ms)}
  @keyframes bl-draw{to{stroke-dashoffset:0}}
}

/* --- karta za kurzorom (len myš) --- */
.bl-card{position:fixed;left:0;top:0;z-index:45;width:316px;opacity:0;pointer-events:none;perspective:900px;transition:opacity var(--dur-2)}
.bl-card.is-on{opacity:1}
.bl-card-in{padding:12px 12px 16px;border-radius:var(--r-2);background:var(--fg);color:var(--bg);box-shadow:0 26px 70px rgba(0,0,0,.55);will-change:transform}
.bl-card-pv{aspect-ratio:160/96;border-radius:var(--r-1);background:#e4e4e4;color:#0a0a0a}
.bl-card-pv svg{display:block;width:100%;height:100%}
.bl-card-pv *{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bl-card-m{margin:14px 6px 0;color:color-mix(in srgb,var(--bg) 62%,transparent);font-size:var(--fs-xs);letter-spacing:.05em;line-height:1.4}
.bl-card-t{margin:8px 6px 0;font-size:var(--fs-md);font-weight:500;letter-spacing:-.015em;line-height:1.35}
.bl-card-go{display:flex;align-items:center;gap:8px;margin:14px 6px 0;font-size:var(--fs-xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.bl-card-go .ico{width:18px;height:18px}
@media (prefers-reduced-motion:no-preference){
  :where(html:not(.is-paused)) .bl-card-pv.draw *{stroke-dasharray:1;stroke-dashoffset:1;animation:bl-draw .9s var(--ease) forwards;animation-delay:calc(var(--k,0) * 70ms)}
}
@media (hover:none),(pointer:coarse){.bl-card{display:none}}

/* --- filter: počas prechodu sa nesmie nič orezať ani posunúť skrolom --- */
.is-flip{overflow:hidden;overflow-anchor:none}

/* --- počítač s myšou: ostatné stmavnú, názov sa posunie a podčiarkne od miesta vstupu, šípka magneticky ide za kurzorom --- */
@media (hover:hover) and (pointer:fine){
  .bl-ar .g{display:block}
  .bl-ar .p{display:none}
  .bl-ar{opacity:0;transform:translateX(-14px)}
  .bl-i.is-hover .bl-ar{opacity:1;transform:none}
  .bl-fx.has-hover .bl-i:not(.is-hover) .bl-t{opacity:.5}
  .bl-i.is-hover .bl-t{transform:translateX(18px)}
  .bl-i.is-hover .bl-n{color:var(--fg)}
  .bl-i.is-hover .bl-tt{background-size:100% max(2px,.05em)}
  html.js .bl-fx .bl-x{display:none}
  html:not(.js) .bl-fx:hover .bl-t{opacity:.5}
  html:not(.js) .bl-fx .bl-i:hover .bl-t,html:not(.js) .bl-fx .bl-i:focus-within .bl-t{opacity:1}
  .bl-go:hover .ico{transform:translateX(6px)}
}

/* --- širšie obrazovky: názov vľavo, meta a šípka vpravo --- */
@media (min-width:700px){
  .chips-fx{flex-wrap:wrap;margin-inline:0;padding-inline:0;overflow:visible}
  .bl{--bln:48px;--blg:20px}
  .bl-a{grid-template-columns:var(--bln) minmax(0,1fr) auto 52px;align-items:baseline;padding:18px 0 16px}
  .bl-n{grid-row:1;padding-top:0}
  .bl-t{grid-column:2;font-size:clamp(34px,5.6vw,56px)}
  .bl-m{grid-column:3;grid-row:1;align-self:baseline;text-align:right;white-space:nowrap}
  .bl-ar{grid-column:4;grid-row:1;align-self:center;justify-self:end}
}
@media (min-width:900px){
  .bl-a{padding:22px 0 20px}
  .bl-t{font-size:clamp(40px,3.9vw,56px)}
}

/* --- znížený pohyb: bez posunov, náklonu a kreslenia --- */
@media (prefers-reduced-motion:reduce){
  .bl-i.is-hover .bl-t,.bl-ar{transform:none!important;translate:none;rotate:none}
  .bl-card-in{transform:none!important}
}
.rm .bl-i.is-hover .bl-t,.rm .bl-ar{transform:none!important;translate:none;rotate:none}
.rm .bl-card-in{transform:none!important}
/* dlhšie názvy klastrov v angličtine sa na úzkom telefóne môžu zalomiť */
html:not([lang="sk"]) .bl-m>span{white-space:normal}