/* ─────────────────────────────────────────────────────── */
/* ── BLOG — index list + article page ─────────────────── */
/* Loaded only on /{lang}/blog/ pages, on top of main.css. */
/* ─────────────────────────────────────────────────────── */

/* No sidenav here — the page bar and footer span the full width.
   Scoped to `body >` on purpose: main.css styles the bare `header` element
   (white background + bottom border), and an unscoped rule here also caught
   headers used *inside* the article, painting a white slab behind the text. */
body { padding-left: 0 !important; opacity: 1; }
body > header,
body > footer { margin-left: 0 !important; width: 100% !important; }

.nav-item a.nav-active,
.mobile-nav-link.nav-active { color: var(--pink); }

/* ── Index ─────────────────────────────────────────────── */
.blog-index {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 24px 110px;
  font-family: var(--font-body);
  color: var(--black);
}

.blog-index-head { margin-bottom: 40px; }
.blog-index-head h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.blog-index-head p {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.58);
  max-width: 620px;
}

.blog-empty {
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
  padding: 60px 0 40px;
}

/* Newest first — the generator emits them in order */
.post-list { display: flex; flex-direction: column; gap: 18px; }

.post-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  /* Opaque, like every other card on the site — the body grid must not show
     through (see "Site-wide ambient background" in CLAUDE.md). */
  background: #fff;
  box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.post-card:hover {
  border-color: rgba(232, 24, 109, 0.35);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.post-card-link {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: center;
  padding: 18px;
  text-decoration: none;
  color: inherit;
}

/* The cover is a designed graphic with text on it — it must never be cropped,
   so the slot keeps the image's own 1280x670 ratio. */
.post-card-thumb {
  border-radius: 12px;
  overflow: hidden;
  background: #f1f1f4;
  aspect-ratio: 1280 / 670;
}
.post-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.post-card:hover .post-card-title { color: var(--pink); }

.post-card-excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.58);
  margin: 0 0 10px;
}

.post-card-meta,
.post-meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.3px;
  color: var(--pink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.post-meta-dot { color: rgba(0, 0, 0, 0.25); }

/* ── Article ───────────────────────────────────────────── */
.post-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 110px;
  font-family: var(--font-body);
  color: var(--black);
}

.post-crumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.post-crumbs a { color: var(--pink); text-decoration: none; }
.post-crumbs a:hover { text-decoration: underline; }

.post-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.post-meta { margin-bottom: 28px; }

.post-cover {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  margin-bottom: 36px;
  background: #f1f1f4;
}

.post-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 46px 0 14px;
}
.post-inner h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin: 30px 0 10px;
}

.post-inner p {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.78);
  margin-bottom: 16px;
}

.post-lead {
  font-size: 18.5px !important;
  font-weight: 600;
  color: var(--black) !important;
}

.post-inner ul {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}
.post-inner ul li {
  position: relative;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.78);
  margin-bottom: 8px;
}
.post-inner ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

/* Pull-quote style aside for the "same account, same audience" beats */
.post-note {
  border-left: 3px solid var(--pink);
  background: #fdf6f9;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 22px 0 24px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.72);
}

.post-formula {
  font-family: var(--font-mono) !important;
  font-size: 16px !important;
  font-weight: 600;
  background: #f3f3f5;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 8px 0 22px !important;
  color: var(--black) !important;
  overflow-x: auto;
}

.post-table-wrap { overflow-x: auto; margin: 10px 0 26px; }
.post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  min-width: 420px;
}
.post-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  padding: 0 14px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.post-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.5;
}
.post-table tbody tr:last-child td { border-bottom: none; }
.post-table td:last-child { font-weight: 600; white-space: nowrap; }

/* ── CTA + internal links ──────────────────────────────── */
.post-cta {
  margin: 48px 0 36px;
  padding: 30px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fdf0f6 0%, #f6f1fd 100%);
  border: 1px solid rgba(232, 24, 109, 0.16);
  text-align: center;
}
.post-cta h2 {
  margin: 0 0 10px !important;
  font-size: clamp(20px, 2.4vw, 26px) !important;
}
.post-cta p {
  margin: 0 auto 22px !important;
  max-width: 520px;
  font-size: 15.5px !important;
}

.post-links { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.09); }
.post-links ul { list-style: none; padding: 0; margin: 0; }
.post-links li { margin-bottom: 10px; padding-left: 0; }
.post-links li::before { display: none; }
.post-links a {
  color: var(--pink);
  text-decoration: none;
  font-size: 15.5px;
  border-bottom: 1px solid rgba(232, 24, 109, 0.3);
}
.post-links a:hover { border-color: var(--pink); }

.post-also { margin-top: 44px; }
.post-also h2 { font-size: 22px !important; margin: 0 0 18px !important; }
.post-also-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s;
}
.post-also-card:hover { border-color: rgba(232, 24, 109, 0.35); }
.post-also-card img {
  width: 100%;
  aspect-ratio: 1280 / 670;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}
.post-also-card span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

/* ── Phone ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  .blog-index { padding: 34px 16px 70px; }
  .blog-index-head { margin-bottom: 26px; }
  .blog-index-head p { font-size: 15px; }

  .post-list { gap: 14px; }
  .post-card-link {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  .post-card-title { font-size: 17.5px; }
  .post-card-excerpt { font-size: 14px; margin-bottom: 10px; }
  .post-card-meta, .post-meta { font-size: 11.5px; }

  .post-inner { padding: 26px 16px 70px; }
  .post-inner p,
  .post-inner ul li { font-size: 15.5px; line-height: 1.7; }
  .post-lead { font-size: 17px !important; }
  .post-cover { border-radius: 12px; margin-bottom: 26px; }
  .post-inner h2 { margin: 34px 0 12px; }
  .post-cta { padding: 22px 18px; }
  .post-also-card { grid-template-columns: 96px 1fr; }
  .post-also-card span { font-size: 14.5px; }

  /* The budget table has a label and a number. Two columns do not fit a phone
     without sideways scrolling, so each row becomes a stacked label/value pair. */
  .post-table-wrap { overflow-x: visible; }
  .post-table { min-width: 0; font-size: 15px; }
  .post-table thead { display: none; }
  .post-table tbody,
  .post-table tr,
  .post-table td { display: block; width: 100%; }
  .post-table tr {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .post-table tr:last-child { margin-bottom: 0; }
  .post-table td { border: none; padding: 0; }
  .post-table td:first-child {
    color: rgba(0, 0, 0, 0.6);
    font-size: 13.5px;
    margin-bottom: 4px;
  }
  .post-table td:last-child {
    white-space: normal;
    font-weight: 700;
    font-size: 15.5px;
    color: var(--black);
  }

  /* Long one-line formulas would scroll sideways otherwise */
  .post-formula {
    font-size: 14px !important;
    line-height: 1.6;
    white-space: normal;
    overflow-x: visible;
    word-break: break-word;
  }
}

/* ── Scroll-to-top ─────────────────────────────────────── */
/* main.css shows this button on phones only and lifts it above the sticky CTA
   bar. Blog pages have no CTA bar and get long on desktop too, so show it at
   every width and drop it back to the corner. */
.scroll-top-btn {
  display: flex;
  bottom: 24px;
  right: 24px;
}
@supports (padding: env(safe-area-inset-bottom)) {
  .scroll-top-btn { bottom: calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  .scroll-top-btn { bottom: 18px; right: 16px; }
}

/* On the homepage this button is phone-only, so it never needed a hover state.
   Here it lives on desktop too — make it obvious it is hoverable.
   Guarded by (hover: hover): on touch screens :hover latches after a tap and
   the button would stay pink. */
@media (hover: hover) {
  .scroll-top-btn {
    transition: opacity .3s, transform .25s, background .25s, box-shadow .25s;
  }
  .scroll-top-btn:hover {
    background: var(--pink);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -6px rgba(232, 24, 109, 0.55);
  }
  .scroll-top-btn:hover svg { transform: translateY(-1px); }
  .scroll-top-btn svg { transition: transform .25s; }
}
.scroll-top-btn:active {
  background: var(--pink);
  transform: translateY(0) scale(0.9);
}