/* Natal 2026 · Agenda: estado e ritmo dos momentos. Carrega depois de app.css e só muda o que é desta página.
   Modos: .ancora (19 dez, arte maior, dia em grande) · .grande (Mercadinho, dia em grande) · .normal (lugar aceso de 240 px)
   · .compacto (sem arte) · .passou (arte a 96 px e esbatida, sem ações) · .dia (dois corpos no mesmo cartão) · .arte-dir (arte à direita). */

.momentos{gap:24px}
.momento .corpo{padding:20px 18px 22px;min-width:0}

/* título primeiro, a data como objeto logo abaixo (uva 700, números tabulares), depois o estado */
.momento h2,.momento h3{margin:0 0 6px}
.momento .quando{font:700 18px/1.3 var(--f);color:var(--uva);margin:0 0 6px;font-variant-numeric:tabular-nums}
.momento .estado{margin:0 0 10px;font:700 16px/1.3 var(--f);color:var(--uva)}
.momento .estado.hoje,.momento .estado.decorrer{color:var(--tomate)}
.momento .estado.passou{color:var(--suave);font-weight:500}
.momento .texto{margin:0 0 4px}
.momento .texto+dl{margin-top:8px}
.momento dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.momento dt{margin:0;align-self:baseline}
.momento dd{margin:0;min-width:0}

/* ações: «Como lá chegar» é o primário uva do cartão; o calendário é uma ligação com ícone */
.momento .acts{margin-top:16px;align-items:center;gap:8px 18px}
.momento .btn.chegar{min-height:48px}
.momento .lnk.cal{gap:8px;padding:0 2px;margin:0;border:0;background:none;font:700 16px/1.1 var(--f);color:var(--uva);cursor:pointer;min-height:44px}
.momento .lnk.cal:hover{color:var(--profundo)}
.momento .lnk.cal svg.i{width:22px;height:22px}

/* os espaços: a lista fecha-se num details (summary de 48 px) */
.momento .esp-lista{margin:14px 0 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.momento .esp-lista summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:4px 0;cursor:pointer;list-style:none;font-weight:700;color:var(--uva)}
.momento .esp-lista summary::-webkit-details-marker{display:none}
.momento .esp-lista summary::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-left:3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.momento .esp-lista[open] summary::before{transform:rotate(45deg);margin-top:-4px}
.momento .esp-lista summary:hover{color:var(--profundo)}
.momento .esp-lista .espacos{margin:4px 0 14px}

/* o dia em grande ao lado do título (âncora e Mercadinho) */
.momento .cabeca{display:flex;gap:14px;align-items:flex-start;margin:0 0 6px}
.momento .cabeca .numero{flex:0 0 auto;font:800 clamp(40px,8vw,64px)/.9 var(--f);letter-spacing:-.03em;color:var(--profundo);font-variant-numeric:tabular-nums;padding-top:2px}
.momento .cabeca .tit{min-width:0;display:grid;gap:6px;padding-top:4px}
.momento .cabeca .tit h2,.momento .cabeca .tit h3{margin:0}
.momento .cabeca .tit .quando,.momento .cabeca .tit .estado{margin:0}
.momento .cabeca+.texto,.momento .cabeca+dl{margin-top:4px}
.momento .cabeca .dia-nome{font:700 18px/1.3 var(--f);color:var(--uva);padding-top:6px;font-variant-numeric:tabular-nums}
.momento .cabeca .numero+.dia-nome{align-self:center;padding:0}

/* cartão de dia: dois corpos separados por uma linha, cada um com as suas ações */
.momento.dia .cabeca{margin-bottom:14px;align-items:center}
.momento.dia .parte+.parte{margin-top:18px;padding-top:18px;border-top:1px solid var(--linha)}

/* arte: normal 240 px; âncora 240 px de altura no telemóvel e coluna de 300 no computador */
.momento .arte{padding:16px 20px 8px}
.momento.ancora .arte{min-height:240px;padding:16px 20px 8px}
.momento.ancora .arte svg.lugar{max-width:360px}
.momento.grande .arte{min-height:200px}
.momento.grande .arte svg.lugar{max-width:300px}

/* compacto: sem arte, menos ar */
.momento.compacto{grid-template-columns:none}
.momento.compacto .corpo{padding:16px 18px 18px}
.momento.compacto h2,.momento.compacto h3{font-size:clamp(22px,2.6vw,26px)}

/* passados: arte a 96 px e esbatida (o texto fica inteiro, por contraste), sem ações */
.momento.passou .arte{opacity:.72;min-height:0;padding:8px 16px}
.momento.passou .arte svg.lugar{width:144px;height:96px;max-width:none}
.momento.passou .corpo{padding:16px 18px 18px}
.momento.passou h2,.momento.passou h3{font-size:clamp(22px,2.6vw,26px)}
.momento.passou .cabeca .numero{font-size:40px}
.momento.passou .quando{color:var(--suave)}
.momento.passou .texto,.momento.passou dd{color:var(--suave)}

/* contínuos: faixa de 96 px no topo do cartão, nunca coluna lateral */
.momento.faixa,.momento.faixa.arte-dir{grid-template-columns:none}
.momento.faixa .arte{min-height:0;height:96px;padding:8px 16px;order:0;align-self:auto}
.momento.faixa .arte svg.lugar{width:auto;height:80px;max-width:100%}

@media (min-width:700px){
  .momento .arte{padding:20px}
  .momento.ancora{grid-template-columns:300px 1fr}
  .momento.ancora .arte{min-height:0;align-self:stretch}
  .momento.ancora .arte svg.lugar{max-width:260px}
  .momento.grande{grid-template-columns:300px 1fr}
  .momento.grande .arte{min-height:0;align-self:stretch}
  .momento.grande .arte svg.lugar{max-width:260px}
  .momento.passou{grid-template-columns:176px 1fr}
  .momento.passou .arte{align-self:stretch;padding:16px}
  .momento .corpo{padding:24px 28px 26px}
  .momento.compacto .corpo,.momento.passou .corpo{padding:18px 24px 20px}
  .momento.dia .parte+.parte{margin-top:22px;padding-top:22px}
  /* a arte alterna de lado */
  .momento.arte-dir{grid-template-columns:1fr 240px}
  .momento.arte-dir.ancora,.momento.arte-dir.grande{grid-template-columns:1fr 300px}
  .momento.arte-dir.passou{grid-template-columns:1fr 176px}
  .momento.arte-dir .arte{order:2}
}