/* jdi-blog.css — safe visual redesign for /blog/ + /blog/category/*
   Zero DOM changes. Zero URL changes. All upgrades via CSS overrides
   on the existing source markup so SEO signals + indexed URLs stay
   byte-identical.
*/

/* ---- Blog index (/blog/) — featured grid ------------------------------- */

/* Top-3 featured area is <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 auto-rows-fr">
   with 3 <.blog-card> children. We promote card #1 to a 2-row hero on desktop. */

@media (min-width: 1024px) {
  .grid.auto-rows-fr:has(> .blog-card) {
    grid-template-columns: 1.6fr 1fr;
    grid-auto-rows: 1fr;
  }
  .grid.auto-rows-fr > .blog-card:first-child {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
  }
  .grid.auto-rows-fr > .blog-card:first-child .h-48 {
    height: 480px;
  }
  .grid.auto-rows-fr > .blog-card:first-child h2 {
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }
  .grid.auto-rows-fr > .blog-card:nth-child(n + 2) .h-48 {
    height: 220px;
  }
}

/* "Featured Articles" eyebrow added via CSS content on the featured grid.
   Spans full width + sits above the cards. */
.grid.auto-rows-fr:has(> .blog-card)::before {
  content: "Featured Articles";
  grid-column: 1 / -1;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #50A747;
  margin-bottom: 20px;
}

/* Universal card polish — enlarged photos, cleaner spacing */
.blog-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 30px rgba(0, 0, 0, 0.08);
}
.blog-card h2 a {
  letter-spacing: -0.005em;
}
.blog-card time {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px !important;
  color: #50A747 !important;
}

/* ---- Blog index — "Recent Articles" grid (text-focused source grid) ---- */

/* The source wraps the recent list in a .mt-24 container with a <div class="grid ..."> */
.mt-24 > .relative > .grid {
  padding-top: 40px;
}
.mt-24 > .relative > .grid::before {
  content: "Recent Articles";
  grid-column: 1 / -1;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #50A747;
  margin: 0 0 8px 0;
  padding-top: 24px;
}

/* Make recent cards more inviting */
.mt-24 .grid > article {
  padding: 24px !important;
  transition: background-color 180ms ease, transform 180ms ease;
}
.mt-24 .grid > article:hover {
  transform: translateY(-1px);
}
.mt-24 .grid > article time {
  font-size: 11px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #50A747 !important;
  font-weight: 600;
}
.mt-24 .grid > article h2 {
  font-size: 20px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.005em;
}
.mt-24 .grid > article h2 a {
  color: #111 !important;
}
.mt-24 .grid > article h2 a:hover {
  color: #50A747 !important;
}
.mt-24 .grid > article p {
  color: #555 !important;
  line-height: 1.6 !important;
}

/* ---- Category pages (/blog/category/*/) -------------------------------- */

/* Category pages use a different source layout — image + button-styled post
   links. Universal styling improvements on the common wrappers. */

/* Enlarge thumbnail area, soften borders, add hover lift */
article picture img,
article > div > picture img {
  transition: transform 300ms ease;
}
article:hover picture img {
  transform: scale(1.03);
}

/* Taller cards on category pages where we have thumbnails */
.gatsby-image-wrapper-constrained {
  border-radius: 8px;
  overflow: hidden;
}

/* ---- Both: H1 band + global polish ------------------------------------- */

/* Give the H1 band a touch more breathing room and better visual weight */
main h1,
.layout-container h1 {
  letter-spacing: -0.02em;
}

/* Make Read link accents consistent + arrow motion */
a .lucide,
.text-jdi-accent svg {
  transition: transform 180ms ease;
}
.group:hover .lucide,
a:hover .lucide {
  transform: translateX(2px);
}