/* =====================================================================================================
   CARTAO DO PROJETO: o CSS do componente unico (app/js/cartao-projeto.js), no app e no site
   (06/11/2026, pedido do Kenio). Antes eram duas copias: umas 15 camadas de .pcard no style.css do app e
   o CSS_BASE do scripts/gerar-seo.py. Os valores sao os que valiam no app.

   - Todo var() tem valor de reserva: o site nao carrega o style.css do app. Os tokens do cartao (--cp-*)
     leem os do app (--cartao-pad, --ico-destaque) ou os do site (--pad, --ico), nessa ordem.
   - So animam box-shadow e cor (so repintam; nada de layout). O realce de passar o mouse so vale com
     mouse de verdade ((hover:hover) and (pointer:fine)), para nao ficar preso depois de um toque.
   - O titulo (link no site, botao no app) cobre o cartao inteiro com o ::after: o alvo de toque e o
     cartao todo. O foco aparece no cartao (:has).
   - No app, este arquivo entra depois do style.css. Os extras do app (Salvar, nota, preco) ficam no
     style.css, porque so o app os usa.
   ===================================================================================================== */
.pcard{
  --cp-pad:var(--cartao-pad,var(--pad,16px));
  --cp-ico:var(--ico-destaque,var(--ico,24px));
  --cp-fio:var(--fio,rgba(23,23,23,.08));
  --cp-curva:var(--quieto,cubic-bezier(.22,1,.36,1));
  position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card,#fff);color:var(--tx-1,#0B1F3F);
  border:1px solid var(--cp-fio);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:box-shadow .18s var(--cp-curva),border-color .18s var(--cp-curva)}
.pcard[hidden]{display:none}

/* Foto 16:10. Sem foto: o logo do Drive apagado, com terreno e area. .pcard-capa e .pcard-sem-capa
   tambem servem ao app fora do cartao (galeria vazia, miniaturas, Meus projetos) */
.pcard-art{position:relative;aspect-ratio:16/10;background:#F1F4F8;overflow:hidden}
.pcard-art > svg{width:100%;height:100%;display:block} /* desenho do catalogo de demonstracao, sem o banco */
.pcard-capa{width:100%;height:100%;object-fit:cover;display:block}
.pcard-sem-capa{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--tx-3,#5B6B7E);font-family:var(--f-mono,"Fustat","Inter",sans-serif);font-size:11.5px;line-height:1.5}
.pcard-sem-capa img{width:20px;height:42px;filter:grayscale(1);opacity:.35}
/* Codigo do projeto (PRJ-001): selo translucido no canto */
.pcard .pcode{position:absolute;left:11px;top:11px;padding:3px 9px;border:0;border-radius:6px;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:rgba(11,31,54,.78);
  font-family:var(--f-mono,"Fustat","Inter",sans-serif);font-size:10px;font-weight:600;line-height:15px;letter-spacing:.02em}

/* Nome (ate 2 linhas) e, no app, a nota na mesma linha (extras.nota) */
.pcard-body{padding:calc(var(--cp-pad) - 2px) var(--cp-pad) 12px;flex:none}
.pcard-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:12px;row-gap:2px;min-width:0}
.pcard .pcard-title{flex:0 1 auto;min-width:0;min-height:0;margin:0;color:inherit;
  font-family:var(--f-display,var(--f-titulo,"Fustat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif));
  font-size:var(--texto-card,15px);font-weight:600;line-height:20px;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .pcard-abrir{all:unset;cursor:pointer;color:inherit;font:inherit}
.pcard .pcard-abrir::after{content:"";position:absolute;inset:0;z-index:1}
.pcard:has(.pcard-abrir:focus-visible){outline:2px solid var(--blue,var(--azul,#1D6FF2));outline-offset:2px}

/* Medidas: 4 ou 2 celulas iguais, no pe do cartao (margin-top:auto alinha a fileira da grade) */
.pcard-medidas{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  border-top:1px solid var(--cp-fio)}
.pcard-medidas li{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px;min-width:0}
.pcard-medidas li + li{border-left:1px solid var(--cp-fio)}
.pcard-medidas b{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tx-1,#0B1F3F);
  font-size:12.5px;font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums}
.pcard .pm-ico{display:grid;place-items:center;color:var(--tx-2,#4A5A6E);transition:color .15s var(--cp-curva)}
.pcard-medidas .ico{width:var(--cp-ico);height:var(--cp-ico)}
.pcard .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (hover:hover) and (pointer:fine){
  .pcard:hover{box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:rgba(23,23,23,.12)}
  .pcard:hover .pm-ico{color:var(--tx-1,#0B1F3F)}
}
/* Card aberto no painel (app): depois do realce, para valer tambem com o mouse em cima */
.pcard.is-aberto{border-color:var(--tx-1,#0B1F3F);box-shadow:0 0 0 2px var(--tx-1,#0B1F3F),var(--sh-2,0 4px 16px rgba(11,31,54,.07),0 1px 3px rgba(11,31,54,.05))}

@media (max-width:767px){
  .pcard{border-radius:14px}
  .pcard-medidas li{padding:10px 2px}
  .pcard-medidas b{font-size:11.5px}
  .pcard-medidas .ico{stroke-width:1.8} /* 20 px na tela continua com 1,5 px de traco */
}

/* As 4 celulas pela largura do PROPRIO cartao (container query), porque o mesmo cartao aparece com 180 a
   350 px (grade de 2 a 4 colunas, painel aberto ou nao). O numero continua exato; o que muda e a forma.
   Medido em 06/11/2026 (Inter 500, numeros tabulares): "207,21 m²" tem 64 px a 12,5 px e 59 px a 11,5 px;
   sem a unidade, 44 e 41 px. A celula precisa do texto + o respiro do li (8 px; 4 px no celular).
   - largo: numero e unidade ("207,21 m²");
   - medio: so o numero ("207,21"); a unidade fica no title e no leitor de tela (.sr "metros quadrados");
   - estreito: as 4 celulas em 2 x 2, de novo com a unidade.
   Com 2 celulas, cada uma tem metade do cartao e sempre cabe: a regra so vale para data-celulas="4". */
.pcard{container:cartao / inline-size}
@media (min-width:768px){
  @container cartao (max-width:287px){ .pcard-medidas[data-celulas="4"] .pm-u{display:none} }
  @container cartao (max-width:207px){
    .pcard-medidas[data-celulas="4"]{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
    .pcard-medidas[data-celulas="4"] .pm-u{display:inline}
    .pcard-medidas[data-celulas="4"] li + li{border-left:0}
    .pcard-medidas[data-celulas="4"] li:nth-child(even){border-left:1px solid var(--cp-fio)}
    .pcard-medidas[data-celulas="4"] li:nth-child(n+3){border-top:1px solid var(--cp-fio)}
  }
}
@media (max-width:767px){
  @container cartao (max-width:251px){ .pcard-medidas[data-celulas="4"] .pm-u{display:none} }
  @container cartao (max-width:179px){
    .pcard-medidas[data-celulas="4"]{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
    .pcard-medidas[data-celulas="4"] .pm-u{display:inline}
    .pcard-medidas[data-celulas="4"] li + li{border-left:0}
    .pcard-medidas[data-celulas="4"] li:nth-child(even){border-left:1px solid var(--cp-fio)}
    .pcard-medidas[data-celulas="4"] li:nth-child(n+3){border-top:1px solid var(--cp-fio)}
  }
}
@media (prefers-reduced-motion:reduce){
  .pcard,.pcard .pm-ico{transition:none}
}