/* ==========================================================================
   SMA Estimating — blog.css
   Blog index only. Depends on tokens from base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page head
   -------------------------------------------------------------------------- */
.bl-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
}
.bl-crumb {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted-2);
  margin-bottom: 1.1rem;
}
.bl-crumb a { color: var(--muted-2); text-decoration: none; }
.bl-crumb a:hover { color: var(--blue); }
.bl-crumb span { color: var(--line-strong); margin-inline: 0.45rem; }

.bl-hero h1 { max-width: 18ch; }
.bl-hero__lede {
  font-size: var(--fs-lede);
  color: var(--muted);
  max-width: 62ch;
  margin-top: 1.15rem;
  line-height: 1.6;
}

/* Category filter — plain links, no JS. Each points at a real archive URL. */
.bl-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.85rem;
}
.bl-filter a {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.5rem 1rem;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.bl-filter a:hover { border-color: var(--blue); color: var(--blue); }
.bl-filter a[aria-current="page"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* --------------------------------------------------------------------------
   2. Thumbnails — drawn in CSS, so the grid costs no image requests.
   -------------------------------------------------------------------------- */
.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--blue-900) 0%, #04205a 60%, var(--blue-800) 100%);
  overflow: hidden;
  isolation: isolate;
}
.thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 42px 42px;
}
.thumb__cat {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  border: 1px solid rgba(250, 170, 23, 0.4);
  border-radius: 100px;
  padding: 0.3rem 0.7rem;
  background: rgba(6, 22, 56, 0.6);
}
.thumb__n {
  position: absolute;
  right: -0.15em;
  bottom: -0.34em;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(4.5rem, 9vw, 7rem);
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.095);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  user-select: none;
}
.thumb__rule {
  position: absolute;
  left: 0.9rem;
  right: 3.5rem;
  bottom: 1.15rem;
  height: 2px;
  background: var(--gold);
  opacity: 0.85;
}
.thumb__rule::before,
.thumb__rule::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 2px;
  height: 10px;
  background: var(--gold);
}
.thumb__rule::before { left: 0; }
.thumb__rule::after { right: 0; }

/* --------------------------------------------------------------------------
   3. Featured post
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.18s var(--ease);
}
.feature:hover { border-color: var(--line-strong); }
.feature .thumb { aspect-ratio: auto; min-height: 270px; }
.feature__body {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature__tag {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--gold-700);
  margin-bottom: 0.85rem;
}
.feature h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem); }
.feature h2 a { color: inherit; text-decoration: none; }
.feature h2 a:hover { color: var(--blue); }
.feature p { color: var(--muted); margin-top: 0.9rem; max-width: 56ch; }

@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .feature .thumb { aspect-ratio: 16 / 9; min-height: 0; }
}

/* --------------------------------------------------------------------------
   4. Post grid
   -------------------------------------------------------------------------- */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.85rem);
}
.post {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s var(--ease);
}
.post:hover { border-color: var(--line-strong); }
.post__body {
  padding: clamp(1.25rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post h3 { font-size: 1.08rem; line-height: 1.32; }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a:hover { color: var(--blue); }
.post p {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   5. Byline — who wrote it and when, on every card. This is the part that
      does the E-E-A-T work, so it never gets truncated away.
   -------------------------------------------------------------------------- */
.byline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.byline__badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.72rem;
  flex: none;
}
.byline__who {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  display: block;
  line-height: 1.3;
}
.byline__meta {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--muted-2);
  display: block;
  margin-top: 1px;
}
.feature .byline { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   6. Pagination
   -------------------------------------------------------------------------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.pager a,
.pager span {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  min-width: 42px;
  height: 42px;
  padding-inline: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
}
.pager a:hover { border-color: var(--blue); color: var(--blue); }
.pager [aria-current="page"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.pager__gap { border: 0 !important; background: none !important; color: var(--muted-2) !important; min-width: 24px; padding-inline: 0; }

/* --------------------------------------------------------------------------
   7. Topics strip
   -------------------------------------------------------------------------- */
.topics {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.topics h2 { font-size: 1.15rem; }
.topics p { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.4rem; }
.topics ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topics a {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.45rem 0.9rem;
}
.topics a:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 720px) {
  .topics { grid-template-columns: 1fr; align-items: start; }
}