/*
---
tags: [template, EDU, identidade, catalogos]
criado: 2026-09-24
dominio: EDU
status: em-construcao
autoria: gerado-com-Codex
prd: null
solicitacao: "Conversa — PROXIMA EVOLUCAO: identidade visual consistente"
---
Componentes compartilhados. Os estilos de foco e impressão continuam depois desta camada.
*/
:is(.jj-catalog-v2-hero,.jj-courses-intro) {
 padding-block:32px 44px;
 border-bottom:1px solid var(--jj-color-border);
 background:var(--jj-color-background);
}
:is(.jj-catalog-v2-hero,.jj-courses-intro) h1 {
 max-width:22ch;
 font:400 var(--jj-page-title-size)/var(--jj-page-title-leading) var(--jj-font-display);
 letter-spacing:var(--jj-page-title-tracking);
 margin-block:16px 20px;
 overflow-wrap:anywhere;
 text-wrap:balance;
}
:is(.jj-catalog-v2-hero,.jj-courses-intro) :is(.breadcrumb,.jj-catalog-v2-crumbs,.jj-courses-crumbs) {
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:8px 12px;
 margin:0;
 font:400 12px/1.6 var(--jj-font-body);
 color:var(--jj-color-text-muted);
}
:is(.jj-catalog-v2-hero,.jj-courses-intro) :is(.breadcrumb,.jj-catalog-v2-crumbs,.jj-courses-crumbs) a {
 display:inline-flex;
 align-items:center;
 min-height:32px;
 text-decoration:underline;
 text-underline-offset:4px;
}
.jj-catalog-v2-intro,.jj-courses-hero-grid {
 display:grid;
 grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
 align-items:center;
 gap:48px;
 margin-top:24px;
}
.jj-catalog-v2-intro>div>.jj-kicker,.jj-courses-hero-copy>.jj-kicker {
 margin:0;
 font:600 11px/1.6 var(--jj-font-body);
 letter-spacing:.12em;
 color:var(--jj-color-text-muted);
}
.jj-catalog-v2-intro>div>.jj-catalog-v2-lead,.jj-courses-hero-copy>.jj-courses-signature {
 margin-block:0 22px;
 font:400 clamp(1.6rem,2.4vw,2.1rem)/1.4 var(--jj-font-display);
 color:var(--jj-color-text);
}
:is(.jj-catalog-v2-guide,.jj-courses-guide) {
 padding:32px;
 border-radius:var(--jj-card-radius);
}
:is(.jj-catalog-v2-guide,.jj-courses-guide) h2 {
 font:400 clamp(1.8rem,3vw,2.2rem)/1.2 var(--jj-font-display);
 margin-block:16px 24px;
}
.jj-catalog-v2-body,.jj-courses-body { padding-block:var(--jj-catalog-section-space) 56px; }
.jj-catalog-v2 .jj-lesson-grid,.jj-catalog-v2 .jj-grid,.jj-catalog-grid { gap:var(--jj-catalog-gap); }
.jj-resource-card:is(.jj-card,.jj-catalog-card) {
 min-width:0;
 display:flex;
 flex-direction:column;
 overflow:hidden;
 border:1px solid var(--jj-color-border);
 border-radius:var(--jj-card-radius);
 background:var(--jj-color-surface-1);
 box-shadow:none;
 transition:border-color var(--jj-transition),box-shadow var(--jj-transition);
}
.jj-resource-card:is(.jj-card,.jj-catalog-card).jj-resource-card--text {
 border-top:3px solid var(--jj-color-primary);
}
.jj-resource-card:is(.jj-card,.jj-catalog-card):is(:hover,:focus-within) {
 border-color:var(--jj-color-primary);
 box-shadow:var(--jj-shadow-sm);
 transform:none;
}
.jj-resource-card .jj-resource-card__media {
 display:block;
 position:relative;
 width:100%;
 aspect-ratio:16/9;
 margin:0;
 overflow:hidden;
 background:var(--jj-color-surface-2);
 border:0;
 border-radius:0;
}
.jj-resource-card .jj-resource-card__media img {
 display:block;
 width:100%;
 height:100%;
 object-fit:cover;
}
.jj-resource-card:is(.jj-card,.jj-catalog-card) .jj-resource-card__body {
 --jj-stack-space:0;
 flex:1;
 display:flex;
 flex-direction:column;
 gap:14px;
 min-width:0;
 padding:var(--jj-card-padding);
 border:0;
 border-radius:0;
}
.jj-resource-card:is(.jj-card,.jj-catalog-card) .jj-resource-card__title {
 margin:0;
 font:400 var(--jj-card-title-size)/1.25 var(--jj-font-display);
 letter-spacing:-.02em;
 overflow-wrap:anywhere;
 text-wrap:balance;
}
.jj-resource-card .jj-resource-card__title a { color:inherit; text-decoration:none; text-underline-offset:4px; }
.jj-resource-card .jj-resource-card__title a:hover { text-decoration:underline; }
.jj-resource-card:is(.jj-card,.jj-catalog-card) .jj-resource-card__body p {
 margin:0;
 color:var(--jj-color-text-muted);
 font-size:14px;
 line-height:1.75;
 overflow-wrap:anywhere;
}
.jj-resource-card:is(.jj-card,.jj-catalog-card) .jj-resource-card__body .jj-kicker {
 color:var(--jj-color-primary);
 font-size:11px;
 letter-spacing:.07em;
}
.jj-resource-card:is(.jj-card,.jj-catalog-card) .jj-resource-card__meta,
.jj-resource-card:is(.jj-card,.jj-catalog-card) .jj-resource-card__body p.jj-resource-card__meta { font-size:12px; line-height:1.7; color:var(--jj-color-text-muted); }
.jj-resource-card .jj-resource-card__footer .jj-meta { display:grid; gap:4px; }
.jj-resource-card .jj-resource-card__footer .jj-meta__item+.jj-meta__item::before { display:none; }
.jj-resource-card:is(.jj-card,.jj-catalog-card) .jj-resource-card__footer {
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:space-between;
 gap:10px 16px;
 margin-top:auto;
 padding:12px var(--jj-card-padding);
 border-top:1px solid var(--jj-color-border);
}
.jj-resource-card:is(.jj-card,.jj-catalog-card) .jj-resource-card__action {
 display:inline-flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 min-height:var(--jj-control-height);
 max-width:100%;
 padding-block:8px;
 margin:0;
 border:0;
 color:var(--jj-color-primary);
 font:600 13px/1.5 var(--jj-font-body);
 text-decoration:none;
 text-underline-offset:4px;
 overflow-wrap:anywhere;
}
.jj-resource-card .jj-resource-card__action:hover { text-decoration:underline; }
@media(max-width:1000px) {
 .jj-catalog-grid,.jj-catalog-v2 .jj-lesson-grid,.jj-catalog-v2 .jj-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:860px) {
 .jj-catalog-v2-intro,.jj-courses-hero-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
 :is(.jj-catalog-v2-guide,.jj-courses-guide) { padding:26px; }
}
@media(max-width:600px) {
 :is(.jj-catalog-v2-hero,.jj-courses-intro) { padding-block:24px 32px; }
 .jj-catalog-grid,.jj-catalog-v2 .jj-lesson-grid,.jj-catalog-v2 .jj-grid { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) { .jj-resource-card:is(.jj-card,.jj-catalog-card) { transition:none; } }
@media print { .jj-resource-card:is(.jj-card,.jj-catalog-card) { box-shadow:none; break-inside:avoid; } }