/*
 * p-contato.css — componentes exclusivos da página /contato/.
 * Depende de style.css e pages.css (tokens, .eyebrow, .page-hero, .section-top,
 * .gold-frame, .artwork-window, .included, .button, .link-arrow, .contact,
 * .empty-frame, .faq já carregados antes). Hero e CTA final usam o padrão
 * compartilhado (.page-hero / .contact) sem overrides — ver casamentos/aniversarios.
 */

/* ---------- Ajuste da lista "antes de escrever" ---------- */
/* Losango com mais respiro do texto e alinhado à primeira linha (vale em qualquer largura) */
#preparar .included-list li { padding-left: 66px }
#preparar .included-list li::before { top: 35px }

/* Em ≤700px o padding-top do li cai para 24px (pages.css); reajusta o alinhamento vertical */
@media (max-width: 700px) {
  #preparar .included-list li::before { top: 31px }
}

/* Abaixo de 1051px mantém o recorte estreito original */
@media (max-width: 1050px) {
  #preparar .included-list { max-width: 900px }
}

/* No desktop usa a mesma largura e centralização de .section-top/.contato-cards
   (1240px, centralizada), eliminando o vazio à direita da seção.
   4 colunas (1 item por célula) para não sobrar ar: o texto ocupa 3-4 linhas
   em vez de ficar solto numa única linha larga. */
@media (min-width: 1051px) {
  #preparar .included-list {
    max-width: 1240px;
    margin-inline: auto;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Cartões por tipo de ocasião (.contato-cards) ---------- */
.contato-tipos { padding: 96px 7% 100px; background: #f6f3e9 }

/* Itálico no mesmo tom sálvia usado em .services/.faq/.artist */
.contato-tipos .section-top h2 em { color: #758365 }

@media (min-width: 1051px) {
  .contato-tipos .section-top { margin-bottom: 48px }
}

/* Grade com divisória de 1px em qualquer largura, igual ao padrão de
   .included-list/.services-grid/.testimonials-grid (style.css). */
.contato-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: #dcd7c2;
  border: 1px solid #dcd7c2;
  max-width: 1240px;
  margin: 0 auto;
}

.contato-card {
  background: #fbf8ef;
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: background .3s;
}

.contato-card:hover { background: #fcfbf5 }

.contato-card h3 {
  font-size: 25px;
  letter-spacing: -.3px;
  margin-bottom: 12px;
}

.contato-card p {
  font-size: 14px;
  line-height: 1.85;
  color: #6d7360;
  margin-bottom: 24px;
}

.contato-card .button {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 700px) {
  .contato-tipos { padding: 60px 6% 66px }
  .contato-card { text-align: center }
  .contato-card .button { align-self: center }
}

/* 701–1050px: 2 colunas, mesma regra de .services-grid/.testimonials-grid;
   o 5º cartão (Aquarela) ocupa as 2 colunas para fechar a última linha. */
@media (max-width: 1050px) and (min-width: 701px) {
  .contato-tipos { padding: 74px 6% 78px }
  .contato-cards { grid-template-columns: repeat(2, 1fr) }
  .contato-card:nth-child(5) { grid-column: span 2 }
}

/* No desktop, 6 colunas: 3 primeiros cartões ocupam 2 colunas cada (linha
   cheia), os 2 últimos ocupam 3 colunas cada (linha cheia) — sem célula vazia. */
@media (min-width: 1051px) {
  .contato-cards { grid-template-columns: repeat(6, 1fr) }
  .contato-card { padding: 38px 34px 34px }
  .contato-card:nth-child(-n+3) { grid-column: span 2 }
  .contato-card:nth-child(n+4) { grid-column: span 3 }
}

/* ---------- Mini-FAQ desta página ---------- */
#faq.faq h2 em { color: #758365 }