/*
 * pages.css — estilos compartilhados pelas páginas internas (casamentos, servicos,
 * obras, o-artista, a-experiencia, aquarela-personalizada, contato...).
 * Carregado depois de /css/style.css: reaproveita os tokens de :root e classes
 * existentes (.eyebrow, .section-top, .button, .link-arrow, .gold-frame,
 * .artwork-window, .faq, .contact, .empty-frame, .artist-quote, .credentials,
 * .brush-divider, .intro) e adiciona apenas os componentes que a home não tem:
 * hero interna, breadcrumbs, linha do tempo, lista "o que está incluso" e a
 * grade de obras estática (sem o JS de trilho/lightbox da home).
 */

/* ---------- Item 7 do Bloco B (Fase B): ajustes finos herdados de style.css ---------- */

/* Base de .section-top h2 em, em style.css, é o tom pálido de seção escura
   (#bdc3a5 — usado na galeria em fundo verde-floresta). Nas páginas internas,
   sem uma seção escura em .section-top, o padrão correto é o sálvia escuro;
   os poucos overrides locais que já existiam (#758365) continuam válidos. */
.section-top h2 em {
  color: #758365
}

/* Parágrafos do manifesto (.intro), reaproveitado pelas páginas internas:
   largura de leitura + respiro entre parágrafos quando há mais de um. */
.intro > p {
  max-width: 62ch;
  margin-inline: auto
}

.intro > p + p {
  margin-top: 18px
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { margin-bottom: 20px }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7b8a6c
}

.breadcrumbs a {
  color: #7b8a6c;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s
}

.breadcrumbs a:hover { color: var(--ink); border-color: currentColor }

.breadcrumbs li { display: flex; align-items: center }

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin: 0 8px;
  color: #b6bda3
}

.breadcrumbs li[aria-current] { color: var(--ink); font-weight: 600 }

/* ---------- Hero interna (.page-hero) ---------- */
.page-hero {
  display: flex;
  align-items: stretch;
  min-height: 520px;
  background: var(--cream);
  overflow: hidden
}

.page-hero-media {
  position: relative;
  flex: 0 0 45%;
  overflow: hidden
}

/* Absoluta: a altura da hero é definida pelo texto, não pela proporção da pintura. */
.page-hero-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%
}

.page-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 52%, var(--cream) 96%)
}

.page-hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 7%;
  max-width: 680px
}

.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 58px);
  letter-spacing: -1.3px;
  line-height: 1.08;
  margin: 18px 0 20px
}

.page-hero h1 em { font-style: italic; color: #53684c }

.page-hero-description {
  font-size: 15px;
  color: #57614e;
  line-height: 1.9;
  max-width: 46ch
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-top: 6px
}

.page-hero-actions .button { margin-top: 0 }
.page-hero-actions .link-arrow { margin-top: 0 }

@media (max-width: 1050px) {
  .page-hero { min-height: 460px }
  .page-hero-content { padding: 56px 6% }
}

@media (max-width: 700px) {
  .page-hero { flex-direction: column; min-height: 0 }
  .page-hero-media { flex: 0 0 auto; height: 300px }
  .page-hero-veil { background: linear-gradient(180deg, transparent 55%, var(--cream) 97%) }
  .page-hero-content { padding: 32px 6% 46px; max-width: none }
  .page-hero h1 { font-size: 38px }
  .page-hero-actions { gap: 18px }
}

/* ---------- Cabeçalhos de seção — cor do <em> em fundos claros ---------- */
.timeline .section-top h2 em,
.included .section-top h2 em,
.credentials-section .section-top h2 em {
  color: #758365
}

/* ---------- Linha do tempo (.timeline) ---------- */
.timeline { padding: 96px 7% 100px; background: #f6f3e9 }

.timeline-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-width: 820px
}

.timeline-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(82, 99, 64, .16)
}

.timeline-list li:first-child { border-top: none; padding-top: 4px }

.timeline-index {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: #a88c58
}

.timeline-time {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #5d6b4d;
  margin: 0 0 8px
}

.timeline-list p:last-child {
  font-size: 14px;
  color: #4d4a40;
  line-height: 1.85;
  max-width: 52ch;
  margin: 0
}

@media (max-width: 1050px) { .timeline { padding: 74px 6% 78px } }

@media (max-width: 700px) {
  .timeline { padding: 62px 6% 66px }
  .timeline-list li { grid-template-columns: 34px 1fr; gap: 14px; padding: 20px 0 }
}

/* ---------- O que está incluso (.included) ---------- */
.included { padding: 96px 7% 100px; background: #faf8f1 }

.included-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #dcd7c2;
  border: 1px solid #dcd7c2;
  max-width: 1100px
}

.included-list li {
  position: relative;
  background: #faf8f1;
  padding: 28px 30px 28px 48px;
  font-size: 14px;
  line-height: 1.85;
  color: #4d4a40
}

.included-list li::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 1px solid #a88c58;
  transform: rotate(45deg)
}

.included-links {
  margin: 34px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px
}

@media (max-width: 1050px) { .included { padding: 74px 6% 78px } }

@media (max-width: 700px) {
  .included { padding: 62px 6% 66px }
  .included-list { grid-template-columns: 1fr }
  .included-list li { padding: 24px 24px 24px 44px }
}

/* ---------- Obras (.works) — grade estática, sem lightbox ---------- */
.works {
  padding: 96px 7% 100px;
  background: radial-gradient(ellipse at 45% 10%, #334938 0, #1c3027 65%, #1b2d24 100%);
  color: #e9e8d9
}

.works .eyebrow { color: #c6bc98 }

.works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1300px;
  margin: 0 auto
}

.works-grid figure { margin: 0 }

.works-grid figcaption {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px
}

.works-grid .work-number {
  font-size: 10px;
  letter-spacing: 2px;
  color: #bbaa79;
  padding-top: 6px
}

.works-grid figcaption h3 {
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 19px);
  color: #f0e9ce;
  font-weight: 500
}

.works-grid figcaption p {
  font-size: 10px;
  color: #b9bfaa;
  letter-spacing: .2px;
  margin: 6px 0 0;
  line-height: 1.6
}

.works-link {
  margin-top: 44px;
  color: #d7dcc4
}

.works-link:hover { color: #fff }

@media (max-width: 1050px) {
  .works { padding: 74px 6% 78px }
  .works-grid { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 700px) {
  .works { padding: 62px 6% 66px }
  .works-grid { grid-template-columns: 1fr; gap: 34px }
}

/* ---------- Credenciais do artista (.credentials-section) ---------- */
.credentials-section { padding: 98px 7% 100px; background: #f6f3e9 }

.credentials-body { max-width: 760px; margin: 0 auto }

.credentials-body > p {
  font-size: 15px;
  color: #57614e;
  line-height: 1.9;
  margin: 0 0 18px
}

.credentials-body .artist-quote { margin-top: 26px }

.credentials-body .link-arrow { margin-top: 30px }

@media (max-width: 800px) { .credentials-section { padding: 76px 6% 75px } }

@media (max-width: 700px) { .credentials-section { padding: 60px 6% 65px } }

/* ---------- Ajustes de revisão (/casamentos/) ---------- */
/* Legenda fora da moldura, como na galeria da home. */
.works-item { margin: 0 }
.works-item figcaption { margin-top: 16px }

/* Citação do manifesto com medida legível (design.md: 16–20ch em coluna; aqui centralizada). */
.manifesto .pull-quote { max-width: 26ch; margin-inline: auto }

/* Linha do tempo em duas colunas no desktop: título fixo à esquerda, etapas à direita. */
@media (min-width: 1051px) {
  .timeline {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 0 7%;
    align-items: start
  }
  .timeline .section-top { display: block; margin: 0; position: sticky; top: 140px }
  .timeline-list { max-width: none; margin-top: 0 }
}

@media (max-width: 700px) { .manifesto h2 em { display: block } }