/* ==========================================================================
   IFT LEARNINGS — blog listing + article
   ========================================================================== */

/* ============================== FILTER PILLS ============================== */
.bl-filters{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:5vh}
.bl-filters a{
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  transition:color .3s ease,border-color .3s ease;
}
.bl-filters a:hover{color:var(--fg);border-color:var(--tc,var(--accent))}
.bl-filters a.on{color:var(--tc,var(--accent));border-color:var(--tc,var(--accent))}

/* ============================== LISTING ============================== */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 1.6rem}
@media(max-width:960px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.post-grid{grid-template-columns:1fr}}

.post-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel);
  transition:border-color .45s ease,transform .55s var(--ease);
}
.post-card:hover{border-color:var(--ca,var(--accent));transform:translateY(-5px)}
.post-thumb{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  background:
    radial-gradient(80% 70% at 25% 15%,color-mix(in srgb,var(--ca,#FF3D57) 30%,transparent),transparent 70%),
    linear-gradient(150deg,#1C080F 0%,#0E0407 100%);
}
@supports not (background:color-mix(in srgb,red,blue)){
  .post-thumb{background:linear-gradient(150deg,#2A0A14 0%,#0E0407 100%)}
}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.post-card:hover .post-thumb img{transform:scale(1.05)}
/* Track initial, shown when a post has no cover image. */
.post-thumb .ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-d);font-weight:800;font-size:2.6rem;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ca,#FF3D57) 55%,transparent);
}
@supports not (background:color-mix(in srgb,red,blue)){
  .post-thumb .ph{-webkit-text-stroke-color:rgba(255,61,87,.5)}
}
.post-body{padding:1.5rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.post-meta{
  display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;
  font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.post-meta .track{color:var(--ca,var(--accent))}
.post-card h2{font-family:var(--font-d);font-weight:700;font-size:1.22rem;line-height:1.25}
.post-card p{color:var(--muted);font-size:.9rem;line-height:1.62}
.post-more{
  margin-top:auto;padding-top:.4rem;display:inline-flex;align-items:center;gap:.45em;
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ca,var(--accent));
}
.post-more svg{width:13px;height:13px;transition:transform .5s var(--ease)}
.post-card:hover .post-more svg{transform:translate(4px,-4px)}

.bl-empty{
  border:1px dashed var(--line-2);border-radius:12px;
  padding:9vh 4vw;text-align:center;color:var(--muted);
}

/* pagination */
.pager{display:flex;gap:.45rem;justify-content:center;margin-top:7vh;flex-wrap:wrap}
.pager a,.pager span{
  border:1px solid var(--line);border-radius:8px;padding:9px 15px;
  font-size:.82rem;color:var(--muted);
}
.pager a:hover{border-color:var(--accent);color:var(--fg)}
.pager .on{background:var(--accent);border-color:var(--accent);color:#fff}
.pager .disabled{opacity:.35}

/* ============================== ARTICLE ============================== */
.art-hero{
  padding:calc(var(--nav-h) + 11vh) 4vw 3vh;max-width:860px;margin:0 auto;
  position:relative;
}
.art-hero h1{
  font-family:var(--font-d);font-weight:800;
  font-size:clamp(1.9rem,5.4vw,4rem);line-height:1.04;letter-spacing:-.012em;
  margin-top:1.3rem;
}
.art-meta{
  margin-top:1.7rem;display:flex;gap:1.3rem;flex-wrap:wrap;
  color:var(--muted);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.art-meta .track{color:var(--ca,var(--accent))}
.art-cover{max-width:1080px;margin:3vh auto 0;padding:0 4vw}
.art-cover img{width:100%;border-radius:12px;border:1px solid var(--line)}

/* Running text sits at ~68ch — comfortable line length for long reading. */
.article{
  max-width:min(68ch,92vw);margin:0 auto;padding:6vh 4vw 9vh;
  font-size:1.05rem;line-height:1.8;
}
.article > * + *{margin-top:1.35rem}
.article h2{
  font-family:var(--font-d);font-weight:800;font-size:1.65rem;line-height:1.2;
  margin-top:2.6rem;text-wrap:balance;
}
.article h3{
  font-family:var(--font-d);font-weight:700;font-size:1.28rem;line-height:1.25;
  margin-top:2.1rem;text-wrap:balance;
}
.article p{color:#DCD0D3}
.article a{color:var(--ca,var(--accent));text-decoration:underline;text-underline-offset:3px}
.article ul,.article ol{padding-left:1.4rem;color:#DCD0D3}
.article li+li{margin-top:.45rem}
.article strong{color:var(--fg);font-weight:600}
.article blockquote{
  border-left:2px solid var(--ca,var(--accent));padding-left:1.3rem;
  color:var(--muted);font-style:italic;
}
.article pre{
  background:var(--dark);border:1px solid var(--line);border-radius:10px;
  padding:1.15rem;overflow-x:auto;font-size:.9rem;line-height:1.6;
}
.article code{font-family:var(--font-m);font-size:.9em}
.article :not(pre) > code{
  background:rgba(255,61,87,.12);color:var(--ca,var(--accent));
  padding:.14em .42em;border-radius:4px;
}
.article img{border-radius:10px;border:1px solid var(--line)}
.article hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}
.article table{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto}
.article th,.article td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}
.article th{color:var(--fg);font-weight:600;background:rgba(243,233,235,.04)}

.art-foot{max-width:min(68ch,92vw);margin:0 auto;padding:0 4vw 7vh}
.art-cta{
  border:1px solid var(--line);border-radius:12px;padding:1.9rem 1.7rem;
  background:var(--panel);
}
.art-cta h3{font-family:var(--font-d);font-weight:800;text-transform:uppercase;font-size:1.15rem}
.art-cta p{color:var(--muted);margin-top:.7rem;line-height:1.7}
.art-cta .row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.4rem}

.related{padding:8vh 4vw 11vh;border-top:1px solid var(--line)}
.related h3{
  font-family:var(--font-d);font-weight:800;text-transform:uppercase;
  font-size:1.3rem;margin-bottom:3.5vh;
}