/* ============================================================
   ARTICLE PAGE — EDITORIAL READING EXPERIENCE
   Scoped to post.html only. Site-wide chrome (header/footer/
   Cairo font) is untouched — this file gives the article itself
   a slightly more premium/editorial typographic treatment,
   inspired by a "Modern Magister" reference design: warm
   off-white background (already the site's own --bg-color),
   generous line-height, gold pull-quotes, diamond bullets.
   ============================================================ */

.post-page {
    padding-top: 8px;
}

/* --------------------------------------------------------
   REAL SCROLL-DRIVEN READING PROGRESS BAR
   Tracks actual scroll position through the article (see
   wireReadingProgress() in post.js) — not a static decoration.
-------------------------------------------------------- */
.reading-progress-track {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 1001;
}

.reading-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-color);
    transition: width 0.1s linear;
}

/* --------------------------------------------------------
   BACK LINK
-------------------------------------------------------- */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-color);
    text-decoration: none;
    margin: 1.5rem 0 2rem;
    font-weight: 600;
    transition: gap 0.25s;
}

.back-button:hover {
    gap: 0.9rem;
}

.back-button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
    border-radius: 3px;
}

/* --------------------------------------------------------
   ARTICLE COLUMN
   No boxed card — the article sits directly on the page
   background, with a narrower reading column for comfortable
   line length.
-------------------------------------------------------- */
.post-container {
    max-width: 760px;
    margin: 0 auto 3rem;
    overflow-wrap: break-word;
    font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
}

.loading {
    text-align: center;
    padding: 4rem 1rem;
    font-size: 1.1rem;
    color: var(--text-light);
}

.error {
    color: #b3261e;
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.05rem;
}

/* --------------------------------------------------------
   HEADER — META ROW / TITLE / COVER
-------------------------------------------------------- */
.post-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.post-meta-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--accent-color);
    margin-bottom: 1.25rem;
}

.post-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-light);
    opacity: 0.5;
    display: inline-block;
}

.post-title {
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-main);
    margin-bottom: 2rem;
}

.post-cover {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(26, 28, 30, 0.08);
    aspect-ratio: 16 / 9;
    background: var(--white, #f5f1e8);
}

.post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-cover img.post-img-placeholder {
    object-fit: contain;
    padding: 12%;
    opacity: 0.9;
}

/* --------------------------------------------------------
   ARTICLE-LEVEL QUOTE [REQ-001]
   Optional lead quote associated with an individual article.
   Distinct from inline blockquotes inside .post-content (REQ-009).
-------------------------------------------------------- */
.post-quote-container {
    margin: 0 0 2.5rem;
}

.post-quote-container.hidden {
    display: none !important;
}

.post-article-quote {
    margin: 0;
    padding: 1.5rem 1.75rem;
    background: #fbf9f4;
    border-inline-start: 4px solid var(--accent-color);
    border-radius: 8px 16px 16px 8px;
    box-shadow: 0 4px 20px rgba(26, 28, 30, 0.03);
    overflow-wrap: break-word;
    word-break: break-word;
}

.post-article-quote-mark {
    font-size: 1.25rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    opacity: 0.85;
}

.post-article-quote-text {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    font-weight: 500;
    line-height: 1.8;
    color: var(--text-main);
    overflow-wrap: break-word;
    word-break: break-word;
}

.post-article-quote[lang="en"] .post-article-quote-text {
    font-style: italic;
}

/* --------------------------------------------------------
   ARTICLE BODY
-------------------------------------------------------- */
.post-content {
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--text-main);
    margin-bottom: 2.5rem;
    overflow-wrap: anywhere;
}

.post-content p {
    margin-bottom: 1.5rem;
}

/* Links inside article content — the site-wide default (a { color:
   inherit; text-decoration: none; }) makes links indistinguishable
   from plain text, which is fine for nav/cards but wrong inside
   prose the reader needs to recognize as clickable. */
.post-content a {
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-color: rgba(223, 178, 86, 0.45);
    text-underline-offset: 3px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.post-content a:hover {
    text-decoration-color: currentColor;
}

.post-content a:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
    border-radius: 2px;
}

.post-content h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-main);
    margin: 2.75rem 0 1.25rem;
}

.post-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 2rem 0 1rem;
}

/* Images the author inserted inside the article body itself
   (via the toolbar's "insert image" button) — kept separate
   from the cover, and always responsive so they can never
   overflow the article column. Safe to rely on a plain (non-
   !important) rule here: post.js strips any inline style/width/
   height attribute from every <img> in data.content before it's
   inserted into .post-content (sanitizeArticleContentImages()),
   and the admin editor strips the same attributes from pasted
   images before they're ever saved (see the paste listener in
   d22bfizsq8jhl6j9bk/js/common.js) — so an <img> arriving here
   never carries dimensions that could out-rank this rule. */
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(26, 28, 30, 0.07);
    margin: 2rem 0;
    display: block;
}

/* Author-selected inline image size, set from the admin editor
   (see .article-image handling in d22bfizsq8jhl6j9bk/js/common.js).
   No size class = the rule above, unaffected — this keeps every
   pre-existing article's images rendering exactly as before.
   article-image-large is intentionally the same width as the
   default: images already fill the full reading column by
   default, and the column's max-width (.post-container, 760px)
   is the ceiling we don't exceed. It exists as an explicit,
   named choice so "large" stays pinned to full column width even
   if the unclassed default is ever changed for other reasons. */
.post-content .article-image-small {
    width: 60%;
    max-width: 100%;
    margin: 2rem auto;
}

.post-content .article-image-large {
    width: 100%;
}

/* Pull quote — the gold accent border marks it as a highlighted
   idea rather than a plain paragraph. */
.post-content blockquote {
    margin: 2.25rem 0;
    padding: 1.5rem 1.75rem;
    background: #f5f3ee;
    border-inline-start: 4px solid var(--accent-color);
    border-radius: 4px 12px 12px 4px;
    font-size: 1.2rem;
    font-weight: 500;
    font-style: italic;
    color: var(--text-main);
    line-height: 1.75;
}

.post-content pre,
.post-content code {
    font-family: 'Courier New', Consolas, Monaco, monospace;
}

.post-content code {
    background: #f0eee9;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

.post-content pre {
    background: #1b1c19;
    color: #eee;
    padding: 1.25rem;
    border-radius: 12px;
    overflow-x: auto;
    margin: 1.75rem 0;
}

.post-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Defensive: the editor toolbar doesn't offer table insertion, but
   pasted content could still contain one. A wide table must scroll
   horizontally on its own rather than blowing out the article
   column or forcing the whole page to scroll sideways. */
.post-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.95rem;
}

.post-content th,
.post-content td {
    padding: 0.6rem 0.9rem;
    border: 1px solid #e8e3d8;
    text-align: start;
}

/* Defensive: the editor toolbar doesn't offer embeds either, but
   guard against pasted iframe/video content the same way as tables
   above — never allowed to force horizontal overflow. */
.post-content iframe,
.post-content video {
    max-width: 100%;
}

/* Diamond bullet markers instead of default circles — a small,
   deliberate brand touch for lists inside articles. */
.post-content ul {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
}

.post-content ul li {
    position: relative;
    padding-inline-start: 1.75rem;
    margin-bottom: 0.85rem;
}

.post-content ul li::before {
    content: '';
    position: absolute;
    top: 0.5em;
    inset-inline-start: 0;
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    transform: rotate(45deg);
}

.post-content ol {
    margin: 1.5rem 0;
    padding-inline-start: 1.75rem;
}

.post-content ol li {
    margin-bottom: 0.85rem;
}

/* --------------------------------------------------------
   SHARE ROW
-------------------------------------------------------- */
.post-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2rem;
    margin-bottom: 2.5rem;
    border-top: 1px solid #e8e3d8;
}

.post-share-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
}

.post-share-buttons {
    display: flex;
    gap: 10px;
}

.post-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #eae8e3;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

.post-icon-btn:hover {
    background: var(--accent-color);
    color: var(--text-main);
}

.post-icon-btn:active {
    transform: scale(0.94);
}

.post-icon-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.post-icon-btn.copied {
    background: #1f7a4d;
    color: #fff;
}

/* --------------------------------------------------------
   AUTHOR BOX
-------------------------------------------------------- */
.post-author-box {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #f5f3ee;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(26, 28, 30, 0.04);
}

.post-author-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--white, #fff);
    box-shadow: 0 6px 16px rgba(26, 28, 30, 0.1);
}

.post-author-info {
    min-width: 0;
}

.post-author-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.4rem;
}

.post-author-bio {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-light);
}

/* --------------------------------------------------------
   RELATED ARTICLES — editorial Bento layout
   Populated with real data from the posts API (see
   loadRelatedPosts() in post.js) — hidden entirely when there
   are no other published posts to show. Visual direction only
   (colors/spacing/shape) is inspired by the Figma reference;
   markup, data flow and API are unrelated to it.

   Layout variants (set as a modifier class on .related-posts-grid
   by post.js, based on how many related articles exist):
     --bento   3 articles → 2 compact cards + 1 featured card
     --duo     2 articles → balanced two-card row
     --single  1 article  → one centered featured-style card
-------------------------------------------------------- */
.related-posts-section {
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 4px;
    /* Scoped accent tokens — a slightly deeper gold for text/icons on
       light chip backgrounds (the site-wide --accent-color is a pale
       gold meant for backgrounds/borders, too low-contrast for text). */
    --related-accent-strong: #8a6b28;
    --related-chip-bg: rgba(239, 202, 115, 0.18);
    --related-card-border: rgba(27, 28, 25, 0.06);
}

.related-posts-title {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    text-align: center;
    color: var(--text-main);
    margin-bottom: 2rem;
}

.related-posts-grid {
    display: grid;
    gap: 28px;
}

/* ---- Shared card shell ---- */
.related-card {
    display: flex;
    flex-direction: column;
    background: var(--white, #fff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(26, 28, 30, 0.04);
    border: 1px solid var(--related-card-border);
    color: inherit;
    transition: box-shadow 0.25s, transform 0.25s;
}

.related-card:hover {
    box-shadow: 0 16px 36px rgba(26, 28, 30, 0.09);
    transform: translateY(-3px);
}

.related-card:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

.related-card-media {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #f5f1e8;
}

.related-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.related-card:hover .related-card-media img {
    transform: scale(1.05);
}

.related-card-media img.post-img-placeholder {
    object-fit: contain;
    padding: 20%;
    transform: none;
}

/* Category chip floating on the image — compact & single cards */
.related-card-chip {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--related-accent-strong);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}

.related-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.related-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card:hover .related-card-title {
    color: var(--related-accent-strong);
}

.related-card-excerpt {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-light);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.related-card-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: auto;
    padding-top: 0.6rem;
}

.related-card-date i {
    font-size: 0.7rem;
    color: var(--accent-color);
}

/* ---- Featured card (Bento large slot + single-article layout) ---- */
.related-card--featured {
    flex-direction: row;
}

.related-card-media--featured {
    height: auto;
    flex: 0 0 50%;
}

.related-card-body--featured {
    flex: 0 0 50%;
    padding: 2rem;
    justify-content: center;
}

.related-card-tag {
    display: inline-block;
    align-self: flex-start;
    background: var(--related-chip-bg);
    color: var(--related-accent-strong);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.related-card-title--lg {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.45;
    margin-bottom: 0.75rem;
    -webkit-line-clamp: 3;
}

.related-card-excerpt--lg {
    font-size: 0.95rem;
    line-height: 1.75;
    -webkit-line-clamp: 3;
    margin-bottom: 1.25rem;
}

.related-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 0.75rem;
    flex-wrap: wrap;
}

.related-card-footer .related-card-date {
    padding-top: 0;
}

.related-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--related-accent-strong);
    white-space: nowrap;
}

.related-card-more i {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.related-card--featured:hover .related-card-more i {
    transform: translateX(-3px);
}

/* ---- Layout variants (desktop / tablet default) ---- */
.related-posts-grid--bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
}

.related-posts-grid--bento .related-card--featured {
    grid-column: span 2;
    grid-row: span 2;
}

.related-posts-grid--duo {
    grid-template-columns: repeat(2, 1fr);
}

.related-posts-grid--duo .related-card-media {
    height: 210px;
}

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

.related-posts-grid--single .related-card--featured {
    max-width: 900px;
    margin: 0 auto;
}

/* --------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------- */

/* Tablet — simplify the Bento grid to a balanced 2-column grid.
   The featured card keeps a taller image but no longer spans two
   rows (there's nothing beside it to fill the second row against). */
@media (max-width: 900px) {
    .related-posts-grid--bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }

    .related-posts-grid--bento .related-card--featured {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 600px) {
    .post-container {
        margin-bottom: 2rem;
    }

    .post-header {
        margin-bottom: 2rem;
    }

    .post-cover {
        border-radius: 12px;
    }

    .post-meta-top {
        font-size: 0.75rem;
    }

    .post-content {
        font-size: 1.05rem;
    }

    /* At narrow widths 60% of the column gets cramped, so widen
       "small" images a bit rather than keeping a fixed ratio. */
    .post-content .article-image-small {
        width: 80%;
    }

    .post-author-box {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    /* Mobile — every related-article layout collapses to one plain
       vertical card per row (image on top, content below). No
       horizontal scrolling, no Bento spanning, no side-by-side
       featured split. */
    .related-posts-grid--bento,
    .related-posts-grid--duo,
    .related-posts-grid--single {
        grid-template-columns: 1fr;
    }

    .related-posts-grid--bento .related-card--featured,
    .related-posts-grid--single .related-card--featured {
        grid-column: auto;
        grid-row: auto;
        max-width: none;
    }

    .related-card--featured {
        flex-direction: column;
    }

    .related-card-media--featured {
        height: 190px;
        flex: none;
    }

    .related-card-body--featured {
        flex: none;
        padding: 1.25rem;
    }

    .related-card-title--lg {
        font-size: 1.05rem;
        -webkit-line-clamp: 2;
    }

    .related-card-excerpt--lg {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }
}

/* ============================================================
   ARTICLE REVIEWS — آراء القراء
   Scoped entirely to the article reading page (post.html).
   All selectors use the "article-review*" prefix to prevent
   any collision with the homepage review styles (.review-card,
   .reviews-grid, etc.) defined in css/styles.css.
   ============================================================ */

/* ---- Section shell ---- */
.article-reviews-section {
    margin-top: 3.5rem;
    margin-bottom: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid #e8e3d8;
}

.article-reviews-title {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    text-align: center;
    color: var(--text-main);
    margin-bottom: 2rem;
}

/* ---- Loading / Error / Empty states ---- */
.article-reviews-list-area {
    min-height: 80px;
    margin-bottom: 2.5rem;
}

.article-reviews-status-msg {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-light);
    font-size: 0.95rem;
    margin: 0;
}

.article-reviews-error {
    color: #b3261e;
}

.article-reviews-empty {
    text-align: center;
    padding: 2rem 1rem 2.5rem;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.article-reviews-empty i {
    font-size: 2rem;
    color: var(--accent-color);
    opacity: 0.65;
    margin-bottom: 0.2rem;
}

.article-reviews-empty p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.article-reviews-empty span {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* ---- Carousel wrapper ---- */
.article-reviews-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

/* ---- Scrollable card list ---- */
.article-reviews-list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
    padding: 6px 2px 16px;
}

.article-reviews-list::-webkit-scrollbar {
    display: none;
}

/* ---- Review card ---- */
.article-review-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: var(--white, #fff);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 18px rgba(26, 28, 30, 0.05), 0 1px 4px rgba(26, 28, 30, 0.04);
    border: 1px solid rgba(27, 28, 25, 0.07);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-wrap: break-word;
    word-break: break-word;
    transition: box-shadow 0.25s, transform 0.25s;
}

.article-review-card:hover {
    box-shadow: 0 8px 28px rgba(26, 28, 30, 0.09), 0 2px 6px rgba(26, 28, 30, 0.05);
    transform: translateY(-2px);
}

/* ---- Card header ---- */
.article-review-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.article-review-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

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

.article-review-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-review-date {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 2px;
}

/* ---- Review text ---- */
.article-review-message {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-main);
    white-space: pre-wrap;
    flex: 1;
    overflow-wrap: anywhere;
}

/* ---- Carousel nav buttons ---- */
.article-reviews-nav-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e8e3d8;
    background: var(--white, #fff);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, opacity 0.2s;
    box-shadow: 0 2px 8px rgba(26, 28, 30, 0.07);
}

.article-reviews-nav-btn:hover:not(:disabled) {
    background: var(--accent-color);
    color: var(--text-main);
    border-color: var(--accent-color);
}

.article-reviews-nav-btn:active:not(:disabled) {
    transform: scale(0.91);
}

.article-reviews-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.article-reviews-nav-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.article-reviews-nav-prev {
    margin-inline-end: 10px;
}

.article-reviews-nav-next {
    margin-inline-start: 10px;
}

/* ---- Submission form box ---- */
.article-review-form-box {
    background: #f5f3ee;
    border-radius: 20px;
    padding: 2.25rem 2rem;
    max-width: 760px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(26, 28, 30, 0.03);
}

.article-review-form-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* ---- Responsive — Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
    .article-review-card {
        flex: 0 0 280px;
    }
}

/* ---- Responsive — Mobile (≤ 600px) ---- */
@media (max-width: 600px) {
    .article-reviews-section {
        margin-top: 2.5rem;
    }

    .article-review-card {
        flex: 0 0 calc(100% - 24px);
    }

    .article-reviews-nav-btn {
        display: none;
    }

    .article-review-form-box {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
    }
}


/* ============================================================
   V5 REQ-008 — YELLOW TEXT HIGHLIGHT (public article page)
   ============================================================
   Renders <mark class="text-highlight"> elements produced by
   the admin article editor. Scoped to .post-content to avoid
   overriding any browser-default <mark> styling elsewhere.

   color: inherit  → preserves surrounding text color
   padding: 0 2px  → tight fit, avoids line-height disruption
   border-radius   → matches admin preview appearance exactly
   ============================================================ */

.post-content mark.text-highlight {
    background-color: #ffe066;
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}


/* ============================================================
   V5 REQ-006 — ACHIEVEMENT IMAGE GALLERY (public article page)
   ============================================================
   Populated by initAchievementGallery() / renderAchievementGallery()
   in post.js, only for data.type === 'achievement'. Empty + hidden
   (via the global .hidden rule in css/styles.css) for blog articles
   and for achievements with zero gallery images. Visual direction:
   warm off-white environment, centered dominant image, partially
   visible adjacent images on desktop, rounded editorial presentation,
   subtle ambient shadow — consistent with the rest of this page's
   "Modern Magister" styling (see .post-cover / .article-review-card
   above for the same shadow/radius language).
   ============================================================ */

.post-achievement-gallery {
    margin-bottom: 2.5rem;
}

.achievement-gallery {
    position: relative;
}

/* ---- 1 image: single centered image, no arrows, no autoplay ---- */
.achievement-gallery--single {
    display: flex;
    justify-content: center;
}

.achievement-gallery-single-btn {
    border: none;
    background: none;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
    cursor: zoom-in;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(26, 28, 30, 0.10);
    display: block;
}

.achievement-gallery-single-btn img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    border-radius: 20px;
}

/* ---- 2+ images: dominant-center carousel with peeking neighbors ---- */
.achievement-gallery--multi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.achievement-gallery-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 10px 4px 8px;
    /* Allow the browser to keep handling vertical scroll natively while
       our touchstart/touchend JS (passive listeners, no preventDefault)
       decides whether a given gesture is a horizontal gallery swipe. */
    touch-action: pan-y;
}

.achievement-gallery-slide {
    border-radius: 20px;
    overflow: hidden;
    background: var(--white, #fff);
    box-shadow: 0 12px 30px rgba(26, 28, 30, 0.08);
    cursor: pointer;
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease;
}

.achievement-gallery-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.achievement-gallery-slide-current {
    flex: 0 0 62%;
    max-width: 520px;
    aspect-ratio: 4 / 3;
    z-index: 2;
    box-shadow: 0 24px 50px rgba(26, 28, 30, 0.14);
    cursor: zoom-in;
}

.achievement-gallery-slide-peek {
    flex: 0 0 18%;
    max-width: 180px;
    aspect-ratio: 4 / 3;
    opacity: 0.55;
    transform: scale(0.88);
}

.achievement-gallery-slide-peek:hover {
    opacity: 0.8;
}

.achievement-gallery-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(26, 28, 30, 0.08);
    background: var(--white, #fff);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(26, 28, 30, 0.08);
    transition: background 0.2s, transform 0.2s;
    z-index: 3;
}

.achievement-gallery-arrow:hover {
    background: var(--accent-color);
    transform: scale(1.06);
}

/* ---- Mobile: prioritize the main image, collapse the peeks ---- */
@media (max-width: 640px) {

    .achievement-gallery-slide-peek {
        display: none;
    }

    .achievement-gallery-slide-current {
        flex-basis: 100%;
        max-width: 100%;
    }

    .achievement-gallery-arrow {
        width: 36px;
        height: 36px;
    }

    .achievement-gallery-single-btn img {
        max-width: 100%;
    }

}


/* ============================================================
   V5 REQ-006 — LIGHTBOX (public article page)
   ============================================================ */

.achieve-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.achieve-lightbox.hidden {
    display: none;
}

.achieve-lightbox.open {
    opacity: 1;
}

.achieve-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    object-fit: contain;
    cursor: default;
}

.achieve-lightbox-close {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.achieve-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.achieve-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.achieve-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* RTL: fa-chevron-right = previous (visually on the right),
   fa-chevron-left = next — matches the gallery arrows above and
   the reviews carousel's own convention. inset-inline-start/end
   automatically resolve to the correct physical side in RTL. */
.achieve-lightbox-prev {
    inset-inline-start: 24px;
}

.achieve-lightbox-next {
    inset-inline-end: 24px;
}

@media (max-width: 640px) {

    .achieve-lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .achieve-lightbox-prev {
        inset-inline-start: 10px;
    }

    .achieve-lightbox-next {
        inset-inline-end: 10px;
    }

    .achieve-lightbox-close {
        top: 12px;
        inset-inline-end: 12px;
    }

}