/* ==========================================================================
   Localização — Section (Figma node 6325:2081)
   O fundo (bg-loc-section) já traz o recorte diagonal e a barra amarela
   embutidos na própria foto — não precisa recriar isso em CSS.
   Mobile-first — breakpoint em 1024px (Notebook)
   ========================================================================== */

.location {
  position: relative;
  background-color: var(--brand-color-secondary);
  background-image: url(../../Handoff/Images/bg-loc-section.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: 80px;
}

@media (min-width: 1024px) {
  .location {
    background-image: url(../../Handoff/Images/bg-loc-section-lg.jpg);
  }
}

@media (min-width: 1440px) {
  .location {
    background-image: url(../../Handoff/Images/bg-loc-section-xl.jpg);
  }
}

.location__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .location__inner {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }
}

/* esta seção usa 1120px como largura máxima também no XL — não cresce
   para 1440px como o .container padrão */
@media (min-width: 1440px) {
  .location__inner {
    max-width: var(--container-lg);
  }
}

/* --------------------------------------------------------------------------
   Texto
   -------------------------------------------------------------------------- */
.location__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}

@media (min-width: 1024px) {
  .location__content {
    width: 448px;
    flex-shrink: 0;
  }
}

.location__eyebrow {
  margin: 0;
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: var(--line-height-default);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
}

.location__title {
  margin: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: var(--h2-font-size);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-lg);
  text-transform: uppercase;
  color: var(--white);
}

.location__text {
  margin: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: 14px;
  line-height: var(--line-height-default);
  color: var(--white);
}

.location__cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  background-color: var(--brand-color-primary);
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  letter-spacing: var(--letter-spacing-md);
  text-transform: uppercase;
  color: var(--brand-color-secondary);
}

/* --------------------------------------------------------------------------
   Mapa
   -------------------------------------------------------------------------- */
.location__map {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 435;
}

@media (min-width: 1024px) {
  .location__map {
    width: 640px;
    flex-shrink: 0;
  }
}

.location__map picture,
.location__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}