/* Capa: carrossel de divulgações, Notícias, banner de filiação, Notas e Comunicados. Só carrega na capa. */

/* Carrossel. Sem JavaScript o trilho rola de lado com encaixe; com carrossel.js (classe carrossel--ativo) os slides
   andam por transform, com a mesma transição na troca automática, nos pontos e ao soltar o arrasto. */
.carrossel { margin-top: clamp(16px, 2.5vw, 28px); }
.carrossel-trilho { display: flex; overflow-x: auto; background: var(--paper-2); scroll-snap-type: x mandatory; scrollbar-width: none; }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
/* A arte aparece inteira em qualquer proporção (16:9 do YouTube, quadrada do Instagram, 16:7 do banner): o que sobra nas
   laterais, ou em cima e embaixo, é preenchido com a própria arte, desfocada (--fundo vem do carrossel.php). */
.slide-conteudo { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--ground); color: inherit; text-decoration: none; }
.slide-conteudo::before { content: ""; position: absolute; inset: -24px; background: var(--fundo, none) center / cover no-repeat; filter: blur(16px) brightness(.9); }
.slide-img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.slide-botao { position: absolute; right: clamp(12px, 2.5vw, 28px); bottom: clamp(12px, 2.5vw, 24px); padding: 11px 28px 11px 14px; background: var(--yellow); color: var(--ink); font: 500 .9rem/1 var(--text); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
/* Slide de matéria (sem arte própria): a foto cobre o quadro e o título fica por cima, sobre uma sombra que o deixa legível em qualquer foto. */
.slide-conteudo--foto::before { display: none; }
.slide-conteudo--foto .slide-img { position: absolute; inset: 0; object-fit: cover; object-position: 50% 30%; }
.slide-conteudo--foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 30, 10, .88) 0, rgba(0, 30, 10, .55) 34%, rgba(0, 30, 10, 0) 68%); }
.slide-texto { position: absolute; bottom: clamp(14px, 3vw, 34px); left: clamp(14px, 3vw, 40px); z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 1vw, 12px); max-width: min(58%, 30ch); color: var(--paper); }
.slide-titulo { display: -webkit-box; overflow: hidden; font: 400 clamp(1rem, .45rem + 2.6vw, 3rem)/1.04 var(--display); letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 20, 8, .5); -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; } /* título muito longo corta com reticências em vez de passar do quadro */
.slide-conteudo--foto .slide-botao { z-index: 1; }
/* No celular o quadro é baixo (16:7): só a foto e o título, em até três linhas e mais largo para quebrar menos. */
@media (max-width: 559.98px) { .slide-texto { max-width: min(88%, 34ch); } .slide-texto .chip { display: none; } .slide-conteudo--foto .slide-botao { display: none; } .slide-titulo { -webkit-line-clamp: 3; line-clamp: 3; } }
a.slide-conteudo:focus-visible { outline: 4px solid var(--yellow); outline-offset: -4px; }
a.slide-conteudo:focus-visible::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--ink); pointer-events: none; }

.carrossel--ativo .carrossel-trilho { overflow: hidden; scroll-snap-type: none; cursor: grab; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.carrossel--ativo .carrossel-trilho > * { transform: translate3d(var(--desloc, 0), 0, 0); transition: transform var(--duracao, 500ms) var(--curva, cubic-bezier(0.25, 0.8, 0.25, 1)); }
.carrossel--ativo .carrossel--sem-transicao > *, .carrossel--ativo .carrossel--arrastando > * { transition: none; }
.carrossel--ativo .carrossel--arrastando { cursor: grabbing; }
.carrossel--ativo img { -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) {
	.carrossel--ativo .carrossel-trilho > * { transition-duration: var(--duracao, 200ms); }
}

/* Controles abaixo da arte, para não cobrir o texto das divulgações. */
.carrossel-controles { display: none; align-items: center; justify-content: center; gap: 4px; padding-top: 8px; }
.js .carrossel-controles { display: flex; visibility: hidden; } /* o espaço já fica reservado: sem JS não há controles, e o carrossel.js os revela sem empurrar a página */
.carrossel--ativo .carrossel-controles { visibility: visible; }
.c-botao { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.c-botao:hover { background: var(--paper-2); }
.c-pausa .c-icone-tocar, .c-pausa[data-pausado] .c-icone-pausa { display: none; }
.c-pausa[data-pausado] .c-icone-tocar { display: block; }
.carrossel-pontos { display: flex; }
.carrossel__ponto { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.carrossel__ponto::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; }
.carrossel__ponto[aria-current="true"]::before { background: var(--ink); }

/* Blocos: cada título é uma aba de pasta sobre uma linha grossa. */
.bloco { padding-top: var(--gap); }
.bloco-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 3px solid var(--ink); }
.aba { display: inline-block; padding: 13px 34px 11px 18px; background: var(--ink); color: var(--paper); font: 400 clamp(1.3rem, 1.1rem + .7vw, 1.7rem)/1 var(--display); letter-spacing: -.01em; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%); }
.bloco-mais { padding-bottom: 10px; font: 500 .95rem/1 var(--text); text-decoration: none; white-space: nowrap; }
.bloco-mais:hover { text-decoration: underline; text-underline-offset: .2em; }

/* Notícias: uma em destaque e cinco em lista */
.noticias-grade { display: grid; gap: 32px; margin-top: 28px; }
.destaque { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.destaque-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.destaque-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: scale .35s; }
.destaque:hover .destaque-img img { scale: 1.02; }
.destaque-corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.destaque-titulo { font: 400 clamp(1.9rem, 1.3rem + 2.2vw, 3rem)/1.02 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.destaque-titulo a, .compacto-titulo a, .doc-titulo { text-decoration: none; }
.destaque-titulo a:hover, .compacto-titulo a:hover, .doc-titulo:hover { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .15em; }
.destaque-resumo { max-width: 56ch; color: var(--soft); }
.compactos { display: grid; align-content: start; min-width: 0; }
.compacto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding-block: 16px; border-bottom: 4px dotted var(--line); }
.compacto:first-child { padding-top: 0; }
.compacto:last-child { border-bottom: 0; padding-bottom: 0; }
.compacto-corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.compacto-titulo { font: 500 1.05rem/1.3 var(--text); }
.compacto-img { display: block; align-self: start; width: 104px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.compacto-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 900px) { .noticias-grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px; } }

/* Banner de filiação: faixa verde com as bordas de papel recortado */
.cta { position: relative; margin-top: var(--gap); padding-block: clamp(60px, 8vw, 100px); background: var(--ground); color: var(--paper); }
.cta::before, .cta::after { content: ""; position: absolute; right: 0; left: 0; height: 14px; }
.cta::before { top: 0; background: var(--scallop-down) repeat-x; }
.cta::after { bottom: 0; background: var(--scallop) repeat-x; }
.cta-grade { display: grid; gap: 32px 56px; align-items: center; }
.cta-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 46rem; }
.cta-titulo { font: 400 clamp(2.1rem, 1.3rem + 3.4vw, 4rem)/.98 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.cta-desc { max-width: 50ch; color: var(--leaf); font-size: var(--s-lead); line-height: 1.35; }
/* Sem foto, o selo do sindicato aparece como marca d'água, como um carimbo no canto. */
.cta-grade:not(.cta-grade--foto) { position: relative; }
.cta-grade:not(.cta-grade--foto)::after { content: ""; position: absolute; top: 50%; right: 0; width: clamp(110px, 20vw, 250px); aspect-ratio: 1; translate: 0 -50%; rotate: -8deg; background: url(../img/logo.webp) center / contain no-repeat; opacity: .2; pointer-events: none; }
@media (max-width: 699.98px) { .cta-grade:not(.cta-grade--foto)::after { display: none; } }
.cta-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; border: 8px solid var(--paper); object-fit: cover; rotate: 1.2deg; }
@media (min-width: 900px) { .cta-grade--foto { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }

/* Notas e Comunicados: painéis de papel com a lista de documentos separada por linha pontilhada */
.documentos { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); padding-top: var(--gap); }
.doc { padding-bottom: 10px; background: var(--paper-2); }
.doc .bloco-cab { padding-right: 18px; }
.doc-lista { margin: 0; padding: 4px 20px 0; list-style: none; }
.doc-item { display: grid; gap: 5px; padding: 16px 0; border-bottom: 4px dotted var(--line); }
.doc-item:last-child { border-bottom: 0; }
.doc-data { color: var(--soft); font: 500 var(--s-small)/1 var(--text); }
.doc-titulo { font: 400 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.15 var(--display); letter-spacing: -.01em; }