/* Chughtai CMS — Article Block styles
   Loaded by article.php and the public /blog detail page. Each rule namespaced
   under .article-body to avoid leaking into the global stylesheet. */

/* =====================================================================
   Paragraph — alignment + magazine drop-cap
   ===================================================================== */
.article-body .ab-paragraph              { margin: 0 0 18px; line-height: 1.75; }
.article-body .ab-paragraph[data-align="center"]  { text-align: center; }
.article-body .ab-paragraph[data-align="right"]   { text-align: right; }
.article-body .ab-paragraph[data-align="justify"] { text-align: justify; }
.article-body .ab-paragraph.has-drop-cap::first-letter {
    float: left;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 58px;
    line-height: 48px;
    padding: 6px 12px 0 0;
    color: #1e2a78;
    font-weight: 700;
}

/* =====================================================================
   Headings — anchor hover indicator
   ===================================================================== */
.article-body .ab-heading {
    position: relative;
    font-family: 'Playfair Display', Georgia, serif;
    color: #1e2a78;
    font-weight: 700;
    line-height: 1.3;
}
.article-body .ab-heading--h2 { font-size: 28px; margin: 36px 0 14px; }
.article-body .ab-heading--h3 { font-size: 22px; margin: 28px 0 12px; }
.article-body .ab-heading--h4 { font-size: 18px; margin: 22px 0 10px; }
.article-body .ab-heading-anchor {
    position: absolute;
    left: -1.2em;
    top: 50%;
    transform: translateY(-50%);
    color: #c7cbe6;
    text-decoration: none;
    opacity: 0;
    transition: opacity .15s;
    font-size: 0.7em;
}
.article-body .ab-heading:hover .ab-heading-anchor { opacity: 1; }

/* =====================================================================
   Lists
   ===================================================================== */
.article-body .ab-list { margin: 0 0 18px; padding-left: 22px; }
.article-body .ab-list-item { margin: 0 0 8px; line-height: 1.6; }
.article-body .ab-list--checklist { list-style: none; padding-left: 0; }
.article-body .ab-list--checklist .ab-list-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding-left: 0;
}
.article-body .ab-list-check {
    background: #dcfce7;
    color: #15803d;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 3px;
}

/* =====================================================================
   Image
   ===================================================================== */
.article-body .ab-image                  { margin: 28px 0; text-align: center; }
.article-body .ab-image img              { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 auto; box-shadow: 0 4px 18px rgba(15,23,42,.08); }
.article-body .ab-image[data-size="narrow"] img { max-width: 480px; }
.article-body .ab-image[data-size="wide"]   img { width: 100%; }
.article-body .ab-image[data-size="full"] {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}
.article-body .ab-image[data-size="full"] img { border-radius: 0; max-width: 100vw; box-shadow: none; }
.article-body .ab-image-caption {
    font-size: 13px;
    color: #6b7280;
    margin-top: 10px;
    font-style: italic;
    line-height: 1.5;
}

/* =====================================================================
   Gallery
   ===================================================================== */
.article-body .ab-gallery {
    display: grid;
    margin: 28px 0;
}
.article-body .ab-gallery[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.article-body .ab-gallery[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.article-body .ab-gallery[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.article-body .ab-gallery[data-gap="tight"]  { gap: 6px; }
.article-body .ab-gallery[data-gap="normal"] { gap: 14px; }
.article-body .ab-gallery[data-gap="wide"]   { gap: 24px; }
.article-body .ab-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.article-body .ab-gallery-item figcaption { font-size: 12px; color: #6b7280; margin-top: 6px; text-align: center; }

/* =====================================================================
   Quote
   ===================================================================== */
.article-body .ab-quote { margin: 28px 0; }
.article-body .ab-quote-text { margin: 0; line-height: 1.6; color: #374151; }
.article-body .ab-quote-cite { font-size: 13px; color: #6b7280; margin-top: 10px; font-style: italic; }

.article-body .ab-quote--plain .ab-quote-text {
    padding: 14px 20px;
    border-left: 4px solid #1e2a78;
    background: #f9fafb;
    border-radius: 0 8px 8px 0;
}
.article-body .ab-quote--pullquote {
    text-align: center;
    padding: 32px 16px;
    border-top: 2px solid #1e2a78;
    border-bottom: 2px solid #1e2a78;
}
.article-body .ab-quote--pullquote .ab-quote-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    line-height: 1.4;
    color: #1e2a78;
    padding: 0;
    background: none;
    border: 0;
}
.article-body .ab-quote--card .ab-quote-text {
    background: white;
    border: 1px solid #e5e7eb;
    border-left: 5px solid #1e2a78;
    padding: 22px 26px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
    font-size: 17px;
}

/* =====================================================================
   Callout
   ===================================================================== */
.article-body .ab-callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    margin: 24px 0;
    border-left: 4px solid;
    border-radius: 0 10px 10px 0;
    background: #f9fafb;
}
.article-body .ab-callout-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.article-body .ab-callout-title { display: block; margin-bottom: 6px; font-size: 15px; }
.article-body .ab-callout-text  { font-size: 14.5px; line-height: 1.65; }
.article-body .ab-callout-text > *:first-child { margin-top: 0; }
.article-body .ab-callout-text > *:last-child  { margin-bottom: 0; }

.article-body .ab-callout--info    { border-color: #0ea5e9; background: #eff6ff; }
.article-body .ab-callout--info    .ab-callout-icon { color: #0ea5e9; }
.article-body .ab-callout--tip     { border-color: #7c3aed; background: #faf5ff; }
.article-body .ab-callout--tip     .ab-callout-icon { color: #7c3aed; }
.article-body .ab-callout--success { border-color: #16a34a; background: #f0fdf4; }
.article-body .ab-callout--success .ab-callout-icon { color: #16a34a; }
.article-body .ab-callout--warning { border-color: #f59e0b; background: #fffbeb; }
.article-body .ab-callout--warning .ab-callout-icon { color: #b45309; }
.article-body .ab-callout--danger  { border-color: #dc2626; background: #fef2f2; }
.article-body .ab-callout--danger  .ab-callout-icon { color: #dc2626; }

/* =====================================================================
   Code
   ===================================================================== */
.article-body .ab-code { margin: 24px 0; }
.article-body .ab-code-pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 18px 20px;
    border-radius: 10px;
    font-family: 'JetBrains Mono', Consolas, Menlo, monospace;
    font-size: 13.5px;
    line-height: 1.65;
    overflow-x: auto;
    margin: 0;
    position: relative;
}
.article-body .ab-code-pre::before {
    content: attr(data-lang);
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.article-body .ab-code-caption {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
    text-align: center;
    font-style: italic;
}

/* =====================================================================
   Embed (YouTube / Vimeo) — aspect-ratio wrapper
   ===================================================================== */
.article-body .ab-embed-wrap { margin: 28px 0; }
.article-body .ab-embed {
    position: relative;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 4px 18px rgba(15,23,42,.12);
}
.article-body .ab-embed[data-aspect="16:9"] { padding-bottom: 56.25%; }
.article-body .ab-embed[data-aspect="4:3"]  { padding-bottom: 75%; }
.article-body .ab-embed[data-aspect="1:1"]  { padding-bottom: 100%; }
.article-body .ab-embed[data-aspect="9:16"] { padding-bottom: 177.77%; max-width: 360px; margin: 0 auto; }
.article-body .ab-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.article-body .ab-embed-caption {
    font-size: 13px;
    color: #6b7280;
    margin-top: 10px;
    font-style: italic;
    text-align: center;
}

/* =====================================================================
   Self-hosted video
   ===================================================================== */
.article-body .ab-video { margin: 28px 0; }
.article-body .ab-video video { border-radius: 12px; box-shadow: 0 4px 18px rgba(15,23,42,.10); }
.article-body .ab-video-caption {
    font-size: 13px;
    color: #6b7280;
    margin-top: 10px;
    font-style: italic;
    text-align: center;
}

/* =====================================================================
   Button
   ===================================================================== */
.article-body .ab-button-wrap                       { margin: 18px 0; }
.article-body .ab-button-wrap[data-align="center"]  { text-align: center; }
.article-body .ab-button-wrap[data-align="right"]   { text-align: right; }
.article-body .ab-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: transform .12s, box-shadow .12s;
}
.article-body .ab-button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(30,42,120,.18); }
.article-body .ab-button--primary   { background: #1e2a78; color: white !important; }
.article-body .ab-button--secondary { background: #eef0ff; color: #1e2a78 !important; }
.article-body .ab-button--ghost     { background: transparent; color: #1e2a78 !important; border: 1.5px solid #1e2a78; }
.article-body .ab-button--sm { padding: 7px 14px; font-size: 13px; }
.article-body .ab-button--md { padding: 10px 20px; font-size: 14.5px; }
.article-body .ab-button--lg { padding: 13px 28px; font-size: 16px; }

/* =====================================================================
   Divider
   ===================================================================== */
.article-body .ab-divider            { color: #c7cbe6; text-align: center; }
.article-body .ab-divider[data-spacing="sm"] { margin: 16px 0; }
.article-body .ab-divider[data-spacing="md"] { margin: 28px 0; }
.article-body .ab-divider[data-spacing="lg"] { margin: 44px 0; }
.article-body .ab-divider--line   { border-top: 1px solid #e5e7eb; }
.article-body .ab-divider--dotted { border-top: 1px dotted #c7cbe6; }
.article-body .ab-divider--stars  { color: #1e2a78; font-size: 16px; letter-spacing: 14px; padding-left: 14px; }
.article-body .ab-divider--space  { border: 0; }

/* =====================================================================
   Columns
   ===================================================================== */
.article-body .ab-columns               { display: grid; margin: 32px 0; }
.article-body .ab-columns[data-gap="tight"]  { gap: 16px; }
.article-body .ab-columns[data-gap="normal"] { gap: 32px; }
.article-body .ab-columns[data-gap="wide"]   { gap: 56px; }
.article-body .ab-columns[data-layout="50-50"]    { grid-template-columns: 1fr 1fr; }
.article-body .ab-columns[data-layout="33-67"]    { grid-template-columns: 1fr 2fr; }
.article-body .ab-columns[data-layout="67-33"]    { grid-template-columns: 2fr 1fr; }
.article-body .ab-columns[data-layout="33-33-33"] { grid-template-columns: 1fr 1fr 1fr; }
.article-body .ab-column > *:first-child { margin-top: 0; }
.article-body .ab-column > *:last-child  { margin-bottom: 0; }

@media (max-width: 720px) {
    .article-body .ab-columns,
    .article-body .ab-columns[data-layout="50-50"],
    .article-body .ab-columns[data-layout="33-67"],
    .article-body .ab-columns[data-layout="67-33"],
    .article-body .ab-columns[data-layout="33-33-33"] {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .article-body .ab-gallery[data-cols="3"],
    .article-body .ab-gallery[data-cols="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================================
   Table of contents
   ===================================================================== */
.article-body .ab-toc {
    background: #f9fafb;
    border: 1px solid #eef0ff;
    border-radius: 10px;
    padding: 18px 22px;
    margin: 24px 0;
}
.article-body .ab-toc-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #1e2a78;
    font-weight: 700;
    margin: 0 0 10px;
}
.article-body .ab-toc-list { margin: 0; padding-left: 22px; line-height: 1.8; }
.article-body .ab-toc-list a { color: #1e2a78; text-decoration: none; }
.article-body .ab-toc-list a:hover { text-decoration: underline; }
.article-body .ab-toc-item--h3 { padding-left: 14px; font-size: 13.5px; }
.article-body .ab-toc-item--h4 { padding-left: 28px; font-size: 13px; color: #6b7280; }

/* =====================================================================
   Category pills — always brand colour (no per-category colours).
   ===================================================================== */
.tag-green, .tag-teal, .tag-amber, .tag-blue, .tag-purple, .tag-red, .tag-brand { background: #eef0ff; color: #1e2a78; }

/* =====================================================================
   Article tables (converted from source tables)
   ===================================================================== */
.article-body .article-table-wrap { overflow-x: auto; margin: 22px 0; -webkit-overflow-scrolling: touch; }
.article-body .article-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
.article-body .article-table th { background: #1e2a78; color: #fff; text-align: left; padding: 11px 14px; font-weight: 700; }
.article-body .article-table td { padding: 10px 14px; border-bottom: 1px solid #e8eaf6; vertical-align: top; color: #1f2937; }
.article-body .article-table tbody tr:nth-child(even) { background: #f6f7fc; }
.article-body .article-table tbody tr:hover { background: #eef0ff; }

/* =====================================================================
   FAQ accordion (+ FAQPage schema travels in the body)
   ===================================================================== */
.article-faq { margin: 34px 0 8px; }
.article-faq > h2 { font-family: 'Playfair Display', serif; color: #1e2a78; font-size: 26px; margin: 0 0 16px; }
.article-faq__item { border: 1px solid #e8eaf6; border-radius: 10px; margin: 0 0 10px; background: #fff; overflow: hidden; }
.article-faq__item summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: #1e2a78; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.article-faq__item summary::-webkit-details-marker { display: none; }
.article-faq__item summary::after { content: '+'; font-size: 20px; line-height: 1; color: #1e2a78; flex: none; }
.article-faq__item[open] summary::after { content: '\2212'; }
.article-faq__item[open] summary { border-bottom: 1px solid #eef0ff; }
.article-faq__a { padding: 14px 18px; color: #374151; line-height: 1.7; font-size: 15px; }
.article-faq__a p { margin: 0 0 10px; }
.article-faq__a p:last-child { margin-bottom: 0; }