/* View Materiais (ViewMateriais.jsx, CartaoMaterial.jsx). */

.portal .materiais__titulo{margin-bottom:var(--esp-4)}
.portal .materiais__abertura{margin-bottom:var(--esp-12)}
.portal .materiais__grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-12) var(--gap-cartoes);align-items:start}
.portal .materiais__grupo--1{grid-column:span 1}
.portal .materiais__grupo--2{grid-column:span 2}
.portal .materiais__grupo--3{grid-column:span 3}
.portal .materiais__h2{margin-bottom:var(--esp-5);display:flex;align-items:center;gap:var(--esp-3)}
.portal .materiais__marca{width:10px;height:26px;background:var(--cor-amarelo-sol);flex:none}
.portal .materiais__cartoes{display:grid;gap:var(--gap-cartoes)}
.portal .materiais__grupo--1 .materiais__cartoes{grid-template-columns:minmax(0,1fr)}
.portal .materiais__grupo--2 .materiais__cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}
.portal .materiais__grupo--3 .materiais__cartoes{grid-template-columns:repeat(3,minmax(0,1fr))}

.portal .cartao-material{display:flex;flex-direction:column;gap:var(--esp-4);background:var(--superficie-base);border:var(--borda-fina) solid var(--traco-forte);border-radius:var(--raio-2);padding:var(--padding-cartao);box-shadow:var(--sombra-1);transition:box-shadow var(--dur-rapida) var(--ease-padrao),border-color var(--dur-rapida) var(--ease-padrao)}
.portal .cartao-material:hover{border-color:var(--traco-forte);box-shadow:var(--sombra-2)}
.portal .cartao-material__capa{position:relative;aspect-ratio:3/2;min-height:0;background:var(--superficie-alt);border-radius:var(--raio-1);overflow:hidden}
.portal .cartao-material__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.portal .cartao-material__corpo{display:flex;flex-direction:column;gap:var(--esp-2);flex:1}
.portal .cartao-material__formato{display:flex;gap:var(--esp-2);align-items:center}

@media (max-width:899.98px){
  .portal .materiais__grade{grid-template-columns:1fr}
  .portal [class*="materiais__grupo--"]{grid-column:auto}
  .portal [class*="materiais__grupo--"] .materiais__cartoes{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}