/* ==========================================================================
   Lab 10 — Cartões de conteúdo (cards_content), não clicáveis.
   Desenho dos cards do contact (lab 7): superfície, 24px de espaço interior
   (36px a partir de 768px). Ícone Lucide opcional, 24px num círculo de 40px
   com contorno de 1px (o do card de ficheiro), na cor do texto. Decorativo.
   Com título, o título fica à frente do ícone; sem título, o ícone fica
   sozinho por cima do texto (como o cabeçalho "ao lado" da intranet).
   Lista em 2 colunas: campo do card, só a partir de 1024px.
   ========================================================================== */
.cards-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.cards-content__card { padding: var(--space-4); background: var(--color-surface); }
@media (min-width: 48em) { .cards-content__card { padding: var(--space-5); } }
/* O círculo é a caixa; o SVG fica a 24px exactos (escalado dentro do círculo ficava a 22px, com traço desfocado) */
.cards-content__icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-3); border-radius: var(--radius-round); color: var(--color-on-accent); background: var(--color-accent); }   /* chat 18: ícone decorativo, fundo amarelo sem contorno (o contorno fica para os controlos) */
.cards-content__icon svg { display: block; width: 1.5rem; height: 1.5rem; }
.cards-content__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.cards-content__head .cards-content__icon { flex: none; margin: 0; }
.cards-content__head .cards-content__title { margin: 0; }
.cards-content__title { margin: 0 0 var(--space-2); font-size: var(--text-h3); }   /* chat 18: título em Lora, como os outros H3 */
.cards-content__text { overflow-wrap: break-word; hyphens: manual; }
.cards-content__text > * { max-width: var(--measure); }
.cards-content__text > :first-child { margin-top: 0; }
.cards-content__text > :last-child { margin-bottom: 0; }
/* Lista em 2 colunas (campo do card): a partir de 1024px; em telemóvel e tablet, 1 coluna */
@media (min-width: 64em) {
  .cards-content__text--columns { max-width: none; }
  /* A 2.ª coluna começa onde começa o texto do card da 2.ª coluna da grelha de cima (columns, 72px entre colunas):
     espaço = grelha + 96 + 36, com o recuo da lista (36) igual ao espaço interior do card (36) */
  .cards-content__text--columns > ul { max-width: none; columns: 2; column-gap: calc(var(--grid-gap) + var(--space-8) + var(--space-5)); }
  .cards-content__text--columns li { break-inside: avoid; }
  .cards-content__text--columns li:first-child { margin-top: 0; }
}

/* Colunas (campo da intranet, chat 27): 2 a partir de 768px; 3 e 4 a partir de 1024px */
@media (min-width: 48em) {
  .cards-content--2, .cards-content--3, .cards-content--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .cards-content--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-content--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}