/*
 * Ajustes solicitados pela cliente em 15/09/2026.
 * Este arquivo não altera os bundles React do site.
 */

/* Nova ordem visual: Festas, Oficinas, Corporativos e Casamentos. */
.pillar-grid > .pillar-card:nth-child(1) {
  order: 1;
}

.pillar-grid > .pillar-card:nth-child(2) {
  order: 3;
}

.pillar-grid > .pillar-card:nth-child(3) {
  order: 2;
}

.pillar-grid > .pillar-card:nth-child(4) {
  order: 4;
}

/*
 * O card inteiro direciona para o WhatsApp. A seta permanece visível como
 * indicação da ação e o contorno de foco mantém a navegação por teclado clara.
 */
.pillar-card {
  cursor: pointer;
}

.pillar-card .pillar-whatsapp-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  border-radius: inherit;
}

.pillar-card .pillar-whatsapp-link:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: -5px;
}

.pillar-card .card-arrow {
  z-index: 6;
  pointer-events: none;
}

/*
 * Enquanto o React termina de montar a página, as imagens novas já ficam
 * visíveis como fundo. Depois da montagem, o JavaScript troca os atributos
 * src/srcset e libera as imagens normalmente.
 */
.services-track > .service-card:nth-child(5) .service-image {
  background-image: url("/assets/service-camarim-fashion-client-20260915.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.services-track > .service-card:nth-child(5) .service-image img {
  opacity: 0;
}

html.malucolandia-updates-ready .services-track > .service-card:nth-child(5) .service-image {
  background-image: none;
}

html.malucolandia-updates-ready .services-track > .service-card:nth-child(5) .service-image img {
  opacity: 1;
}

/* Padronização do respiro vertical nas seções de conteúdo. */
@media (min-width: 761px) {
  .welcome-section,
  .pillars-section,
  .about-section,
  .services-section,
  .reviews-section,
  .clients-section,
  .contact-section {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}

@media (max-width: 760px) {
  .hero-artwork-link picture {
    background-image: url("/assets/kids-day-hero-mobile-client-20260915.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  .hero-artwork-link .hero-artwork {
    opacity: 0;
  }

  html.malucolandia-updates-ready .hero-artwork-link picture {
    background-image: none;
  }

  html.malucolandia-updates-ready .hero-artwork-link .hero-artwork {
    opacity: 1;
  }

  .welcome-section,
  .pillars-section,
  .about-section,
  .services-section,
  .reviews-section,
  .clients-section,
  .contact-section {
    padding-top: 94px;
    padding-bottom: 94px;
  }
}