/**
 * Almoço Companheiro - Estilos customizados
 * Mobile-first, cores: #5bb3a7 (teal), #fc8a39 (laranja), #292929 (dark)
 */

/* Base */
body {
  font-family: 'Nunito', system-ui, sans-serif;
}

/* Backgrounds */
.bg-cream {
  background-color: #f8faf9;
}

.bg-hero-pattern {
  background-color: #b5b5b5;
  background-image: linear-gradient(
    rgba(91, 179, 167, 0.88),
    rgb(255, 255, 255)
  );
  background-repeat: repeat;
  background-position: center;
}

/* Polaroid-style hero image (inclinado) */
.polaroid-hero {
  background: #fff;
  padding: 8px 8px 36px 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07),
    0 10px 25px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(0, 0, 0, 0.1);
  transform: rotate(-3deg);
  max-width: 100%;
}

@media (min-width: 640px) {
  .polaroid-hero {
    padding: 12px 12px 48px 12px;
    transform: rotate(-4deg);
  }
}

.polaroid-inner {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f8f8f8;
}

.polaroid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ilustração no polaroide: object-fit contain para mostrar sem cortar */
.polaroid-img--contain {
  object-fit: contain;
}

/* Botão CTA com animação leve de "salto" */
@keyframes cta-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.btn-cta-bounce {
  animation: cta-float 2.5s ease-in-out infinite;
}

.btn-cta-bounce:hover {
  animation-play-state: paused;
}

/* Respiro entre secções – espaçamento lateral e margem superior */
.section-card {
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .section-card {
    margin-top: 2rem;
  }
}

@media (min-width: 1024px) {
  .section-card {
    margin-top: 2.5rem;
  }
}

/* Cards com imagem e degradé */
.problem-card {
  position: relative;
}

.problem-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.85) 25%,
    rgba(91, 179, 167, 0.5) 60%,
    rgba(91, 179, 167, 0.2) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.problem-card-inner {
  position: relative;
  z-index: 2;
}

/* Card 1: mesa vazia / refeição sozinho */
.problem-card:not(.problem-card-2):not(.problem-card-3) {
  background-image: url('https://plus.unsplash.com/premium_photo-1680086902907-00f970151632?w=800&fm=webp&q=80');
}

/* Card 2: idoso / solidão */
.problem-card-2 {
  background-image: url('https://images.unsplash.com/photo-1680257109069-c504b426b315?w=800&fm=webp&q=80');
}

.problem-card-2::before {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.88) 30%,
    rgba(252, 138, 57, 0.4) 65%,
    rgba(252, 138, 57, 0.15) 100%
  );
}

/* Card 3: família / gerações */
.problem-card-3 {
  background-image: url('https://images.unsplash.com/photo-1584641071614-bb726ea0855e?w=800&fm=webp&q=80');
}

.problem-card-3::before {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.86) 28%,
    rgba(41, 41, 41, 0.4) 62%,
    rgba(41, 41, 41, 0.12) 100%
  );
}