/* =====================================================================
   DISPOSIÇÃO DAS LISTAGENS
   Escolhe-se em Configuração → Disposições. O contentor recebe
   .lst .lst-<disposição> .lst-c<colunas>, e este ficheiro trata do resto.

   Carrega DEPOIS de site.css, de propósito: as regras daqui têm de ganhar
   às grelhas fixas (.grelha.g3, .grelha-produtos, .grelha-fichas...).

   Princípio: o conteúdo das páginas não muda — muda só a forma como se
   arruma. Assim uma disposição nova nunca obriga a mexer nas páginas.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Base e colunas
   --------------------------------------------------------------------- */
.lst{display:grid;gap:28px;align-items:stretch}
.lst.lst-c1{grid-template-columns:minmax(0,1fr)}
.lst.lst-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lst.lst-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lst.lst-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lst.lst-c5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Quantas colunas cabem, à medida que o ecrã encolhe.
   Cinco colunas num telemóvel não são cinco colunas: são ilegíveis. */
@media (max-width:1180px){
  .lst.lst-c5{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1024px){
  .lst.lst-c4,.lst.lst-c5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .lst.lst-c3,.lst.lst-c4,.lst.lst-c5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .lst.lst-c2,.lst.lst-c3,.lst.lst-c4,.lst.lst-c5{grid-template-columns:minmax(0,1fr)}
}

/* ---------------------------------------------------------------------
   CARTÕES — imagem em cima, texto por baixo. É o aspeto de origem,
   por isso aqui não há nada a fazer.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   LISTA — uma por linha, imagem à esquerda. Para quem tem texto a sério.
   --------------------------------------------------------------------- */
.lst.lst-lista{grid-template-columns:minmax(0,1fr);gap:0}

.lst-lista > .cartao,
.lst-lista > .produto,
.lst-lista > .ficha,
.lst-lista > .trabalho{
  display:grid;grid-template-columns:minmax(0,clamp(160px,26%,280px)) minmax(0,1fr);
  align-items:center;gap:clamp(18px,3vw,34px);
  background:transparent;border:0;border-bottom:1px solid var(--linha,#dfe3dd);
  border-radius:0;box-shadow:none;padding:18px 0;overflow:visible}
.lst-lista > *:last-child{border-bottom:0}
.lst-lista > *:hover{transform:none;box-shadow:none}

.lst-lista .fig,
.lst-lista .produto-img,
.lst-lista .ficha-img{aspect-ratio:4/3;border-radius:var(--raio,14px);overflow:hidden}
.lst-lista .corpo,
.lst-lista .produto-corpo,
.lst-lista .ficha-corpo{padding:0}
.lst-lista .cartao p,
.lst-lista .produto-corpo p{max-width:72ch;font-size:.95rem}
.lst-lista .cartao h3{font-size:1.24rem}

/* O trabalho do portefólio tem a legenda por cima da imagem; em lista
   ela desce para o lado, senão fica um retângulo escuro sem razão. */
.lst-lista > .trabalho{aspect-ratio:auto}
.lst-lista > .trabalho img{aspect-ratio:4/3;border-radius:var(--raio,14px)}
.lst-lista > .trabalho .trabalho-txt{position:static;background:none;color:inherit;padding:0}
.lst-lista > .trabalho .trabalho-txt h3{color:inherit}

/* Estes já nascem em linha: só se tira a moldura de cartão. */
.lst-lista > .ementa-item,
.lst-lista > .doc,
.lst-lista > .obito{display:flex}

/* ---------------------------------------------------------------------
   MOSAICO — compacto. Só imagem e título, para catálogos grandes.
   --------------------------------------------------------------------- */
.lst.lst-mosaico{gap:14px}
.lst-mosaico .corpo,
.lst-mosaico .produto-corpo,
.lst-mosaico .ficha-corpo{padding:12px 14px 14px}
.lst-mosaico h3{font-size:1rem;line-height:1.3;margin-bottom:.3em}
.lst-mosaico .cartao p,
.lst-mosaico .produto-corpo p,
.lst-mosaico .ficha-local{display:none}
.lst-mosaico .rodape-c,
.lst-mosaico .ficha-meta,
.lst-mosaico .produto-cat{display:none}
.lst-mosaico .ico{width:38px!important;height:38px!important;margin-bottom:10px!important}
/* o preço e o botão de encomenda ficam: são a razão de ser da página */
.lst-mosaico .produto-pe,
.lst-mosaico .ficha-pe{padding-top:10px}

/* ---------------------------------------------------------------------
   ALTERNADO — imagem à esquerda, depois à direita. Poucos itens, com peso.
   --------------------------------------------------------------------- */
.lst.lst-alternado{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.5vw,46px)}
.lst-alternado > *{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(20px,4vw,52px);
  background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.lst-alternado > *:hover{transform:none;box-shadow:none}
.lst-alternado > *:nth-child(even) > :first-child{order:2}
.lst-alternado .fig,
.lst-alternado .produto-img,
.lst-alternado .ficha-img{aspect-ratio:16/11;border-radius:var(--raio,14px);overflow:hidden}
.lst-alternado .corpo,
.lst-alternado .produto-corpo,
.lst-alternado .ficha-corpo{padding:0}
.lst-alternado h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.lst-alternado .cartao p{font-size:1rem;max-width:60ch}
@media (max-width:760px){
  .lst-alternado > *{grid-template-columns:minmax(0,1fr)}
  .lst-alternado > *:nth-child(even) > :first-child{order:0}
}

/* ---------------------------------------------------------------------
   TABELA — linhas com o preço à direita. Ementas, documentos, listas
   de preços. Sem imagens: aqui o que interessa é ler e comparar.
   --------------------------------------------------------------------- */
.lst.lst-tabela{grid-template-columns:minmax(0,1fr);gap:0}
.lst-tabela > *{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:13px 0;border:0;border-bottom:1px dashed var(--linha,#dfe3dd);
  border-radius:0;background:none;box-shadow:none;overflow:visible}
.lst-tabela > *:last-child{border-bottom:0}
.lst-tabela > *:hover{transform:none;box-shadow:none;background:rgba(0,0,0,.015)}
.lst-tabela .fig,
.lst-tabela .produto-img,
.lst-tabela .ficha-img,
.lst-tabela .ementa-foto{display:none}
.lst-tabela .corpo,
.lst-tabela .ficha-corpo,
.lst-tabela .ementa-txt{padding:0}
.lst-tabela h3{font-size:1.04rem;margin:0 0 2px}
.lst-tabela p{margin:0;font-size:.88rem}

/* O produto não tem uma coluna de preço própria: faz-se uma. */
.lst-tabela .produto-corpo{display:flex;align-items:center;gap:16px;padding:0;flex-wrap:wrap}
.lst-tabela .produto-corpo h3{flex:1 1 220px}
.lst-tabela .produto-corpo p{flex:2 1 260px}
.lst-tabela .produto-pe{flex:0 0 auto;margin:0;padding:0;border:0}

/* O documento já é uma linha com ícone; mantém-se. */
.lst-tabela > .doc{display:flex;padding:12px 0}

/* ---------------------------------------------------------------------
   DESTAQUE — o primeiro ocupa a largura toda e ganha corpo.
   Serve para abrir uma página de notícias ou de serviços.
   --------------------------------------------------------------------- */
.lst-destaque > :first-child{
  grid-column:1/-1;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:center;gap:clamp(20px,4vw,46px);overflow:visible}
.lst-destaque > :first-child .fig,
.lst-destaque > :first-child .produto-img,
.lst-destaque > :first-child .ficha-img{aspect-ratio:16/9;border-radius:var(--raio,14px);overflow:hidden}
.lst-destaque > :first-child .corpo,
.lst-destaque > :first-child .produto-corpo,
.lst-destaque > :first-child .ficha-corpo{padding:clamp(6px,2vw,20px)}
.lst-destaque > :first-child h3{font-size:clamp(1.4rem,2.8vw,2.05rem)}
.lst-destaque > :first-child p{font-size:1.02rem;max-width:58ch}
@media (max-width:760px){
  .lst-destaque > :first-child{grid-template-columns:minmax(0,1fr)}
}

/* ---------------------------------------------------------------------
   Itens com estrutura própria
   --------------------------------------------------------------------- */

/* PROJETOS (.proj) — nasce como faixa larga com imagem de um lado.
   Em várias colunas tem de encolher para cartão, senão não cabe. */
.lst:not(.lst-c1) > .proj{grid-template-columns:minmax(0,1fr)}
.lst:not(.lst-c1) > .proj .fig{min-height:190px}
.lst:not(.lst-c1) > .proj .txt{padding:20px 22px}
.lst-mosaico > .proj .fig{min-height:150px}
.lst-mosaico > .proj .txt{padding:14px 16px}
.lst-mosaico > .proj .txt p{display:none}
.lst-lista > .proj{grid-template-columns:minmax(0,clamp(160px,26%,280px)) minmax(0,1fr);
  background:#fff;border:1px solid var(--linha,#dfe3dd);border-radius:var(--raio,14px);padding:0}
.lst-lista > .proj .fig{min-height:150px;border-radius:0}
.lst-destaque > .proj:first-child{grid-template-columns:1.05fr .95fr}
.lst-destaque > .proj:first-child .fig{min-height:340px}
/* em alternado o .proj mantém a moldura: é o seu aspeto de origem */
.lst-alternado > .proj{background:#fff;border:1px solid var(--linha,#dfe3dd);
  border-radius:var(--raio,14px);overflow:hidden;gap:0}
.lst-alternado > .proj .txt{padding:clamp(26px,3.5vw,48px)}

/* TRABALHOS (.trabalho) — é um azulejo com o texto por cima da imagem.
   Nas disposições de linha continua azulejo; só em "lista" é que o
   texto desce para o lado, tratado mais acima. */
.lst-alternado > .trabalho,
.lst-tabela > .trabalho,
.lst-destaque > .trabalho{display:block}

/* EVENTOS (.evento) — data, texto e botão. Em colunas a data sobe. */
.lst:not(.lst-c1) > .evento{grid-template-columns:minmax(0,1fr);gap:14px;text-align:left}
.lst:not(.lst-c1) > .evento .evento-data{width:84px;padding:12px 8px}
.lst:not(.lst-c1) > .evento .evento-data strong{font-size:1.7rem}
.lst-mosaico > .evento{padding:16px 18px}
.lst-mosaico > .evento .evento-txt p{display:none}
.lst-tabela > .evento{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  padding:12px 0;background:none;border:0;border-bottom:1px dashed var(--linha,#dfe3dd)}
.lst-tabela > .evento .evento-data{background:none;color:var(--c1);padding:0;width:62px;
  display:flex;align-items:baseline;gap:5px}
.lst-tabela > .evento .evento-data strong{font-size:1.25rem}
.lst-tabela > .evento .evento-txt p{display:none}

/* ÓBITOS (.obito) — sóbrio por definição. Em colunas passa a vertical. */
.lst:not(.lst-c1) > .obito{flex-direction:column;align-items:center;text-align:center}
.lst:not(.lst-c1) > .obito .obito-foto{width:110px;height:134px}

/* SERVIÇOS na página inicial (.serv) — número, ícone, título e resumo.
   Vinha de um eixo global (body.serv-*); passou a ser a escolha da
   listagem "servicos", que assim vale nos dois sítios. */
.lst-lista > .serv{display:grid;grid-template-columns:76px minmax(0,1fr) auto;
  align-items:center;gap:24px;border-radius:0;border-left:0;border-right:0;border-top:0;
  padding:26px 8px;box-shadow:none;background:transparent}
.lst-lista > .serv:first-child{border-top:1px solid var(--linha,#dfe3dd)}
.lst-lista > .serv:hover{transform:none;background:rgba(0,0,0,.02)}
.lst-lista > .serv .ico{width:60px;height:60px;margin:0}
.lst-lista > .serv .num{display:none}
.lst-lista > .serv h3{margin:0 0 .25em}
.lst-lista > .serv p{margin:0;max-width:70ch}
.lst-lista > .serv .link-seta{white-space:nowrap}
.lst-lista > .serv::before{display:none}

.lst-mosaico > .serv{padding:24px 20px;text-align:center}
.lst-mosaico > .serv .ico{margin-left:auto;margin-right:auto;width:52px;height:52px}
.lst-mosaico > .serv .num{display:none}
.lst-mosaico > .serv h3{font-size:1.08rem}
.lst-mosaico > .serv p{font-size:.88rem;display:block}

.lst-alternado > .serv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;
  align-items:start;background:transparent;border:0;box-shadow:none}
.lst-alternado > .serv:nth-child(even){grid-template-columns:minmax(0,1fr) auto;text-align:right}
.lst-alternado > .serv:nth-child(even) .ico{order:2}
.lst-alternado > .serv:nth-child(even) .link-seta{flex-direction:row-reverse}
.lst-alternado > .serv .num{display:none}
.lst-alternado > .serv .ico{margin:0}
@media (max-width:900px){
  .lst-alternado > .serv,
  .lst-alternado > .serv:nth-child(even){grid-template-columns:auto minmax(0,1fr);text-align:left}
  .lst-alternado > .serv:nth-child(even) .ico{order:0}
}

.lst-tabela > .serv{grid-template-columns:minmax(0,1fr) auto}
.lst-tabela > .serv .ico,.lst-tabela > .serv .num{display:none}
.lst-destaque > .serv:first-child{grid-column:1/-1}

/* EMENTA — cada secção (Entradas, Carnes...) é uma grelha própria.
   O título da secção atravessa sempre a largura toda. */
.ementa-sec.lst.lst-c1{gap:0}
.ementa-sec.lst > .ementa-titulo{grid-column:1/-1}
.lst-cartoes > .ementa-item,
.lst-mosaico > .ementa-item{flex-direction:column;align-items:stretch;
  background:#fff;border:1px solid var(--linha,#dfe3dd);border-radius:var(--raio,14px);
  padding:16px 18px;gap:10px}
.lst-cartoes > .ementa-item .ementa-foto,
.lst-mosaico > .ementa-item .ementa-foto{width:100%;height:150px;object-fit:cover;
  border-radius:calc(var(--raio,14px) - 4px)}
.lst-cartoes > .ementa-item .ementa-preco,
.lst-mosaico > .ementa-item .ementa-preco{text-align:right}
.lst-mosaico > .ementa-item .ementa-txt p{display:none}

/* ---------------------------------------------------------------------
   Feitios que se herdam dos eixos de Aparência
   --------------------------------------------------------------------- */
body.d-compacta .lst{gap:18px}
body.d-ampla .lst{gap:36px}
body.d-compacta .lst.lst-mosaico{gap:10px}

body.r-retos .lst-lista .fig,
body.r-retos .lst-lista .produto-img,
body.r-retos .lst-lista .ficha-img,
body.r-retos .lst-alternado .fig,
body.r-retos .lst-destaque > :first-child .fig{border-radius:0}

/* Em lista e tabela o cartão não tem moldura, por isso o eixo dos
   cartões não se aplica — evita sombras a flutuar sem caixa. */
body.c-elevado .lst-lista > *,
body.c-elevado .lst-tabela > *,
body.c-sombra .lst-lista > *,
body.c-sombra .lst-tabela > *{box-shadow:none}