/*
 * Article-specific typography + layout.
 * Loaded only on article pages via {% block extra_css %} in articles/article.html.
 * Inherits the Inter typeface loaded in base_marketing.html.
 */

:root {
    --article-sticky-offset: 100px;
}

/* === Hero === */

.article-hero {
    background: linear-gradient(180deg, #fff4ed 0%, #ffffff 100%);
}

.article-hero-title {
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 56rem;
}

.article-hero-lead {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.5;
    font-weight: 400;
    max-width: 56rem;
}

.article-meta {
    font-variant-numeric: tabular-nums;
}

/* === Prose === */

.article-prose {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--bs-gray-700);
}

.article-prose > p:first-of-type {
    font-size: 1.25rem;
    color: var(--bs-gray-800);
}

.article-prose h2 {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;
    color: var(--bs-gray-900);
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.015em;
    scroll-margin-top: var(--article-sticky-offset);
}

.article-prose h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--bs-gray-900);
    margin-top: 2.25rem;
    margin-bottom: 1rem;
    padding-left: 0.875rem;
    border-left: 3px solid var(--bs-primary);
    scroll-margin-top: var(--article-sticky-offset);
}

.article-prose p {
    margin-bottom: 1.25rem;
}

.article-prose a {
    color: var(--bs-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.article-prose a:hover {
    color: #e04a00;
}

.article-prose ul,
.article-prose ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-prose li {
    margin-bottom: 0.5rem;
}

.article-prose li > p {
    margin-bottom: 0.5rem;
}

.article-prose img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    margin: 0.5rem 0 1.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

.article-prose strong {
    color: var(--bs-gray-900);
    font-weight: 600;
}

.article-prose blockquote {
    border-left: 4px solid var(--bs-primary);
    background-color: #fff4ed;
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    color: var(--bs-gray-800);
    border-radius: 0 0.5rem 0.5rem 0;
}

.article-prose code {
    background-color: var(--bs-gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.95em;
    color: var(--bs-gray-900);
}

.article-prose pre {
    background-color: var(--bs-gray-900);
    color: var(--bs-gray-100);
    padding: 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 2rem 0;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.article-prose pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* === Comparison tables (the rightmost column is highlighted by convention as the recommended/Unifystock column) === */

.article-prose table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
    background-color: #ffffff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.article-prose th {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-900);
    font-weight: 600;
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--bs-gray-200);
}

.article-prose td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--bs-gray-100);
    color: var(--bs-gray-800);
    vertical-align: top;
}

.article-prose tr:last-child td {
    border-bottom: none;
}

.article-prose th:last-child {
    color: var(--bs-primary);
    background-color: rgba(255, 107, 44, 0.08);
}

.article-prose td:last-child {
    background-color: rgba(255, 107, 44, 0.04);
}

/* === Inline mid-article CTA === */

.article-inline-cta {
    border: 1px solid rgba(255, 107, 44, 0.2);
}

/* === Sticky sidebar === */

@media (min-width: 992px) {
    .article-sidebar {
        position: sticky;
        top: var(--article-sticky-offset);
        max-height: calc(100vh - var(--article-sticky-offset) - 1rem);
        overflow-y: auto;
    }
}

/* === TOC === */

.article-toc li {
    margin-bottom: 0.25rem;
}

.article-toc a {
    display: block;
    padding: 0.375rem 0 0.375rem 0.875rem;
    margin-left: -0.875rem;
    border-left: 2px solid transparent;
    text-decoration: none;
    color: var(--bs-gray-700);
    line-height: 1.4;
    transition: color 0.15s, border-color 0.15s;
}

.article-toc a:hover {
    color: var(--bs-primary);
    border-left-color: var(--bs-primary);
}

/* === Takeaways === */

.article-takeaways-list {
    list-style: none;
    padding-left: 0;
}

.article-takeaways-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.875rem;
    line-height: 1.55;
}

.article-takeaways-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--bs-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* === Final CTA band === */

.article-cta-band-lead {
    max-width: 600px;
}

/* === Author === */

.article-author-card {
    border: 1px solid var(--bs-gray-200);
    background-color: #ffffff;
}

/* Selectors are scoped under .article-author-card so they beat Metronic's
   .symbol > img and .symbol .symbol-label rules (specificity 0,2,0 > 0,1,1). */
.article-author-card .article-author-avatar {
    background-color: var(--bs-primary);
    color: #ffffff;
    border-radius: 50%;
}

.article-author-card .article-author-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .article-toc a,
    .article-prose a {
        transition: none;
    }
}