/* Integracao da foto ao fundo da pagina.
   Em vez de mascara (que no Chrome apagou a imagem quando havia duas
   camadas compostas), o proprio marfim da pagina e sobreposto em degrade
   nas bordas esquerda e inferior. Visualmente da o mesmo efeito, funciona
   em qualquer navegador e nao altera os tons claros do blazer, que ficam
   intactos no centro da imagem. */

.dt-hero__foto { position: relative; isolation: isolate; }

.dt-hero__foto img {
  -webkit-mask-image: none;
  mask-image: none;
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  max-height: min(76vh, 700px);
  object-fit: cover;
  object-position: center 10%;
}

.dt-hero__foto::before,
.dt-hero__foto::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.dt-hero__foto::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: linear-gradient(to right, var(--dt-bg) 0%, rgba(247, 244, 237, 0.72) 38%, rgba(247, 244, 237, 0) 100%);
}

.dt-hero__foto::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(to top, var(--dt-bg) 8%, rgba(247, 244, 237, 0) 100%);
}

.dt-folha { z-index: -1; }

@media (max-width: 900px) {
  .dt-hero__foto img {
    max-height: 58vh;
    object-position: center 6%;
  }
  .dt-hero__foto::before { display: none; }
  .dt-hero__foto::after { height: 22%; }
}

/* A folha decorativa saiu do heroi a pedido da cliente. */
.dt-folha { display: none; }

/* A foto nova tem fundo taupe quente e uniforme: o degrade de integracao
   pode ser mais suave, deixando a imagem respirar sem linha de corte. */
.dt-hero__foto::before { width: 26%; background: linear-gradient(to right, var(--dt-bg) 0%, rgba(247, 244, 237, 0.6) 45%, rgba(247, 244, 237, 0) 100%); }
.dt-hero__foto::after { height: 22%; }
.dt-hero__foto img { object-position: center 16%; }
@media (max-width: 900px) { .dt-hero__foto img { object-position: center 12%; } }

/* A foto deixa de ser um retangulo solto: sangra ate a borda direita da
   tela e dissolve tambem no topo, virando parte da composicao. */
.dt-hero__foto::after {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  background:
    linear-gradient(to top, var(--dt-bg) 3%, rgba(247, 244, 237, 0) 24%),
    linear-gradient(to bottom, var(--dt-bg) 0%, rgba(247, 244, 237, 0) 15%);
}

@media (min-width: 1180px) {
  .dt-hero__foto {
    margin-right: calc((1120px - 100vw) / 2);
    max-width: none;
    width: auto;
  }
  .dt-hero__foto img { width: 100%; }
}

/* Sangramento correto: a coluna da foto cresce exatamente a margem lateral
   do container, encostando na borda direita da tela. */
@media (min-width: 1180px) {
  .dt-hero__foto {
    width: calc(100% + ((100vw - 1120px) / 2));
    max-width: none;
    margin-right: calc(-1 * ((100vw - 1120px) / 2));
  }
  .dt-hero__foto img { width: 100%; height: auto; }
}