/* Estilos de página: case (protótipo case.html). */
/* Case: capa sangrada, ficha técnica + texto, galeria editorial em 12 colunas, próximo case em largura total. */
.c-hero{padding-block:clamp(40px,6vw,88px) clamp(32px,4vw,56px)}
.c-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,88px)}
.c-top a{color:var(--text-2)}
.c-top a:hover{color:var(--state)}
.c-hero h1{margin:0;font-weight:500;font-size:clamp(52px,10vw,168px);line-height:.9;letter-spacing:-.055em}
.c-hero .sub{grid-column:1/8;margin:28px 0 0;font-size:clamp(20px,2vw,28px);line-height:1.25;letter-spacing:-.02em;color:var(--text-2);max-width:30ch}
.c-hero .tags{grid-column:9/13;align-self:end;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.tagx{font-family:var(--f-meta);font-size:14px;letter-spacing:.03em;text-transform:uppercase;border:1px solid var(--border-strong);padding:6px 10px;color:var(--text-2)}
@media (max-width:860px){.c-hero .sub,.c-hero .tags{grid-column:1/-1}.c-hero .tags{justify-content:flex-start;margin-top:24px}}

html,body{overflow-x:clip}
.bleed{margin-inline:calc(var(--margin)*-1)}
@media (min-width:1377px){.bleed{margin-inline:calc((100vw - var(--container))/-2 + 0px)}}
.c-cover .cover{aspect-ratio:21/9}
@media (max-width:700px){.c-cover .cover{aspect-ratio:4/3}}

.img{position:relative;background:var(--c);overflow:hidden}
.img::after{content:attr(data-l);position:absolute;left:14px;bottom:12px;font-family:var(--f-meta);font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--cf,rgba(255,255,255,.55))}

.c-intro{padding-block:clamp(72px,10vw,144px)}
.cspec{grid-column:1/6;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);border-top:2px solid var(--text);align-self:start}
.cspec div{padding-block:16px;border-bottom:1px solid var(--border);min-width:0}
.cspec .s-cli,.cspec .s-srv,.cspec .s-seg{grid-column:1/-1}
.cspec .s-ano,.cspec .s-loc{border-bottom:0}
.cspec dt{font-family:var(--f-meta);font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cspec dd{margin:0;font-size:17px;line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.c-intro .lede{grid-column:7/13}
.c-intro .lede .meta{display:block;margin-bottom:24px}
.c-intro .lede p{margin:0;font-size:clamp(22px,2.3vw,32px);line-height:1.28;letter-spacing:-.022em;font-weight:500;text-wrap:pretty}
@media (max-width:860px){.cspec,.c-intro .lede{grid-column:1/-1}.c-intro .lede{margin-top:56px}}

.chap{padding-block:clamp(72px,10vw,144px)}
.chap .lab{grid-column:1/4}
.chap .txt{grid-column:6/12}
.chap .txt p{margin:0 0 1.1em;font-size:18px;line-height:1.6;color:var(--text-2);max-width:60ch}
.chap .txt p:first-child{font-size:clamp(20px,1.8vw,24px);line-height:1.45;color:var(--text)}
@media (max-width:860px){.chap .lab,.chap .txt{grid-column:1/-1}.chap .txt{margin-top:24px}}

.gal{row-gap:var(--gutter)}
.g-full{grid-column:1/-1;aspect-ratio:16/9}
.g-half{grid-column:span 6;aspect-ratio:4/5}
.g-7{grid-column:1/8;aspect-ratio:16/11}
.g-5{grid-column:8/13;aspect-ratio:4/5;align-self:end}
.g-wide{grid-column:1/-1;aspect-ratio:21/9}
.g-off{grid-column:3/11;aspect-ratio:16/10}
@media (max-width:860px){.gal > *{grid-column:1/-1!important;aspect-ratio:4/3!important}}

/* Imagens reais do portfólio: o ritmo de colunas do protótipo, com cada imagem inteira no formato original (sem corte). */
.img.has-img{background:none;aspect-ratio:auto}
.img.has-img::after{content:none}
.img.has-img img{display:block;width:100%;height:auto}
@media (max-width:860px){.gal > .img.has-img{aspect-ratio:auto!important}}

/* Texto dos capítulos vindo do editor: vários parágrafos, subtítulos e listas. */
.c-intro .lede p + p{margin-top:.8em}
.chap .txt h3,.chap .txt h4{margin:1.6em 0 .6em;font-size:clamp(19px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;color:var(--text)}
.chap .txt ul,.chap .txt ol{margin:0 0 1.1em;padding-left:1.2em;font-size:18px;line-height:1.6;color:var(--text-2);max-width:60ch}
.chap .txt a,.c-intro .lede a{border-bottom:1px solid var(--border-strong)}
.chap .txt a:hover,.c-intro .lede a:hover{color:var(--state);border-color:var(--state)}

.pull{padding-block:clamp(120px,16vw,240px)}
.pull blockquote{margin:0 auto;max-width:20ch;text-align:center;font-weight:500;font-size:clamp(34px,4.8vw,76px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.pull .meta{display:block;text-align:center;margin-top:28px}

.next{display:block;border-top:1px solid var(--border);padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(64px,8vw,112px)}
.next .row1{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.next h2{margin:20px 0 clamp(28px,4vw,48px);font-weight:500;font-size:clamp(48px,9vw,152px);line-height:.9;letter-spacing:-.055em;transition:color .3s var(--ease)}
.next .cover{aspect-ratio:21/8}
.next:hover h2{color:var(--text-2)}
.next:hover .ph{transform:scale(1.035)}
.next .arrow{display:inline-block;transition:transform .5s var(--ease-soft)}
.next:hover .arrow{transform:translateX(10px)}