/* ==========================================================================
   O Meu Tarot — secções: hero, cabeçalhos de página, prose, Instagram
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------
   Fundo só com CSS + SVG inline: noite, luar, estrelas e mar. Nenhuma
   imagem de fundo, nenhum vídeo — o hero tem de ser leve.                  */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night-1000);
  color: var(--paper);
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(5rem, 12vw, 9rem);
}

/* O emblema do logótipo traz o seu próprio fundo (#010918) e não tem
   transparência — o flood-fill comia a ilustração. Por isso o hero é liso nessa
   zona: nenhum gradiente passa por trás do emblema, senão via-se a aresta do
   rectângulo. A luz quente fica reservada ao horizonte, junto às ondas, e a fria
   ao topo do céu. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Nada de gradiente acima dos 70%: é exactamente aí que está o emblema, e
     qualquer variação de cor por trás dele desenhava a aresta do rectângulo. A
     luz quente fica no horizonte, abaixo. */
  background:
    radial-gradient(60% 18% at 50% 102%, rgba(224, 192, 121, 0.15), transparent 70%),
    linear-gradient(to bottom, var(--night-1000) 0%, var(--night-1000) 70%, #04101F 88%, #071628 100%);
}

.hero__stars {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  width: 100%;
  height: 70%;
  opacity: 0.7;
  pointer-events: none;
}

.hero__waves {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  width: 100%;
  height: clamp(80px, 16vw, 180px);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  text-align: center;
}

/* Proporção natural do recorte (1170×888): sem letterbox e sem espaço morto. */
.hero__emblem {
  width: clamp(260px, 74vw, 520px);
  aspect-ratio: 1170 / 888;
  object-fit: contain;
}

.hero__title {
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 0;
}

.hero__kicker {
  color: var(--gold-400);
  letter-spacing: var(--track-caps);
}

.hero__lead {
  max-width: 26ch;
  font-family: var(--font-serif);
  font-size: var(--t-sub-title);
  line-height: 1.42;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}

.hero__rule { width: min(20rem, 62%); }

.hero__ctas { margin-top: var(--s-3); }

@media (max-width: 27em) {
  .hero__ctas { width: 100%; max-width: 22rem; }
}

/* --- Cabeçalho de página interior --------------------------------------- */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night-900);
  color: var(--paper);
  padding-block: clamp(3.5rem, 10vw, 6.5rem) clamp(3rem, 8vw, 5rem);
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 70% at 22% 0%, rgba(224, 192, 121, 0.1), transparent 70%),
    linear-gradient(to bottom, var(--night-1000), var(--night-900));
}

.page-head__stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}

/* Sem max-width próprio: o contentor é `.wrap--mid`, o mesmo do corpo da página.
   Quando esta regra limitava a 42rem, o `margin-inline: auto` do .wrap centrava
   essa coluna mais estreita e o h1 arrancava 155px à direita do texto que vinha
   logo abaixo. A medida de leitura é imposta ao lead, não ao contentor. */
.page-head__inner {
  display: grid;
  gap: var(--s-4);
}

.page-head__lead {
  max-width: 44ch;
  font-family: var(--font-serif);
  font-size: var(--t-sub-title);
  line-height: 1.46;
  color: var(--paper);
  margin: 0;
}

/* --- Prose (conteúdo do editor: páginas legais, singles) ---------------- */
.prose {
  max-width: 64ch;
  color: var(--fg);
}

.prose > * + * { margin-block-start: var(--s-4); }

.prose h2 {
  font-size: var(--t-block-title);
  margin-block-start: var(--s-7);
}

.prose h3 {
  font-size: var(--t-sub-title);
  margin-block-start: var(--s-6);
}

.prose ul,
.prose ol {
  padding-inline-start: var(--s-5);
  display: grid;
  gap: var(--s-2);
}

.prose li::marker { color: var(--accent-quiet); }

.prose a { color: var(--accent); }

.prose blockquote {
  margin: var(--s-6) 0;
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--accent-quiet);
  font-family: var(--font-serif);
  font-size: var(--t-sub-title);
  line-height: 1.45;
}

.prose strong { color: var(--fg); }

.prose img { border-radius: var(--r-md); margin-block: var(--s-6); }

/* --- Instagram ----------------------------------------------------------
   Sem integração automática: uma secção visual com ligação. Performance
   acima de integração, como pedido.                                        */
.instagram {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  text-align: center;
}

.instagram__handle {
  font-family: var(--font-serif);
  font-size: var(--t-block-title);
  color: var(--gold-400);
  text-decoration: none;
}

.instagram__handle:hover { color: var(--gold-300); }

/* --- Nota de preço / disponibilidade ------------------------------------ */
.availability {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  color: var(--fg-dim);
}

/* --- Arquivo de cartas --------------------------------------------------- */
.archive-empty {
  max-width: 44ch;
  color: var(--fg-dim);
}

/* --- Sobre: retrato / espaço reservado ---------------------------------- */
.portrait {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--gold-500) 26%, transparent);
  background:
    radial-gradient(70% 60% at 50% 20%, rgba(224, 192, 121, 0.1), transparent 72%),
    var(--night-800);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.portrait img { width: 100%; height: 100%; object-fit: cover; }

.portrait__ornament { width: 44%; opacity: 0.5; color: var(--gold-500); }

/* --- 404 ----------------------------------------------------------------- */
.notfound {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}