/* =========================================================================
   Etéra Work — Section 6: / localização
   Figma: node 6322:940 (artboards 1366 e 360)
   ========================================================================= */

.localizacao {
  padding-block: 80px;
  background-color: var(--brand-color-primary);

  /* bg-loc já traz a cor de fundo, a diagonal texturizada e o entalhe da
     borda direita achatados em um único arquivo. */
  background-image: image-set(
    url("../../img/bg-loc.jpg") 1x,
    url("../../img/bg-loc@2x.jpg") 2x
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.localizacao__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

/* -------------------------------------------------------------------------
   Coluna de texto
   ------------------------------------------------------------------------- */

.localizacao__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.localizacao__eyebrow {
  color: var(--gray-100);
  text-transform: uppercase;
}

.localizacao__heading {
  color: var(--white);
  text-transform: uppercase;
}

.localizacao__text {
  color: var(--white);
}

.localizacao__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background-color: var(--brand-color-secondary);
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 200ms ease;
}

.localizacao__cta:hover {
  background-color: color-mix(in srgb, var(--brand-color-secondary), #000 var(--shade-level-1));
}

/* -------------------------------------------------------------------------
   Imagem
   img-loc já vem com os cinco marcadores do entorno embutidos.
   ------------------------------------------------------------------------- */

.localizacao__media {
  width: 100%;
}

/* =========================================================================
   LG — Notebook (min-width: 1366px)
   ========================================================================= */

@media (min-width: 1366px) {
  .localizacao {
    background-image: image-set(
      url("../../img/bg-loc-lg.jpg") 1x,
      url("../../img/bg-loc-lg@2x.jpg") 2x
    );
  }

  .localizacao__inner {
    flex-direction: row;
    gap: 32px;
    align-items: center;
  }

  /* 448 + 32 + 640 = 1120, a largura exata do container. */
  .localizacao__content {
    flex-shrink: 0;
    width: 40%;
  }

  .localizacao__media {
    flex-shrink: 0;
    width: 57.143%;
  }
}

/* =========================================================================
   XL — Desktop (min-width: 1920px)
   ========================================================================= */

@media (min-width: 1920px) {
  .localizacao {
    background-image: image-set(
      url("../../img/bg-loc-xl.jpg") 1x,
      url("../../img/bg-loc-xl@2x.jpg") 2x
    );
  }
}