/* =========================
   PÁGINA: Serviços (listagem)
   ========================= */

.listing-section { padding: 80px 0 60px; }
.listing-intro { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.listing-intro h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; }

/* ── Listagem de serviços (imagem alternada) ── */
.services-list { border-bottom: 1px solid var(--light-gray); }
.service-row {
    position: relative;
    display: flex; align-items: center; gap: 60px;
    padding: 56px 0; border-top: 1px solid var(--light-gray);
}
.service-row:nth-child(even) { flex-direction: row-reverse; }
.service-row__media { flex: 0 0 48%; aspect-ratio: 13/10; overflow: hidden; display: block; }
.service-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.service-row:hover .service-row__media img { transform: scale(1.05); }
.service-row__media--empty { background: repeating-linear-gradient(45deg, #eef0f4 0 10px, #e3e6ee 10px 20px); display: flex; align-items: center; justify-content: center; }
.service-row__placeholder { font-family: monospace; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); }
.service-row__body { flex: 1; min-width: 0; }
.service-row__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--primary); margin: 0 0 16px; }
.service-row__desc { font-size: 1.05rem; line-height: 1.6; color: var(--gray); margin: 0 0 24px; max-width: 480px; }
.service-row__more { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--quarternary); transition: gap .3s ease; }
.service-row__more:hover { gap: 14px; }
/* Stretched link: o "Ver detalhes" cobre toda a .service-row, tornando o bloco clicável. */
.service-row__more::after { content: ''; position: absolute; inset: 0; }

.listing-empty { text-align: center; color: #777; padding: 48px 0; }
.load-more-wrapper { text-align: center; margin-top: 40px; }
.btn-load-more { display: inline-block; border: 1px solid currentColor; background: transparent; padding: 12px 28px; border-radius: 999px; font-weight: 600; cursor: pointer; color: var(--primary); text-decoration: none; }
.btn-load-more:hover { background: rgba(0,0,0,.05); }

@media (max-width: 768px) {
    .service-row, .service-row:nth-child(even) { flex-direction: column; align-items: stretch; gap: 24px; padding: 36px 0; }
    .service-row__media { flex: none; width: 100%; }
    .service-row__desc { max-width: none; }
}