/* ============================================================
   Cecília Vilas Boas — estilos partilhados por todas as páginas
   Cores, fontes e componentes num só sítio. Edita aqui para
   mudar o aspeto global do site.
   ============================================================ */

/* As fontes (Cormorant Garamond + Jost) são carregadas pelo fonts.css,
   ligado antes deste ficheiro em cada página. */

:root {
  --ink:         #2a2621;  /* texto principal        */
  --muted:       #75705f;  /* texto secundário       */
  --faint:       #9a968a;  /* legendas / detalhes    */
  --accent:      #b5502a;  /* terracota (destaques)  */
  --accent-dark: #8a3c1f;  /* terracota (hover)      */
  --line:        #ece8df;  /* linhas / separadores   */

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  line-height: normal;  /* como no original; os parágrafos definem o seu próprio line-height */
}

a       { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
img     { max-width: 100%; display: block; }

/* ---------- Layout ---------- */
.container        { max-width: 1180px; margin: 0 auto; padding: 70px 48px 140px; }
.container--narrow{ max-width: 680px; text-align: center; padding: 100px 48px 160px; }

/* ---------- Barra de navegação ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 32px;   /* deixa os links passarem para baixo em vez de saírem do ecrã */
  padding: 22px 48px;
}
.nav__brand { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.nav__links { display: flex; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }

/* Ecrãs intermédios: aperta o espaçamento antes de deixar quebrar a linha */
@media (max-width: 1080px) {
  .nav       { padding: 20px 28px; }
  .nav__links{ gap: 20px; }
}
.nav__link {
  font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid transparent;
}
.nav__link:hover          { color: var(--accent); }
.nav__link--active        { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Rodapé ---------- */
.footer {
  border-top: 1px solid var(--line); padding: 36px 48px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; line-height: 1; color: var(--faint); letter-spacing: .04em;
}
.footer a       { color: var(--faint); }
.footer__links  { display: flex; gap: 22px; }

/* ---------- Tipografia auxiliar ---------- */
.eyebrow    { font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.label      { font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.page-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 38px; margin-bottom: 16px; }
.lead       { font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 520px; margin-bottom: 80px; }

/* ---------- Caixa de imagem "placeholder" ----------
   Padrão tracejado usado onde ainda não há foto real.
   Para colocar uma foto, troca a <div class="ph"> por:
   <img src="img/ficheiro.jpg" alt="descrição">                */
.ph {
  background-image: repeating-linear-gradient(135deg,#efece3,#efece3 10px,#f7f5ee 10px,#f7f5ee 20px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 10px;
  color: #a39d8d; font: 11px/1.4 ui-monospace, monospace;
}

/* Imagem real com recorte (obras à venda / destaque) */
.photo { background-size: cover; background-position: center; background-color: #efece3; }

/* ---------- Metadados de obra ---------- */
.art-title { font-family: var(--serif); font-size: 20px; font-style: italic; }
.art-meta  { font-size: 10.5px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }

/* ---------- Grelhas reutilizáveis ---------- */
.grid        { display: grid; gap: 48px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ============================================================
   Secções específicas
   ============================================================ */

/* Home — herói */
.hero        { max-width: 1180px; margin: 0 auto; padding: 64px 48px 0; }
.hero__grid  { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; }
.hero__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1.08; margin: 0 0 22px; }
.quote {
  max-width: 760px; margin: 120px auto; padding: 0 48px; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.5; color: #57524a;
}
.featured       { max-width: 1180px; margin: 0 auto; padding: 0 48px 140px; }
.featured__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 56px; }

/* Loja / Adquirir */
.loja__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 64px 56px; }
.buy        { font-size: 10.5px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--accent); }

/* ---------- Responsivo (telemóvel) ---------- */
@media (max-width: 720px) {
  .nav       { padding: 16px 20px; flex-direction: column; gap: 14px; }
  .container { padding: 40px 20px 80px; }
  .hero, .featured { padding: 32px 20px 60px; }
  .quote     { margin: 70px auto; padding: 0 20px; font-size: 22px; }
  .hero__grid, .featured__grid, .loja__grid,
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr !important; }
  .footer    { padding: 24px 20px; flex-direction: column; gap: 10px; text-align: center; }
}