/* ==========================================================================
   Learn / Blog Listing — includes/blocks/learn/style.css
   Extracted from learn.html's own <style> block (page-specific CSS that
   lived in learn.html's <head>, not the shared bio.css) — same convention
   as the other sections that needed their own baked CSS.

   .pill/.pill.on (category filters), .tag/.tag.hi/.tags, .card, and .btn
   are already fully styled site-wide in bio.css, so this file only adds
   the handful of page-specific classes learn.html declared itself: .feat,
   .a-row/.arts, .top-side/.top-item/.top-list, .cats-row, .learn-grid —
   plus the loading/empty states and card-spacing variants this being a
   configurable block (rather than static markup) needs on top.

   Color tokens are baked in as plain hex/rgba from the site's MONO palette
   (color-mono.css → html.theme-mono), same convention as every other
   section. --r-lg / --ease-out are non-color tokens from bio.css itself
   (never re-themed) so they're used directly via var().

   Since real posts don't carry the static site's per-article "tint"/icon
   system, thumbnails that have no featured image show a plain neutral
   placeholder plate instead of a decorative SVG (same simplification
   already used for hero-slider's fallback icon, per earlier client
   direction: one generic treatment rather than per-category art).
   ========================================================================== */

.mhs-learn .wrap{width:min(1200px,100% - 40px);margin-inline:auto}

/* ---------- Category filters ---------- */
.mhs-learn .cats-row{
  display:flex;gap:8px;flex-wrap:wrap;padding-top:0;margin-bottom:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;
}
.mhs-learn .cats-row .pill{flex:none;white-space:nowrap}
.mhs-learn .cats-row .pill:disabled{opacity:.5;cursor:default}

/* ---------- Featured card ---------- */
.mhs-learn .feat{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;overflow:hidden;
  border-radius:var(--r-lg);margin-top:34px;background:#FFFFFF;border:1px solid rgba(6,40,28,.16);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.mhs-learn .feat:hover{transform:translateY(-4px);box-shadow:0 24px 44px -24px rgba(6,40,28,.35)}
.mhs-learn .feat .art{
  min-height:320px;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--bgcolor);
}
.mhs-learn .feat .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mhs-learn .feat .txt{padding:clamp(26px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mhs-learn .feat h2{font-size:clamp(26px,3.2vw,40px)}
.mhs-learn .feat p{font-size:15px;color:var(--text)}
.mhs-learn .feat .meta{font-size:12.5px;color:var(--text)}
.mhs-learn .feat .go{font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:4px;color:var(--head)}
.mhs-learn .go svg{display:block;flex:0 0 auto}
@media(max-width:820px){
  .mhs-learn .feat{grid-template-columns:1fr}
  .mhs-learn .feat .art{min-height:220px}
}

/* ---------- List + sidebar ---------- */
.mhs-learn .learn-grid{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start;margin-top:26px}
@media(max-width:920px){.mhs-learn .learn-grid{grid-template-columns:1fr}}

.mhs-learn .arts{display:flex;flex-direction:column}
.mhs-learn .a-row{
  display:grid;grid-template-columns:120px 1fr auto;gap:22px;align-items:center;
  padding:22px 0;border-bottom:1px solid rgba(6,40,28,.16);
}
.mhs-learn .a-row:first-child{border-top:1px solid rgba(6,40,28,.16)}
.mhs-learn .a-row .th{height:88px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:var(--bgcolor)}
.mhs-learn .a-row .th img{width:100%;height:100%;object-fit:cover}
.mhs-learn .a-row h3{font-size:20px;line-height:1.25;margin:6px 0 6px;color:var(--head)}
.mhs-learn .a-row:hover h3{text-decoration:underline;text-underline-offset:3px}
.mhs-learn .a-row p{font-size:13.5px;color:var(--text)}
.mhs-learn .a-row .meta{font-size:12px;color:var(--text);display:block;margin-top:7px}
.mhs-learn .a-row .go{display:inline-flex;align-items:center;font-size:18px;color:var(--head);transition:transform .3s var(--ease-out)}
.mhs-learn .a-row:hover .go{transform:translateX(4px)}
@media(max-width:560px){
  .mhs-learn .a-row{grid-template-columns:84px 1fr auto;gap:14px}
  .mhs-learn .a-row .th{height:64px}
  .mhs-learn .a-row p{display:none}
}

/* Card-spacing variants (block setting) — adjust row padding/gap only,
   never the typography/colors above. */
.mhs-learn-spacing-compact .a-row{padding:14px 0;gap:16px}
.mhs-learn-spacing-relaxed .a-row{padding:30px 0;gap:26px}

.mhs-learn .mhs-learn-empty{color:var(--text);padding:30px 0}
.mhs-learn .mhs-learn-loading{color:var(--text);font-size:13.5px;text-align:center;padding:18px 0}

.mhs-learn-loadmore-wrap{display:flex;justify-content:center;margin-top:8px}

/* ---------- Most Read sidebar ---------- */
.mhs-learn .top-side{padding:24px;position:sticky;top:90px}
.mhs-learn .top-side h3{font-size:var(--pl-fs-h3);margin-bottom:14px;color:var(--head)}
.mhs-learn .top-list{display:flex;flex-direction:column}
.mhs-learn .top-item{display:grid;grid-template-columns:16px 44px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid rgba(6,40,28,.16);align-items:center}
.mhs-learn .top-item:last-child{border-bottom:none}
.mhs-learn .top-item .n{font-style:italic;font-size:15px;color:var(--head);line-height:1}
.mhs-learn .top-item .th{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;overflow:hidden;background:var(--bgcolor)}
.mhs-learn .top-item .th img{width:100%;height:100%;object-fit:cover}
.mhs-learn .top-item b{font-size:13.5px;line-height:1.35;display:block;color:var(--head)}
.mhs-learn .top-item b:hover{text-decoration:underline;text-underline-offset:3px}
.mhs-learn .top-item small{font-size:11.5px;color:var(--text)}

/* Tablet: sidebar drops below the grid but keeps its card look (handled by
   the .learn-grid breakpoint above); Mobile: single column throughout,
   already covered by the same breakpoint plus .a-row's own 560px rules. */
@media(max-width:920px){
  .mhs-learn .top-side{position:static;top:auto}
}