/*
 * B2B blog presentation for the Surgivalley theme.
 * Covers the native post view and the semantic classes emitted by SV AI Pro's
 * BlogRenderer without depending on assets from another installed theme.
 */

.sv-reading-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1045;
    height: 4px;
    pointer-events: none;
    background: transparent;
}

.sv-reading-progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-1st, #0891b2), #2563eb);
    transform-origin: left center;
    transition: width 100ms linear;
}

.sv-professional-blog {
    --sv-blog-ink: #172033;
    --sv-blog-muted: #5f6b7a;
    --sv-blog-line: #dce5ee;
    --sv-blog-surface: #f7fafc;
    --sv-blog-primary: var(--color-1st, #0891b2);
    color: var(--sv-blog-ink);
}

.sv-professional-blog .ps-post__header {
    border: 1px solid var(--sv-blog-line);
}

.sv-professional-blog .ps-post__content {
    font-size: 1.0625rem;
    line-height: 1.78;
}

.sv-blog-content {
    overflow-wrap: anywhere;
}

.sv-blog-content > :first-child {
    margin-top: 0;
}

.sv-blog-content h1,
.sv-blog-content h2,
.sv-blog-content h3,
.sv-blog-content h4 {
    color: var(--sv-blog-ink);
    line-height: 1.25;
    scroll-margin-top: 100px;
}

.sv-blog-content h2 {
    margin: 2.4rem 0 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid color-mix(in srgb, var(--sv-blog-primary) 28%, white);
    font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.sv-blog-content h3 {
    margin: 1.8rem 0 0.75rem;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.sv-blog-content p,
.sv-content-para {
    margin: 0 0 1.15rem;
    color: #344054;
}

.sv-blog-content a {
    color: #0b6f91;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.sv-blog-content a:hover {
    color: #064e6a;
}

.sv-blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.sv-blog-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--sv-blog-primary);
    background: var(--sv-blog-surface);
    color: #344054;
}

.sv-blog-content table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}

.sv-blog-content th,
.sv-blog-content td {
    padding: 0.75rem;
    border: 1px solid var(--sv-blog-line);
    text-align: left;
    vertical-align: top;
}

.sv-blog-content th {
    background: #eef5f8;
    color: var(--sv-blog-ink);
}

.sv-blog-header {
    margin-bottom: 1.75rem;
}

.sv-blog-title {
    margin: 0;
    color: var(--sv-blog-ink);
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.sv-blog-intro,
.sv-executive-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2rem;
    padding: 1.35rem;
    border: 1px solid #c8dfea;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0f9fc, #eef4ff);
}

.sv-intro-icon,
.sv-pain-icon,
.sv-resource-icon,
.sv-roi-icon,
.sv-case-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #dff3f8;
    color: #087a96;
    font-weight: 800;
}

.sv-intro-text {
    margin: 0;
    color: #294154;
    font-size: 1.08rem;
}

.sv-blog-section {
    margin: 2.25rem 0;
}

.sv-blog-section .sv-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 0;
}

.sv-section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sv-blog-primary), #2563eb);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
}

.sv-keypoints-wrapper,
.sv-pain-point,
.sv-blog-conclusion,
.sv-related-resources,
.sv-case-study,
.sv-roi-calculator,
.sv-resources-section {
    margin: 1.6rem 0;
    padding: 1.35rem;
    border: 1px solid var(--sv-blog-line);
    border-radius: 12px;
    background: var(--sv-blog-surface);
}

.sv-summary-title,
.sv-related-title,
.sv-resources-title,
.sv-conclusion-title,
.sv-roi-title,
.sv-case-title {
    margin: 0 0 0.8rem;
    color: var(--sv-blog-ink);
    font-size: 1.25rem;
}

.sv-summary-list,
.sv-keypoints,
.sv-related-list,
.sv-case-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-summary-item,
.sv-keypoint-item,
.sv-related-item,
.sv-case-list li {
    position: relative;
    margin: 0.55rem 0;
    padding-left: 1.65rem;
}

.sv-summary-item::before,
.sv-keypoint-item::before,
.sv-case-list li::before {
    position: absolute;
    left: 0;
    color: #16825d;
    content: "\2713";
    font-weight: 800;
}

.sv-pain-point {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    border-color: #f3d58a;
    background: linear-gradient(135deg, #fffaf0, #fff4cf);
}

.sv-pain-label,
.sv-case-label,
.sv-resource-type {
    display: block;
    margin-bottom: 0.3rem;
    color: #8a5a08;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sv-stats-grid,
.sv-resources-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.sv-stat-card,
.sv-resource-card {
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid var(--sv-blog-line);
    border-radius: 10px;
    background: #fff;
}

.sv-stat-value {
    display: block;
    color: #1d4ed8;
    font-size: 1.8rem;
    font-weight: 800;
}

.sv-stat-label {
    color: var(--sv-blog-muted);
    font-size: 0.9rem;
}

.sv-resource-link,
.sv-related-link,
.sv-roi-button {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: #075f78;
    font-weight: 700;
}

.sv-blog-conclusion {
    border-color: #b9d9ef;
    background: linear-gradient(135deg, #edf8ff, #e8f0ff);
}

.sv-conclusion-text,
.sv-roi-text {
    margin-bottom: 0;
}

.sv-cta-box {
    padding: clamp(1.4rem, 4vw, 2.25rem);
    border-radius: 14px;
    background: linear-gradient(135deg, #102a43, #0b5870);
    color: #fff;
    box-shadow: 0 14px 32px rgba(16, 42, 67, 0.18);
}

.sv-cta-title,
.sv-cta-text {
    color: #fff;
}

.sv-cta-title {
    margin: 0 0 0.65rem;
}

.sv-cta-text {
    margin-bottom: 1.15rem;
    opacity: 0.92;
}

.sv-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.2rem;
    border-radius: 7px;
    background: #fff;
    color: #0b5870;
    font-weight: 800;
    text-decoration: none;
}

.sv-cta-button:hover {
    background: #eaf7fa;
    color: #073b4c;
}

@media (max-width: 767px) {
    .sv-professional-blog .ps-post__content {
        font-size: 1rem;
    }

    .sv-blog-intro,
    .sv-executive-summary,
    .sv-pain-point {
        grid-template-columns: 1fr;
    }

    .sv-stats-grid,
    .sv-resources-grid {
        grid-template-columns: 1fr;
    }

    .sv-blog-section .sv-section-title {
        align-items: flex-start;
    }

    .sv-blog-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media print {
    .sv-reading-progress,
    .sv-cta-box,
    .ps-post__sharing {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv-reading-progress-bar {
        transition: none;
    }
}