/* ==========================================================================
   SIGMA SCANNER — blog.css
   §11 Learn · a magazine lead-story + two secondary cards.

   ---------------------------------------------------------------------------
   WHY THE "IMAGES" ARE CHARTS
   ---------------------------------------------------------------------------
   data/blogs.json marks all three posts unpublished (href/image/alt all
   null) and its own imageSpec.rule bans stock photography outright:
   "Editorial imagery only — charts, data, or original photography." A
   bespoke SVG chart illustrating each post's actual argument (diverging
   backtest curves, a drawdown V, a rebalance-frequency comparison) is
   exactly what that rule allows, and is the honest way to give these cards
   a real "large featured image" without a fabricated photo standing in for
   a photograph that does not exist.

   ---------------------------------------------------------------------------
   WHY "READ MORE" DOESN'T NAVIGATE
   ---------------------------------------------------------------------------
   Same data file: "the renderer omits any entry whose href is null rather
   than shipping a dead card." All three are null. Rather than omit the
   section's entire content, every card ships complete with a real, animated
   hover treatment — the actual craft being asked for — attached to a
   plainly-labelled "Coming soon" badge instead of a link that would 404.

   ---------------------------------------------------------------------------
   LAYER DISCIPLINE
   ---------------------------------------------------------------------------
   Base rules and every responsive override live together in
   @layer components — an override left in @layer layout has silently lost
   to a components-layer base rule twice already in this project, regardless
   of specificity or matching media query.
   ========================================================================== */

@layer components {

  /* ========================================================================
     SECTION SHELL
     ======================================================================== */
  .blog { position: relative; isolation: isolate; overflow: clip; }

  .blog__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(50% 45% at 96% 6%,  rgb(16 160 80 / .07) 0%, rgb(16 160 80 / 0) 70%),
      radial-gradient(55% 50% at 2% 98%,  rgb(34 197 94 / .06) 0%, rgb(34 197 94 / 0) 70%);
  }

  .blog .ss-container { position: relative; z-index: 1; }

  .blog__header { max-inline-size: 560px; margin-block-end: var(--sp-9); }

  .blog__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: var(--ink-900);
    margin-block-start: var(--sp-3);
  }

  /* ========================================================================
     GRID
     ======================================================================== */
  .blog__grid { display: flex; flex-direction: column; gap: var(--sp-7); }

  /* ========================================================================
     CARD
     ======================================================================== */
  .blog-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-xl);
    background: var(--paper);
    border: 1px solid var(--ink-150);
    overflow: clip;
    transition: transform var(--dur-base) var(--ease-out-cubic), box-shadow var(--dur-base) var(--ease-out-cubic), border-color var(--dur-base) var(--ease-out-cubic);
  }
  @media (hover: hover) and (pointer: fine) {
    .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--ink-200); }
  }

  .blog-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ink-050);
  }
  .blog-cover {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    transition: transform var(--dur-cine) var(--ease-out-cubic);
  }
  @media (hover: hover) and (pointer: fine) {
    .blog-card:hover .blog-cover { transform: scale(1.06); }
  }

  .blog-cover__gap { fill: var(--signal-100); opacity: .6; stroke: none; }
  .blog-cover__line { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
  .blog-cover__line--fitted { stroke: var(--ink-300); stroke-width: 2; stroke-dasharray: 4 4; }
  .blog-cover__line--real { stroke: var(--signal-600); stroke-linecap: round; }
  .blog-cover__peak { stroke: var(--ink-300); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
  .blog-cover__bracket { fill: none; stroke: var(--ink-400); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
  .blog-cover__label {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    fill: var(--data-loss-text);
  }
  .blog-cover__bars rect { fill: var(--signal-600); }
  .blog-cover__bars rect:nth-child(2) { fill: var(--signal-500); }
  .blog-cover__bars rect:nth-child(3) { fill: var(--signal-600); }
  .blog-cover__bars rect:nth-child(4) { fill: var(--signal-700); }

  .blog-card__coming-soon {
    position: absolute;
    inset-block-start: var(--sp-3);
    inset-inline-end: var(--sp-3);
    padding: 4px var(--sp-3);
    border-radius: var(--r-full);
    background: rgb(7 26 18 / .68);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
  }

  .blog-card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); }

  .blog-card__meta { display: flex; align-items: center; gap: var(--sp-2); }
  .blog-card__category {
    padding: 2px var(--sp-3);
    border-radius: var(--r-full);
    background: var(--signal-050);
    color: var(--signal-700);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .blog-card__dot { color: var(--ink-300); }
  .blog-card__reading { font-size: var(--fs-xs); color: var(--ink-400); }

  .blog-card__title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    line-height: 1.3;
    color: var(--ink-900);
  }

  .blog-card__excerpt { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-500); }

  .blog-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-start: var(--sp-2);
    color: var(--ink-400);
    font-size: var(--fs-sm);
    font-weight: 600;
  }
  .blog-card__cta-arrow { inline-size: 16px; block-size: 16px; transition: transform var(--dur-base) var(--ease-out-cubic); }
  @media (hover: hover) and (pointer: fine) {
    .blog-card:hover .blog-card__cta { color: var(--signal-700); }
    .blog-card:hover .blog-card__cta-arrow { transform: translateX(4px); }
  }

  /* ========================================================================
     LEAD CARD — larger, horizontal on desktop
     ======================================================================== */
  .blog-card--lead .blog-card__title { font-size: var(--fs-h3); }
  .blog-card--lead .blog-card__excerpt { max-inline-size: 52ch; }

  /* ========================================================================
     RESPONSIVE — all in @layer components, see file header
     ======================================================================== */
  @media (min-width: 640px) {
    .blog-card__body { padding: var(--sp-7); }
  }

  @media (min-width: 1024px) {
    .blog__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-7);
    }
    .blog-card--lead {
      grid-column: 1 / -1;
      flex-direction: row;
    }
    .blog-card--lead .blog-card__media { flex: 0 0 56%; aspect-ratio: auto; }
    .blog-card--lead .blog-card__body { flex: 1 1 auto; justify-content: center; padding: var(--sp-9); }
  }
}