/* ── Blog — Emerald Banking theme (hardcoded) ─────────────────────── */

.blog-body {
  --blog-bg: #F0FDF4;
  --blog-surface: #ffffff;
  --blog-surface-alt: #ECFDF5;
  --blog-border: rgba(5, 150, 105, 0.08);
  --blog-border-strong: rgba(5, 150, 105, 0.15);
  --blog-text: #064E3B;
  --blog-text-secondary: #065F46;
  --blog-text-muted: #047857;
  --blog-accent: #059669;
  --blog-accent-hover: #047857;
  --blog-gradient: linear-gradient(135deg, #059669, #10B981);
  --blog-card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);

  margin: 0;
  padding: 0;
  background: var(--blog-bg);
  color: var(--blog-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Nav ──────────────────────────────────────────────────────────── */

.blog-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
}

.blog-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--blog-text);
  font-weight: 700;
  font-size: 18px;
}

.blog-nav-brand img {
  height: 32px;
  width: auto;
}

.blog-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blog-nav-links a {
  text-decoration: none;
  color: var(--blog-text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}

.blog-nav-links a:hover {
  color: var(--blog-accent);
}

.blog-nav-btn {
  display: inline-block;
  padding: 8px 18px;
  background: var(--blog-gradient);
  color: #fff !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}

.blog-nav-btn:hover {
  opacity: 0.9;
}

/* ── Mobile hamburger (hidden on desktop) ── */
.blog-mobile-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; z-index: 101;
}
.blog-mobile-toggle span {
  display: block; width: 22px; height: 2px; background: var(--blog-text);
  border-radius: 2px; transition: transform 0.25s, opacity 0.25s;
}
.blog-mobile-toggle span + span { margin-top: 5px; }
.blog-nav--open .blog-mobile-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.blog-nav--open .blog-mobile-toggle span:nth-child(2) { opacity: 0; }
.blog-nav--open .blog-mobile-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Page layout ─────────────────────────────────────────────────── */

.blog-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-top: 16px;
}

.blog-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--blog-text);
  margin: 0;
}

/* ── Post list (Phase 133 — list-view layout) ────────────────────── */
/* Both post_list.html and author_page.html render through these.
   The earlier .blog-grid / .blog-card cluster was removed when both
   templates migrated to the list layout (mockup option 4 picked from
   docs/archive/blog_layout_mockups.html). */

.blog-list {
  margin-bottom: 40px;
}

.blog-list-row {
  display: flex;
  gap: 22px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--blog-border);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s, transform 0.12s;
  border-radius: 8px;
}

.blog-list-row:hover {
  background: var(--blog-surface-alt);
}

.blog-list-row:first-child { padding-top: 4px; }
.blog-list-row:last-child { border-bottom: none; }

.blog-list__thumb {
  flex-shrink: 0;
  width: 180px;
  height: 135px; /* 4:3 */
  border-radius: 10px;
  overflow: hidden;
  background: var(--blog-surface-alt);
}

.blog-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-list__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--blog-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: rgba(255,255,255,0.4);
}

.blog-list__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.blog-list__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: var(--blog-text);
  transition: color 0.12s;
}

.blog-list-row:hover .blog-list__title { color: var(--blog-accent); }

.blog-list__excerpt {
  font-size: 14px;
  color: var(--blog-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-list__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
  font-size: 13px;
  color: var(--blog-text-muted);
  flex-wrap: wrap;
}

.blog-list__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blog-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.blog-list__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Phase 133 — view-count chip. Currently gated to {% if user.is_staff %}
   in templates/blog/post_list.html and templates/blog/author_page.html.
   To make publicly visible later, drop the if/endif (or replace with a
   SiteSettings flag). The chip styling carries no staff-specific marker
   when shown to anonymous visitors — only the small uppercase "staff"
   label needs to come out, which is conditional on its own. */
.blog-view-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blog-text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blog-surface-alt);
  border: 1px solid var(--blog-border);
}
.blog-view-count::before {
  content: "👁";
  font-size: 11px;
  opacity: 0.8;
}
.blog-view-count__marker {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 4px;
}

/* ── Post detail ─────────────────────────────────────────────────── */

.blog-post {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.blog-post__featured {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 32px;
}

.blog-post__title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--blog-text);
  margin: 0 0 16px 0;
}

.blog-post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  font-size: 14px;
  color: var(--blog-text-muted);
}

.blog-post__author-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--blog-text-secondary);
  font-weight: 500;
}

.blog-post__author-link:hover {
  color: var(--blog-accent);
}

.blog-post__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blog-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.blog-post__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post__actions {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

/* ── Blog content (rendered markdown) ────────────────────────────── */

.blog-content {
  font-size: 16px;
  line-height: 1.75;
  color: var(--blog-text);
  /* Long bare URLs / long words in author-written markdown must wrap, not
     push the page wider than the phone viewport (Phase 167). */
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-content h1 { font-size: 28px; font-weight: 700; margin: 32px 0 16px; }
.blog-content h2 { font-size: 24px; font-weight: 700; margin: 28px 0 14px; }
.blog-content h3 { font-size: 20px; font-weight: 600; margin: 24px 0 12px; }
.blog-content h4 { font-size: 17px; font-weight: 600; margin: 20px 0 10px; }

.blog-content p { margin: 0 0 16px; }

.blog-content a {
  color: var(--blog-accent-hover);
  text-decoration: underline;
  text-decoration-color: rgba(4, 120, 87, 0.45);
  text-underline-offset: 2px;
}
.blog-content a:hover { text-decoration-color: var(--blog-accent-hover); }

.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
}

.blog-content blockquote {
  border-left: 3px solid var(--blog-accent);
  margin: 16px 0;
  padding: 12px 20px;
  background: var(--blog-surface-alt);
  border-radius: 0 8px 8px 0;
  color: var(--blog-text-secondary);
}

.blog-content pre {
  background: #064E3B;
  color: #D1FAE5;
  padding: 16px 20px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.5;
}

.blog-content code {
  background: var(--blog-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--blog-accent-hover);
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.blog-content th,
.blog-content td {
  border: 1px solid var(--blog-border-strong);
  padding: 10px 14px;
  text-align: left;
}

.blog-content th {
  background: var(--blog-surface-alt);
  font-weight: 600;
  color: var(--blog-text);
}

.blog-content ul, .blog-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.blog-content li { margin-bottom: 4px; }

.blog-content hr {
  border: none;
  border-top: 1px solid var(--blog-border-strong);
  margin: 32px 0;
}

.blog-content figure {
  margin: 16px 0;
  text-align: center;
}

.blog-content figcaption {
  font-size: 13px;
  color: var(--blog-text-muted);
  margin-top: 8px;
}

/* ── Author page ─────────────────────────────────────────────────── */

.blog-author-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 40px;
  padding-top: 16px;
}

.blog-author-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--blog-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.blog-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-author-info h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--blog-text);
}

.blog-author-bio {
  font-size: 15px;
  color: var(--blog-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.blog-author-posts-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--blog-text);
  margin: 0 0 20px 0;
}

/* ── Post form (staff) ───────────────────────────────────────────── */

.blog-form {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.blog-form h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--blog-text);
  margin: 0 0 24px 0;
}

.blog-form__group {
  margin-bottom: 20px;
}

.blog-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--blog-text);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-form__input,
.blog-form__textarea,
.blog-form__select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--blog-border-strong);
  border-radius: 8px;
  background: var(--blog-surface);
  color: var(--blog-text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.blog-form__input:focus,
.blog-form__textarea:focus {
  outline: none;
  border-color: var(--blog-accent);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.blog-form__textarea {
  min-height: 400px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.6;
}

.blog-form__hint {
  font-size: 12px;
  color: var(--blog-text-muted);
  margin-top: 4px;
}

.blog-form__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-form__checkbox-row input[type="checkbox"] {
  accent-color: var(--blog-accent);
  width: 18px;
  height: 18px;
}

.blog-form__actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.blog-form__error {
  background: #FEF2F2;
  color: #991B1B;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid #FECACA;
}

/* ── Image upload widget ─────────────────────────────────────────── */

.blog-image-upload {
  border: 2px dashed var(--blog-border-strong);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  margin-bottom: 20px;
}

.blog-image-upload__btn {
  display: inline-block;
  padding: 8px 16px;
  background: var(--blog-surface-alt);
  border: 1px solid var(--blog-border-strong);
  border-radius: 6px;
  color: var(--blog-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.blog-image-upload__btn:hover {
  background: var(--blog-accent);
  color: #fff;
  border-color: var(--blog-accent);
}

.blog-image-upload__status {
  font-size: 12px;
  color: var(--blog-text-muted);
  margin-top: 8px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.blog-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: inherit;
}

.blog-btn:hover { opacity: 0.9; }

.blog-btn--primary {
  background: var(--blog-gradient);
  color: #fff;
}

.blog-btn--secondary {
  background: var(--blog-surface);
  color: var(--blog-text);
  border: 1px solid var(--blog-border-strong);
}

.blog-btn--danger {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

.blog-btn--small {
  padding: 6px 14px;
  font-size: 13px;
}

/* ── Pagination ──────────────────────────────────────────────────── */

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 0;
}

.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.blog-pagination a {
  color: var(--blog-text-secondary);
  background: var(--blog-surface);
  border: 1px solid var(--blog-border);
}

.blog-pagination a:hover {
  background: var(--blog-surface-alt);
  border-color: var(--blog-accent);
}

.blog-pagination .current {
  background: var(--blog-accent);
  color: #fff;
  border: 1px solid var(--blog-accent);
}

/* ── Empty state ─────────────────────────────────────────────────── */

.blog-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--blog-text-muted);
}

.blog-empty__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.blog-empty__text {
  font-size: 16px;
}

/* ── Footer ──────────────────────────────────────────────────────── */

.blog-footer {
  text-align: center;
  padding: 32px 24px;
  color: var(--blog-text-muted);
  font-size: 13px;
  border-top: 1px solid var(--blog-border);
  margin-top: 40px;
}

.blog-footer a {
  color: var(--blog-text);
  text-decoration: none;
}

.blog-footer a:hover {
  text-decoration: underline;
}

/* ── Post form: radio group + schedule picker ───────────────────── */

.blog-form__radio-group {
  display: flex;
  gap: 20px;
  margin-top: 4px;
}

.blog-form__radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

.blog-form__radio input[type="radio"] {
  accent-color: var(--blog-accent);
  width: 16px;
  height: 16px;
}

.blog-form__schedule-picker {
  margin-top: 10px;
}

/* ── Manage posts table ─────────────────────────────────────────── */

.blog-manage-table {
  margin-top: 24px;
  overflow-x: auto;
}

.blog-manage-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.blog-manage-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--blog-text-muted);
  border-bottom: 2px solid var(--blog-border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-manage-table td {
  padding: 12px;
  border-bottom: 1px solid var(--blog-border);
  vertical-align: middle;
}

.blog-manage-table tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

.blog-manage-date {
  font-size: 12px;
  color: var(--blog-text-muted);
  margin-top: 2px;
}

/* ── Status badges ──────────────────────────────────────────────── */

.blog-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.blog-status-badge--published {
  background: #DCFCE7;
  color: #166534;
}

.blog-status-badge--scheduled {
  background: #FEF3C7;
  color: #92400E;
}

.blog-status-badge--draft {
  background: #F3F4F6;
  color: #6B7280;
}

/* The shared .landing-nav is position:fixed, so blog content (which has no hero
   to absorb the offset like the marketing pages do) must clear it or the first
   line of every blog page renders behind the bar (Phase 167). */
.blog-body main {
  padding-top: 80px;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .blog-body main {
    padding-top: 68px;
  }

  .blog-post__title {
    font-size: 26px;
  }

  .blog-author-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .blog-nav {
    padding: 12px 16px; flex-wrap: wrap;
  }
  .blog-mobile-toggle { display: flex; flex-direction: column; justify-content: center; margin-left: auto; }
  .blog-nav-links {
    display: none; flex-direction: column; width: 100%; gap: 0;
    padding: 8px 0 4px; order: 3;
  }
  .blog-nav--open .blog-nav-links { display: flex; }
  .blog-nav-links a {
    padding: 12px 8px; border-top: 1px solid var(--blog-border, #e5e7eb);
    min-height: 44px; display: flex; align-items: center;
  }
  .blog-nav-links .blog-nav-btn {
    justify-content: center; margin-top: 4px;
  }

  .blog-form__textarea {
    min-height: 300px;
  }

  .blog-form__radio-group {
    flex-direction: column;
    gap: 10px;
  }

  .blog-manage-table th:nth-child(3),
  .blog-manage-table td:nth-child(3) {
    display: none;
  }
}

@media (max-width: 640px) {
  /* Phase 133: stack the list row vertically on narrow screens so the
     thumbnail goes wide-above-content. */
  .blog-list-row {
    flex-direction: column;
    gap: 12px;
  }
  .blog-list__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .blog-list__title {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .blog-nav { padding: 12px 8px; }
  .blog-btn { padding: 12px 20px; min-height: 44px; }
  .blog-btn--small { padding: 8px 14px; min-height: 36px; }
  .blog-pagination a,
  .blog-pagination .current { min-width: 44px; height: 44px; line-height: 44px; }
  .blog-content table { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 163 — END-OF-POST CALCULATOR CTA
   Anonymous readers only; calculator-first per CLAUDE.md rule 61.
   ═══════════════════════════════════════════════════════════ */
.blog-post-cta {
  margin: 40px 0 8px;
  padding: 32px 28px;
  text-align: center;
  background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(6,182,212,0.08));
  border: 1px solid rgba(14,165,233,0.2);
  border-radius: 16px;
}
.blog-post-cta__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
}
.blog-post-cta__text {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
.blog-post-cta__btn {
  display: inline-block;
  padding: 13px 32px;
  font-size: 15px;
  font-weight: 700;
  color: white;
  background: var(--gradient, linear-gradient(135deg, #0EA5E9, #06B6D4));
  border-radius: 10px;
  text-decoration: none;
}
.blog-post-cta__btn:hover { opacity: 0.92; color: white; }
.blog-post-cta__sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 14px 0 0;
}
.blog-post-cta__sub a {
  color: var(--accent-text, #0369A1);
  font-weight: 600;
}
@media (max-width: 640px) {
  .blog-post-cta { padding: 24px 16px; }
  .blog-post-cta__title { font-size: 20px; }
}