@charset "utf-8";
/*
 * Granklin rich article baseline v13
 * Canonical stylesheet for long-form content inside .news-detail / .news-detail-content.
 * Loaded after the legacy page styles so CMS/editor output remains readable across PC, Pad and mobile.
 */

:root {
    --article-text: #414b45;
    --article-heading: #202923;
    --article-muted: #66716a;
    --article-border: var(--color-border);
    --article-soft: #f5f8f6;
    --article-soft-strong: #edf4ef;
    --article-code-bg: #1f2923;
    --article-code-text: #eef6f0;
    --article-link: var(--color-brand-strong);
    --article-mark: #fff1ad;
    --article-reading-width: 860px;
}

/* ---------- Article shell / reading measure ---------- */
.news-detail {
    padding: clamp(32px, 4vw, 72px) clamp(24px, 4.5vw, 80px);
    background: #fff;
}

.news-detail-title,
.news-detail-content,
.news-detail > .product-tags {
    width: 100%;
    max-width: var(--article-reading-width);
    margin-inline: auto;
}

.news-detail-title {
    padding-bottom: clamp(22px, 2.2vw, 34px);
    border-bottom: 1px solid var(--article-border);
}

.news-detail-title h1 {
    margin: 0;
    font-size: clamp(26px, 2.35vw, 36px);
    line-height: 1.35;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--article-heading);
    text-wrap: pretty;
}

.news-detail-title p,
.news-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em 1em;
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--article-muted);
}

/* Remove the legacy decorative separator that appeared even with only one meta item. */
.news-detail-title p :where(time, span),
.news-detail-meta :where(time, span) {
    padding-inline-end: 0;
    margin-inline-end: 0;
}
.news-detail-title p time::before,
.news-detail-meta time::before { display: none !important; }

/* ---------- Rich text baseline ---------- */
.news-detail-content {
    padding: clamp(28px, 3vw, 42px) 0 clamp(34px, 4vw, 52px);
    margin-bottom: clamp(26px, 3vw, 40px);
    border-bottom: 1px solid var(--article-border);
    color: var(--article-text);
    font-family: inherit;
    font-size: clamp(16px, .35vw + 15px, 17px);
    line-height: 1.85;
    text-align: start;
    overflow-wrap: break-word;
    word-break: normal;
}

.news-detail-content > :first-child { margin-top: 0 !important; }
.news-detail-content > :last-child { margin-bottom: 0 !important; }
.news-detail-content :where(p, li, dd, dt, figcaption, blockquote, td, th) {
    overflow-wrap: anywhere;
}

/* Headings: preserve a visible hierarchy without relying on browser defaults. */
.news-detail-content h2,
.news-detail-content h3,
.news-detail-content h4,
.news-detail-content h5,
.news-detail-content h6 {
    max-width: 100%;
    padding: 0;
    color: var(--article-heading);
    font-weight: 650;
    text-wrap: pretty;
}
.news-detail-content h2 {
    margin: 2em 0 .75em;
    font-size: clamp(22px, 1.4vw + 16px, 30px);
    line-height: 1.4;
}
.news-detail-content h3 {
    margin: 1.8em 0 .7em;
    font-size: clamp(19px, .8vw + 16px, 24px);
    line-height: 1.45;
}
.news-detail-content h4 {
    margin: 1.6em 0 .65em;
    font-size: clamp(18px, .45vw + 16px, 21px);
    line-height: 1.5;
}
.news-detail-content h5 {
    margin: 1.5em 0 .6em;
    font-size: 17px;
    line-height: 1.55;
}
.news-detail-content h6 {
    margin: 1.5em 0 .6em;
    font-size: 16px;
    line-height: 1.55;
    color: #465149;
}

.news-detail-content p {
    margin: 0 0 1.15em;
    color: inherit;
    line-height: inherit;
}

/* Inline semantics. */
.news-detail-content a {
    color: var(--article-link);
    text-decoration: underline;
    text-decoration-thickness: .075em;
    text-underline-offset: .2em;
    text-decoration-skip-ink: auto;
}
.news-detail-content a:hover,
.news-detail-content a:focus-visible {
    color: #0e542c;
    text-decoration-thickness: .13em;
}
.news-detail-content :where(strong, b) {
    color: #26312a;
    font-weight: 700;
}
.news-detail-content :where(em, i) { font-style: italic; }
.news-detail-content mark {
    padding: .06em .24em;
    background: var(--article-mark);
    color: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.news-detail-content :where(sup, sub) {
    position: relative;
    font-size: .75em;
    line-height: 0;
    vertical-align: baseline;
}
.news-detail-content sup { top: -.45em; }
.news-detail-content sub { bottom: -.2em; }
.news-detail-content abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: .18em;
    cursor: help;
}
.news-detail-content kbd {
    display: inline-block;
    padding: .08em .42em;
    border: 1px solid #cdd7d1;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #fff;
    color: #27332c;
    font: .9em/1.5 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* Lists: global reset removes markers, so article content explicitly restores them. */
.news-detail-content :where(ul, ol) {
    margin: 1.2em 0 1.35em;
    padding-inline-start: 1.65em;
}
.news-detail-content ul { list-style-type: disc; }
.news-detail-content ol { list-style-type: decimal; }
.news-detail-content :where(ul, ol) li {
    display: list-item;
    margin: .38em 0;
    padding-inline-start: .2em;
    line-height: 1.8;
    list-style: inherit;
}
.news-detail-content ul ul { list-style-type: circle; }
.news-detail-content ul ul ul { list-style-type: square; }
.news-detail-content ol ol { list-style-type: lower-alpha; }
.news-detail-content :where(ul, ol) :where(ul, ol) {
    margin: .45em 0 .55em;
}
.news-detail-content li::marker {
    color: var(--default);
    font-weight: 650;
}

/* Quotations / callouts. */
.news-detail-content blockquote {
    margin: 1.6em 0;
    padding: 1em 1.25em;
    border: 0;
    border-inline-start: 4px solid var(--default);
    border-radius: 0 6px 6px 0;
    background: var(--article-soft);
    color: #4b5750;
    line-height: 1.8;
}
html[dir="rtl"] .news-detail-content blockquote { border-radius: 6px 0 0 6px; }
.news-detail-content blockquote > :last-child { margin-bottom: 0; }
.news-detail-content blockquote cite {
    display: block;
    margin-top: .7em;
    color: var(--article-muted);
    font-size: .9em;
    font-style: normal;
}

/* Images, picture, figure and captions. */
.news-detail-content :where(img, picture, video, iframe) { max-width: 100%; }
.news-detail-content > img,
.news-detail-content > picture,
.news-detail-content p > img,
.news-detail-content p > picture {
    display: block;
    margin-block: 1.75em;
}
.news-detail-content img {
    height: auto;
    object-fit: contain;
}
.news-detail-content figure {
    margin: 1.9em 0;
    padding: 0;
}
.news-detail-content figure :where(img, picture, video) {
    display: block;
    margin-inline: auto;
}
.news-detail-content figcaption {
    max-width: 720px;
    margin: .7em auto 0;
    color: var(--article-muted);
    font-size: 14px;
    line-height: 1.65;
    text-align: center;
}

/* Tables. Bare tables fit the article measure; wide tables can use .article-table-scroll. */
.news-detail-content table {
    width: 100%;
    margin: 1.7em 0;
    border: 1px solid var(--article-border);
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;
    color: var(--article-text);
    font-size: 15px;
    line-height: 1.65;
}
.news-detail-content caption {
    padding: 0 0 .65em;
    color: #344039;
    font-size: 15px;
    font-weight: 650;
    text-align: start;
}
.news-detail-content :where(th, td) {
    padding: 11px 13px;
    border: 1px solid var(--article-border);
    text-align: start;
    vertical-align: top;
}
.news-detail-content th {
    background: var(--article-soft-strong);
    color: #25332b;
    font-weight: 650;
}
.news-detail-content tbody tr:nth-child(even) td { background: #fbfcfb; }
.article-table-scroll {
    max-width: 100%;
    margin: 1.7em 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 4px;
}
.article-table-scroll table {
    margin: 0;
    min-width: 640px;
}
.article-table-scroll:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 3px;
}

/* Definition lists work well for industrial terms / specifications. */
.news-detail-content dl {
    display: grid;
    grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
    gap: 0;
    margin: 1.5em 0;
    border: 1px solid var(--article-border);
    border-radius: 6px;
    overflow: hidden;
}
.news-detail-content dt,
.news-detail-content dd {
    margin: 0;
    padding: 11px 14px;
    border-bottom: 1px solid var(--article-border);
}
.news-detail-content dt {
    background: var(--article-soft);
    color: #26342b;
    font-weight: 650;
}
.news-detail-content dd { background: #fff; }
.news-detail-content :where(dt, dd):nth-last-child(-n+2) { border-bottom: 0; }

/* Code / preformatted text. */
.news-detail-content pre {
    max-width: 100%;
    margin: 1.55em 0;
    padding: 16px 18px;
    overflow-x: auto;
    border-radius: 6px;
    background: var(--article-code-bg);
    color: var(--article-code-text);
    font: 14px/1.7 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    tab-size: 4;
    white-space: pre;
    direction: ltr;
    unicode-bidi: plaintext;
}
.news-detail-content pre code {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}
.news-detail-content :not(pre) > code {
    padding: .1em .34em;
    border: 1px solid #e0e6e2;
    border-radius: 3px;
    background: #f1f4f2;
    color: #344039;
    font: .9em/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* Embedded media. */
.news-detail-content video {
    display: block;
    width: 100%;
    height: auto;
    margin: 1.8em 0;
    background: #000;
}
.news-detail-content iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 1.8em 0;
    border: 0;
}

/* Misc semantic blocks. */
.news-detail-content hr {
    height: 0;
    margin: 2.2em 0;
    border: 0;
    border-top: 1px solid var(--article-border);
}
.news-detail-content details {
    margin: 1.35em 0;
    padding: 0 1em;
    border: 1px solid var(--article-border);
    border-radius: 6px;
    background: #fff;
}
.news-detail-content summary {
    margin-inline: -1em;
    padding: .85em 1em;
    color: #28362e;
    font-weight: 650;
    cursor: pointer;
}
.news-detail-content details[open] summary {
    margin-bottom: .8em;
    border-bottom: 1px solid var(--article-border);
    background: var(--article-soft);
}

/* Tags belong to the article but are not part of the rich-text measure. */
.news-detail > .product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Responsive reading ---------- */
@media (max-width: 768px) {
    .news-detail {
        padding: 28px 20px;
    }
    .news-detail-title h1 {
        font-size: clamp(25px, 7vw, 30px);
    }
    .news-detail-content {
        padding-top: 26px;
        font-size: 16px;
        line-height: 1.82;
    }
    .news-detail-content h2 { margin-top: 1.75em; }
    .news-detail-content h3 { margin-top: 1.55em; }
    .news-detail-content :where(ul, ol) { padding-inline-start: 1.45em; }
    .news-detail-content :where(th, td) { padding: 10px 11px; }
    .news-detail-content dl { grid-template-columns: 1fr; }
    .news-detail-content dt,
    .news-detail-content dd { border-bottom: 1px solid var(--article-border); }
    .news-detail-content dd:last-child { border-bottom: 0; }
}

@media (max-width: 480px) {
    .news-detail { padding: 24px 18px; }
    .news-detail-title h1 { font-size: 25px; }
    .news-detail-title p,
    .news-detail-meta { font-size: 13px; }
    .news-detail-content { font-size: 16px; line-height: 1.8; }
    .news-detail-content h2 { font-size: 22px; }
    .news-detail-content h3 { font-size: 19px; }
    .news-detail-content h4 { font-size: 18px; }
    .news-detail-content blockquote { padding: .9em 1em; }
    .news-detail-content figcaption { font-size: 13px; }
}

/* RTL uses logical spacing/borders above; only alignment-sensitive elements need explicit direction. */
html[dir="rtl"] .news-detail-content,
html[dir="rtl"] .news-detail-title { text-align: start; }
html[dir="rtl"] .news-detail-content :where(table, th, td, caption, dt, dd) { text-align: start; }

/* High-contrast / forced-colors fallback. */
@media (forced-colors: active) {
    .news-detail-content a { color: LinkText; }
    .news-detail-content blockquote,
    .news-detail-content table,
    .news-detail-content :where(th, td),
    .news-detail-content dl,
    .news-detail-content details {
        border-color: CanvasText;
        forced-color-adjust: auto;
    }
    .news-detail-content th,
    .news-detail-content dt,
    .news-detail-content details[open] summary { background: Canvas; }
    .news-detail-content li::marker { color: CanvasText; }
}

@media (prefers-contrast: more) {
    .news-detail-content { color: #222b25; }
    .news-detail-content a { color: #0b5428; text-decoration-thickness: 2px; }
    .news-detail-title p,
    .news-detail-meta,
    .news-detail-content figcaption { color: #4b554f; }
}

/* Print: make long technical articles usable on paper/PDF without decorative clipping. */
@media print {
    .news-detail {
        padding: 0;
        background: #fff;
    }
    .news-detail-title,
    .news-detail-content,
    .news-detail > .product-tags { max-width: none; }
    .news-detail-content {
        color: #000;
        font-size: 11pt;
        line-height: 1.65;
    }
    .news-detail-content a {
        color: #000;
        text-decoration: underline;
    }
    .article-table-scroll { overflow: visible; }
    .article-table-scroll table { min-width: 0; }
}