/* =====================================================================
   LOCALIZAÇÃO — fundo bege, duas colunas de texto e o mapa abaixo
   ---------------------------------------------------------------------
   Proporções extraídas do print (base 1200px) → tela de design 1440px.
   ===================================================================== */

.location {
  --card-w: 31.75rem;       /* 508px @1440 — largura do card claro */
  --col-gap: 2.75rem;       /* 44px  @1440 */

  background: var(--c-beige);
  padding-block: 3.5rem 5rem;
}

.location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--card-w);
  gap: var(--col-gap);
  align-items: start;
}

/* ======================================================= coluna esquerda */
.location__title {
  font-size: 1.25rem;       /* 20px @1440 */
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: 1.375rem;
}

.location__text {
  max-width: 26.25rem;      /* 420px @1440 */
  font-size: 0.75rem;       /* 12px @1440 */
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-green);
}

.location__text + .location__text { margin-top: 1rem; }

.location__cta {
  margin-top: 2.75rem;
}

/* ================================================================= card */
.location__card {
  padding: 1rem 1.25rem;
  background: var(--c-beige-light);
}

.location__card-title {
  font-size: 1.25rem;       /* 20px @1440 */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: 1.25rem;
}

.location__list {
  display: grid;
  row-gap: 1.125rem;
}

/* a bolinha vem do componente .dot-item (base.css) */
.location__item {
  --dot-gap: 0.75rem;
  font-size: 0.75rem;       /* 12px @1440 */
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-green);
}

/* ================================================================= mapa */
.location__map {
  margin-top: 2.75rem;
}

.location__map img {
  width: 100%;
  height: auto;
}

/* =====================================================================
   MOBILE — coluna única, com o CTA depois do card (frame de 430px)
   ---------------------------------------------------------------------
   No desktop o botão fica dentro da coluna de texto, antes do card. No
   mobile ele vai para o fim. `display: contents` dissolve a coluna e
   deixa seus filhos virarem itens do mesmo flex, aí `order` reordena —
   sem duplicar o botão no HTML.
   ===================================================================== */
@media (max-width: 768px) {
  .location {
    --container-pad: 1.625rem;   /* 26px @430 */

    /* sem respiro embaixo: o mapa encosta no fim da seção */
    padding-block: 2.5rem 0;
  }

  .location__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .location__col { display: contents; }
  .location__card { order: 1; }
  .location__cta { order: 2; }

  .location__title {
    font-size: 1.5rem;           /* 24px @430 */
    line-height: 1.35;
    margin-bottom: 1.5rem;
  }

  .location__text {
    max-width: none;
    font-size: 0.9375rem;        /* 15px @430 */
    line-height: 1.75;
  }

  .location__text + .location__text { margin-top: 1.5rem; }

  /* o card avança um pouco além da margem do texto */
  .location__card {
    margin-top: 2rem;
    margin-inline: calc(-1 * (var(--container-pad) - 1rem));
    padding: 1.5rem 1.3125rem;
  }

  .location__card-title {
    font-size: 1.5rem;           /* 24px @430 */
    line-height: 1.35;
    margin-bottom: 2rem;
  }

  .location__list {
    row-gap: 2rem;
    padding-left: 1.25rem;
  }

  .location__item {
    --dot-gap: 1.125rem;

    align-items: center;         /* itens de 2-3 linhas: bolinha ao centro */
    font-size: 0.9375rem;
    line-height: 1.75;
  }

  .location__item::before { margin-top: 0; }

  .location__cta { margin-top: 1.5rem; }

  /* mapa sangra até as bordas da tela, anulando o respiro do container */
  .location__map {
    margin-top: 2rem;
    margin-inline: calc(-1 * var(--container-pad));
  }
}