/* ============================================================
   Blog styles — Meteor Pulse
   Uses the design tokens already defined in styles.css, so the
   blog inherits light/dark mode automatically.
   ============================================================ */

/* ---------- shared: breadcrumb + page frame ----------
   The rest of the site renders inside .container (max-width 1200px, centred).
   Narrowing .post-container would centre a small column in the viewport, so the
   article would start well to the right of the header logo and footer. Instead
   keep the 1200px frame — so the left edge lines up with every other page — and
   constrain the reading column inside it via .post-layout below. */
.post-container { max-width: 1200px; }
.post-breadcrumb {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--brand-yellow); margin-bottom: 20px;
}
.post-breadcrumb a { color: var(--brand-yellow); text-decoration: none; opacity: .75; }
.post-breadcrumb a:hover { opacity: 1; }
.post-breadcrumb .sep { margin: 0 8px; opacity: .5; }
.post-breadcrumb span:not(.sep) {
  color: var(--text-body); font-weight: 400; letter-spacing: .5px;
  text-transform: none; font-size: 12px;
}

/* ---------- article ---------- */
.post { padding: 60px 0 80px; }

/* Spanning the full container, edge to edge, the way the service pages do with
   their card grids. The arithmetic has to land exactly on the container's inner
   width or the right edge goes ragged:
       1200 container - 64 padding = 1136 available
       712 reading column + 64 gap + 360 sidebar = 1136   ✓
   712px keeps the text measure at roughly 80 characters, which stays readable —
   widening body copy to the full 1136px would be ~130 characters per line. */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 64px;
  align-items: start;
}
/* The contents list comes first in the HTML (so screen readers announce it
   before the article, not after). These explicit placements put it back on the
   right visually — grid position is independent of source order. */
.post-main    { min-width: 0; grid-column: 1; grid-row: 1; }
.post-sidebar { grid-column: 2; grid-row: 1; position: sticky; top: 96px; }
.post-sidebar .post-toc { margin-bottom: 0; }

/* No table of contents (short post): single column, capped for readability. */
.post-layout-solo { grid-template-columns: minmax(0, 780px); }

/* The header block and hero span the full frame so the article reads as one
   edge-to-edge block rather than a narrow column floating on the left. */
.post h1 { max-width: 900px; }

@media (max-width: 1080px) {
  /* Single column. Source order already puts the contents list first, so it
     stacks above the article without needing an order override. */
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .post-sidebar { grid-column: 1; grid-row: 1; position: static; margin-bottom: 34px; }
  .post-main    { grid-column: 1; grid-row: 2; }
  .post-sidebar .post-toc { margin-bottom: 0; }
}
.post h1 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 900; line-height: 1.15; letter-spacing: -1px;
  color: var(--text-headline); margin: 0 0 18px;
}
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: 'Oxygen', sans-serif; font-size: 13px;
  color: var(--text-body); opacity: .8;
  padding-bottom: 26px; border-bottom: 1px solid var(--border); margin-bottom: 34px;
}
.post-meta .dot { opacity: .5; }

/* ---------- table of contents ---------- */
.post-toc {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-left: 3px solid var(--brand-yellow);
  border-radius: 12px; padding: 22px 26px; margin-bottom: 38px;
}
.post-toc-title {
  font-family: 'Oxygen', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-headline); margin-bottom: 12px;
}
.post-toc ul { margin: 0; padding-left: 18px; }
.post-toc li { margin: 8px 0; font-size: 14px; line-height: 1.45; }
.post-toc a { color: var(--text-body); text-decoration: none; }
.post-toc a:hover { color: var(--text-headline); text-decoration: underline; text-decoration-color: var(--brand-yellow); }

/* ---------- body copy ---------- */
.post-body { font-size: 17px; line-height: 1.75; color: var(--text-body); }
.post-body > *:first-child { margin-top: 0; }
.post-body p { margin: 0 0 20px; }
.post-body h2 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(23px, 2.7vw, 30px); font-weight: 900;
  line-height: 1.25; letter-spacing: -.5px;
  color: var(--text-headline); margin: 46px 0 16px; scroll-margin-top: 90px;
}
.post-body h3 {
  font-family: 'Oxygen', sans-serif; font-size: 19px; font-weight: 700;
  color: var(--text-headline); margin: 34px 0 12px; line-height: 1.35;
}
.post-body strong { color: var(--text-headline); font-weight: 700; }
.post-body a {
  color: var(--text-headline); text-decoration: underline;
  text-decoration-color: var(--brand-yellow); text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.post-body a:hover { background: rgba(254,215,3,.18); }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 24px; }
.post-body li { margin: 9px 0; }
.post-body li::marker { color: var(--brand-yellow); font-weight: 700; }

.post-body blockquote {
  margin: 28px 0; padding: 18px 24px;
  background: var(--bg-alt); border-left: 3px solid var(--brand-yellow);
  border-radius: 0 10px 10px 0; font-size: 16px;
}
.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}

.post-body hr { border: 0; border-top: 1px solid var(--border); margin: 42px 0; }

/* ---------- tables ---------- */
.post-body table {
  width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15px;
  display: block; overflow-x: auto;
}
.post-body thead { background: var(--bg-alt); }
.post-body th, .post-body td {
  border: 1px solid var(--border); padding: 11px 14px;
  text-align: left; vertical-align: top;
}
.post-body th {
  font-family: 'Oxygen', sans-serif; font-weight: 700;
  color: var(--text-headline); font-size: 13px;
  letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
}

/* ---------- in-post CTA ---------- */
.post-cta {
  margin: 52px 0 0; padding: 32px 34px;
  background: linear-gradient(135deg, rgba(254,215,3,.10), rgba(254,215,3,.03));
  border: 1px solid rgba(254,215,3,.4); border-radius: 16px;
}
.post-cta h3 {
  font-family: 'Nunito', sans-serif; font-size: 22px; font-weight: 900;
  color: var(--text-headline); margin: 0 0 10px; letter-spacing: -.3px;
}
.post-cta p { font-size: 15px; color: var(--text-body); line-height: 1.7; margin: 0 0 20px; }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.post-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-yellow); color: #142b6f;
  font-family: 'Oxygen', sans-serif; font-weight: 700; font-size: 14px;
  padding: 13px 24px; border-radius: 10px; text-decoration: none;
  box-shadow: 0 8px 20px rgba(254,215,3,.28);
  transition: transform .2s, box-shadow .2s;
}
.post-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(254,215,3,.4); }

/* Second route out, matching the green treatment used on the contact page. */
.post-cta-btn-wa {
  background: linear-gradient(135deg, #25D366 0%, #1ebe5d 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(37,211,102,.30);
}
.post-cta-btn-wa:hover { box-shadow: 0 12px 26px rgba(37,211,102,.45); }
.post-cta-btn-wa i { font-size: 17px; }

@media (max-width: 480px) {
  .post-cta-actions { flex-direction: column; }
  .post-cta-btn { justify-content: center; }
}

.post-back { margin-top: 38px; }
.post-back a {
  font-family: 'Oxygen', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--text-headline); text-decoration: none;
}
.post-back a:hover { text-decoration: underline; text-decoration-color: var(--brand-yellow); }

/* ---------- listing page ---------- */
.blog-index { padding: 60px 0 90px; }
.blog-index h1 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(30px, 4.2vw, 46px); font-weight: 900;
  line-height: 1.15; letter-spacing: -1px;
  color: var(--text-headline); margin: 0 0 16px; max-width: 800px;
}
.blog-index-lead {
  font-size: 17px; color: var(--text-body); line-height: 1.7;
  max-width: 660px; margin: 0 0 46px;
}
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px;
}
.blog-card {
  display: block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px 30px; text-decoration: none;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.blog-card:hover {
  border-color: var(--brand-yellow); transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.07);
}
.blog-card-meta {
  font-family: 'Oxygen', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--brand-yellow); margin-bottom: 12px;
}
.blog-card h2 {
  font-family: 'Nunito', sans-serif; font-size: 21px; font-weight: 900;
  line-height: 1.3; letter-spacing: -.3px;
  color: var(--text-headline); margin: 0 0 12px;
}
.blog-card p { font-size: 15px; color: var(--text-body); line-height: 1.65; margin: 0 0 18px; }
.blog-card-link {
  font-family: 'Oxygen', sans-serif; font-size: 13.5px; font-weight: 700;
  color: var(--text-headline);
}

@media (max-width: 640px) {
  .post { padding: 40px 0 60px; }
  .post-body { font-size: 16px; }
  .post-cta { padding: 24px 22px; }
  .post-toc { padding: 18px 20px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card { padding: 24px 22px; }
}

/* ---------- hero image ---------- */
.post-hero {
  margin: 0 0 38px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  aspect-ratio: 1200 / 630;
}
.post-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- listing card thumbnails ---------- */
.blog-card { padding: 0; overflow: hidden; }
.blog-card-thumb {
  aspect-ratio: 1200 / 630; background: var(--bg-alt);
  border-bottom: 1px solid var(--border); overflow: hidden;
}
.blog-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.04); }
.blog-card-inner { padding: 26px 28px 28px; }
@media (max-width: 640px) { .blog-card-inner { padding: 22px 20px 24px; } }