/* ── Blog posts grid ──────────────────────────────────────────────────────
   3 × 3 grid of blog cards (image, title, description, continue-reading button).
   Lives on the grey section, so colours follow the dark-on-light scheme used by
   tf.css / case-card.                                                          */

/* Hero subtitle — matches the index page's .logos-section__label
   (mono, uppercase, wide tracking) but sits under the hero h1. */
.blog-subtitle {
  margin: 0 0 38px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
  opacity: 0.95;
}

/* ── Blog hero: featured posts ─────────────────────────────────────────────
   The blog reuses the full-height .hero--product treatment, but instead of
   vertically centring one block it splits the hero top→bottom: the heading
   sits near the top and a row of three featured posts sits near the fold, so
   all three are visible on the first screen. The split (space-between) is
   scoped to .hero--blog so product.html's centred hero is untouched. */
@media (min-width: 1301px) {
  .hero--blog { justify-content: space-between; }
}

.blog-featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  width: 100%;
  max-width: var(--col-width);
  margin: 0 auto;
}

/* Compact post card — smaller sibling of .blog-card, dark/translucent so it
   reads over the hero background image. Whole card is the link. */
.blog-featured__card {
  display: flex;
  flex-direction: column;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-decoration: none;
  position: relative;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.blog-featured__card:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
}

/* Orange corner accent (top-left) — matches .blog-card's language */
.blog-featured__card::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--orange);
  top: -5px;
  left: -5px;
  z-index: 1;
}

.blog-featured__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.blog-featured__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.blog-featured__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

.blog-featured__title {
  font-family: var(--font-pixel);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
  /* Clamp to 3 lines so the three cards stay the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  padding: 60px 38px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border: 1px solid rgba(0, 0, 0, 0.12);
  position: relative;
}

/* Orange corner accents — matches .case-card */
.blog-card::before,
.blog-card::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--orange);
  z-index: 1;
  left: -6px;
}
.blog-card::before { top: -6px; }
.blog-card::after  { bottom: -6px; }

.blog-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.blog-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.blog-card__title {
  font-family: var(--font-pixel);
  font-size: 22px;
  font-weight: 400;
  color: var(--black);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.blog-card__desc {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--black);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* CONTINUE READING — orange border with black corner brackets, mirrors .tf-item__btn */
.blog-card__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  padding: 11px 18px;
  border: 1px solid var(--orange);
  position: relative;
  margin-top: 6px;
  transition: background 0.18s ease, color 0.18s ease;
}

.blog-card__btn::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  background:
    linear-gradient(var(--black), var(--black)) top    left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--black), var(--black)) top    left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--black), var(--black)) top    right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--black), var(--black)) top    right / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--black), var(--black)) bottom left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--black), var(--black)) bottom left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--black), var(--black)) bottom right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--black), var(--black)) bottom right / var(--bracket-w) var(--bracket)  no-repeat;
}

.blog-card__btn:hover {
  background: var(--orange);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .blog-featured { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; padding: 0 20px; }
  /* On phones the hero is compact (mobile.css), so the featured cards flow
     after the heading; stack them and cap the height of the now-larger row. */
  .blog-featured { grid-template-columns: 1fr; gap: 16px; padding: 0 20px; }
}


/* ── Single blog post ──────────────────────────────────────────────────────
   Dark-theme article page: featured image hero with the title overlaid, then a
   centred reading column. Used by blog-post.html (the post template).          */

.post {
  padding: 70px 38px 0;
}

/* Hero: title + meta overlaid on the full-width featured image. The image is
   the page-level .bg-layer (absolute, top:0, full viewport width) clipped to
   this hero's bottom in blog-post.html — exactly how the index/product heroes
   work, so it sits behind the transparent nav and bleeds edge to edge. This box
   only reserves height and positions the title/meta at the bottom. */
.post-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
}

/* Template variant (js/post-hero.js): the featured image is sized to its
   natural height with the bottom quarter faded into the body, so the title and
   meta sit over the TOP of the image rather than the bottom. Scoped to the
   data-hero-img attribute so case studies (still using the clip-to-hero script)
   keep the bottom-aligned treatment. */
.post-hero[data-hero-img] { align-items: flex-start; }

.post-hero__content {
  position: relative;
  width: 100%;
  padding: 44px;
}

.post-hero__meta {
  display: flex;
  gap: 18px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.post-hero__cat    { color: var(--orange); }
.post-hero__date   { color: rgba(255, 255, 255, 0.55); }
.post-hero__author { color: rgba(255, 255, 255, 0.85); }

/* Optional author link: present only when the name is wrapped in an <a>
   (e.g. a LinkedIn profile). Underlined and brighter than the byline at rest
   so it clearly reads as a link; turns orange on hover. Plain-text bylines
   (no <a>) stay non-clickable. */
.post-hero__author-link {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.post-hero__author-link:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}

.post-hero__title {
  font-family: var(--font-pixel);
  font-size: 54px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 900px;
  margin: 0;
}

/* Body: centred reading column */
.post-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 0 110px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.75;
}

.post-body > * + * { margin-top: 1.5em; }

.post-body__lead {
  font-size: 22px;
  line-height: 1.6;
  color: var(--white);
  font-weight: 300;
}

.post-body h2 {
  font-family: var(--font-pixel);
  font-size: 30px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 1.9em;
  margin-bottom: 0;
}

.post-body a { color: var(--orange); }

/* Lists: the global reset strips bullets, so restore them inside the article. */
.post-body ul,
.post-body ol { padding-left: 1.4em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-top: 0.4em; }
.post-body li::marker { color: var(--orange); }

/* Code: inline + block. Used by dev-flavoured posts (e.g. the MATLAB walkthrough).
   Faint panel on the dark article background; mono font from the design system. */
.post-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: rgba(255, 255, 255, 0.09);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--white);
}
.post-body pre {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 4px;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.post-body pre code { background: none; padding: 0; font-size: inherit; }

@media (max-width: 720px) {
  .post { padding: 40px 20px 0; }
  .post-hero__content { padding: 28px 22px; }
  .post-hero__title { font-size: 36px; }
  .post-body { font-size: 17px; padding: 44px 0 80px; }
}