/* LOLI MASS — layout de proyecto por filas (pb- prefix, no toca style.css) */
/* Un solo contenedor para todo: mismo ancho y mismos bordes en todas las filas (como The Ritual) */
.pblocks{--pb-gap:10px;width:100%;max-width:650px;margin:0 auto;padding:0}
.project-page .project-photos{max-width:650px;gap:10px;padding:0}
.pb{margin-bottom:40px}
.pb-fig{margin:0;line-height:0}
.pb-fig img{display:block;width:100%;height:auto}
.pb-fig figcaption{line-height:1.6;font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
    text-transform:uppercase;color:var(--grey);margin-top:10px}
/* 1 foto / portada: ocupa todo el ancho del contenedor */
.pb-full .pb-fig,.pb-hero .pb-fig{width:100%}
.pb-full .pb-fig img,.pb-hero .pb-fig img{width:100%;height:auto}
/* 2-4 columnas, AUTOMATICO: cada foto crece segun su proporcion (flex-grow = ancho/alto,
   puesto en project.php), asi todas quedan a la misma altura y la fila llena el ancho exacto.
   Sin recortes (object-fit:contain) y responsive. */
.pb-pair,.pb-grid,.pb-quad{display:flex;gap:var(--pb-gap);align-items:flex-start;width:100%}
.pb-pair>.pb-fig,.pb-grid>.pb-fig,.pb-quad>.pb-fig{min-width:0;flex-basis:0}
.pb-pair>.pb-fig>img,.pb-grid>.pb-fig>img,.pb-quad>.pb-fig>img{width:100%;height:auto;object-fit:contain}
.pb-text{max-width:540px;margin-left:auto;margin-right:auto;font-family:var(--serif);font-size:16px;line-height:1.8;color:var(--dark)}
.pb-quote{max-width:640px;margin-left:auto;margin-right:auto;font-family:var(--serif);font-size:24px;line-height:1.4;
    font-style:italic;color:var(--dark);padding:6px 0 6px 20px;border-left:1px solid var(--light)}
.pb-quote cite{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:2px;
    text-transform:uppercase;color:var(--grey);margin-top:14px}
.pb-caption{max-width:540px;margin:0 auto 32px;font-family:var(--mono);font-size:11px;letter-spacing:3px;
    text-transform:uppercase;color:var(--grey);border-top:1px solid var(--light);padding-top:12px}
.pb-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pb-gap);
    border-top:1px solid var(--light);padding-top:18px}
.pb-meta span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.pb-meta b{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--dark)}
@media(max-width:700px){
  .pblocks{--pb-gap:12px}
  .project-page .project-photos{gap:12px}
  .pb{margin-bottom:28px}
  .pb-pair,.pb-grid{flex-direction:column}
  .pb-pair>.pb-fig,.pb-grid>.pb-fig{flex:none!important;width:100%}
  .pb-quad{flex-wrap:wrap}
  .pb-quad>.pb-fig{flex:1 1 calc(50% - var(--pb-gap))!important}
  .pb-quote{font-size:20px}
  .pb-meta{grid-template-columns:repeat(2,1fr)}
}
