/* TipMate blog — built on the tokens declared in site.css.
   The blog deliberately reuses the landing page's visual system rather than
   inventing one: the warm grey canvas (--page-bg), white cards with soft
   shadows and no borders, #1a1a1d headings and #6B7280 body text on white.
   Moving from the landing page to the blog should not feel like a different
   product. Colours come from tokens so a later redesign carries the blog with it. */

.blog-body { background: var(--page-bg); color: var(--text); font-family: 'Work Sans', sans-serif; position: relative; }
.blog-body h1, .blog-body h2, .blog-body h3, .blog-body h4 { font-family: 'Outfit', sans-serif; }

/* The landing page's hero texture (site.css .hero-bg / .hero-bg::after): a cyan
   glow from above and a 28px dot grid. Reproduced at the top of every blog page
   so the two halves of the site share the same atmosphere, then faded out so it
   never competes with the article. Values match the hero exactly. */
.blog-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 620px;
  pointer-events: none; z-index: 0; overflow: hidden;
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(73,205,254,0.08) 0%, transparent 50%);
}
.blog-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}

/* Content sits above the texture. */
.blog-main, .post-main, .blog-body > nav, .blog-body > footer { position: relative; z-index: 1; }

/* The header itself is styled entirely by site.css, including the
   transparent-until-scrolled treatment — blog pages run the same small scroll
   handler the landing page does, so nothing needs overriding here. */

.blog-main, .post-main { max-width: 1140px; margin: 0 auto; padding: 140px 24px 96px; }
.post-main { max-width: 820px; }

.blog-header { text-align: center; margin-bottom: 40px; }
.blog-header h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; }
.blog-header p { color: var(--light-text2); max-width: 620px; margin: 16px auto 0; line-height: 1.7; }

.blog-categories { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 48px; }
.blog-categories a { padding: 8px 16px; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; color: var(--light-text2); text-decoration: none; font-size: 0.9rem; transition: all 0.2s ease; }
.blog-categories a:hover, .blog-categories a.is-active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); }

/* ─── CARDS — the landing page's testimonial/FAQ card language ─────────── */

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }

.post-card { background: var(--card-white); border: none; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 24px rgba(0,0,0,0.12); transition: all 0.3s ease; }
.post-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.post-card-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.post-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-cover--placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--page-bg-deep) 0%, var(--accent-dim) 100%); }
.post-card-body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card-body h2 { font-size: 1.25rem; line-height: 1.35; }
.post-card-body h2 a { color: #1a1a1d; text-decoration: none; }
.post-card-body h2 a:hover { color: var(--accent); }
.post-card-body p { color: #6B7280; font-size: 0.95rem; line-height: 1.6; flex: 1; }
.post-card-meta { display: flex; flex-wrap: wrap; gap: 6px; color: #9a9aa2; font-size: 0.82rem; }

.post-chip { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--accent-dim); border: 1px solid var(--accent-border); color: #1481a8; font-size: 0.78rem; font-weight: 600; }

/* ─── POST PAGE ────────────────────────────────────────────────────────── */

/* site.css styles every <nav> that lacks a `nav` class as the fixed page header
   (`nav:not(.nav)`, specificity 0,1,1). The breadcrumb and pagination are
   semantic <nav>s further down the page, so without these resets they get
   pinned to the viewport top. `body.blog-body nav.post-breadcrumb` is (0,2,2)
   and wins regardless of stylesheet order. */
body.blog-body nav.post-breadcrumb {
  position: static; top: auto; left: auto; right: auto; z-index: auto;
  display: block; padding: 0; justify-content: normal; text-align: left;
  background: transparent; border-bottom: none; transition: none;
  color: var(--light-muted); font-size: 0.85rem; margin-bottom: 24px;
}
.post-breadcrumb a { color: var(--light-text2); text-decoration: none; }
.post-breadcrumb a:hover { color: var(--accent); }

.post-header { margin-bottom: 28px; }
.post-header h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin: 16px 0; }
.post-meta { color: var(--light-muted); font-size: 0.9rem; }

/* The white article sheet used to be pulled up over the image (margin-bottom
   -60px). With no cover that was invisible, but a real cover left the first
   line of text sitting right on the image's bottom edge. A positive gap keeps
   the image and the sheet as two separate cards, matching the 28px rhythm the
   post header already uses. */
.post-hero-cover { margin: 0 0 28px; border-radius: 24px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.18); }
.post-hero-cover img { width: 100%; height: auto; display: block; }

/* The article sits on a white sheet, like every other content surface on the
   site. Long-form reading against the grey canvas would be the one place the
   blog diverged from the landing page — and the least comfortable to read. */
.post-content {
  background: var(--card-white);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  padding: clamp(28px, 5vw, 56px);
  font-size: 1.08rem; line-height: 1.8; color: #4B5563;
}
.post-content > * + * { margin-top: 1.4em; }
.post-content h2, .post-content h3, .post-content h4 { color: #1a1a1d; }
.post-content h2 { font-size: 1.65rem; font-weight: 700; margin-top: 2.2em; letter-spacing: -0.01em; }
.post-content h3 { font-size: 1.3rem; font-weight: 600; margin-top: 1.8em; }
.post-content h4 { font-size: 1.1rem; font-weight: 600; margin-top: 1.6em; }
.post-content a { color: #1481a8; text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: #0f6787; }
.post-content strong { color: #1a1a1d; }
.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content li + li { margin-top: 0.5em; }
.post-content img { max-width: 100%; height: auto; border-radius: 12px; }
.post-content figure { margin: 2em 0; }
.post-content figcaption { color: #9a9aa2; font-size: 0.86rem; text-align: center; margin-top: 10px; }
.post-content blockquote { border-left: 3px solid var(--accent); padding-left: 20px; color: #6B7280; font-style: italic; }
.post-content pre { background: #f5f5f7; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 18px; overflow-x: auto; color: #1a1a1d; }
.post-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.post-content hr { border: none; border-top: 1px solid rgba(0,0,0,0.1); margin: 2.5em 0; }
.post-content details { background: #f8f8fa; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 16px 20px; }
.post-content summary { cursor: pointer; font-weight: 600; color: #1a1a1d; }

.post-callout { display: flex; gap: 14px; background: var(--gold-dim); border: 1px solid var(--gold-glow); border-radius: 12px; padding: 18px 20px; color: #1a1a1d; }
.post-callout-icon { font-size: 1.2rem; line-height: 1.5; }
.post-callout p { margin: 0; }

.post-table-wrap { overflow-x: auto; }
.post-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.post-table-wrap th, .post-table-wrap td { border: 1px solid rgba(0,0,0,0.1); padding: 10px 14px; text-align: left; }
.post-table-wrap th { background: #f5f5f7; font-weight: 600; color: #1a1a1d; }

.post-cta { margin-top: 40px; background: var(--card-white); border-radius: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.12); padding: 40px; text-align: center; }
.post-cta h2 { font-size: 1.6rem; font-weight: 700; color: #1a1a1d; }
.post-cta p { color: #6B7280; margin: 14px auto 24px; max-width: 520px; line-height: 1.7; }
.post-cta-button { display: inline-block; padding: 14px 30px; border-radius: 999px; background: var(--gradient-accent); color: var(--bg); font-weight: 700; text-decoration: none; }
.post-cta-button:hover { filter: brightness(1.08); }

.related-posts { margin-top: 80px; }
.related-posts h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; }

/* Same reset reasoning as .post-breadcrumb above. */
body.blog-body nav.pagination {
  position: static; top: auto; left: auto; right: auto; z-index: auto;
  padding: 0; display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 56px; color: var(--light-text2);
  background: transparent; border-bottom: none; transition: none;
}
.pagination a { color: var(--accent); text-decoration: none; font-weight: 600; }

.blog-empty { text-align: center; color: var(--light-text2); padding: 60px 0; }

.lang-switcher .lang-btn { text-decoration: none; }

@media (max-width: 768px) {
  .blog-main, .post-main { padding: 110px 18px 72px; }
  .post-grid { grid-template-columns: 1fr; }
  .post-cta { padding: 28px 20px; }
  .post-hero-cover { margin-bottom: 20px; }
}