/* ==========================================================================
   Lab 7 — Atividade (single-activity): imagem destacada, conteúdo em blocos
   e painel com públicos, horários, marcações e inscrições.
   Desktop (a partir de 1024px): imagem e conteúdo nas colunas 1 a 7; painel
   nas colunas 9 a 12, preso por baixo do cabeçalho fixo enquanto o conteúdo
   está no ecrã, como a ficha da peça.
   Telemóvel: imagem, painel e conteúdo, empilhados; nada fica preso.
   Ordem do HTML = ordem de leitura: imagem, painel, conteúdo.
   ========================================================================== */

.activity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-block);
  align-items: start;
}
/* Mais perto do título que o ritmo entre blocos: 24px, 48px a partir de 768px */
.page > .container > .page-header--entry + .activity,
.page > .container > .activity__lead + .activity { margin-top: var(--space-block); }
/* Lead por baixo do título, a 16px (chat 35) */
.page > .container > .activity__lead { max-width: var(--measure); margin: var(--space-heading) 0 0; font-size: var(--text-lead); line-height: var(--lh-body); }
.activity__media { margin: 0; }
.activity__media img { width: auto; max-width: 100%; height: auto; }

/* Conteúdo: blocos na coluna da atividade, com o ritmo das páginas */
.activity__body > * + * { margin-top: var(--space-section); }
.activity__body .text-block { display: block; }
.activity__body .text-block > * { max-width: var(--measure); }

/* ---------- Painel ---------- */
.activity-panel { padding: var(--space-4); background: var(--color-surface); }
@media (min-width: 48em) { .activity-panel { padding: var(--space-5); } }
.activity-panel__section + .activity-panel__section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-divider);
}
.activity-panel__title {
  max-width: none;
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);   /* chat 18: rótulo em Lora 16px, sem maiúsculas, como o "Nesta página" */
  font-size: var(--text-body);
  line-height: var(--lh-heading);
  color: var(--color-text);
}
.activity-panel__value { margin: 0; }
.activity-panel .badge { margin: 0; }
.activity-panel__list { margin: 0; padding: 0; list-style: none; }
.activity-panel__list li { margin: 0; line-height: var(--lh-body); }
/* Ligações de contacto: alvo de 44px de altura, sublinhado sempre */
.activity-panel__list .link { display: inline-flex; align-items: center; min-height: var(--target-min); }
/* Informações (chat 38): com título, antes das Marcações, texto a 16px; listas com bolas, como no texto */
.activity-panel__info { font-size: var(--text-body); line-height: var(--lh-body); }
.activity-panel__info > * { font-size: inherit; }
.activity-panel__info > :first-child { margin-top: 0; }
.activity-panel__info > :last-child { margin-bottom: 0; }
.activity-panel__info li:first-child { margin-top: 0; }
.activity-panel__info li:last-child { margin-bottom: 0; }
.activity-panel .activity-panel__note { margin: var(--space-2) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }

@media (min-width: 64em) {
  .activity { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .activity__media { grid-column: 1 / span 7; grid-row: 1; }
  .activity__body { grid-column: 1 / span 7; grid-row: 2; }
  .activity-panel {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--header-offset, 0px) + var(--space-6));
    transition: top var(--duration-motion) var(--ease);
  }
}

/* Horários (chat 35): uma linha por horário, em texto, sem badge */
.activity-panel__times li + li { margin-top: var(--space-1); }
/* Email e telefone nas Informações, com marcador amarelo (no tema claro, na cor do texto,
   como os números das listas); a nota do custo da chamada por baixo, sem marcador (chat 38) */
.activity-panel__contacts { margin: 0; padding-inline-start: var(--space-5); list-style: disc; }  /* o recuo das listas do texto (36px) */
.activity-panel__info + .activity-panel__contacts { margin-top: var(--space-3); }
.activity-panel__contacts li { margin: 0; line-height: var(--lh-body); }
.activity-panel__contacts li::marker { font-size: 1.25em; line-height: 1; color: var(--color-accent); }
[data-theme="light"] .activity-panel__contacts li::marker { color: var(--color-text); }
.activity-panel__contacts .link { display: inline-flex; align-items: center; min-height: var(--target-min); }
.activity-panel .button-row { margin: 0; }

/* Marcações: 16px entre o título e o botão (chat 38) */
/* (as margens juntam-se: os 8px do título ficam dentro dos 16) */
.activity-panel .activity-panel__title + .activity-panel__register { margin-top: var(--space-3); }