/* ntk-blocks.css -- StreamField block styles shared by every page that renders body blocks
   (BlogPost via blog_post.html, ProductShowcasePage via product_showcase_page.html).

   Created 2026-09-13 (session 129, cross-stack #122 Stage 1, Dan approved). Before this, the same
   block rules lived as two hand-copied blocks in those two templates and had drifted: 29 rules
   identical, 8 diverged, 26 present only in blog_post.html. The live cost of that drift was
   fanvil-x6u-review, whose template had no comparison-table rules at all, so its tables rendered
   unstyled and scrolled the whole page 170px at 360px.

   Linked from those two templates through base.html's {% block extra_stylesheets %}, which sits
   AFTER base.html's inline <style>. That position is load-bearing: these rules used to sit inside
   the inline style, after base.html's own rules, and several tie on specificity with page rules
   (".article__body p" vs ".block-alert__content p"). Loaded earlier, the page rule would win.
   Verified by a computed-style diff of every element on 8 pages at 390 and 1280 before and after.

   The NTK Score card rules came from a <style> block that ntk_score.html emitted once PER CARD.
   Versioned with ?v= in the templates because /static/ is served with a 4-hour Cloudflare cache
   and no hashed filenames: bump the query string whenever this file changes. */

/* ===== HEADINGS ===== */
.block-heading--h2 { font-size: 1.4rem; font-weight: 700; color: var(--ntk-color-grey-900); margin: 2.5rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--ntk-color-brand-blue); display: block; width: fit-content; scroll-margin-top: 72px; }
.block-heading--h3 { font-size: 1.15rem; font-weight: 700; color: var(--ntk-color-grey-900); margin: 2rem 0 0.5rem; scroll-margin-top: 72px; }
.block-heading--h4 { font-size: 1rem; font-weight: 700; color: #334155; margin: 1.5rem 0 0.4rem; scroll-margin-top: 72px; }

/* ===== ALERT ===== */
.article__body > .block-alert { margin: 0; padding: 0; border: none; background: none; }
.block-alert--info, .block-alert--tip, .block-alert--warning, .block-alert--danger { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 8px; margin: 1.5rem 0; border-left: 4px solid; }
.block-alert--info { background: #eff6ff; border-color: var(--ntk-color-brand-blue); }
.block-alert--tip { background: #f0fdf4; border-color: #22c55e; }
.block-alert--warning { background: var(--ntk-color-warning-bg); border-color: var(--ntk-color-warning); }
.block-alert--danger { background: #fef2f2; border-color: var(--ntk-color-error); }
.block-alert__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; }
.block-alert__content { font-size: 0.95rem; line-height: 1.65; color: #1e293b; }
.block-alert__content p { margin: 0 0 0.4rem; }
.block-alert__content p:last-child { margin: 0; }

/* ===== PRODUCT SPECS ===== */
.block-product-specs { margin: 1.5rem 0; border: 1px solid var(--ntk-color-grey-200); border-radius: 8px; overflow-x: auto; } /* auto, not hidden: once the track above stops expanding, a spec table wider than the
   column must scroll. overflow:hidden would silently CLIP spec values instead. */
.block-product-specs__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.block-product-specs__table tr { border-bottom: 1px solid var(--ntk-color-grey-200); }
.block-product-specs__table tr:last-child { border-bottom: none; }
.block-product-specs__key { padding: 0.6rem 1rem; background: #f8fafc; color: #475569; font-weight: 600; width: 42%; vertical-align: top; }
.block-product-specs__value { padding: 0.6rem 1rem; color: #1e293b; }

/* ===== PROS CONS ===== */
.block-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 600px) { .block-pros-cons { grid-template-columns: 1fr; } }
.block-pros-cons__pros, .block-pros-cons__cons { border-radius: 8px; padding: 1rem 1.25rem; }
.block-pros-cons__pros { background: #f0fdf4; border: 1px solid #bbf7d0; }
.block-pros-cons__cons { background: #fef2f2; border: 1px solid #fecaca; }
.block-pros-cons__heading { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.block-pros-cons__heading--pros { color: var(--ntk-color-success); }
.block-pros-cons__heading--cons { color: #dc2626; }
.block-pros-cons__list { list-style: none; margin: 0; padding: 0; }
.block-pros-cons__list li { font-size: 0.9rem; padding: 0.3rem 0 0.3rem 1.25rem; position: relative; color: #1e293b; line-height: 1.5; border: none; margin: 0; }
.block-pros-cons__list li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.block-pros-cons__pros .block-pros-cons__list li::before { background: #22c55e; }
.block-pros-cons__cons .block-pros-cons__list li::before { background: var(--ntk-color-error); }

/* ===== COMPARISON TABLE ===== */
.block-comparison-table { margin: 1.75rem 0; }
.block-comparison-table__title { font-size: 1rem; font-weight: 700; color: var(--ntk-color-grey-900); margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--ntk-color-brand-blue); display: inline-block; }
.block-comparison-table__note { font-size: 0.8rem; color: var(--ntk-color-grey-400); line-height: 1.5; margin: 0.6rem 0 0; }
.block-comparison-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid var(--ntk-color-grey-200); border-top: 3px solid var(--ntk-color-brand-blue); }
.block-comparison-table__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 480px; }
.block-comparison-table__table th, .block-comparison-table__table td { padding: 0.65rem 0.875rem; text-align: left; border-bottom: 1px solid var(--ntk-color-grey-200); }
.block-comparison-table__table thead th { background: var(--ntk-color-grey-900); color: var(--ntk-color-white); font-weight: 600; font-size: 0.8rem; }
.block-comparison-table__table tbody tr:nth-child(even) { background: #f8fafc; }
.block-comparison-table__table tbody tr:hover td, .block-comparison-table__table tbody tr:hover th { background: #eff6ff !important; }
.block-comparison-table__feature { font-weight: 700; color: var(--ntk-color-grey-900); background: #f8fafc !important; white-space: nowrap; }

/* Transposed tables (session 136, #122 follow-up -- see ComparisonTableBlock.get_context()):
   few product columns (<=3) + many metric rows. table-layout:fixed + the template's <colgroup>
   give the feature column ~22% and split the rest evenly across product columns, with no
   forced min-width so it never needs horizontal scroll at normal desktop widths. */
.block-comparison-table--transposed .block-comparison-table__table { table-layout: fixed; min-width: 0; }
.block-comparison-table--transposed .block-comparison-table__table th,
.block-comparison-table--transposed .block-comparison-table__table td { vertical-align: top; overflow-wrap: anywhere; white-space: normal; }

/* ===== FAQ ACCORDION ===== */
/* Both body wrappers: review pages use .product-body. Scoping this to .article__body alone
   removed every FAQ border on review pages, caught by the computed-style diff. */
.article__body .block-faq__item, .product-body .block-faq__item { border: 1px solid var(--ntk-color-grey-200); border-radius: 8px; margin-bottom: 0.6rem; overflow: hidden; }
.block-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; font-size: 1rem; font-weight: 700; color: var(--ntk-color-grey-900); user-select: none; }
.block-faq__item summary::-webkit-details-marker { display: none; }
.block-faq__item summary:hover { background: #f8fafc; }
.block-faq__item[open] summary { background: #f8fafc; border-bottom: 1px solid var(--ntk-color-grey-200); }
.block-faq__chevron { flex-shrink: 0; transition: transform 0.2s ease; color: var(--ntk-color-grey-400); }
.block-faq__item[open] .block-faq__chevron { transform: rotate(180deg); }
.block-faq__answer { font-size: 0.95rem; color: #475569; line-height: 1.65; padding: 0.9rem 1.25rem 1rem; }
.block-faq__answer p { margin: 0 0 0.4rem; }
.block-faq__answer p:last-child { margin: 0; }
.block-faq__answer a { color: var(--ntk-color-brand-blue); }

/* ===== CTA ===== */
.block-cta { background: var(--ntk-color-grey-900); color: var(--ntk-color-white); border-radius: var(--ntk-radius-md); padding: 1.75rem 2rem; margin: 2rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.block-cta__text { font-size: 1rem; line-height: 1.5; color: #cbd5e1; flex: 1; }
.block-cta__button { background: var(--ntk-color-brand-blue); color: var(--ntk-color-white) !important; padding: 0.65rem 1.4rem; border-radius: var(--ntk-radius-sm); font-weight: 600; font-size: 0.9rem; white-space: nowrap; transition: background 0.2s; text-decoration: none !important; }
.block-cta__button:hover { background: var(--ntk-color-brand-blue-hover); }
/* Same nowrap-is-unshrinkable defect as .article-qpb__btn (cross-stack #181). NTKIT
   measured that a long LABEL alone did not trigger it on their markup; on ours it
   does -- "Get a Free Migration Recommendation" pushed isdn-to-voip-migration-australia
   out by 13px at 360. flex-wrap on .block-cta cannot help an item that is itself
   too wide. Labels are author-supplied, so this is latent on any future long one. */
@media (max-width: 640px) { .block-cta__button { white-space: normal; text-align: center; } }

/* ===== QUOTE ===== */
blockquote.block-quote { border-left: 3px solid var(--ntk-color-brand-blue); padding: 0.75rem 1.25rem; margin: 1.5rem 0; background: #f8fafc; border-radius: 0 6px 6px 0; }
.block-quote__text { color: #475569; font-style: italic; margin-bottom: 0.25rem; }
.block-quote__attribution { font-size: 0.85rem; color: var(--ntk-color-grey-400); }

/* ===== IMAGE ===== */
.block-image { margin: 1.5rem 0; text-align: center; }
.block-image img { max-width: 340px; max-height: 400px; object-fit: contain; margin: 0 auto; border-radius: 8px; }
/* Editorial diagrams are a different KIND of content to the product thumbnails the
   cap above is sized for (cross-stack #182). A ~1500px decision tree rendered at
   340x226 is present, structurally valid, and unreadable. Scoped by storage location
   rather than relaxing the global cap, so every product thumbnail is untouched and
   future diagrams inherit this by virtue of where they are stored. max-height must be
   overridden too: at 756px wide these are ~500-535px tall, and object-fit: contain
   would letterbox them straight back down to the 400px cap. */
.block-image img[src*="/media/decision-trees/"] { max-width: 100%; max-height: none; width: 100%; }
.block-image__caption { font-size: 0.85rem; color: var(--ntk-color-grey-400); margin-top: 0.4rem; }


/* ===== NTK SCORE CARD (was an inline <style> per card in ntk_score.html) ===== */
/* Border colour now from shared .ntk-card (Phase 3); bg/radius/shadow/no-padding are page deltas (this card uses a grey bg, not the component's white default). */
.ntk-score-card{background:#f8fafc;border-radius:12px;margin:0 0 2rem;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:0;}
.ntk-score-card__top{display:flex;align-items:center;gap:1.25rem;background:#0f172a;padding:1.1rem 1.4rem;flex-wrap:wrap;}
.ntk-score-card__scorewrap{color:#fff;white-space:nowrap;}
.ntk-score-card__scorenum{font-size:2.1rem;font-weight:800;line-height:1;}
.ntk-score-card__scoremax{font-size:1rem;font-weight:600;color:#94a3b8;}
.ntk-score-card__topmeta{display:flex;flex-direction:column;gap:.35rem;}
.ntk-score-card__label{font-size:.72rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;}
.ntk-score-card__verdict{font-size:.8rem;font-weight:700;color:#fff;padding:3px 11px;border-radius:20px;display:inline-block;width:fit-content;}
.ntk-score-card__verdict--recommended{background:#16a34a;}
.ntk-score-card__verdict--caveats{background:#3b82f6;}
.ntk-score-card__verdict--pilot{background:#f59e0b;}
.ntk-score-card__verdict--not-recommended{background:#dc2626;}
.ntk-score-card__pillars{display:flex;flex-direction:column;gap:.55rem;padding:.9rem 1.4rem .8rem;}
.ntk-score-card__pillarrow{display:flex;justify-content:space-between;font-size:.875rem;font-weight:600;color:#1e293b;margin-bottom:.2rem;}
.ntk-score-card__track{height:6px;background:#e2e8f0;border-radius:4px;overflow:hidden;}
.ntk-score-card__bar{height:100%;border-radius:4px;background:#3b82f6;}
.ntk-score-card__rationale{font-size:.8rem;color:#64748b;line-height:1.45;margin:.25rem 0 0;}
.ntk-score-card__trustflag{font-size:.78rem;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:.5rem .75rem;margin:.5rem 0 0;}
.ntk-score-card__footer{font-size:.78rem;color:#64748b;padding:.75rem 1.4rem;border-top:1px solid #e2e8f0;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.ntk-score-card__sep{color:#cbd5e1;}
.ntk-score-card__footer a{color:#3b82f6;text-decoration:underline;}
.ntk-score-card__caveats{padding:1rem 1.4rem;border-top:1px solid #e2e8f0;background:#fbfcfe;}
.ntk-score-card__caveatsheading{font-size:.85rem;font-weight:700;color:#1e293b;margin:0 0 .6rem;}
.ntk-score-card__audiencenotes{font-size:.82rem;font-weight:600;color:#1e293b;background:#eef2ff;border:1px solid #c7d2fe;border-radius:6px;padding:.55rem .75rem;margin:0 0 .75rem;}
.ntk-score-card__caveat{padding:.6rem 0;border-top:1px dashed #e2e8f0;}
.ntk-score-card__caveat:first-of-type{border-top:none;padding-top:0;}
.ntk-score-card__caveatcat{font-size:.72rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.04em;}
.ntk-score-card__caveatflag{color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:1px 8px;text-transform:none;letter-spacing:0;}
.ntk-score-card__caveatfinding{font-size:.85rem;color:#1e293b;font-weight:600;margin:.3rem 0 .2rem;overflow-wrap:anywhere;}
/* Caveat prose quotes bare vendor URLs (e.g. the 54-character Grandstream warranty-policy
   link). An unbreakable token sets the block's min-content width, which pushed the page
   sideways and was then clipped by this card's own overflow:hidden. */
.ntk-score-card__caveats,.ntk-score-card__caveat{overflow-wrap:anywhere;}
.ntk-score-card__caveatwhy{font-size:.8rem;color:#64748b;margin:0 0 .3rem;line-height:1.45;}
.ntk-score-card__caveatmeta{font-size:.76rem;color:#8593B0;margin:0;}

/* ===== TRANSPOSED COMPARISON TABLES AS CARDS ON PHONES (session 136, #122 follow-up) =====
   Replaces the old single-page .ntk-table-cards pilot (2026-09-13), which stacked every value
   on its own line -- fine for many features but unreadable padding when a card holds only 2-3
   short product values. Scoped to .block-comparison-table--transposed (set automatically by
   ComparisonTableBlock.get_context() for the many-columns/few-rows shape), so untransposed
   tables are untouched. Each metric becomes a card; its <=3 product values sit side by side via
   flexbox at normal phone widths and stack only once the viewport is too narrow for that
   (see second media query). Desktop is untouched -- every rule below is inside a phone-width
   media query. The header row is visually hidden but kept for screen readers. */
@media (max-width: 640px) {
  .block-comparison-table--transposed .block-comparison-table__scroll { overflow: visible; border: none; border-radius: 0; }
  .block-comparison-table--transposed .block-comparison-table__table { min-width: 0; font-size: 0.9rem; }
  .block-comparison-table--transposed .block-comparison-table__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .block-comparison-table--transposed .block-comparison-table__table tbody { display: block; }
  .block-comparison-table--transposed .block-comparison-table__table tr {
    display: flex; flex-wrap: wrap; box-sizing: border-box;
    border: 1px solid var(--ntk-color-grey-200); border-top: 3px solid var(--ntk-color-brand-blue);
    border-radius: 8px; margin-bottom: 1rem; padding: 0.7rem 0.875rem 0.5rem; background: var(--ntk-color-white);
  }
  .block-comparison-table--transposed .block-comparison-table__table tr:nth-child(even) { background: var(--ntk-color-white); }
  .block-comparison-table--transposed .block-comparison-table__feature {
    flex: 1 0 100%; background: transparent !important; white-space: normal; font-size: 1rem;
    padding: 0 0 0.5rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--ntk-color-grey-200);
  }
  .block-comparison-table--transposed .block-comparison-table__table td {
    flex: 1 1 45%; min-width: 130px; border-bottom: none; padding: 0 0.5rem 0.6rem 0; overflow-wrap: anywhere;
  }
  .block-comparison-table--transposed .block-comparison-table__table td::before {
    content: attr(data-label); display: block; font-weight: 600; color: #475569; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.15rem;
  }
}
/* Stack product values vertically only once there isn't room for them side by side. */
@media (max-width: 420px) {
  .block-comparison-table--transposed .block-comparison-table__table td { flex: 1 1 100%; }
}