/* Partner Network, FAQ and News, v9 partner-network.html / faq.html / blog.html. Scoped to .site[data-page="partner-network"], [data-page="faq"] and [data-page="blog"]. */

/*
   Ported from style.css's rules for these pages' own pieces — the partner strip and panel, the
   FAQ's closing prompt, the coming-soon cards — with tax-blog.css and the lux-v5, v7, v8 and v9
   rules that reach them, flattened: each value below is the one that wins v9's cascade. The banner,
   the type system (H2 Light, item titles in Inria Serif Italic, body Light at 16px, labels in
   Proof Blue), square corners, the panel's Soft Light Blue, the buttons, the prev/next pair and
   the footer are the shared sub-page layer's (site.css) and are not repeated.

   Colours are written out rather than read from site.css's tokens, as the other page files do:
   v8 F01 remapped the sub-pages' navy and ink to Proof Grey #545454, which the home page's tokens
   never took.
*/

/* ==== Partner Network ======================================================================= */

/* One section in v9: the head, the strip, then the invitation panel 60px under the strip. Here the
   panel is the next band (CtaBand's "panel"), so this section gives up its bottom padding and the
   panel its top, and the two read as the one section v9 draws. */
.site[data-page="partner-network"] .pn-wall { padding-bottom: 0; }
.site[data-page="partner-network"] .pn-wall + .cta-panel { padding-top: 0; }

/* The marks as one centred strip that wraps, every one the same height and none framed — v9's
   .partner-strip, which site.css's own .partner-strip (the interlocking tile wall) is not. */
.site[data-page="partner-network"] .pn-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 48px 56px; padding: 20px 0; margin-bottom: 60px;
}
.site[data-page="partner-network"] .pn-strip img {
    height: 34px; width: auto; opacity: .88;
    transition: opacity .3s ease, transform .3s ease;
}
.site[data-page="partner-network"] .pn-strip img:hover { opacity: 1; transform: translateY(-2px); }
@media (max-width: 720px) {
    .site[data-page="partner-network"] .pn-strip { gap: 30px 34px; }
    .site[data-page="partner-network"] .pn-strip img { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .site[data-page="partner-network"] .pn-strip img:hover { transform: none; }
}

/* The panel's heading is an h3 here, where v9 has an h4 (see CtaBand): v9's h4 size, and the
   shared layer's serif. Its words keep their column and the button its size as the panel wraps. */
.site[data-page="partner-network"] .partner-cta h3 { margin: 0; font-size: 1.3rem; line-height: 1.3; }
.site[data-page="partner-network"] .partner-cta > div { flex: 1 1 420px; min-width: 0; }
.site[data-page="partner-network"] .partner-cta p { max-width: 520px; }
.site[data-page="partner-network"] .partner-cta .btn { flex: none; }
@media (max-width: 560px) {
    .site[data-page="partner-network"] .partner-cta { padding: 28px 22px; }
}

/* ==== FAQ =================================================================================== */

/* The line and the button under the list: v9 sets them inline — centred, 50px down, the line at
   .92rem over 18px of room. The inline size beats every sheet's paragraph rule, so it holds here
   over the shared layer's 16px; the weight is still v8's Light. */
.site[data-page="faq"] .faq-more { margin-top: 50px; text-align: center; }
.site[data-page="faq"] .faq-more p {
    margin: 0 0 18px; font-size: .92rem; line-height: 1.7; font-weight: 300; color: #545454;
}

/* ==== News ================================================================================== */

/* v9's two coming-soon cards, side by side (tax-blog's grid), one column on a phone. */
.site[data-page="blog"] .nl-soon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .site[data-page="blog"] .nl-soon { grid-template-columns: minmax(0, 1fr); } }

/* tax-blog's h3 in place of style.css's h4, at the h4's size; lux-v5 took its weight to 400 and the
   shared layer sets the serif. The dashed Soft Light Blue card itself is site.css's, squared. */
.site[data-page="blog"] .coming-soon { width: 100%; }
.site[data-page="blog"] .coming-soon h3 { margin: 0 0 12px; font-size: 1.3rem; line-height: 1.3; }

/* ---- The posts ----
   v9 has none to draw yet, so the posts take the sub-pages' editorial column (v8 F20a): no fill
   and no shadow, a 2px Innovation Teal rule on top, the photograph square, the title in the item
   serif and the card's text Regular, as F34 keeps text under 16px. */
.site[data-page="blog"] .nl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 40px; }
@media (max-width: 1000px) { .site[data-page="blog"] .nl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .site[data-page="blog"] .nl-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } }

.site[data-page="blog"] .nl-card { display: flex; flex-direction: column; min-width: 0; border-top: 2px solid #0A89AA; padding-top: 24px; }
.site[data-page="blog"] .nl-ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 20px; background: #EDF6F7; }
.site[data-page="blog"] .nl-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); }
.site[data-page="blog"] .nl-ph:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .site[data-page="blog"] .nl-ph:hover img { transform: none; } }

.site[data-page="blog"] .nl-body { display: flex; flex-direction: column; flex: 1; }
.site[data-page="blog"] .nl-meta {
    margin: 0 0 10px; font-size: max(12px, .75rem); font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; line-height: 1.5; color: #545454;
}
.site[data-page="blog"] .nl-meta > * + *::before { content: "\00B7"; margin: 0 .6em; color: #0A89AA; }
.site[data-page="blog"] .nl-card h3 { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.35; }
.site[data-page="blog"] .nl-card h3 a { color: inherit; transition: color .2s ease; }
.site[data-page="blog"] .nl-card h3 a:hover { color: #0A89AA; }
.site[data-page="blog"] .nl-excerpt p { margin: 0; font-size: max(15px, .94rem); line-height: 1.7; font-weight: 400; color: #545454; }
.site[data-page="blog"] .nl-excerpt p + p { margin-top: 10px; }

/* The link to the post and its topics, on the card's last line whatever the excerpt's length. */
.site[data-page="blog"] .nl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 18px; }
.site[data-page="blog"] .nl-foot .tag {
    font-size: max(12px, .75rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #0066B2; background: none; padding: 0; border-radius: 0;
}
.site[data-page="blog"] .nl-foot .tag:hover { color: #0A89AA; }

/* The topic filter as the Solution tabs are drawn (lux-v5 §3): words over a hairline, the current
   one underlined in Genero Yellow — no capsules, which v8 squared off everywhere else. */
.site[data-page="blog"] .nl-tags {
    display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0 0 44px;
    border-bottom: 1px solid rgba(159, 162, 166, .45);
}
.site[data-page="blog"] .nl-tags a {
    padding: 14px 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
    font-size: max(12px, .76rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #545454; transition: color .25s ease, border-color .25s ease;
}
.site[data-page="blog"] .nl-tags a:hover { color: #0066B2; }
.site[data-page="blog"] .nl-tags a.is-active { color: #545454; border-bottom-color: #FFD41D; }

/* The page numbers: Home's button corner (4px, F18), Proof Blue for the page on show. */
.site[data-page="blog"] .nl-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 60px; }
.site[data-page="blog"] .nl-pager a {
    min-width: 40px; padding: 9px 14px; text-align: center; border: 1px solid rgba(159, 162, 166, .6); border-radius: 4px;
    font-size: .86rem; font-weight: 600; color: #545454; transition: border-color .2s ease, color .2s ease;
}
.site[data-page="blog"] .nl-pager a:hover { border-color: #0066B2; color: #0066B2; }
.site[data-page="blog"] .nl-pager a.is-active { background: #0066B2; border-color: #0066B2; color: #fff; }

.site[data-page="blog"] .nl-status { margin: 0; font-size: max(16px, 1rem); line-height: 1.72; font-weight: 300; color: #545454; }

/* =============================================================================================
   News, October 2026 design ("news", mockup v10 css/page-blog.css). The banner is subpage.css's.
   Mockup → here: .nw-filter = .nl-tags (links rather than radios: the filter is the server's),
   .nw-card = .nl-card, .nw-ph = .nl-ph, .nw-date = .nl-meta, .nw-ex = .nl-excerpt, .nw-foot =
   .nl-foot, .nw-cat = .nl-foot .tag. Sizes are the 1920 design's × 0.75 (≈ 1440).
   ============================================================================================= */

/* The tabs: capitals, the active one underlined 3px yellow over a 1px grey rule. */
.site[data-page="blog"] .nl-tags {
    position: relative; display: flex; flex-wrap: wrap; gap: 0 clamp(22px, 2.1vw, 40px);
    margin: clamp(-10px, -.6vw, 0px) 0 clamp(36px, 3.2vw, 61px); border-bottom: 1px solid #DCDDDD;
}
.site[data-page="blog"] .nl-tags a {
    position: relative; display: block; padding: 0 0 clamp(18px, 1.4vw, 26px); border: 0;
    font-family: var(--font-body); font-size: clamp(.72rem, .78vw, .95rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.site[data-page="blog"] .nl-tags a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #FFCE03; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.site[data-page="blog"] .nl-tags a:hover { color: var(--teal); }
.site[data-page="blog"] .nl-tags a.is-active { color: #313131; border-bottom-color: transparent; }
.site[data-page="blog"] .nl-tags a.is-active::after { transform: none; }

/* The grid: three across (555 / gap 54 at 1920). Each card: a 3px teal rule, the photograph at 1.6:1,
   the date above the title, the title in Inria Serif Italic, the summary, then Read More and the
   category on one line at the foot. */
.site[data-page="blog"] .nl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 4.5vw, 86px) 3.05%; }
.site[data-page="blog"] .nl-card { border-top: 3px solid var(--teal); padding-top: clamp(22px, 1.75vw, 34px); }
.site[data-page="blog"] .nl-ph { aspect-ratio: 1.6 / 1; margin-bottom: clamp(22px, 1.75vw, 34px); background: none; }
.site[data-page="blog"] .nl-meta {
    margin: 0 0 clamp(12px, 1.25vw, 24px); font-family: var(--font-body); font-size: clamp(12px, .885vw, 17px);
    font-weight: 600; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; color: #505050;
}
.site[data-page="blog"] .nl-card h3 {
    margin: 0 0 clamp(14px, 1.2vw, 24px); font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(1.15rem, 1.46vw, 1.75rem); line-height: 1.32; color: #545454; letter-spacing: 0;
}
.site[data-page="blog"] .nl-excerpt p { font-size: clamp(.88rem, .98vw, 1.17rem); line-height: 1.9; font-weight: 300; color: #545454; }
.site[data-page="blog"] .nl-foot { align-items: baseline; gap: 8px clamp(14px, 1.15vw, 22px); padding-top: clamp(26px, 2.3vw, 44px); }
.site[data-page="blog"] .nl-foot .tlink { color: var(--blue); font-size: clamp(.84rem, 1.04vw, 1.25rem); font-weight: 600; border-bottom: 2px solid currentColor; padding-bottom: 6px; gap: 10px; }
.site[data-page="blog"] .nl-foot .tlink .ga-icon { width: 12px; }
.site[data-page="blog"] .nl-foot .tag { font-size: clamp(.72rem, .86vw, 1.03rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }

@media (max-width: 1080px) { .site[data-page="blog"] .nl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 28px; } }
@media (max-width: 640px) {
    .site[data-page="blog"] .nl-grid { grid-template-columns: 1fr; gap: 44px; }
    .site[data-page="blog"] .nl-tags { gap: 0 22px; }
}