/* Sections: intro, section headings, ribbon, process, gallery and final CTA. */

/* ---------- Intro (#sobre) ---------- */

.intro-grid { display: grid; gap: var(--space-8); }
.intro-copy .section-title { margin-bottom: var(--space-6); }
.intro-copy p { color: var(--muted); font-size: var(--fs-lg); }
.intro-copy p + p { margin-top: var(--space-4); }

/* Mobile: blocks stack, each separated by a hairline. */
.intro-grid > * + * { padding-top: var(--space-6); border-top: 1px solid var(--line); }

.intro-stat { display: grid; gap: var(--space-2); justify-items: start; }
.intro-stat strong {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 0.85;
  color: var(--text);
}
.intro-stat span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 960px) {
  .intro-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
  .intro .section-label { grid-column: 1 / span 3; }
  .intro-copy { grid-column: 4 / span 6; }
  .intro-stat { grid-column: 10 / span 3; }
  .intro-grid > * + * { padding-top: 0; border-top: 0; }
  .intro-stat { padding-left: var(--space-6); border-left: 1px solid var(--line); }
}

/* ---------- Section headings ---------- */

/* Stack: label, title, paragraph. */
.section-heading,
.gallery-heading > div { display: grid; gap: var(--space-4); }
.section-heading { margin-bottom: var(--space-12); }
.section-heading > p { max-width: 40ch; color: var(--muted); font-size: var(--fs-lg); }

/* Gallery: title block first, link pushed to the end on desktop. */
.gallery-heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }

@media (min-width: 960px) {
  .gallery-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* ---------- Ribbon ticker ---------- */

.ribbon { overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-2); }

.ribbon-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding-block: var(--space-4);
}

/* Margins, not gap, keep the -50% loop seamless. */
.ribbon-track > * { margin-inline: var(--space-6); }

.ribbon-track span {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ribbon-track i { font-style: normal; font-size: var(--fs-lg); color: var(--ember); }

@media (prefers-reduced-motion: no-preference) {
  /* 30s, written as a multiple of the shared slow duration token. */
  .ribbon-track { animation: marquee calc(var(--dur-slow) * 25) linear infinite; }
}

/* ---------- Process (#processo) ---------- */

.process-grid { display: grid; gap: var(--space-12); }
.process-head { display: grid; gap: var(--space-4); }

/* Timeline: --gutter is shared with the item nodes. */
.process-list {
  --gutter: var(--space-8);
  position: relative;
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding: 0 0 0 var(--gutter);
  list-style: none;
}

/* Track (::before) and progress fill (::after) share the left edge.
   --progress is written on the list by timeline.js. */
.process-list::before,
.process-list::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  transform-origin: top;
}
.process-list::before { background: var(--line); }
.process-list::after {
  background: linear-gradient(var(--ember), var(--steel));
  transform: scaleY(var(--progress, 0));
  transition: transform var(--dur-fast) var(--ease-out);
}

.process-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* Node sits on the track, centred on the index numeral. */
.process-item::before {
  content: "";
  position: absolute;
  top: calc(var(--fs-h2) * 0.5 - 0.3rem);
  left: calc(var(--gutter) * -1 - 0.3rem);
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
}

.process-index {
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1;
  color: var(--ember);
}
.process-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}
.process-item p { margin-top: var(--space-2); color: var(--muted); }

@media (min-width: 960px) {
  .process-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-16);
    align-items: start;
  }
  .process-head { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
}

/* ---------- Gallery bento ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 14rem;
  gap: var(--space-4);
}

.gallery-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Caption: mono label pinned bottom-left on a dark backdrop. */
.gallery-tile figcaption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.gallery-art { position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease-out); }

@media (hover: hover) {
  .gallery-tile:hover .gallery-art { transform: scale(1.04); }
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 16rem;
  }
  .gallery-tile--tall { grid-row: span 2; }
  .gallery-tile--wide { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 19rem;
  }
  .gallery-tile--wide { grid-column: 2 / span 2; }
}

/* ---------- Gallery artwork (CSS only) ---------- */

/* Fireplace: suspended hearth with a flickering ember glow. */
.gallery-art--fireplace { background: linear-gradient(180deg, var(--bg), var(--surface) 70%, var(--bg-2)); }
.gallery-art--fireplace::before {
  content: "";
  position: absolute;
  inset: 40% 10% 12%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: radial-gradient(ellipse 60% 70% at 50% 100%, var(--ember), var(--ember-glow) 40%, transparent 75%);
  transform-origin: 50% 100%;
}
.gallery-art--fireplace::after {
  content: "";
  position: absolute;
  inset: 22% 10% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--steel-glow), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .gallery-art--fireplace::before { animation: flicker calc(var(--dur) * 4) ease-in-out infinite; }
}

/* Hood: steel canopy with vertical light stripes over a worktop. */
.gallery-art--hood {
  background: radial-gradient(ellipse 60% 40% at 50% 0%, var(--steel-glow), transparent 70%), var(--bg-2);
}
.gallery-art--hood::before {
  content: "";
  position: absolute;
  inset: 12% 14% auto;
  height: 34%;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--steel) 14%, transparent) 22px 23px),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.gallery-art--hood::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  border-top: 1px solid var(--steel-glow);
  background: linear-gradient(180deg, var(--surface-2), var(--bg));
}

/* Grill: grate lines over a glowing firebox. */
.gallery-art--grill { background: linear-gradient(180deg, var(--surface), var(--bg)); }
.gallery-art--grill::before {
  content: "";
  position: absolute;
  inset: 24% 12% auto;
  height: 40%;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 30%, transparent) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 30%, transparent) 0 2px, transparent 2px 16px);
}
.gallery-art--grill::after {
  content: "";
  position: absolute;
  inset: 66% 8% 14%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: radial-gradient(ellipse 50% 100% at 50% 0%, var(--ember-glow), transparent 70%), var(--bg);
}

/* Space: lit back wall and a perspective floor with grid lines. */
.gallery-art--space {
  background: radial-gradient(ellipse 50% 40% at 50% 60%, var(--steel-glow), transparent 70%), var(--bg);
}
.gallery-art--space::before {
  content: "";
  position: absolute;
  inset: 60% -30% 0;
  transform: perspective(28rem) rotateX(55deg);
  transform-origin: 50% 0;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 12.5% 100%,
    linear-gradient(180deg, var(--line) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(180deg, var(--surface), var(--bg-2));
}
.gallery-art--space::after {
  content: "";
  position: absolute;
  inset: 0 0 40%;
  border-bottom: 1px solid var(--steel);
  box-shadow: 0 0 24px var(--steel-glow);
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, var(--line) 79px 80px),
    linear-gradient(180deg, var(--bg), var(--surface));
}

/* ---------- Final CTA ---------- */

.final-cta { position: relative; isolation: isolate; overflow: hidden; text-align: center; }

/* Warm ember glow rising behind the title. */
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 50% 70% at 50% 100%, var(--ember-glow), transparent 70%);
}

.final-cta-inner { display: grid; justify-items: center; gap: var(--space-6); }
.final-cta .section-title { font-size: calc(var(--fs-h2) * 1.15); text-wrap: balance; }
.final-cta .button-lg { margin-top: var(--space-2); }

/* ---------- Page CTA: closes the inner pages with the one action that matters ---------- */

.page-cta { padding-block: 0 var(--space-section); }

.page-cta-inner {
  display: grid;
  justify-items: start;
  gap: var(--space-6);
  padding-top: var(--space-12);
  border-top: 1px solid var(--line);
}

.page-cta-title {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .page-cta-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}