/*
 * p-pintura-por-encomenda.css — componentes exclusivos da página /pintura-por-encomenda/.
 * Depende de style.css e pages.css (tokens, .eyebrow, .section-top, .gold-frame,
 * .artwork-window, .link-arrow, .empty-frame já carregados antes).
 */

/* Correção do coordenador: em fundo claro o <em> herdado de .section-top (para fundo escuro) fica pálido demais. */
.encomenda-processo .section-top h2 em,
.encomenda-composicao .section-top h2 em {
  color: #758365;
}

/* Correção do coordenador: parágrafos seguidos do manifesto sem espaço entre si (p tem margin:0 no reset global). */
.manifesto.intro > p + p {
  margin-top: 18px;
}

/* ---------- Como funciona (.encomenda-processo) — 3 cartões ligados por traço ---------- */
.encomenda-processo { padding: 98px 7% 104px; background: #faf8f1 }

.encomenda-processo-list {
  position: relative;
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.encomenda-processo-list::before {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
  background: #d7cfae;
  z-index: 0;
}

.encomenda-processo-list li { position: relative; z-index: 1; padding-top: 0 }

.encomenda-processo-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #faf8f1;
  border: 1px solid var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin: 0 0 22px;
}

.encomenda-processo-list h3 {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 22px);
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 8px;
}

.encomenda-processo-list p {
  font-size: 15px;
  line-height: 1.75;
  color: #57614e;
  max-width: 42ch;
  margin: 0;
}

@media (max-width: 1050px) { .encomenda-processo { padding: 76px 6% 80px } }

@media (max-width: 700px) {
  .encomenda-processo { padding: 62px 6% 66px }
  .encomenda-processo-list {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-left: 22px;
  }
  .encomenda-processo-list::before {
    top: 0;
    bottom: 0;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .encomenda-processo-num { width: 40px; height: 40px; margin-left: -22px; margin-bottom: 16px }
}

/* ---------- Da foto à tela (.encomenda-composicao) ---------- */
/* Fundo papel quente para criar um capítulo entre as duas seções de tom claro vizinhas. */
.encomenda-composicao { padding: 100px 7% 106px; background: #efe8da }

.encomenda-composicao-grid {
  margin: 52px auto 0;
  max-width: 1020px;
  display: grid;
  grid-template-columns: minmax(220px, 340px) 56px minmax(260px, 400px);
  align-items: center;
  gap: 8px;
}

.encomenda-photo-card {
  background: #fffdf7;
  padding: 18px 18px 56px;
  box-shadow: 0 18px 36px rgba(38, 61, 50, 0.16);
  transform: rotate(-2.5deg);
  justify-self: center;
}

.encomenda-photo-card-inner {
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(135deg, #eee9da 0 2px, #f5f2e6 2px 14px);
  border: 6px solid #efe8da;
  box-shadow: inset 0 0 0 1px #d7cfae;
}

.encomenda-photo-card-label {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: #6b6656;
}

.encomenda-composicao-arrow {
  justify-self: center;
  font-family: var(--serif);
  font-size: 30px;
  color: var(--gold);
}

.encomenda-composicao-grid figure { margin: 0; justify-self: center }

.encomenda-composicao-grid figcaption {
  margin-top: 16px;
  font-size: 14px;
  color: #57614e;
  text-align: center;
  max-width: 32ch;
  margin-inline: auto;
}

@media (max-width: 1050px) { .encomenda-composicao { padding: 78px 6% 82px } }

@media (max-width: 800px) {
  .encomenda-composicao-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 28px;
  }
  .encomenda-composicao-arrow { transform: rotate(90deg) }
}

/* Efeito próprio: a composição "foto → seta → quadro" revela-se em sequência
   (cartão, depois seta, depois pintura), sobre o fade compartilhado que o
   fx-reveal já aplica na section inteira — não duplica, só escalona os
   filhos com transition-delay. Sem JS/.js em <html>, tudo já vem visível. */
.js .fx-reveal-target .encomenda-composicao-grid > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .fx-reveal-target .encomenda-composicao-grid > *:nth-child(2) { transition-delay: .16s }
.js .fx-reveal-target .encomenda-composicao-grid > *:nth-child(3) { transition-delay: .32s }
.js .fx-reveal-target.fx-visible .encomenda-composicao-grid > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .fx-reveal-target .encomenda-composicao-grid > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- O traço do artista (.encomenda-traco) ---------- */
.encomenda-traco { padding: 100px 7% 104px; background: #f6f3e9 }

.encomenda-traco-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

.encomenda-traco-text p { font-size: 15px; line-height: 1.8; color: #4d4a40; margin-top: 22px; max-width: 52ch }
.encomenda-traco-text p + p { margin-top: 18px }
.encomenda-traco-text h2 { font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -1px; margin: 16px 0 4px }
.encomenda-traco-text .link-arrow { margin-top: 26px }

.encomenda-traco-figure { margin: 0; max-width: 320px; justify-self: center }
.encomenda-traco-figure figcaption { margin-top: 14px; font-size: 13px; color: #6b6656; max-width: 34ch }

@media (max-width: 1050px) {
  .encomenda-traco { padding: 78px 6% 82px }
  .encomenda-traco-grid { grid-template-columns: 1fr; gap: 40px; text-align: left }
  .encomenda-traco-figure { justify-self: start }
}

/* ---------- Para quem é (.encomenda-para-quem) ---------- */
.encomenda-para-quem {
  padding: 104px 7%;
  background: radial-gradient(ellipse at 45% 10%, #334938 0, #1c3027 65%, #1b2d24 100%);
  color: #e9e8d9;
  text-align: center;
}

/* Empilhado e centralizado por padrão (mobile/tablet); vira duas colunas no desktop. */
.encomenda-para-quem-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

.encomenda-para-quem .eyebrow { color: #c6bc98 }
.encomenda-para-quem h2 { color: #f0e9ce; margin: 16px 0 22px }

.encomenda-para-quem p {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.85;
  color: #cfd3bd;
}

.encomenda-para-quem-figure { margin: 0; width: 100%; max-width: 300px }

/* Foco no quadro emoldurado: mesmo enquadramento já validado para esta foto em outras páginas. */
.encomenda-para-quem-figure .artwork-window > img,
.encomenda-para-quem-figure .artwork-window > :where(picture) > img { object-position: 50% 35% }

@media (max-width: 1050px) { .encomenda-para-quem { padding: 78px 6% } }

/* Desktop: texto à esquerda com largura de leitura + obra emoldurada do outro lado. */
@media (min-width: 1051px) {
  .encomenda-para-quem { text-align: left }

  .encomenda-para-quem-grid {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 72px;
    max-width: 1180px;
    margin: 0 auto;
  }

  .encomenda-para-quem-text { max-width: 640px; flex: 1 1 auto }
  .encomenda-para-quem-text p { margin: 0; max-width: 60ch }

  /* Título no mesmo porte do resto da página — antes ficava pequeno por falta de tamanho explícito. */
  .encomenda-para-quem-text h2 {
    font-size: clamp(32px, 3.6vw, 46px);
    letter-spacing: -1px;
    line-height: 1.15;
  }

  .encomenda-para-quem-figure { flex: 0 0 320px; max-width: 320px }
}

/* ---------- Continue conhecendo (.encomenda-links) ---------- */
/* Faixa com respiro editorial: linha fina dourada emoldura a fileira de links. */
.encomenda-links {
  padding: 100px 7% 104px;
  background: var(--cream);
  text-align: center;
}
.encomenda-links .eyebrow { display: block; text-align: center; margin-bottom: 24px }

.encomenda-links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 0;
  max-width: 900px;
  margin: 0 auto;
  padding: 34px 0;
  border-top: 1px solid rgba(168, 140, 88, .35);
  border-bottom: 1px solid rgba(168, 140, 88, .35);
}

.encomenda-links-list a { padding: 0 28px }

/* Divisórias verticais finas entre os links, no padrão dos passos numerados da home. */
.encomenda-links-list a:not(:first-child) { border-left: 1px solid rgba(130, 110, 70, .22) }

@media (max-width: 1050px) { .encomenda-links { padding: 80px 6% 84px } }

@media (max-width: 700px) {
  .encomenda-links-list { flex-direction: column; gap: 16px }
  .encomenda-links-list a { padding: 0 }
  .encomenda-links-list a:not(:first-child) { border-left: none }
}

/* Revisão do coordenador: cartão-foto com largura real (antes encolhia para ~100px). */
.encomenda-photo-card { width: min(260px, 100%); padding: 16px 16px 48px }
.encomenda-photo-card-inner { width: 100%; aspect-ratio: 4 / 5 }
@media (max-width: 700px) { .encomenda-photo-card { width: min(220px, 80%) } }