/*
 * F-009 Article template styles.
 *
 * Rules:
 *  - Only --tk-* custom properties (no literal hex, no rgb(), no rgba()).
 *  - Mobile-first. Desktop adjustments in a single @media block.
 *  - Respects prefers-reduced-motion.
 *  - Must not break F-005 .c-solvedRate (separate file, separate class).
 *
 * Pairs used (all pre-validated AA by F-003 contrast_report.json):
 *  - answer text (ink) on bg-subtle        → 11.8:1
 *  - verify text (ink-muted) on bg-subtle  → 5.79:1
 *  - footer-cta link on bg-subtle          → 6.40:1
 *  - byline ink-muted on bg                → 7.0:1
 *  - steps ink on bg                       → 13.8:1
 */

/* ===== Conclusion-first box ========================================== */

.c-article__answer {
    background: var(--tk-color-bg-subtle);
    border-left: 4px solid var(--tk-color-accent);
    padding: var(--tk-space-5) var(--tk-space-6);
    margin: var(--tk-space-6) 0 var(--tk-space-8);
    border-radius: var(--tk-radius-md);
}
.c-article__answer p {
    margin: 0;
    font-size: var(--tk-fs-md);
    line-height: var(--tk-lh-relaxed);
    color: var(--tk-color-ink);
}
.c-article__answer strong {
    color: var(--tk-color-primary);
    font-weight: var(--tk-fw-bold);
}

/* ===== Verify-meta banner ============================================ */

.c-article__verify {
    display: inline-block;
    font-size: var(--tk-fs-sm);
    line-height: var(--tk-lh-normal);
    color: var(--tk-color-ink-muted);
    background: var(--tk-color-bg-subtle);
    border: 1px solid var(--tk-color-border);
    border-radius: var(--tk-radius-sm);
    padding: var(--tk-space-2) var(--tk-space-4);
    margin: 0 0 var(--tk-space-6);
    /* Numbers in YYYY-MM-DD benefit from normal width — suppress palt. */
    font-feature-settings: normal;
}
.c-article__verify-label {
    font-weight: var(--tk-fw-medium);
    margin-right: var(--tk-space-1);
    color: var(--tk-color-ink);
}
.c-article__verify time {
    font-variant-numeric: tabular-nums;
}
/* Empty state is admin-only; hide from front visitors entirely. */
.c-article__verify.is-empty {
    display: none;
}

/* ===== Step list ===================================================== */

.c-article__steps {
    padding-left: var(--tk-space-6);
    margin: var(--tk-space-4) 0 var(--tk-space-6);
    color: var(--tk-color-ink);
}
.c-article__steps li {
    margin-bottom: var(--tk-space-4);
    line-height: var(--tk-lh-relaxed);
    font-size: var(--tk-fs-base);
}
.c-article__steps li::marker {
    color: var(--tk-color-primary);
    font-weight: var(--tk-fw-bold);
}
.c-article__steps li strong {
    color: var(--tk-color-ink);
}

/* ===== Screenshots + illustrations =================================== */

.c-article__screenshot img,
.c-article__illust img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tk-radius-md);
    display: block;
}
.c-article__screenshot figcaption,
.c-article__illust figcaption {
    font-size: var(--tk-fs-sm);
    color: var(--tk-color-ink-muted);
    margin-top: var(--tk-space-2);
    text-align: center;
}

/* ===== Footer CTA (text-links only, no buttons per NG-09) ============ */

.c-article__footer-cta {
    display: flex;
    flex-direction: column;
    gap: var(--tk-space-2);
    margin: var(--tk-space-8) 0 var(--tk-space-4);
    padding: var(--tk-space-5);
    background: var(--tk-color-bg-subtle);
    border-radius: var(--tk-radius-md);
    border: 1px solid var(--tk-color-border);
}
.c-article__footer-cta-link {
    color: var(--tk-color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: var(--tk-fs-base);
    line-height: var(--tk-lh-normal);
    padding: var(--tk-space-1) 0;
}
.c-article__footer-cta-link:hover,
.c-article__footer-cta-link:focus-visible {
    color: var(--tk-color-primary-hover);
    text-decoration-thickness: 2px;
}

/* ===== Byline ======================================================== */

.c-article__byline {
    font-size: var(--tk-fs-sm);
    color: var(--tk-color-ink-muted);
    margin: var(--tk-space-4) 0 var(--tk-space-6);
    text-align: right;
    line-height: var(--tk-lh-normal);
}

/* ===== Details block tweaks ========================================== */

.wp-block-details {
    margin: var(--tk-space-4) 0;
    padding: var(--tk-space-3) var(--tk-space-4);
    border: 1px solid var(--tk-color-border);
    border-radius: var(--tk-radius-sm);
    background: var(--tk-color-bg);
}
.wp-block-details > summary {
    cursor: pointer;
    font-weight: var(--tk-fw-medium);
    color: var(--tk-color-ink);
    padding: var(--tk-space-1) 0;
}
.wp-block-details[open] > summary {
    margin-bottom: var(--tk-space-2);
}

/* ===== Desktop adjustments =========================================== */

@media (min-width: 768px) {
    .c-article__footer-cta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--tk-space-6);
        padding: var(--tk-space-5) var(--tk-space-6);
    }
    .c-article__answer {
        padding: var(--tk-space-6) var(--tk-space-8);
    }
}

/* ===== Reduced motion ================================================ */

@media (prefers-reduced-motion: reduce) {
    .wp-block-details > summary,
    .c-article__footer-cta-link {
        transition: none !important;
    }
}