/* Hallmark · shape: app screen · screen: searchable product catalogue · theme: Editorial (locked design.md) · signature: task-specific workflow thumbnails · v2.0.0 */
/* Hallmark · pre-emit critique: real published products and explicit purchase limits; the illustrations explain workflows rather than fabricate product results. */
/* Hallmark · waive 77 · searchable catalogue has six distinct products per page · accurate summaries and purchase information support meaningful skill comparison. */
:root { --skills-border: var(--color-rule); --skills-surface: var(--color-paper-2); }
html,body { overflow-x: clip; }
.skills-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 40px; padding-block: 64px; }
.skills-hero h1 { font-size: clamp(2.6rem,4.3vw,4.5rem); line-height: 1.02; margin: 0 0 24px; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.skills-hero p { max-width: 40ch; margin: 0 0 24px; }
.skills-hero figure { margin: 0; }
.skills-hero img { display: block; width: 100%; height: auto; border: 1px solid var(--skills-border); }
.skills-hero figcaption { font-size: .875rem; margin-top: 12px; color: var(--color-muted); }
.skills-section { padding-block: 48px; border-top: 1px solid var(--skills-border); }
.skills-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.skills-heading h2,.skills-buying h2 { font-size: clamp(2rem,3vw,3rem); margin: 0 0 12px; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.skills-heading p { margin: 0; }
.skills-disclosure,.skills-price-note { font-size: .9375rem; line-height: 1.65; max-width: 95ch; font-variant-numeric: tabular-nums; }
.skills-disclosure { margin-block: 24px; }
.skills-filters { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto; align-items: end; gap: 16px; margin-block: 32px; }
.skills-filters label { display: block; font-family: var(--font-display); font-size: .9375rem; margin-bottom: 8px; }
.skills-filters input,.skills-filters select { display: block; width: 100%; min-width: 0; min-height: 52px; padding: 12px; border: 1px solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; border-radius: 0; }
.skills-filters input:hover,.skills-filters select:hover { border-color: var(--color-ink); }
.skills-filters .btn-pps { margin: 0; min-height: 52px; }
.skills-results { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 1rem; margin-bottom: 20px; }
.skills-results p { margin: 0; }
.skills-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px 28px; }
.skill-card { display: flex; flex-direction: column; min-width: 0; padding-bottom: 24px; border-bottom: 1px solid var(--skills-border); }
.skill-card>img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; border: 1px solid var(--skills-border); }
.skill-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .875rem; margin-block: 16px; font-family: var(--font-display); }
.skill-card h3 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 12px; overflow-wrap: break-word; min-width: 0; }
.skill-card p { font-size: 1rem; line-height: 1.6; margin: 0 0 20px; }
.skill-card details { margin: 0 0 20px; padding: 0; border: 0; }
.skill-card summary { cursor: pointer; padding-block: 12px; min-height: 44px; font-size: 1rem; font-family: var(--font-display); }
.skill-card summary:hover { color: var(--color-accent); text-decoration: underline; }
.skill-card details p { margin: 12px 0; font-size: .9375rem; }
.skill-buy { margin-top: auto; display: inline-flex; align-self: flex-start; align-items: center; min-height: 44px; padding: 8px 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.skills-pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 40px; }
.skills-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--skills-border); text-decoration: none; font-family: var(--font-display); }
.skills-pagination a[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }
.skills-pagination a:hover { border-color: var(--color-accent); text-decoration: underline; }
.skills-empty { background: var(--skills-surface); padding: 32px; margin-block: 24px; }
.skills-empty h3 { font-size: 1.5rem; margin: 0 0 16px; }
.skills-buying { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 32px; padding-bottom: 72px; }
.skills-buying h2,.skills-buying>p { grid-column: 1/-1; }
.skills-buying h3 { font-size: 1.5rem; margin: 0 0 12px; }
.skills-buying p { font-size: 1rem; margin: 0; }
.skills-section :is(a,button,input,select,summary):focus-visible,.skills-hero a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.skills-section :is(a,button,summary):active { opacity: .8; }
@media (max-width: 64rem) { .skills-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .skills-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } .skills-buying { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 44rem) { .skills-hero { grid-template-columns: minmax(0,1fr); gap: 32px; padding-block: 40px; } .skills-hero h1 { font-size: 2.75rem; } .skills-grid,.skills-filters { grid-template-columns: minmax(0,1fr); } .skills-section { padding-block: 32px; } }
@media (prefers-reduced-motion: reduce) { .skills-section *, .skills-hero * { scroll-behavior: auto; } }