/* ======================================================================
   EYEZ blog — article prose + magazine index styling.
   Built in the EYEZ design system (uses the same tokens as eyez.css).
   ====================================================================== */

/* ---- shared layout ---- */
.eyez-wrap { max-width: 1600px; margin: 0 auto; box-sizing: border-box; }
.eyez-prose-wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* ---- breadcrumb ---- */
.eyez-breadcrumb {
  font-family: "Heebo", sans-serif; font-size: 13px; font-weight: 600;
  color: var(--fg-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.eyez-breadcrumb a { color: var(--fg-2); text-decoration: none; }
.eyez-breadcrumb a:hover { color: var(--primary); }
.eyez-breadcrumb span[aria-current] { color: var(--primary); }

/* ---- article hero ---- */
.article-hero {
  position: relative; width: 100%; box-sizing: border-box;
  min-height: min(560px, 64vh); overflow: hidden; background: var(--surface);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.article-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%; filter: grayscale(0.4);
}
.article-hero__mask { position: absolute; inset: 0; background: #002108; opacity: 0.55; mix-blend-mode: multiply; }
.article-hero__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,18,5,0) 30%, rgba(0,18,5,0.65) 100%); }
.article-hero__inner {
  position: relative; max-width: 1600px; width: 100%; margin: 0 auto;
  box-sizing: border-box; padding: 110px 80px 64px; color: #fff;
}
.article-hero__cat {
  display: inline-flex; align-items: center; background: var(--primary-container);
  color: var(--on-primary-container); padding: 6px 16px; margin-bottom: 22px;
  font-family: "Heebo", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; border-radius: 2px;
}
.article-hero__title { margin: 0 0 18px; color: #fff; line-height: 1.1; max-width: 900px; }
.article-hero__meta { font-family: "Heebo", sans-serif; font-size: 14px; color: rgba(255,255,255,0.85); display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- article body (migrated rich text) ---- */
.article-body { font-family: "Heebo", sans-serif; color: var(--fg-1); font-size: 19px; line-height: 1.85; }
.article-body > *:first-child { margin-top: 0; }
.article-body h2 { font-family: "Heebo", sans-serif; font-weight: 800; font-size: 30px; line-height: 1.25; color: var(--primary); margin: 48px 0 16px; }
.article-body h3 { font-family: "Heebo", sans-serif; font-weight: 700; font-size: 23px; line-height: 1.3; color: var(--primary); margin: 36px 0 12px; }
.article-body h4 { font-weight: 700; font-size: 20px; color: var(--fg-1); margin: 28px 0 10px; }
.article-body p { margin: 0 0 22px; }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-inline-start: 26px; }
.article-body li { margin-bottom: 10px; }
.article-body a { color: var(--eyez-green); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--primary); }
.article-body strong, .article-body b { font-weight: 700; color: var(--fg-1); }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 28px 0; display: block; }
.article-body blockquote {
  margin: 28px 0; padding: 18px 26px; border-inline-start: 4px solid var(--primary-container);
  background: var(--surface-container-low); color: var(--fg-1); font-size: 20px;
}
.article-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 16px; }
.article-body th, .article-body td { border: 1px solid var(--surface-variant); padding: 10px 12px; text-align: right; }
.article-body th { background: var(--surface-container-low); font-weight: 700; }

/* ---- article footer / back link ---- */
.article-foot { border-top: 1px solid var(--surface-variant); margin-top: 56px; padding-top: 32px; }
.eyez-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: "Heebo", sans-serif;
  font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: 4px;
  background: var(--primary-container); color: var(--on-primary-container); text-decoration: none;
}
.eyez-btn--ghost { background: transparent; color: var(--primary); border: 1px solid var(--outline-variant); }

/* ---- magazine index cards ---- */
.kc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px; align-items: stretch; }
.kc-card { display: block; text-decoration: none; grid-column: span 4; }
.kc-card--feature { grid-column: span 8; }
.kc-card > article {
  position: relative; height: 420px; background: var(--surface-container-low);
  box-shadow: var(--shadow-sm); overflow: hidden; border-radius: 4px;
}
.kc-card--feature > article { height: 520px; }
.kc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.95; transition: transform 400ms ease; }
.kc-card:hover .kc-card__img { transform: scale(1.04); }
.kc-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, #fff 0%, #fff 34%, rgba(255,255,255,0.6) 55%, transparent 88%); }
.kc-card__text { position: absolute; bottom: 0; padding: 32px; width: 100%; box-sizing: border-box; }
.kc-card__cat { color: var(--eyez-green); font-family: "Heebo"; font-weight: 700; font-size: 13px; display: block; margin-bottom: 12px; }
.kc-card__title { margin: 0 0 12px; color: var(--primary); line-height: 1.2; font-family: "Heebo", sans-serif; font-weight: 800; font-size: 24px; }
.kc-card--feature .kc-card__title { font-size: 32px; }
.kc-card__excerpt { color: var(--fg-2); font-family: "Heebo"; font-size: 15px; line-height: 1.6; margin: 0; }
.kc-card__date { color: var(--fg-2); font-family: "Heebo"; font-size: 13px; margin-top: 12px; }

@media (max-width: 1024px) {
  .article-hero__inner { padding: 90px 32px 48px; }
  .kc-card, .kc-card--feature { grid-column: span 6; }
}
@media (max-width: 720px) {
  .article-body { font-size: 17px; }
  .article-hero__inner { padding: 80px 20px 36px; }

  /* Single-column magazine grid. The 40px desktop `gap` was tuned for a
     12-track grid — leaving it as-is here would force 11 gaps (440px)
     into a viewport narrower than that, collapsing every 1fr track to
     0 and shifting cards off-canvas. */
  .kc-grid { grid-template-columns: 1fr; gap: 24px; }
  .kc-card, .kc-card--feature { grid-column: 1 / -1; }

  /* Stack image above text using normal flow instead of the desktop's
     absolutely-positioned overlay layout. Note: eyez.css's mobile layer
     already forces `.kc-card article { display:flex; height:auto }`
     via a plain (unscoped) descendant selector, which matches this
     markup — so `.kc-card__img` / `.kc-card__text` MUST be taken out of
     `position:absolute` here, otherwise that flex column has no
     in-flow children and collapses to 0 height. */
  .kc-card > article,
  .kc-card--feature > article {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .kc-card__img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 200px;
    order: 1;
  }
  .kc-card__scrim { display: none; }
  .kc-card__text {
    position: relative;
    inset: auto;
    width: auto;
    box-sizing: border-box;
    order: 2;
    padding: 20px 20px 24px;
  }
}

/* Answer-first opening (AEO): the 40-60-word direct answer prepended to
   articles renders as a quiet design-system callout. */
.article-body .article-answer {
  background: var(--surface-container-low, #f3f4f5);
  border-right: 4px solid var(--primary-container, #4d8053);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 0 0 28px;
  font-weight: 500;
  line-height: 1.75;
}
.article-body .article-answer strong { color: var(--primary, #002108); }