/* Hallmark · genre: modern-minimal · macrostructure: Página de serviços (abertura com texto, faixa com foto da bancada, índice e texto ilustrado) · design-system: design.md
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 *
 * Página "Assistência técnica, manutenção e peças" (/reb/servicos/). O HTML e os textos são os do protótipo original,
 * sem alteração. Este arquivo soma ao rb-site.css só o que é próprio desta página.
 */

/* ---------- Faixa de abertura com a foto da bancada ---------- */

main > .service-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--space-md);
  background: var(--color-paper-2);
}

.service-hero > div {
  grid-column: 1 / 7;
}

.service-hero h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.service-hero p {
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.service-hero > figure {
  grid-column: 8 / 13;
}

/* ---------- Cada serviço: texto à esquerda, foto à direita ---------- */

.service-topic-photo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  column-gap: var(--space-md);
}

.service-topic-photo > h2 {
  grid-column: 1 / -1;
}

.article-layout .technical-depth > figure {
  margin-top: var(--space-md);
}

/* ---------- Telas médias e celular ---------- */

@media (max-width: 1000px) {
  main > .service-hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xl);
  }

  .service-hero > div,
  .service-hero > figure {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .service-topic-photo {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-md);
  }
}