/* ============================================================
   PAGINAS.CSS — quem-somos.html / eventos.html / contato.html
   Reaproveita variáveis e classes de css/styles.css.
   Não redefine cores base — apenas ajustes locais destas páginas.
============================================================ */

/* ----------------------------------------------------------
   Ícones de linha (substituem emojis decorativos)
---------------------------------------------------------- */
.icon-line {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Quem Somos — loja */
.loja-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-cta);
}

/* Quem Somos — B2B / bares */
.bares-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-cta);
}

/* Eventos — programa Bons Encontros */
.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-cta);
}

.programa-regra {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.programa-regra .icon-line {
  color: var(--blue-main);
  margin-top: 2px;
}

.eventos-wa-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Contato */
.contato-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}

.prom-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-cta);
}

.btn-primary .icon-line,
.btn-orange-lg .icon-line {
  color: currentColor;
}

/* ----------------------------------------------------------
   Fotos reais (Unsplash) — molduras com fallback de cor
---------------------------------------------------------- */
.photo-frame {
  display: block;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream-warm);
}

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

/* Quem Somos — #sobre: foto dos tanques */
.sobre-photo {
  max-width: 640px;
  height: 340px;
  margin: 32px auto 0;
  box-shadow: var(--shadow-card);
}

/* Quem Somos — #bares: foto da torneira acima dos cards */
.bares-photo {
  max-width: 1100px;
  height: 320px;
  margin: 0 auto 40px;
  box-shadow: var(--shadow-card);
}

/* Eventos — #eventos: foto do chope sendo servido */
.eventos-photo {
  height: 200px;
  margin: 24px 0 8px;
  border-radius: 16px;
}

/* Footer — crédito de fotos ilustrativas */
.footer-photo-credit {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
}

/* ----------------------------------------------------------
   Responsivo — acompanha os breakpoints de styles.css
---------------------------------------------------------- */
@media (max-width: 1024px) {
  .bares-photo {
    height: 260px;
  }
}

@media (max-width: 768px) {
  .sobre-photo {
    height: 220px;
    margin-top: 24px;
  }
  .bares-photo {
    height: 200px;
    margin-bottom: 28px;
  }
  .eventos-photo {
    height: 160px;
  }
}

@media (max-width: 360px) {
  .sobre-photo {
    height: 180px;
  }
  .bares-photo {
    height: 170px;
  }
}