/* Page-local styles: /reparacao-banheiras-polibans ("the exhibition").
   Builds only on main.css tokens/components. Never hides content (no opacity states here). */

/* ── Intro: problem → solution, editorial two columns ───────────────── */
.rp-intro__grid { row-gap: var(--s-7); }
.rp-intro__body { max-width: 62ch; }
.rp-intro__answer {
  font-family: var(--ff-display); font-variation-settings: var(--fvs-display);
  font-weight: 350; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em;
  padding-left: var(--s-5); border-left: 2px solid var(--cobalt);
}
.rp-intro .btn-row { margin-top: var(--s-3); }
@media (min-width: 1024px) {
  .rp-intro__head { grid-column: 1 / 6; position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
  .rp-intro__body { grid-column: 7 / 13; }
}

/* ── Pairs: catalogue head + index ───────────────────────────────────── */
.rp-pairs__head { row-gap: var(--s-6); margin-bottom: var(--s-9); align-items: end; }
.rp-pairs__title { margin-bottom: 0; }
.rp-pairs__title, .rp-index { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .rp-pairs__title { grid-column: 1 / 6; }
  .rp-index { grid-column: 7 / 13; }
}
.rp-index__list {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr; column-gap: var(--col-gap);
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) { .rp-index__list { grid-template-columns: 1fr 1fr; } }
.rp-index__list > li { border-bottom: 1px solid var(--line); }
.rp-index__link {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s-3); align-items: baseline;
  min-height: 48px; padding: 12px 4px;
  color: var(--fg); text-decoration: none; font-size: var(--fs-small); font-weight: 500; line-height: 1.35;
  border-radius: var(--r-s);
  transition: color var(--dur-m) var(--ease-out), translate var(--dur-m) var(--ease-out);
}
.rp-index__num {
  font-family: var(--ff-display); font-variation-settings: var(--fvs-display);
  font-size: 1.125rem; font-weight: 400; color: var(--accent); font-variant-numeric: lining-nums tabular-nums;
}
.rp-index__link:focus-visible { outline: none; box-shadow: var(--focus); }
@media (hover: hover) {
  .rp-index__link:hover { color: var(--cobalt); translate: 4px 0; }
}

/* ── Pair rows ───────────────────────────────────────────────────────── */
.rp-pair { scroll-margin-top: calc(var(--header-h) + 24px); }
.rp-pair__meta .h3 { max-width: 22ch; }
.rp-pair__text { color: var(--fg-2); max-width: 44ch; }
.rp-pair .pair-row__num { font-size: clamp(3rem, 2rem + 4vw, 6rem); letter-spacing: -.04em; }
.rp-pair .pair-row__num .muted { font-size: .4em; letter-spacing: 0; margin-left: .15em; vertical-align: .9em; }

/* the most dramatic pair (02) is hung full width, caption below in a row */
.rp-pair--feature { row-gap: var(--s-6); }
.rp-pair--feature .ba { grid-column: 1 / -1; }
.rp-pair--feature .rp-pair__meta { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .rp-pair--feature .rp-pair__meta {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: baseline;
  }
  .rp-pair--feature .pair-row__num { grid-column: 1 / 4; }
  .rp-pair--feature .rp-pair__meta .h3 { grid-column: 4 / 8; max-width: none; }
  .rp-pair--feature .rp-pair__text { grid-column: 8 / 13; }
}
.pair-row + .rp-pull, .rp-pull + .pair-row { margin-top: var(--s-9); }
.rp-pull { padding-block: var(--s-6); border-block: 1px solid var(--line); }
.rp-pull .pull { grid-column: 1 / -1; max-width: 40ch; }
@media (min-width: 1024px) { .rp-pull .pull { grid-column: 3 / 12; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); } }

/* ── Vintage: coloured tubs hung like an exhibition wall (dark) ─────── */
.rp-vintage__grid { row-gap: var(--s-8); }
.rp-vintage__text, .rp-hang { grid-column: 1 / -1; }
.rp-vintage__text p.lead { color: var(--fg-2); max-width: 36ch; }
@media (min-width: 1024px) {
  .rp-vintage__text { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
  .rp-hang { grid-column: 6 / 13; }
}
.rp-hang { display: grid; grid-template-columns: 1fr; gap: var(--s-7) var(--col-gap); }
@media (min-width: 640px) {
  .rp-hang { grid-template-columns: 1fr 1fr; }
  .rp-hang > .rp-fig:nth-child(even) { margin-top: var(--s-9); } /* staggered hang */
}
.rp-fig { margin: 0; display: grid; gap: var(--s-3); align-content: start; }
.rp-fig .gallery__item { --ar: 4 / 3; }
.rp-fig__cap {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-small); font-weight: 500; color: var(--fg-2);
}
.rp-swatch {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: var(--swatch); box-shadow: 0 0 0 1px rgba(255,255,255,.35), inset 0 1px 1px rgba(255,255,255,.5);
}
.theme-dark .rp-fig__cap { color: var(--fg); }

/* ── Peças especiais ─────────────────────────────────────────────────── */
.rp-parts__grid { row-gap: var(--s-8); }
.rp-parts__text, .rp-parts__gallery { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .rp-parts__text { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 48px); align-self: start; }
  .rp-parts__gallery { grid-column: 6 / 13; }
}
.rp-parts__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--col-gap); }
.rp-fig--half { grid-column: span 1; }
.rp-fig--third { grid-column: span 1; }
.rp-parts__gallery > .rp-fig--third:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: min(100%, 500px); }
@media (min-width: 640px) {
  .rp-parts__gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rp-fig--half { grid-column: span 3; }
  .rp-parts__gallery > .rp-fig--third, .rp-parts__gallery > .rp-fig--third:nth-child(3) { grid-column: span 2; justify-self: stretch; width: auto; }
}
/* 400px sources: keep them at or under 500px rendered */
.rp-fig--third { max-width: 500px; }

/* phones: the feature pair gets a taller 4:5 frame, like the home hero */
@media (max-width: 639.98px) { .rp-pair--feature .ba__frame { --ar: 4 / 5; } }