/*
 * Category pages — SEO-CAT-01 (template-parts/category/guide.php, template-category-hub.php). Loaded after
 * shop-guide.css on category and hub pages only (inc/category-page.php). The listing, its head, filters and cards
 * are plp.css; the guide's sections, type scale, strength panel, brand marks, family tiles and Knowledge reads are
 * shop-guide.css. This file adds only what the category guide has and the Shop guide does not: the facts strip, the
 * copy columns and their inline links, the related-links grid, the exact-strength chips, a current (unlinked)
 * strength group or format, the hub list spacing and the editor-preview note. Same rules as the guide: Production's
 * tokens, only opacity and transform animate, hover inside @media (hover: hover), no hover changes layout.
 */

/* ---------- the editor preview note (never on a published page) ---------- */
.pp-cat-preview-note { margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--pp-border, #D5DADF); border-inline-start: 3px solid var(--pp-navy); border-radius: var(--pp-radius-control, 8px); background: var(--pp-soft-surface, #F4F6F8); font: 500 13px/1.5 var(--pp-font-body); color: var(--pp-ink); }

/* ---------- the facts strip: the opener's second row ---------- */
.pp-cg-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 24px; margin: 8px 0 0; }
.pp-cg-facts > div { padding: 14px 0 4px; border-top: 1px solid var(--pp-sg-line); }
.pp-cg-facts dt { font: 600 12px/1.3 var(--pp-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--pp-sg-muted); }
.pp-cg-facts dd { margin: 6px 0 0; font: 600 19px/1.25 var(--pp-font-display); letter-spacing: -.005em; color: var(--pp-ink); font-variant-numeric: tabular-nums; }

/* ---------- the copy: authored sections in two columns from 900px ---------- */
.pp-cg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 72px; }
.pp-cg-block { padding-top: 22px; border-top: 1px solid var(--pp-sg-line); }
.pp-cg-block .pp-sg-h3 { margin-bottom: 12px; }
.pp-cg-block .pp-sg-body:last-child { margin-bottom: 0; }
.pp-cg :is(.pp-sg-body, .pp-sg-lede) a { color: var(--pp-navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(20, 47, 81, .35); }
.pp-cg-copy { padding-top: clamp(40px, 4.4vw, 64px); }

/* ---------- a strength group shown, not linked (the current group; a group with no page) ---------- */
.pp-sg-band .pp-cg-band { display: grid; gap: 3px; padding: 4px 0 6px; color: var(--pp-ink); }
.pp-sg-spec.is-dark .pp-sg-band .pp-cg-band { color: #fff; }
.pp-sg-band.is-current .pp-sg-band-w { text-decoration: underline; text-decoration-color: var(--pp-lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }
/* a group with no product here (or no page to open): it keeps its place on the scale, visibly inactive — the one
   disabled treatment (GLOBAL-COMMERCE-POLISH-LOCK §3: opacity .5, no transform) */
.pp-sg-band.is-empty .pp-cg-band { opacity: .5; cursor: default; }
.pp-plp-bandopt.is-empty { opacity: .5; cursor: default; }

/* ---------- the formats compared: the current format shown, not linked (the Shop guide's link layout) ---------- */
.pp-sg-fmt > .pp-cg-fmt-cur { display: grid; align-content: start; gap: 6px; height: 100%; color: var(--pp-ink); }
.pp-cg-fmt-cur .pp-sg-fmt-t { text-decoration: underline; text-decoration-color: var(--pp-lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.pp-cg-fmt-cur .pp-sg-fmt-n { color: var(--pp-sg-text); }
.pp-cg-fmts { padding-top: clamp(40px, 4.4vw, 64px); }

/* ---------- related links and "where it sits": rows with a name, a count and the arrow ---------- */
.pp-cg-rel .pp-sg-h2, .pp-cg-exact .pp-sg-h2, .pp-cg-place .pp-sg-h2, .pp-cg-fams .pp-sg-h2 { margin-bottom: 20px; }
.pp-cg-links { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 28px; margin: 0; padding: 0; }
.pp-cg-links a { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 64px; padding: 14px 0 12px; border-top: 1px solid var(--pp-sg-line); color: var(--pp-ink); text-decoration: none; }
.pp-cg-links a::before { content: ""; position: absolute; z-index: -1; inset: 0 -14px; border-radius: 0 0 14px 14px; background: var(--pp-soft-surface); opacity: 0; transition: opacity var(--pp-motion-micro) var(--pp-ease-out); }
.pp-cg-links b { grid-column: 1; font: 600 17px/1.3 var(--pp-font-display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: transparent; }
.pp-cg-links .pp-sg-count { grid-column: 1; grid-row: 2; }
.pp-cg-links .pp-sg-arr { grid-column: 2; grid-row: 1 / span 2; color: var(--pp-navy); }
.pp-cg-place .pp-sg-body { margin-bottom: 18px; }

/* ---------- exact strengths: chips with their counts ---------- */
.pp-cg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.pp-cg-chips :is(a, span:first-child) { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 11px 16px; border: 1px solid var(--pp-sg-line); border-radius: 999px; background: #fff; color: var(--pp-ink); text-decoration: none; }
.pp-cg-chips b { font: 600 15px/1.3 var(--pp-font-body); font-variant-numeric: tabular-nums; }
.pp-cg-exact .pp-sg-body { margin-bottom: 18px; }

/* ---------- hubs ---------- */
.pp-cat-hub .pp-cg { padding-top: 8px; }
.pp-cat-hub-list { padding-top: 20px; }
.pp-cat-hub-fams { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-cat-hub-fams a { border-top: 1px solid var(--pp-sg-line); min-height: 72px; }
.pp-cat-hub .pp-sg-open { margin-top: var(--pp-sg-gap); }
.pp-cat-hub-str { margin-top: 24px; }

@media (hover: hover) {
	.pp-cg-links a:hover::before { opacity: 1; }
	.pp-cg-links a:hover b { text-decoration-color: currentColor; }
	.pp-cg-links a:hover .pp-sg-arr .pp-i { transform: translateX(3px); }
	.pp-cg-chips a:hover { border-color: var(--pp-navy); }
	.pp-cg :is(.pp-sg-body, .pp-sg-lede) a:hover { text-decoration-color: currentColor; }
}
.pp-cg-links a:focus-visible b, .pp-cg-chips a:focus-visible b { text-decoration: underline; text-decoration-color: currentColor; }
.pp-cg-links a:is(:active, .is-pressed), .pp-cg-chips a:is(:active, .is-pressed) { transform: scale(var(--pp-press-scale-compact, .98)); transition: transform var(--pp-motion-press-in) var(--pp-ease-out); }

@media (max-width: 1099px) {
	.pp-cat-hub-fams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.pp-cg-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 799px) {
	.pp-cat-hub-fams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}
@media (max-width: 599px) {
	.pp-sg-fmt > .pp-cg-fmt-cur { grid-template-columns: 120px minmax(0, 1fr); align-items: start; column-gap: 14px; row-gap: 2px; padding: 12px 0; border-top: 1px solid var(--pp-sg-line); }
	.pp-sg-fmt:last-child > .pp-cg-fmt-cur { border-bottom: 1px solid var(--pp-sg-line); }
	.pp-cg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
	.pp-cg-facts dd { font-size: 17px; }
	.pp-cg-links { grid-template-columns: minmax(0, 1fr); }
	.pp-cg-links a { min-height: 56px; }
	.pp-cg-links b { font-size: 16px; }
	.pp-cg-chips :is(a, span:first-child) { padding: 10px 14px; }
}