/* ==========================================================================
   Songkhla FC — Rich text content rendering (.article-body)
   Styles the HTML produced by the admin Quill editor.
   ========================================================================== */

.article-body {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ---------- Blocks ---------- */
.article-body p {
    margin: 0 0 18px;
}

.article-body p:last-child {
    margin-bottom: 0;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    font-family: var(--font-head, 'Noto Sans Thai', sans-serif);
    font-weight: 600;
    color: var(--ink, #151515);
    margin: 32px 0 14px;
    line-height: 1.35;
}

.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.28rem; }
.article-body h4 { font-size: 1.12rem; }

.article-body h2:first-child,
.article-body h3:first-child,
.article-body h4:first-child {
    margin-top: 0;
}

.article-body strong, .article-body b { font-weight: 700; }
.article-body em, .article-body i { font-style: italic; }
.article-body u { text-underline-offset: 3px; }

.article-body hr {
    border: 0;
    border-top: 1px solid var(--gray-300, #d5d5d7);
    margin: 32px 0;
}

/* ---------- Images ---------- */
.article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius, 10px);
    margin: 24px auto;
    box-shadow: 0 6px 22px rgba(13, 13, 15, .10);
}

.article-body figure {
    margin: 24px 0;
}

.article-body figcaption {
    font-size: .88rem;
    color: var(--gray-500, #71767f);
    text-align: center;
    margin-top: 8px;
}

/* ---------- Lists ---------- */
.article-body ul,
.article-body ol {
    margin: 0 0 18px;
    padding-left: 26px;
}

.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

.article-body li {
    margin-bottom: 8px;
}

.article-body li > ul,
.article-body li > ol {
    margin: 8px 0 0;
}

/* Quill 2 emits <ol> with data-list for both bullet and ordered lists. */
.article-body ol li[data-list="bullet"] { list-style-type: disc; }
.article-body ol li[data-list="ordered"] { list-style-type: decimal; }
.article-body li .ql-ui { display: none; }

/* ---------- Links ---------- */
.article-body a {
    color: var(--red, #D7000F);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition, all .22s ease);
}

.article-body a:hover {
    color: var(--red-dark, #A30000);
}

/* ---------- Quote ---------- */
.article-body blockquote {
    margin: 26px 0;
    padding: 14px 20px;
    border-left: 4px solid var(--red, #D7000F);
    background: var(--gray-100, #f5f5f7);
    border-radius: 0 var(--radius, 10px) var(--radius, 10px) 0;
    color: var(--gray-700, #3a3a40);
    font-size: 1.02em;
}

.article-body blockquote p:last-child { margin-bottom: 0; }

/* ---------- Code ---------- */
.article-body pre,
.article-body .ql-code-block-container {
    background: var(--black, #0d0d0f);
    color: #f5f5f7;
    padding: 16px 18px;
    border-radius: var(--radius, 10px);
    overflow-x: auto;
    margin: 22px 0;
    font-size: .92rem;
    line-height: 1.6;
}

.article-body code {
    background: var(--gray-100, #f5f5f7);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: .92em;
}

.article-body pre code {
    background: none;
    padding: 0;
}

/* ---------- Alignment (Quill classes) ---------- */
.article-body .ql-align-center { text-align: center; }
.article-body .ql-align-right  { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }

.article-body .ql-align-center img { margin-left: auto; margin-right: auto; }
.article-body .ql-align-right img  { margin-left: auto; margin-right: 0; }
.article-body .ql-align-left img   { margin-left: 0; margin-right: auto; }

.article-body .ql-indent-1 { padding-left: 3em; }
.article-body .ql-indent-2 { padding-left: 6em; }
.article-body .ql-indent-3 { padding-left: 9em; }

/* ---------- Embeds / tables ---------- */
.article-body iframe,
.article-body .ql-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 220px;
    border: 0;
    border-radius: var(--radius, 10px);
    margin: 24px 0;
    background: #000;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: .96rem;
}

.article-body th,
.article-body td {
    border: 1px solid var(--gray-300, #d5d5d7);
    padding: 10px 12px;
    text-align: left;
}

.article-body th {
    background: var(--gray-100, #f5f5f7);
    font-weight: 600;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .article-body h2 { font-size: 1.32rem; }
    .article-body h3 { font-size: 1.18rem; }
    .article-body ul,
    .article-body ol { padding-left: 20px; }
    .article-body .ql-indent-1 { padding-left: 1.6em; }
    .article-body .ql-indent-2 { padding-left: 3.2em; }
    .article-body .ql-indent-3 { padding-left: 4.8em; }
}