/* ==========================================================================
   detail.css — layout "detail" (7 serviços + 7 materiais)
   Todo seletor prefixado com body.page-detail (sem vazamento).

   Anatomia (conferida nos screenshots de referência):
     .detail-hero    — faixa branca com h1 centralizado (h1 = default do base)
     .detail-banner  — imagem full-bleed de altura fixa (779px @1440 / 273 @390)
     .detail-text    — lead escuro + parágrafos cinza (+ botão opcional)
     .detail-band    — faixa cinza full-bleed rgba(237,237,237,.5):
                       watermark "Mission" + título + parágrafo  |  h2 "Why
                       Choose Us?" + checklist 2 colunas (dot bullets)
     .detail-split   — Edges: imagem arredondada à esquerda, watermark
                       "Edges" + "Pick Your Cut" + CTA à direita
                       (mobile: texto primeiro, imagem depois)
   Breakpoints: mobile <=809.98px · tablet 810–1199.98px · desktop >=1200px
   ========================================================================== */

/* Conteúdo do original vai de x=40 a x=1400 @1440 (max-width 1440, não 1390) */
body.page-detail .container {
  max-width: 1440px;
}

/* --------------------------------------------------------------------------
   Hero (h1 centralizado em faixa branca)
   h1 usa os tamanhos default do base (65/52/42), medidos nos screenshots
   -------------------------------------------------------------------------- */
body.page-detail .detail-hero {
  text-align: center;
  padding: 60px 40px 75px;
}

/* --------------------------------------------------------------------------
   Banner full-bleed — faixa de altura FIXA no original (779px @1440,
   273px @390), a foto corta com object-fit: cover
   -------------------------------------------------------------------------- */
body.page-detail .detail-banner img {
  display: block;
  width: 100%;
  height: 779px;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Bloco de texto (lead + parágrafos + botão opcional)
   (padding do .container fica no default do base: 100px 40px / 80px 20px)
   -------------------------------------------------------------------------- */
body.page-detail .detail-lead {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #222;
  margin-bottom: 40px;
}
body.page-detail .detail-text p + p {
  margin-top: 16px;
}
body.page-detail .detail-text .detail-lead + p {
  margin-top: 0;
}
body.page-detail .detail-text a {
  color: inherit;
}
body.page-detail .detail-text a:hover {
  text-decoration: underline;
}
body.page-detail .detail-text .btn {
  margin-top: 40px;
}

/* Botões CTA do detail (VIEW EDGE GUIDE, SEE OUR SINKS, CALL NOW do form):
   no original medem ~228x41 / ~206x41 / ~165x39 @1440 (padding bem maior
   que o .btn-red/.btn-red-small do base) e ~213x37 no mobile */
body.page-detail .detail-text .btn,
body.page-detail .detail-split-body .btn,
body.page-detail .contact-call {
  font-size: 14px;
  padding: 13px 42px;
  border-radius: var(--radius-btn);
}

/* --------------------------------------------------------------------------
   Watermark + título (padrão "Mission / Best Customer Service",
   "Edges / Pick Your Cut" — espelha a seção de contato do base)
   -------------------------------------------------------------------------- */
body.page-detail .detail-watermark {
  font-family: var(--font-system);
  font-size: 100px;
  font-weight: 700;
  line-height: 1.1;
  color: #ededed;          /* sobre fundo branco (Edges) */
  white-space: nowrap;
}
body.page-detail .detail-watermark.on-band {
  color: #dedede;          /* sobre a faixa cinza (Mission) */
}
body.page-detail .detail-band-title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  color: #222;
  margin: -52px 0 0 40px;
}

/* --------------------------------------------------------------------------
   Faixa Mission / Why Choose Us (fundo rgba(237,237,237,.5) full-bleed)
   -------------------------------------------------------------------------- */
body.page-detail .detail-band {
  background: rgba(237, 237, 237, .5);
}
body.page-detail .detail-band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 110px;
  align-items: start;
}
body.page-detail .detail-mission-copy {
  margin-top: 37px;
}
body.page-detail .detail-mission-copy p + p {
  margin-top: 16px;
}
/* no original os topos de "Best Customer Service" e "Why Choose Us?" ficam
   nivelados — a coluna direita desce o equivalente a watermark - margem */
body.page-detail .detail-why {
  padding-top: 59px;
}
body.page-detail .detail-why h2 {
  margin-bottom: 34px;
}
body.page-detail .detail-why-list {
  columns: 2;
  column-gap: 36px;
  padding-left: 21px;
}
body.page-detail .detail-why-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 16px;
  break-inside: avoid;
}
body.page-detail .detail-why-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(34, 34, 34, .7);
}

/* --------------------------------------------------------------------------
   Split Edges (imagem + texto com CTA)
   -------------------------------------------------------------------------- */
body.page-detail .detail-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 110px;
  align-items: center;
}
body.page-detail .detail-split-media img {
  width: 100%;
  height: auto;
  /* box da imagem no original: 625x443 @1440 e 350x249 @390 (mesma proporção) */
  aspect-ratio: 625 / 443;
  object-fit: cover;
  border-radius: var(--radius-card);
}
body.page-detail .detail-split-copy {
  margin-top: 36px;
}
body.page-detail .detail-split-copy p + p {
  margin-top: 16px;
}
body.page-detail .detail-split-body .btn {
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Tablet (810–1199.98px)
   -------------------------------------------------------------------------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  body.page-detail .detail-banner img { height: 54vw; }
  body.page-detail .detail-lead { font-size: 18px; }
  body.page-detail .detail-watermark { font-size: 84px; }
  body.page-detail .detail-band-title { font-size: 32px; margin: -44px 0 0 34px; }
  body.page-detail .detail-why { padding-top: 48px; }
  body.page-detail .detail-band-grid,
  body.page-detail .detail-split-grid { gap: 50px; }
}

/* --------------------------------------------------------------------------
   Mobile (<=809.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* o h1 (42px, default do base) precisa da largura toda do .wrap pra
     "Bathroom Vanitys" caber numa linha como no original — sem padding extra */
  body.page-detail .detail-hero {
    padding: 45px 0 50px;
  }

  /* hero mobile do original: 390x273 (a foto corta em cover) */
  body.page-detail .detail-banner img {
    height: auto;
    aspect-ratio: 390 / 273;
  }

  body.page-detail .detail-lead {
    font-size: 21px;
    line-height: 29px;
    margin-bottom: 30px;
  }
  body.page-detail .detail-text p + p { margin-top: 14px; }
  body.page-detail .detail-text .btn { margin-top: 30px; }

  /* botões CTA no original mobile: ~213x37 (fonte 13, padding maior) */
  body.page-detail .detail-text .btn,
  body.page-detail .detail-split-body .btn {
    font-size: 13px;
    padding: 12px 40px;
  }

  body.page-detail .detail-watermark { font-size: 60px; }
  body.page-detail .detail-band-title {
    font-size: 28px;
    margin: -34px 0 0 16px;
  }
  /* "Pick Your Cut" mobile é MAIOR que o título da faixa Mission no original
     (~38px vs 28px, medido nos screenshots) */
  body.page-detail .detail-split-body .detail-band-title { font-size: 38px; }

  body.page-detail .detail-band-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    padding-bottom: 60px;
  }
  body.page-detail .detail-mission-copy { margin-top: 30px; }
  body.page-detail .detail-why { padding-top: 0; }
  body.page-detail .detail-why h2 { margin-bottom: 35px; }
  /* a checklist continua em 2 colunas no mobile (como no original) */
  body.page-detail .detail-why-list { column-gap: 28px; padding-left: 0; }
  body.page-detail .detail-why-list li {
    padding-left: 18px;
    margin-bottom: 24px;
  }
  body.page-detail .detail-why-list li::before {
    top: 6px;
    width: 5px;
    height: 5px;
  }

  body.page-detail .detail-split-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  /* mobile: texto primeiro, imagem depois (conferido no screenshot) */
  body.page-detail .detail-split-media { order: 2; }
  body.page-detail .detail-split-copy { margin-top: 26px; }
  body.page-detail .detail-split-body .btn { margin-top: 24px; }
}