/* ==========================================================================
   News ↔ Projects — loaded only on the News article and Project detail pages (@push('styles')).
   Everything is prefixed .pn- / .nws-added so nothing in future.css is touched. Logical properties only, so RTL is a
   true mirror. Colours come from the existing site variables (with literal fallbacks).
   ========================================================================== */

/* ---- News article: milestone dating ---- */
.nws-meta.is-milestone time {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--text-on-light, #1f2a30);
}
.nws-added {
    max-width: var(--w-standard, 900px);
    margin: 6px auto 0;
    padding: 0 5%;
    box-sizing: border-box;
    font-family: var(--font-functional, inherit);
    font-size: 12.5px;
    color: var(--text-on-light-muted, #56646b);
}

/* ---- News article: compact Related Project row ---- */
.pn-rp-list { border-top: 1px solid var(--boh-border, #d8d4c8); }
.pn-rp {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--boh-border, #d8d4c8);
    color: var(--text-on-light, #1f2a30);
    text-decoration: none;
}
.pn-rp-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: #d9d5c9; }
.pn-rp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-rp-body { display: block; min-width: 0; }
.pn-rp-cat {
    display: block;
    font-family: var(--font-functional, inherit);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a6d00;
}
[dir="rtl"] .pn-rp-cat { letter-spacing: 0; font-size: 12.5px; }
.pn-rp-title { display: block; margin: 2px 0 3px; font-family: var(--font-display, inherit); font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.pn-rp-facts { display: block; font-size: 13px; color: var(--text-on-light-muted, #56646b); }
.pn-rp-go {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-family: var(--font-functional, inherit);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid var(--boh-gold, #e0b824);
}
.pn-rp:hover .pn-rp-title, .pn-rp:focus-visible .pn-rp-title { text-decoration: underline; text-decoration-color: var(--boh-gold, #e0b824); text-underline-offset: 3px; }
.pn-rp:focus-visible { outline: 3px solid var(--boh-gold, #e0b824); outline-offset: 2px; }
[dir="rtl"] .pn-arr { transform: scaleX(-1); }

/* ---- Project page: Project News & Updates ---- */
.pn-sub {
    margin: 26px 0 10px;
    font-family: var(--font-functional, inherit);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-on-light-muted, #56646b);
    display: flex;
    align-items: center;
    gap: 12px;
}
[dir="rtl"] .pn-sub { letter-spacing: 0; font-size: 13px; }
.pn-sub::after { content: ""; flex: 1; height: 1px; background: var(--boh-border, #d8d4c8); }

.pn-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.pn-timeline::before {
    content: "";
    position: absolute;
    inset-block: 8px 6px;
    inset-inline-start: 118px;
    width: 1px;
    background: #bdb7a8;
}
.pn-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 0 34px;
    padding: 0 0 18px;
}
.pn-timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: 113px;
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--boh-gold, #e0b824);
    border: 2px solid var(--surface-cream, #f9f8f4);
    box-shadow: 0 0 0 1px #bdb7a8;
}
.pn-timeline time { padding-top: 1px; text-align: end; font-size: 13px; color: var(--text-on-light-muted, #56646b); font-variant-numeric: tabular-nums; }
.pn-tl-kind {
    display: block;
    font-family: var(--font-functional, inherit);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a6d00;
}
[dir="rtl"] .pn-tl-kind { letter-spacing: 0; font-size: 12.5px; }
.pn-tl-body a { color: var(--text-on-light, #1f2a30); font-weight: 600; font-size: 16px; text-decoration: none; border-bottom: 1px solid transparent; overflow-wrap: anywhere; }
.pn-tl-body a:hover, .pn-tl-body a:focus-visible { border-bottom-color: var(--boh-gold, #e0b824); }
.pn-tl-body a:focus-visible, .pn-list a:focus-visible { outline: 3px solid var(--boh-gold, #e0b824); outline-offset: 2px; }
.pn-tl-body p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-on-light-muted, #56646b); max-width: 62ch; }

.pn-list { margin: 0; padding: 0; list-style: none; }
.pn-list li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 34px; padding: 9px 0; border-bottom: 1px solid var(--boh-border, #d8d4c8); }
.pn-list time { text-align: end; font-size: 13px; color: var(--text-on-light-muted, #56646b); font-variant-numeric: tabular-nums; }
.pn-list a { color: var(--text-on-light, #1f2a30); text-decoration: none; overflow-wrap: anywhere; }
.pn-list a:hover { text-decoration: underline; text-decoration-color: var(--boh-gold, #e0b824); text-underline-offset: 3px; }
[dir="rtl"] .pn-timeline time, [dir="rtl"] .pn-list time { text-align: start; }
[dir="rtl"] .pn-timeline time { text-align: end; }

@media (max-width: 720px) {
    .pn-rp { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
    .pn-rp-go { grid-column: 2; justify-self: start; }
    .pn-rp-title { font-size: 16px; }
    .pn-timeline::before { inset-inline-start: 5px; }
    .pn-timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-inline-start: 24px; }
    .pn-timeline li::before { inset-inline-start: 0; }
    .pn-timeline time, [dir="rtl"] .pn-timeline time { text-align: start; }
    .pn-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pn-list time, [dir="rtl"] .pn-list time { text-align: start; }
}