/* cartões da lista = o próprio post, a cores. O cartão escala com a largura (cqw): igual no computador e no telemóvel, só mais pequeno */
.wp-grelha { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; align-items:stretch; }
.wp-col { display:flex; flex-direction:column; gap:18px; min-width:0; }
.wp-cartao { display:block; container-type:inline-size; aspect-ratio:4/5; overflow:hidden; border-radius:0; box-shadow:none; text-decoration:none; background:var(--wp-bg); color:var(--wp-fg); }
.wp-in { display:flex; flex-direction:column; height:100%; box-sizing:border-box; padding:6cqw; }
.wp-cor-amarelo   { --wp-bg:#f2b632; --wp-fg:#17150f; }
.wp-cor-turquesa  { --wp-bg:#1f9e9a; --wp-fg:#ffffff; }
.wp-cor-magenta   { --wp-bg:#c8327a; --wp-fg:#ffffff; }
.wp-cor-terracota { --wp-bg:#d4572a; --wp-fg:#ffffff; }
.wp-cor-cobalto   { --wp-bg:#2c4fa3; --wp-fg:#ffffff; }
.wp-cap { display:flex; justify-content:space-between; gap:3cqw; font-family:'Jost',sans-serif; font-size:2.6cqw; letter-spacing:.2em; text-transform:uppercase; color:var(--wp-fg); }
.wp-titulo { margin:3.4cqw 0 0; font-family:'Instrument Serif',serif; font-weight:400; font-size:16cqw; line-height:.95; color:var(--wp-fg); }
.wp-titulo--longo { font-size:13cqw; }
.wp-foto { flex:1; min-height:0; position:relative; overflow:hidden; margin-top:4cqw; }
.wp-foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.wp-foto img.wp-foto--claro { mix-blend-mode:multiply; filter:grayscale(1) contrast(1.15) brightness(1.08); }
.wp-dia { margin-top:3.4cqw; font-family:'Instrument Serif',serif; font-size:6cqw; line-height:1.1; color:var(--wp-fg); }
.wp-hora { margin-top:1cqw; font-family:'Jost',sans-serif; font-size:3.2cqw; line-height:1.4; color:var(--wp-fg); }
.wp-local { margin-top:3cqw; padding:2.5cqw 3.5cqw; border-radius:0; color:#fff; }
.wp-local--azul { background:#1f9e9a; display:flex; flex-direction:column; align-items:flex-start; }
.wp-local--preto { background:#17150f; display:flex; flex-direction:column; align-items:flex-start; }
.wp-local__leg { font-family:'Jost',sans-serif; font-size:2.4cqw; letter-spacing:.2em; text-transform:uppercase; text-decoration:underline; text-underline-offset:.3em; }
.wp-local__nome { font-family:'Instrument Serif',serif; font-size:4.6cqw; line-height:1.15; margin-top:.7cqw; }
.wp-local__morada { font-family:'Jost',sans-serif; font-size:2.8cqw; line-height:1.4; margin-top:.5cqw; }
.wp-local__ref { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:3cqw; }
/* caixa azul: «Novo local» é uma etiqueta; morada e referência em linhas separadas */
.wp-local--azul .wp-local__leg { display:inline-block; align-self:flex-start; background:#17150f; color:#f2b632; font-weight:500; text-decoration:none; padding:.4em .8em; margin-bottom:.4em; }
.wp-local--azul .wp-local__ref { display:block; }
/* o dragão aparece inteiro, sem cortes */
.wp-foto img[src*="workshop-desenho-mitologico"] { object-fit:contain; object-position:50% 50%; }
.wp-desc { margin:0; font-family:'Jost',sans-serif; font-size:15px; line-height:1.6; color:#5f594f; }
.wp-botoes { margin-top:auto; display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px; }
.wp-inscrever { display:inline-block; position:relative; z-index:2; padding:14px 26px; background:#17150f; color:#f7f5f0; font-family:'Jost',sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
.wp-inscrever:hover { opacity:.88; }
.wp-partilhar { position:relative; z-index:2; min-height:44px; padding:0 2px; border:0; background:none; cursor:pointer; font-family:'Jost',sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#17150f; text-decoration:underline; text-underline-offset:4px; touch-action:manipulation; }
.wp-partilhar:hover { color:#b5502a; }
@media (max-width:980px) { .wp-grelha { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; } }
@media (max-width:760px) { .wp-grelha { grid-template-columns:minmax(0,1fr); gap:40px; } }

/* ---- páginas de detalhe: o mesmo cartão, na coluna da esquerda (máx. 560 px) ---- */
.wsp-cartao-col { width:100%; max-width:560px; }
.wp-cartao--grande { cursor:default; }
@media (max-width:760px) {
  .wsp-cartao-col { max-width:none; }
  /* o título e a data já estão dentro do cartão: por cima fica só a legenda e «Partilhar» */
  main.wsp-tema .wsp-cab .wsp-titulo, main.wsp-tema .wsp-cab .wsp-quando, main.wsp-tema .wsp-cab .wsp-onde { display:none; }
  main.wsp-tema .wsp-cab { margin-bottom:16px; }
}
/* páginas de detalhe: contentor normal e nada a sair do ecrã */
main.wsp-tema { overflow-x:clip; }
main.wsp-tema .wsp-cols { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; }
main.wsp-tema .wsp-texto { min-width:0; }
main.wsp-tema .wsp-texto * { max-width:100%; }
@media (max-width:760px) { main.wsp-tema .wsp-cols { grid-template-columns:minmax(0,1fr); gap:32px; } }

/* etiqueta «Local» da caixa preta (Rostos): fundo amarelo, letras pretas */
.wp-local--preto .wp-local__leg { display:inline-block; align-self:flex-start; background:#f2b632; color:#17150f; font-weight:500; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; padding:.4em .8em; margin-bottom:.4em; }

/* morada do Pokémon: curta e numa só linha na lista, completa na página de detalhe; a referência só na página de detalhe */
.wp-morada-curta { display:none; }
.wp-grelha .wp-morada-longa { display:none; }
.wp-grelha .wp-morada-curta { display:inline; white-space:nowrap; }
.wp-grelha .wp-local .wp-local__morada { font-size:2.5cqw; }
.wp-grelha .wp-local__ref { display:none; }
/* workshop já realizado: etiqueta «Realizado» no lugar do «Inscrever-me» */
.wp-realizado { display:none; font-family:'Jost',sans-serif; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#5f594f; border:1px solid #cdc6b8; padding:13px 20px; }
.wp-passado .wp-realizado { display:inline-block; }
.wp-passado .wp-inscrever { display:none; }

/* referência «(em frente ao Colégio de São Tomás)» em linha própria, em todas as caixas */
.wp-local__ref { display:block; }

/* etiqueta «Local»: igual nos dois cartões, um pouco maior; as letras amarelas sobre preto (Pokémon) levam mais peso para se lerem como as pretas sobre amarelo (Rostos) */
.wp-local .wp-local__leg { font-size:2.8cqw; }
.wp-local--azul .wp-local__leg { font-weight:600; }

/* ===== Lista /workshop: caixa do local com UM só estilo para todos os cartões (muda apenas a cor de fundo e a cor da letra) ===== */
.wp-grelha .wp-local .wp-local__leg { display:inline-block; align-self:flex-start; font-family:'Jost',sans-serif; font-size:11px; font-weight:500; line-height:normal; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; padding:4px 8px; margin:0 0 4px; }
.wp-grelha .wp-local .wp-local__nome { font-family:'Instrument Serif',serif; font-size:19px; font-weight:400; line-height:1.1; margin:0; letter-spacing:0; }
.wp-grelha .wp-local .wp-local__morada { font-family:'Jost',sans-serif; font-size:11px; font-weight:400; line-height:1.4; margin:2px 0 0; letter-spacing:0; }
/* cores: Rostos (caixa preta, etiqueta amarela com letra preta) e Pokémon (caixa turquesa, etiqueta preta com letra amarela) */
.wp-grelha .wp-local--preto .wp-local__leg { background:#f2b632; color:#17150f; }
.wp-grelha .wp-local--azul  .wp-local__leg { background:#17150f; color:#f2b632; }

/* etiqueta «Local»: caixas exatamente do mesmo tamanho; as letras amarelas sobre preto (Pokémon) levam um ponto a mais e mais peso, para se lerem tão grandes como as pretas sobre amarelo (Rostos) */
.wp-grelha .wp-local .wp-local__leg { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:68px; height:25px; padding:0 8px; }
.wp-grelha .wp-local--azul .wp-local__leg { font-size:12px; font-weight:600; }

/* caixa do local amarela (Pastel de Óleo): fundo #f2b632, texto tinta; etiqueta preta com letras amarelas */
.wp-local--amarelo { background:#f2b632; color:#17150f; display:flex; flex-direction:column; align-items:flex-start; }
.wp-local--amarelo .wp-local__leg { display:inline-block; align-self:flex-start; background:#17150f; color:#f2b632; font-weight:500; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; padding:.4em .8em; margin-bottom:.4em; }
.wp-grelha .wp-local--amarelo .wp-local__leg { background:#17150f; color:#f2b632; font-size:12px; font-weight:600; }

/* 1.ª linha: «Workshop» grande; 2.ª: técnica em destaque; 3.ª: «Tema:» por cima do título */
.wp-cap .wp-ws { font-family:'Jost',sans-serif; font-size:4.6cqw; font-weight:600; letter-spacing:.2em; text-transform:uppercase; line-height:1.1; color:var(--wp-fg); }
.wp-tec { margin-top:2cqw; font-family:'Jost',sans-serif; font-size:3.7cqw; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.2; color:var(--wp-fg); }
.wp-tema { margin-top:2.4cqw; font-family:'Jost',sans-serif; font-size:2.6cqw; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--wp-fg); opacity:.85; }
.wp-tema + .wp-titulo { margin-top:.6cqw; }

/* «Tema:» com o mesmo tamanho da técnica; o tema (título) fica mais pequeno */
.wp-tema { font-size:3.7cqw; font-weight:600; letter-spacing:.14em; line-height:1.2; opacity:1; }
.wp-titulo { font-size:11cqw; line-height:1; }
.wp-titulo--longo { font-size:9.4cqw; }

/* «Tema:» na mesma linha, antes do nome do tema (Pokémon, Rostos…) */
.wp-linha-tema { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:2.4cqw; margin-top:2.4cqw; }
.wp-linha-tema .wp-tema { margin:0; flex:none; }
.wp-linha-tema .wp-titulo { margin:0; }

/* legenda simples «Workshop · técnica» e título grande, como no início */
.wp-titulo { font-size:16cqw; line-height:.95; margin:3.4cqw 0 0; }
.wp-titulo--longo { font-size:13cqw; }

/* cabeçalho do cartão em três linhas: Workshop / Técnica / Tema (o tema em Cormorant Garamond itálico) */
.wp-cap .wp-ws, .wp-tec, .wp-tema { font-family:'Jost',sans-serif; font-size:3.3cqw; font-weight:500; letter-spacing:.2em; text-transform:uppercase; line-height:1.2; color:var(--wp-fg); opacity:1; }
.wp-tec { margin-top:1cqw; }
.wp-linha-tema { display:flex; align-items:baseline; flex-wrap:nowrap; gap:2.5cqw; margin-top:3.5cqw; }
.wp-linha-tema .wp-tema { margin:0; flex:none; }
.wp-linha-tema .wp-titulo { margin:0; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; text-transform:none; letter-spacing:0; font-size:16cqw; line-height:1; }
.wp-linha-tema .wp-titulo--longo { font-size:13cqw; }

/* medidas do desenho a 355px de largura: 13px / 64px (52px nos temas compridos) / 20px */
.wp-cap .wp-ws, .wp-tec, .wp-tema { font-size:3.66cqw; }
.wp-tec { margin-top:1.1cqw; }
.wp-linha-tema { gap:2.8cqw; margin-top:3.9cqw; }
.wp-linha-tema .wp-titulo { font-size:18cqw; }
.wp-linha-tema .wp-titulo--longo { font-size:14.6cqw; }

/* cabeçalho de uma só linha: «Workshop · Técnica: …» + «+6 anos»; título do tema em Instrument Serif 68px */
.wp-cap { display:flex; justify-content:space-between; align-items:baseline; gap:2cqw; white-space:nowrap; font-family:'Jost',sans-serif; font-size:3.1cqw; font-weight:400; letter-spacing:.2em; text-transform:uppercase; line-height:1.2; }
.wp-cap span { font-weight:400; }
.wp-titulo { font-family:'Instrument Serif',Georgia,serif; font-style:normal; font-weight:400; text-transform:none; letter-spacing:0; font-size:19.15cqw; line-height:.95; margin:2.8cqw 0 0; }
.wp-titulo--longo { font-size:14.6cqw; }
/* a legenda quebra em duas linhas quando a técnica é comprida («Carvão vegetal», «Pastel de óleo»); «+6 anos» fica à direita */
.wp-cap { white-space:normal; align-items:flex-start; }
.wp-cap span:last-child { flex:none; white-space:nowrap; }
/* cabeçalho em duas linhas, alinhadas à esquerda: «Workshop · Técnica: …» e por baixo «+6 anos»; nunca parte a técnica */
.wp-cap { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:4px; white-space:nowrap; }
.wp-cap span, .wp-cap span:last-child { white-space:nowrap; flex:none; }

/* «Camadas e Texturas»: título do cartão numa só linha, 44px */
.wp-linha-tema .wp-titulo--camadas, .wp-titulo--camadas { font-size:12.4cqw; white-space:nowrap; }