/*
 * CSS exclusivo de /obras/. Reaproveita .page-hero, .breadcrumbs, .manifesto.intro,
 * .gold-frame, .artwork-window, .button, .link-arrow, .eyebrow, .empty-frame,
 * .contact, .frame-kicker, .contact-note (style.css / pages.css, leitura apenas).
 * Componentes novos, prefixados: .obras-*.
 */

/* ---------- Selo de acervo (dentro do manifesto) ---------- */
.obras-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 28px;
  padding: 16px 26px;
  border: 1px solid var(--gold);
  background: #fff;
}

.obras-stat strong {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
}

.obras-stat span {
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--sage);
  max-width: 22ch;
  line-height: 1.5;
}

/* Parágrafos do manifesto ficam colados por causa do reset global (p{margin:0}) */
.manifesto.intro p+p { margin-top: 18px }

/* ---------- Índice de âncoras (funciona sem JS) ---------- */
.obras-index {
  max-width: 1300px;
  margin: 0 auto;
  padding: 26px 7%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 34px;
  border-top: 1px solid #ded8c4;
  border-bottom: 1px solid #ded8c4;
}

.obras-index-label {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0;
}

.obras-index nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.obras-index a {
  font-size: 13px;
  letter-spacing: .3px;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .25s, color .25s;
}

.obras-index a:hover { color: var(--gold); border-color: var(--gold) }

/* ---------- Fundos alternados por região (cada uma é um "capítulo") ---------- */
#rio-de-janeiro { background: #faf8f1 }
#regiao-serrana { background: var(--cream) }
#sao-paulo { background: #efe8da }
#florianopolis { background: #faf8f1 }

/* ---------- Seções de região ---------- */
.obras-region { padding: 104px 7% 32px }
#florianopolis { padding-bottom: 100px }

.obras-region-head {
  max-width: 1300px;
  margin: 0 auto 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid #ded8c4;
}

/* Traço dourado curto marca o início de cada capítulo */
.obras-region-head::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--gold);
}

.obras-region-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.obras-region-head h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 500;
  letter-spacing: -.4px;
  color: var(--ink);
}

.obras-region-count {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sage);
  white-space: nowrap;
  border: 1px solid #ded8c4;
  padding: 6px 14px;
}

/* ---------- Grade do acervo: flex em linhas, sem coluna vazia ---------- */
.obras-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 26px;
  max-width: 1300px;
  margin: 0 auto;
}

.obras-figure {
  width: 100%;
  margin: 0;
}

.obras-figure .gold-frame {
  padding: 9px;
  /* sombra mais leve que a da galeria escura, para não pesar sobre o fundo claro */
  box-shadow: 0 10px 26px #00000022, inset 0 0 0 3px #5e4921, inset 0 0 0 4px #d5ba75, inset 0 0 0 6px #6b572f;
}

/* Moldura de proporção uniforme 4:5 com corte central da tela pintada */
.obras-figure .artwork-window {
  height: auto;
  aspect-ratio: 4/5;
  border-width: 2px;
}

.obras-figure .artwork-window img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center;
  display: block;
}

.obras-figure .artwork-window a { display: block; height: 100% }

.obras-cap { margin-top: 14px }

.obras-cap h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.obras-cap p {
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--sage);
  margin: 4px 0 0;
}

/* Ajuste fino de enquadramento, imagem a imagem, para mostrar a tela pintada */
.obras-figure .artwork-window img[src$="villa-la-rochele-sp-2026.webp"] { object-position: 50% 46% }
.obras-figure .artwork-window img[src$="villa-la-rochele-sp-2.webp"] { object-position: 13% 50% }
.obras-figure .artwork-window img[src$="lago-enfesta-rj-2.webp"] { object-position: 0% 50% }
.obras-figure .artwork-window img[src$="espaco-ser-vargem-grande-rj-2025.webp"] { object-position: 50% 34% }
.obras-figure .artwork-window img[src$="kelsey-mansao-alvite-rj-2025.webp"] { object-position: 50% 62% }
.obras-figure .artwork-window img[src$="vale-dos-desejos-petropolis-rj.webp"] { object-position: 50% 0% }
.obras-figure .artwork-window img[src$="sabrina-e-marcos-brasil-imperial-rj.webp"] { object-position: 50% 70% }
.obras-figure .artwork-window img[src$="vitoria-joao-resende-rj.webp"] { object-position: 50% 62% }
.obras-figure .artwork-window img[src$="beatriz-igor-club-med-sp.webp"] { object-position: 50% 20% }
.obras-figure .artwork-window img[src$="kalec-daiane-mosteiro-sao-bento-rj.webp"] { object-position: 50% 25% }
.obras-figure .artwork-window img[src$="bruna-junior-fazenda-santa-barbara-sp.webp"] { object-position: 50% 40% }
.obras-figure .artwork-window img[src$="araraquara-sp.webp"] { object-position: 50% 45% }

/* ---------- Faixa de transição (CTA escura) ---------- */
.obras-cta-band {
  padding: 92px 7%;
  background: radial-gradient(ellipse at 45% 10%, #334938 0, #1c3027 65%, #1b2d24 100%);
  color: #e9e8d9;
  text-align: center;
}

.obras-cta-band .eyebrow { color: #c6bc98 }

.obras-cta-band h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  color: #f5f3ec;
  max-width: 22ch;
  margin: 0 auto;
}

.obras-cta-band h2 em { font-style: italic; color: #d9cf9e }

.obras-cta-band p {
  max-width: 52ch;
  margin: 20px auto 0;
  color: #cfd3bd;
  font-size: 15px;
  line-height: 1.8;
}

.obras-cta-band-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin-top: 32px;
}

.obras-cta-band-links .link-arrow { color: #f0e9ce }
.obras-cta-band-links .link-arrow:hover { color: #fff }

/* ---------- Desktop: grade em 3 colunas ---------- */
@media (min-width: 1051px) {
  .obras-figure { width: calc((100% - 2 * 26px) / 3) }
}

/* ---------- Tablet ---------- */
@media (min-width: 701px) and (max-width: 1050px) {
  .obras-figure { width: calc((100% - 26px) / 2) }
}

@media (max-width: 1050px) {
  .obras-region { padding: 76px 6% 20px }
  #florianopolis { padding-bottom: 76px }
  .obras-cta-band { padding: 70px 6% }
}

@media (max-width: 700px) {
  .obras-region-head { flex-direction: column; align-items: flex-start; gap: 14px }
  .obras-region-head-row { flex-direction: column; align-items: flex-start; gap: 8px }
  .obras-index { padding: 22px 6% }
  .obras-cta-band { padding: 58px 6% }
}