/* Blackpdf — Article detail page
   Prose-focused. All selectors namespaced under `bp-article-` so the
   site's global `header {}` / `footer {}` rules in style.css can't
   leak in. */

.bp-article {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 32px 96px;
}

/* Breadcrumb — replaces the old top "Back to all posts" link and
   doubles as visible navigation + BreadcrumbList schema source.
   Home gets a leading house icon; items separated by subtle SVG
   chevrons; current page is bold and ellipsis-clamped. */
.bp-article-breadcrumb {
    margin: 0 0 32px;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}
.bp-article-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    line-height: 1.4;
}
.bp-article-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}
.bp-article-breadcrumb-sep {
    width: 12px;
    height: 12px;
    color: #d1d5db;
    flex-shrink: 0;
    margin: 0 2px;
}
.bp-article-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    text-decoration: none;
    padding: 5px 9px;
    border-radius: 7px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.bp-article-breadcrumb a:hover {
    color: #1a1a1a;
    background: #f3f4f6;
}
.bp-article-breadcrumb a svg {
    width: 13px;
    height: 13px;
    opacity: 0.85;
    flex-shrink: 0;
}
.bp-article-breadcrumb [aria-current="page"] {
    color: #1a1a1a;
    font-weight: 600;
    padding: 5px 9px;
    /* No clamp — show the full title; the wrapping ol lets long
       titles continue on a new line on narrow viewports. */
}

/* Back button — matches the tool pages' back-button pattern:
   muted text + pill-shaped SVG icon with a soft gray fill. */
.bp-article-back {
    background: none;
    color: #8e96a7;
    border: none;
    padding: 0;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 40px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}
.bp-article-back:hover {
    color: #374151;
}
.bp-article-back svg {
    width: 18px;
    height: 18px;
    background: #f9f9f9;
    padding: 6px;
    border-radius: 8px;
    box-sizing: content-box;
    transition: background 0.15s ease;
}
.bp-article-back:hover svg {
    background: #f0f0f0;
}

.bp-article-header {
    display: block;
    padding: 0;
    margin: 0 0 64px;
    border: none;
    background: transparent;
    position: static;
}

/* Category tag — editorial kicker rather than a pill.
   Sits as an uppercase, letter-spaced label directly above the title
   with a coral leading rule for visual anchor. Block-level so it
   drops to its own line under the back button. */
.bp-article-tag {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    padding: 0;
    background: transparent;
    color: #ff6154;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.bp-article-tag::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: #ff6154;
    border-radius: 1px;
    flex-shrink: 0;
}

.bp-article-header h1 {
    font-size: clamp(30px, 3.8vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.8px;
    color: #111827;
    margin: 0 0 20px;
}

.bp-article-description {
    font-size: 20px;
    line-height: 1.55;
    color: #525866;
    margin: 0 0 36px;
    font-weight: 400;
}

/* Byline — avatar circle + author bolded, with date/read-time
   pushed to the right edge. Top/bottom rules frame it as a metadata
   strip rather than a loose meta line. */
.bp-article-byline {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
    padding: 18px 0 18px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.bp-article-byline-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.bp-article-byline-avatar img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.bp-article-byline-author {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}
.bp-article-byline-author-label {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}
.bp-article-byline-author-name {
    font-size: 14.5px;
    color: #111827;
    font-weight: 600;
}

.bp-article-byline-meta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}

.bp-article-byline-dot {
    width: 3px;
    height: 3px;
    background: #d1d5db;
    border-radius: 50%;
    display: inline-block;
}

/* Hero cover image — sits between byline and prose body. Same gray
   placeholder treatment as inline body images so it doesn't pop in. */
.bp-article-cover {
    margin: 0 0 56px;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    background-color: #fff1ef;
    aspect-ratio: 16 / 9;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.bp-article-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Prose body ────────────────────────────────────────── */
.bp-article-body {
    font-size: 18px;
    line-height: 1.78;
    color: #1f2937;
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* Generous default rhythm between paragraphs and block elements.
   Headings and special blocks override below with their own margins. */
.bp-article-body > * + * { margin-top: 30px; }

.bp-article-body h2 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.5px;
    color: #111827;
    margin: 72px 0 24px;
    scroll-margin-top: 80px;
}

.bp-article-body h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: #111827;
    margin: 56px 0 18px;
    scroll-margin-top: 80px;
}

.bp-article-body p {
    margin: 0;
}

.bp-article-body a {
    color: #ff6154;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 0.15s ease;
}
.bp-article-body a:hover {
    color: #e5554a;
    text-decoration-thickness: 2px;
}

.bp-article-body strong { color: #111827; font-weight: 700; }
.bp-article-body em { font-style: italic; }

.bp-article-body ul,
.bp-article-body ol {
    padding-left: 26px;
    margin: 30px 0 0;
}
.bp-article-body li + li { margin-top: 14px; }
.bp-article-body li { padding-left: 4px; }
.bp-article-body li::marker { color: #ff6154; }

.bp-article-body code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    color: #1f2937;
}

.bp-article-body pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 22px 26px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 14.5px;
    line-height: 1.65;
    margin: 36px 0;
}
.bp-article-body pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.bp-article-body blockquote {
    border-left: 3px solid #ff6154;
    padding: 6px 0 6px 26px;
    margin: 40px 0;
    color: #525866;
    font-style: italic;
    font-size: 18px;
    line-height: 1.65;
}

.bp-article-body hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 64px 0;
}

.bp-article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin: 40px auto;
    /* Light gray placeholder shows in the area reserved by the
       width/height attributes (injected at build time) while the image
       streams in. Once decoded, the image paints on top. */
    background-color: #f3f4f6;
    color: #9ca3af; /* alt-text fallback color if the image fails */
}

/* When marked wraps a standalone image in a <p>, kill the paragraph's
   own vertical rhythm so we don't end up with 30px + 40px stacked
   margins, and remove its text-align to keep the centered image
   centered even if other inline content lives in the same paragraph. */
.bp-article-body p:has(> img:only-child) {
    margin: 0;
    text-align: center;
}

.bp-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;
    font-size: 15px;
}
.bp-article-body th,
.bp-article-body td {
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
}
.bp-article-body th {
    color: #6b7280;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-bottom: 1.5px solid #1a1a1a;
}

/* The first H2/H3 of the article sits closer to the byline rule;
   the 72px top margin would otherwise feel disconnected. */
.bp-article-body > h2:first-child,
.bp-article-body > h3:first-child {
    margin-top: 0;
}

/* A heading immediately after another heading shouldn't double-space. */
.bp-article-body h2 + h3,
.bp-article-body h3 + h3 {
    margin-top: 18px;
}

/* ── Inline tool CTA (use in article markdown via raw HTML) ─ */
/* <aside class="bp-article-cta">
     <div class="bp-article-cta-text">
       <strong>Try this with Blackpdf</strong>
       <p>Split your PDF in seconds. Free, no signup required.</p>
     </div>
     <a class="bp-article-cta-btn" href="/split-pdf">Open Split PDF →</a>
   </aside> */
.bp-article-body .bp-article-cta {
    background: linear-gradient(135deg, #fff1ef 0%, #ffe8e2 100%);
    border: 1px solid #ffcec4;
    border-radius: 16px;
    padding: 28px 32px;
    margin: 48px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.bp-article-body .bp-article-cta-text strong {
    display: block;
    font-size: 18px;
    color: #1a1a1a;
    margin-bottom: 4px;
    font-weight: 700;
}
.bp-article-body .bp-article-cta-text p {
    margin: 0;
    font-size: 14px;
    color: #525866;
    line-height: 1.5;
}

.bp-article-body .bp-article-cta-btn {
    background: #ff6154;
    color: #fff !important;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bp-article-body .bp-article-cta-btn svg {
    transition: transform 0.2s ease;
}
.bp-article-body .bp-article-cta-btn:hover {
    background: #e5554a;
    box-shadow: 0 4px 12px rgba(255, 97, 84, 0.35);
    transform: translateY(-1px);
}
.bp-article-body .bp-article-cta-btn:hover svg {
    transform: translateX(4px);
}

/* Preset list — used in compare-style sections like Compress PDF's
   "Pick the right compression level". Items separated by hairlines
   instead of card chrome, so they fit the editorial reading rhythm.
   The recommended preset is signaled by a coral name + a coral star
   in front of its meta line — no colored backgrounds. */
.bp-article-body .bp-article-presets {
    margin: 30px 0;
}
.bp-article-body .bp-article-preset {
    padding: 18px 0;
}
.bp-article-body .bp-article-preset + .bp-article-preset {
    border-top: 1px solid #e5e7eb;
}
.bp-article-body .bp-article-preset-name {
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.bp-article-body .bp-article-preset-name strong {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.2px;
}
.bp-article-body .bp-article-preset-name span {
    font-size: 12.5px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.01em;
}
.bp-article-body .bp-article-preset.is-recommended .bp-article-preset-name strong {
    color: #ff6154;
}
.bp-article-body .bp-article-preset.is-recommended .bp-article-preset-name span::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6154;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.bp-article-body .bp-article-preset p {
    margin: 0;
    color: #525866;
    font-size: 16px;
    line-height: 1.65;
}
.bp-article-body .bp-article-preset p strong {
    color: #111827;
}

/* Article footer (inside .bp-article — neutralizes the global dark footer) */
.bp-article-footer {
    background: transparent;
    color: inherit;
    margin-top: 72px;
    padding: 40px 0 0;
    border-top: 1px solid #e5e7eb;
}

/* ── Related posts ─────────────────────────────────────── */
.bp-article-related {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 64px 24px;
}

.bp-article-related-inner {
    max-width: 1080px;
    margin: 0 auto;
}

.bp-article-related h2 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 28px;
    letter-spacing: -0.3px;
}

.bp-article-related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.bp-article-related-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px 24px 24px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bp-article-related-card:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
    transform: translateY(-2px);
    border-color: #d1d5db;
}

.bp-article-related-card .blog-card-tag {
    align-self: flex-start;
    margin-bottom: 12px;
}

.bp-article-related-card h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: #1a1a1a;
    margin: 0 0 8px;
}

.bp-article-related-card p {
    font-size: 14px;
    line-height: 1.55;
    color: #6b7280;
    margin: 0 0 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bp-article-related-meta {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .bp-article { padding: 48px 22px 64px; }
    .bp-article-byline { gap: 12px; padding: 14px 0; }
    .bp-article-byline-avatar { width: 32px; height: 32px; }
    .bp-article-byline-avatar img { width: 19px; height: 19px; }
    .bp-article-byline-author-name { font-size: 14px; }
    .bp-article-byline-meta {
        margin-left: 0;
        font-size: 12.5px;
        gap: 8px;
        flex-basis: 100%;
        padding-left: 48px;
    }
    .bp-article-header { margin-bottom: 44px; }
    .bp-article-description { font-size: 18px; }
    .bp-article-cover { margin-bottom: 40px; border-radius: 12px; }
    .bp-article-breadcrumb { font-size: 12px; margin-bottom: 24px; }
    .bp-article-body { font-size: 17px; line-height: 1.74; }
    .bp-article-body > * + * { margin-top: 26px; }
    .bp-article-body h2 { font-size: 25px; margin: 52px 0 18px; }
    .bp-article-body h3 { font-size: 20px; margin: 40px 0 14px; }
    .bp-article-body ul,
    .bp-article-body ol { margin-top: 26px; }
    .bp-article-body li + li { margin-top: 12px; }
    .bp-article-body blockquote { margin: 32px 0; padding-left: 22px; }
    .bp-article-body .bp-article-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 24px;
        margin: 36px 0;
    }
    .bp-article-body .bp-article-cta-btn { width: 100%; text-align: center; }
    .bp-article-body .bp-article-preset { padding: 16px 0; }
    .bp-article-body .bp-article-preset-name strong { font-size: 16px; }
    .bp-article-body .bp-article-preset p { font-size: 15px; }
    .bp-article-related-grid {
        grid-template-columns: 1fr;
    }
}