/* Pastelaria Aurora — Page-specific layout */

/* ---------- Hero (Home) ---------- */
.hero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}

@media (min-width: 56rem) {
  .hero { min-height: 88svh; }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 22, 18, 0.82) 0%, rgba(18, 22, 18, 0.45) 45%, rgba(18, 22, 18, 0.08) 75%);
}

.hero__content {
  padding-block: var(--space-2xl) var(--space-xl);
  max-width: 42rem;
}

.hero h1 { color: var(--color-white); margin-block: var(--space-sm); }
.hero__lede { font-size: var(--fs-md); max-width: 34rem; margin-bottom: var(--space-lg); color: rgba(255, 253, 248, 0.94); }
.hero__meta { margin-top: var(--space-md); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.03em; }
.hero .eyebrow { color: var(--color-gold); }

/* ---------- Page hero (internal pages) ---------- */
.page-hero {
  background: var(--color-green);
  color: var(--color-white);
  padding-block: var(--space-xl) var(--space-2xl);
}
.page-hero h1 { color: var(--color-white); margin-top: var(--space-2xs); }
.page-hero__lede { max-width: 42rem; font-size: var(--fs-md); color: rgba(255, 253, 248, 0.92); margin-top: var(--space-sm); }
.page-hero .breadcrumbs a,
.page-hero .breadcrumbs li { color: rgba(255, 253, 248, 0.75); }
.page-hero .breadcrumbs [aria-current="page"] { color: var(--color-gold); }

/* ---------- Product hero split (Foto 07) ---------- */
.product-hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.product-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product-hero__text h2 { margin-block: var(--space-xs) var(--space-sm); }

/* ---------- Before / after (história) ---------- */
.before-after {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .before-after { grid-template-columns: 1fr 1fr; }
}
.before-after figure { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.before-after img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.before-after figcaption {
  position: absolute;
  top: var(--space-sm); left: var(--space-sm);
  background: var(--color-cafe);
  color: var(--color-white);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- CTA final ---------- */
.cta-final {
  text-align: center;
  padding-block: var(--space-2xl);
}
.cta-final h2 { max-width: 40rem; margin-inline: auto; }
.cta-final .cluster { justify-content: center; margin-top: var(--space-lg); }

/* ---------- 404 ---------- */
.error-page {
  min-height: 60svh;
  display: flex;
  align-items: center;
  text-align: center;
  padding-block: var(--space-3xl);
}
.error-page__inner { max-width: 34rem; margin-inline: auto; }
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 7rem);
  color: var(--color-gold);
  line-height: 1;
}

/* ---------- Legal / prose pages ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.prose h3 { margin-top: var(--space-lg); margin-bottom: var(--space-2xs); }
.prose p, .prose li { margin-top: var(--space-sm); color: var(--color-text); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--color-terracota); }

/* ---------- Utilities ---------- */
.u-text-center { text-align: center; }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.placeholder-note {
  display: inline-block;
  background: var(--color-cream);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.6rem;
  font-size: var(--fs-xs);
  font-style: italic;
}