/* /sobre: complementos do molde (pages.css). Tudo com clamp e teto. */

/* manifesto: frase de abertura grande + texto corrido */
.so-manifesto{min-width:0}
.so-big{margin:0;font-family:'Pylons Title',system-ui,sans-serif!important;font-size:clamp(24px,2.3vw,40px);line-height:1.18;letter-spacing:-.015em;color:var(--ink);max-width:28ch;text-wrap:balance}
.so-prose{margin-top:clamp(28px,3vw,48px)}
.so-prose p{margin:0}
.so-prose p+p{margin-top:1.1em}

/* princípios: frases inteiras, então um corpo um pouco menor que a lista de palavras da home */
.so-principles{gap:clamp(8px,1vw,16px)}
.so-principles .t{font-size:clamp(21px,1.9vw,32px);line-height:1.15;max-width:30ch;display:block}
.so-principles li{padding:clamp(10px,1vw,16px) 0}

/* parede de clientes */
.so-clients{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
.so-clients li{min-width:0}
.so-clients a{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(12px,1.1vw,18px);align-items:center;height:100%;padding:clamp(10px,1vw,14px);border-radius:var(--r-md);background:var(--card-soft);color:inherit;text-decoration:none;transition:background .3s,transform .5s var(--ease)}
.so-clients a:hover{background:var(--card);transform:translateY(-3px)}
.so-c-img{grid-row:1/3;width:clamp(56px,4.6vw,76px);aspect-ratio:1;border-radius:calc(var(--r-md) - 4px);overflow:hidden;background:var(--card)}
.so-c-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.so-clients a:hover .so-c-img img{transform:scale(1.08)}
.so-c-name{align-self:end;font-size:clamp(17px,1.25vw,22px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.so-c-seg{align-self:start;margin-top:6px;font-family:var(--mono)!important;font-size:var(--fs-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--body);line-height:1.3}
@media (max-width:1100px){.so-clients{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.so-clients{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){
  .so-clients a{grid-template-columns:1fr;grid-template-rows:auto;row-gap:10px;align-items:start}
  .so-c-img{grid-row:auto;width:100%;aspect-ratio:16/10}
  .so-c-name{align-self:start;font-size:16px}
  .so-c-seg{margin-top:-4px}
}

/* galeria: imagens retrato do estúdio ficam melhor um pouco mais altas */
.pg--sobre #estudio .pg-gallery figure:not(.is-two-thirds) img{--ar:4/5}
.pg--sobre #estudio .pg-gallery figure.is-two-thirds img{--ar:auto;aspect-ratio:auto;height:100%;max-height:none}
.pg--sobre #estudio .pg-gallery figure.is-two-thirds{display:flex;flex-direction:column}
.pg--sobre #estudio .pg-gallery figure.is-two-thirds img{flex:1;min-height:0;object-fit:cover}
@media (max-width:900px){.pg--sobre #estudio .pg-gallery figure.is-two-thirds img{aspect-ratio:16/10;flex:none}}

/* linha invertida: a imagem continua na coluna larga (o molde deixava a imagem na coluna estreita) */
@media (min-width:901px){.pg--sobre .pg-row--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

@media (max-width:560px){.pg--sobre #estudio .pg-gallery figure:not(.is-two-thirds){grid-column:span 6}.pg--sobre #estudio .pg-gallery figcaption{font-size:10px}}