/* Products hub (/products/): page layout only. Shared components live in components.css and
   fig.css; page-only classes are prefixed products-. */

body[data-page="products"]:not([data-section]) .chapter-section > .rule-dots + * { margin-top: var(--s-12); }

/* P-2 to P-4: product spreads */
.products-spread-text { min-width: 0; }
.products-spread-text .product-kind { margin: 0; }
.products-spread-text .h2 { margin-top: var(--s-4); }
.products-spread-text > p:not(.product-kind) { margin-top: var(--s-4); max-width: var(--measure); color: var(--text-2); }
.products-spread-link { display: inline-block; margin-top: var(--s-6); font-weight: 500; }
.products-spread .spread-card-fig .fig { width: 100%; max-width: 40rem; margin-inline: auto; }
/* P-2: the architecture drawing at small scale (spec), so the three spreads carry similar weight */
#capsule-commerce .spread-card-fig .fig { max-width: 19rem; }
/* P-3, P-4: the paths get the same framed surface as the drawing */
.products-spread .spread-card-fig .fig--path .path { padding: var(--s-6) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-shell); background: var(--surface-2); box-shadow: var(--shadow-soft); }
@media (min-width: 900px) {
  .products-spread .spread-card { gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* P-5: comparison table */
.products-compare { min-width: 0; }
.products-compare .compare td .btn { white-space: nowrap; }
@media (min-width: 769px) {
  /* equal product columns, so no product reads as the cramped one */
  .products-compare .compare { table-layout: fixed; width: 100%; }
  .products-compare .compare thead th:first-child { width: 16%; }
  .products-compare .compare thead th:not(:first-child) { width: 28%; }
}

/* P-5: the Demo row's text links read as links at rest (accent, resting underline) */
.products-compare .compare a.u { color: var(--accent); background-image: linear-gradient(var(--accent-soft), var(--accent-soft)), linear-gradient(var(--accent), var(--accent)); background-size: 100% 1px, 0% 1px; background-position: 0 100%, 0 100%; font-weight: 500; }
.products-compare .compare a.u:is(:hover, :focus-visible) { background-size: 100% 1px, 100% 1px; color: var(--accent-strong); }

/* coarse pointers: 44 px hit areas on the stand-alone text links; the padding is outside the
   words, so the underline is lifted back to the text baseline */
@media (pointer: coarse) {
  .products-spread-link { display: inline-block; padding-block: 12px; background-position: 0 calc(100% - 11px); }
  .products-compare .compare a.u { display: inline-block; padding-block: 12px; background-position: 0 calc(100% - 11px), 0 calc(100% - 11px); }
  .products-spread-link { margin-top: calc(var(--s-6) - 12px); }
}