/* H2 Studios | Vitrine editorial 2026
   Ajuste localizado na secao Projetos; nao altera galerias nem area administrativa.
   Uma unica geometria para capas existentes e projetos cadastrados no KV/Drive. */
#projetos .projects-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  column-gap:clamp(14px,1.55vw,24px);
  row-gap:clamp(27px,3.6vw,46px);
}
/* Anula o mosaico alternado anterior (7/5/6 colunas e cartoes grandes). */
#projetos .projects-grid > .project-card,
#projetos .projects-grid > .project-card:nth-child(4n+1),
#projetos .projects-grid > .project-card:nth-child(4n+2){
  display:flex;
  flex-direction:column;
  grid-column:auto;
  width:100%;
  min-width:0;
  height:100%;
  gap:0;
  text-align:left;
}
#projetos .project-photo{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1.42;
  flex:0 0 auto;
  background:#1b1d1f;
  border:1px solid rgba(255,255,255,.06);
  border-radius:4px;
  overflow:hidden;
}
#projetos .project-photo > img,
#projetos .project-photo > .project-cover-video{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
}
/* Ensaio vertical: preserva rosto/enquadramento no recorte horizontal da vitrine. */
#projetos .project-card:has(img[src*="projeto-jd-barbearia"]) .project-photo > img{
  object-position:center 23%;
}
#projetos .project-photo::after{
  background:linear-gradient(180deg,rgba(0,0,0,.24),transparent 35%,transparent 68%,rgba(0,0,0,.44));
}
#projetos .project-photo .project-tag{
  z-index:2;
  left:12px;top:12px;
  padding:7px 10px;
  background:rgba(11,12,13,.75);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  border-radius:2px;
  max-width:calc(100% - 24px);
  font-size:9px;
  line-height:1.2;
  letter-spacing:.1em;
}
#projetos .project-photo .project-index{
  bottom:12px;left:13px;
  color:#f2eee8;
  font-size:9px;
  letter-spacing:.15em;
}
#projetos .project-info{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex:1;
  gap:12px;
  padding:14px 2px 0;
}
#projetos .project-info > span:first-child{min-width:0;flex:1}
#projetos .project-info h3{
  font-size:clamp(17px,1.55vw,23px);
  line-height:1.17;
  letter-spacing:-.035em;
  font-weight:800;
  min-height:2.34em;
  margin:0 0 8px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
#projetos .project-info p{
  font-size:11px;
  line-height:1.5;
  color:#a6a29f;
  margin:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
#projetos .project-arrow{
  flex:0 0 33px;
  width:33px;height:33px;
  margin-top:0;
  border:1px solid rgba(214,164,118,.45);
  transition:border-color .25s,background .25s,transform .25s;
}
#projetos .project-arrow .ui-arrow{width:14px;height:14px}
#projetos .project-card:hover .project-arrow,
#projetos .project-card:focus-visible .project-arrow{
  border-color:var(--accent);
  background:rgba(214,164,118,.16);
  transform:translate(2px,-2px);
}
#projetos .project-card:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
/* Um convite horizontal discreto depois da vitrine, nao um quinto cartao desproporcional. */
#projetos .projects-grid > .project-invite{
  grid-column:1/-1;
  min-width:0;
  min-height:190px;
  padding:clamp(22px,2.5vw,35px);
  border-color:rgba(214,164,118,.28);
  border-radius:4px;
  gap:15px;
}
#projetos .project-invite-content{gap:7px}
#projetos .project-invite-content strong{font-size:clamp(26px,3.6vw,43px);line-height:1.06}
#projetos .project-invite-description{font-size:12px}
#projetos .project-invite-link{font-size:11px;padding-bottom:7px}
#projetos .projects-grid > .project-invite:only-child{min-height:280px;justify-content:space-between}
@media(min-width:1060px){
  #projetos .projects-grid > .project-invite:not(:only-child){
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto 1fr;
    align-items:center;
  }
  #projetos .projects-grid > .project-invite:not(:only-child) .project-invite-kicker{grid-column:1/-1}
  #projetos .projects-grid > .project-invite:not(:only-child) .project-invite-link{justify-self:end}
}
@media(max-width:1020px){
  #projetos .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:17px;row-gap:32px}
  #projetos .project-info h3{font-size:clamp(17px,2.2vw,23px)}
}
@media(max-width:760px){
  #projetos .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:11px;row-gap:25px}
  #projetos .project-photo{aspect-ratio:1 / 1.04;border-radius:3px}
  #projetos .project-photo .project-tag{left:7px;top:7px;padding:5px 6px;font-size:8px;letter-spacing:0}
  #projetos .project-photo .project-index{display:none}
  #projetos .project-info{padding:10px 1px 0;gap:5px}
  #projetos .project-info h3{font-size:clamp(13px,3.65vw,18px);line-height:1.22;min-height:2.44em;margin:0 0 5px}
  #projetos .project-info p{font-size:10px;line-height:1.45}
  #projetos .project-arrow{flex-basis:24px;width:24px;height:24px}
  #projetos .project-arrow .ui-arrow{width:11px;height:11px}
  #projetos .projects-grid > .project-invite{min-height:195px;padding:22px;gap:12px}
  #projetos .project-invite-content strong{font-size:clamp(29px,7.5vw,41px)}
  #projetos .project-invite-description{font-size:11px}
  #projetos .projects-grid > .project-invite:only-child{min-height:250px}
}
@media(max-width:360px){
  #projetos .projects-grid{column-gap:9px}
  #projetos .project-info h3{font-size:13px}
  #projetos .project-info p{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  #projetos .project-arrow{transition:none}
}