/* 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; }

/* ===== 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;}

/* ===== COMPARISON TABLE AS CARDS ON PHONES (#122 Stage 2 PILOT, 2026-09-13) =====
   Scoped to .ntk-table-cards, which blog_post.html adds for ONE page only while Dan reviews it.
   Desktop is untouched: every rule is inside the phone-width media query. Each body row
   becomes a card titled by its row header, with every value labelled by its column header
   (data-label, emitted by comparison_table.html). The header row is visually hidden but kept
   for screen readers. */
@media (max-width: 640px) {
  .ntk-table-cards .block-comparison-table__scroll { overflow: visible; border: none; border-radius: 0; }
  .ntk-table-cards .block-comparison-table__table { min-width: 0; font-size: 0.9rem; }
  .ntk-table-cards .block-comparison-table__table,
  .ntk-table-cards .block-comparison-table__table tbody,
  .ntk-table-cards .block-comparison-table__table tr,
  .ntk-table-cards .block-comparison-table__table th,
  .ntk-table-cards .block-comparison-table__table td { display: block; width: 100%; box-sizing: border-box; }
  .ntk-table-cards .block-comparison-table__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ntk-table-cards .block-comparison-table__table tbody tr { border: 1px solid var(--ntk-color-grey-200); border-top: 3px solid var(--ntk-color-brand-blue); border-radius: 8px; margin-bottom: 1rem; overflow: hidden; background: var(--ntk-color-white); }
  .ntk-table-cards .block-comparison-table__table tbody tr:nth-child(even) { background: var(--ntk-color-white); }
  .ntk-table-cards .block-comparison-table__table tbody tr:hover td,
  .ntk-table-cards .block-comparison-table__table tbody tr:hover th { background: inherit !important; }
  .ntk-table-cards .block-comparison-table__feature { background: #f8fafc !important; white-space: normal; font-size: 1rem; padding: 0.7rem 0.875rem; border-bottom: 1px solid var(--ntk-color-grey-200); }
  .ntk-table-cards .block-comparison-table__table td { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 0.75rem; padding: 0.55rem 0.875rem; overflow-wrap: anywhere; }
  .ntk-table-cards .block-comparison-table__table td:last-child { border-bottom: none; }
  .ntk-table-cards .block-comparison-table__table td::before { content: attr(data-label); font-weight: 600; color: #475569; font-size: 0.82rem; }
}