/* =========================================================
   AFDES PREMIUM ARTICLE SYSTEM
   File: assets/css/article.css
========================================================= */

.article-page {
    background: #f8fafc;
    padding-bottom: 56px;
}

/* Reading progress */
.article-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    z-index: 9999;
    background: linear-gradient(90deg, var(--primary), #7dd3fc);
    transition: width .08s linear;
}

/* Breadcrumbs */
.article-breadcrumbs {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .86rem;
    gap: 8px;
    padding: 18px 0;
}

.article-breadcrumbs a {
    color: var(--primary);
    font-weight: 800;
}

.article-breadcrumbs strong {
    color: var(--text);
}

/* Hero */
.article-hero {
    background:
        radial-gradient(circle at top right, rgba(4,155,206,.18), transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    border-bottom: 1px solid var(--border);
    padding: clamp(44px, 7vw, 78px) 0;
}

.article-hero-inner {
    max-width: 1060px;
}

.article-category {
    color: var(--primary);
    display: inline-block;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .12em;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.article-hero h1 {
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.5rem, 6vw, 5.6rem);
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: 0 0 20px;
    max-width: 1040px;
}

.article-deck {
    color: #475569;
    font-size: clamp(1.08rem, 2vw, 1.35rem);
    line-height: 1.65;
    max-width: 900px;
}

.article-meta {
    align-items: center;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: .86rem;
    font-weight: 900;
    gap: 12px 18px;
    letter-spacing: .04em;
    margin-top: 24px;
    text-transform: uppercase;
}

.article-meta-author {
    align-items: center;
    display: inline-flex;
    flex: 0 1 auto;
    gap: 14px;
    min-width: 0;
}

.article-meta-avatar {
    align-items: center;
    background: #e2e8f0;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border);
    color: var(--navy);
    display: inline-flex;
    flex: 0 0 60px;
    height: 60px;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    width: 60px;
}

.article-meta-avatar img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.article-meta-avatar > span {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
}

.article-meta-avatar:not(.article-meta-avatar--static):hover {
    box-shadow: 0 0 0 2px var(--primary);
}

.article-meta-byline {
    min-width: 0;
}

.article-meta a {
    color: var(--navy);
    text-decoration: none;
}

.article-meta a:hover {
    color: var(--primary);
}

/* Featured image
   Match the exact rendered width and LEFT edge of the article + sidebar grid.
   The grid tracks total 1162px inside the 1180px site container, leaving 18px
   of unused space on the right. The cover is therefore scaled to 1162px and
   anchored to the container's left edge rather than centered. */
.article-cover {
    margin-left: max(16px, calc((100% - 1180px) / 2));
    margin-right: auto;
    margin-top: 34px;
    width: min(1162px, calc(100% - 32px));
}

.article-cover img {
    aspect-ratio: auto;
    background: #e2e8f0;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    display: block;
    height: auto;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

.article-cover figcaption {
    color: #64748b;
    font-size: .84rem;
    line-height: 1.5;
    margin-top: 10px;
}

/* Main layout */
.article-layout {
    align-items: start;
    display: grid;
    gap: 42px;
    grid-template-columns: minmax(0, 780px) 340px;
    margin-top: 42px;
}

.article-content {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    padding: clamp(26px, 4vw, 42px);
}

/* Share strip */
.share-strip {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    padding-bottom: 18px;
}

.share-strip span {
    color: #64748b;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.share-strip a {
    background: #f1f5f9;
    color: var(--navy);
    font-size: .8rem;
    font-weight: 900;
    padding: 8px 10px;
    text-decoration: none;
}

.share-strip a:hover {
    background: var(--primary);
    color: #fff;
}

/* Body typography */
.article-body {
    color: #1f2937;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.18rem;
    line-height: 1.9;
}

.article-body p:first-of-type::first-letter {
    color: var(--navy);
    float: left;
    font-size: 4.2rem;
    font-weight: 900;
    line-height: .86;
    margin: .12em .12em 0 0;
}

.article-body p {
    margin: 0 0 1.25em;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.18;
    margin: 1.55em 0 .65em;
}

.article-body h2 {
    border-top: 1px solid var(--border);
    font-size: 2rem;
    padding-top: .9em;
}

.article-body h3 {
    font-size: 1.48rem;
}

.article-body a {
    color: var(--primary);
    font-weight: 800;
    text-decoration: underline;
}

.article-body blockquote {
    background: #f8fafc;
    border-left: 6px solid var(--primary);
    color: var(--navy);
    font-size: 1.45rem;
    font-style: italic;
    line-height: 1.55;
    margin: 34px 0;
    padding: 22px 26px;
}

.article-body img {
    aspect-ratio: auto;
    display: block;
    height: auto;
    margin: 30px 0;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.article-body ul,
.article-body ol {
    margin: 0 0 1.25em 1.4em;
}

.article-body li {
    margin-bottom: .45em;
}

/* Tags */
.article-tags-section {
    border-top: 1px solid var(--border);
    margin-top: 34px;
    padding-top: 24px;
}

.article-tags-section h3 {
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    margin-bottom: 12px;
}

.article-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.article-tags-cloud a {
    background: #f1f5f9;
    color: var(--navy);
    font-size: .84rem;
    font-weight: 800;
    padding: 7px 10px;
    text-decoration: none;
}

.article-tags-cloud a:hover {
    background: var(--primary);
    color: #fff;
}

/* Article footer */
.article-institution-note {
    background: #f8fafc;
    border-left: 5px solid var(--primary);
    color: #475569;
    line-height: 1.7;
    margin-top: 30px;
    padding: 20px;
}

.article-institution-note strong {
    color: var(--navy);
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    margin-bottom: 6px;
}

/* Author box */
.author-box {
    border-top: 1px solid var(--border);
    display: grid;
    gap: 18px;
    grid-template-columns: 82px 1fr;
    margin-top: 34px;
    padding-top: 26px;
}

.author-box img,
.author-initial {
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 12px 30px rgba(15,23,42,.12);
    height: 82px;
    object-fit: cover;
    width: 82px;
}

.author-initial {
    align-items: center;
    background: linear-gradient(135deg, var(--primary), var(--navy));
    color: #fff;
    display: flex;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 900;
    justify-content: center;
}

.author-box span {
    color: var(--primary);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.author-box h3 {
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    margin: 4px 0;
}

.author-box h3 a:hover {
    color: var(--primary);
}

.author-box-avatar-link {
    align-self: start;
    border-radius: 50%;
    display: block;
    width: 82px;
}

.author-box-avatar-link:hover img,
.author-box-avatar-link:focus-visible img,
.author-box-avatar-link:hover .author-initial,
.author-box-avatar-link:focus-visible .author-initial {
    box-shadow: 0 12px 30px rgba(4,155,206,.2), 0 0 0 2px rgba(4,155,206,.18);
}

.author-box-copy {
    min-width: 0;
}

.author-box-title {
    color: #475569;
    font-size: .88rem;
    font-weight: 700;
    margin-top: 2px;
}

.author-box p {
    color: #64748b;
    line-height: 1.6;
    margin: 10px 0 0;
    max-width: 760px;
}

.author-box-profile-link {
    color: var(--primary);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    gap: 6px;
    margin-top: 10px;
    text-decoration: none;
}

.author-box-profile-link:hover,
.author-box-profile-link:focus-visible {
    color: var(--navy);
}

/* Sidebar */
.article-sidebar {
    display: grid;
    gap: 20px;
    position: sticky;
    top: 92px;
}

.side-card {
    background: #fff;
    border: 1px solid var(--border);
    border-top: 5px solid var(--primary);
    box-shadow: var(--shadow-soft);
    padding: 22px;
}

.side-card h3 {
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    line-height: 1.15;
    margin-bottom: 14px;
}

.sidebar-kicker {
    color: var(--primary);
    display: inline-block;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .1em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.editor-note-card {
    background: linear-gradient(135deg, var(--navy), #0f2f47);
    color: #fff;
}

.editor-note-card h3 {
    color: #fff;
}

.editor-note-card p,
.editor-note-card .sidebar-muted {
    color: #dbeafe;
}

.sidebar-muted,
.side-card p {
    color: #64748b;
    font-size: .95rem;
    line-height: 1.6;
}

.latest-link {
    border-bottom: 1px solid var(--border);
    color: var(--navy);
    display: block;
    font-weight: 900;
    padding: 12px 0;
}

.latest-link:hover {
    color: var(--primary);
}

.article-most-read {
    counter-reset: article-item;
    list-style: none;
}

.article-most-read li {
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 10px;
    grid-template-columns: 32px 1fr;
    padding: 12px 0;
}

.article-most-read li::before {
    color: var(--primary);
    content: counter(article-item);
    counter-increment: article-item;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
}

.article-most-read a {
    font-weight: 900;
}

.article-most-read a:hover {
    color: var(--primary);
}

.sidebar-video iframe {
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    width: 100%;
}

.video-channel-link {
    color: var(--primary);
    display: inline-block;
    font-weight: 900;
    margin-top: 12px;
}

.newsletter-card form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.newsletter-card input {
    border: 1px solid var(--border);
    padding: 12px;
    width: 100%;
}

.newsletter-card button {
    background: var(--primary);
    border: 0;
    color: #fff;
    cursor: pointer;
    font-weight: 900;
    padding: 12px;
    text-transform: uppercase;
}

.newsletter-card button:hover {
    background: var(--primary-dark);
}

.social-widget p {
    margin-bottom: 14px;
}

.social-links {
    display: grid;
    gap: 8px;
}

.social-links a {
    background: #f1f5f9;
    color: var(--navy);
    font-weight: 800;
    padding: 10px 12px;
    transition: all .2s ease;
}

.social-links a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateX(3px);
}

/* Related articles */
.related-section {
    margin-top: 48px;
}

.section-title {
    align-items: end;
    border-bottom: 3px solid var(--navy);
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 10px;
}

.section-title h2 {
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.08;
}

.section-title a {
    color: var(--primary);
    font-weight: 900;
}

.related-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, 1fr);
}

.related-card {
    background: #fff;
    border: 1px solid var(--border);
    overflow: hidden;
}

.related-card img {
    aspect-ratio: 3 / 2;
    display: block;
    object-fit: cover;
    width: 100%;
}

.related-card div {
    padding: 18px;
}

.related-category {
    color: var(--primary);
    display: inline-block;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.related-card h3 {
    color: var(--navy);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.18;
    margin-bottom: 10px;
}

.related-card h3 a:hover {
    color: var(--primary);
}

.related-card p {
    color: #64748b;
    font-size: .95rem;
    line-height: 1.5;
    max-height: 4.5em;
    overflow: hidden;
}

@media (max-width: 980px) {
    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        position: static;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .article-content {
        padding: 24px;
    }
}

@media (max-width: 640px) {
    .article-meta {
        align-items: flex-start;
        gap: 10px 14px;
    }

    .article-meta-author {
        flex-basis: 100%;
    }

    .article-meta-avatar {
        flex-basis: 52px;
        height: 52px;
        width: 52px;
    }

    .article-meta-detail {
        font-size: .8rem;
    }

    .article-cover {
        margin-left: 12px;
        width: min(1162px, calc(100% - 24px));
    }

    .article-hero {
        padding: 38px 0;
    }

    .article-content {
        padding: 20px;
    }

    .article-body {
        font-size: 1.05rem;
    }

    .article-body p:first-of-type::first-letter {
        float: none;
        font-size: inherit;
        line-height: inherit;
        margin: 0;
    }

    .author-box {
        grid-template-columns: 1fr;
    }

    .section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* ==========================================================
   SIDEBAR reCAPTCHA FINE PRINT
   Matches the homepage newsletter notice
========================================================== */

.newsletter-card .sidebar-recaptcha-notice {
    margin: 8px 0 12px;
    color: #6b7280;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
}

.newsletter-card .sidebar-recaptcha-notice a {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: underline;
}

.newsletter-card .sidebar-recaptcha-notice a:hover {
    color: #049bce;
}
/* Compact article engagement */
.article-engagement {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
}

.article-view-count,
.article-like-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: #64748b;
    display: inline-flex;
    font: inherit;
    font-size: .82rem;
    gap: 6px;
    padding: 4px 0;
}

.article-view-count svg,
.article-like-button svg {
    fill: currentColor;
    height: 17px;
    width: 17px;
}

.article-view-count strong,
.article-like-button strong {
    color: var(--navy);
    font-weight: 900;
}

.article-like-button {
    cursor: pointer;
    transition: color .18s ease, transform .18s ease;
}

.article-like-button:hover {
    color: var(--primary);
    transform: translateY(-1px);
}

.article-like-button.is-liked {
    color: var(--primary);
}

.article-like-button.is-liked strong {
    color: var(--primary);
}

.article-like-button:disabled {
    cursor: wait;
    opacity: .6;
    transform: none;
}

.article-like-status {
    color: #64748b;
    font-size: .76rem;
    min-height: 1em;
}


/* End-of-article reaction prompt */
.article-end-reaction {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
    justify-content: space-between;
    margin: 34px 0 28px;
    padding: 20px 22px;
}

.article-end-reaction__copy {
    display: grid;
    gap: 4px;
}

.article-end-reaction__copy strong {
    color: var(--navy);
    font-size: 1rem;
    font-weight: 900;
}

.article-end-reaction__copy span {
    color: #64748b;
    font-size: .82rem;
    line-height: 1.5;
}

.article-like-button--end {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 14px;
}

.article-like-button--end:hover {
    border-color: var(--primary);
}

.article-like-button--end.is-liked {
    background: rgba(4, 155, 206, .08);
    border-color: rgba(4, 155, 206, .35);
}

.article-end-reaction > .article-like-status {
    flex-basis: 100%;
    margin-top: -8px;
}

@media (max-width: 640px) {
    .article-end-reaction {
        align-items: flex-start;
        padding: 18px;
    }
}