/* =========================================================
   Component — Location (Seção 4)
   ========================================================= */

/* Fundo: branco puro 100% por baixo + camada F4F8E8 a 25% por cima */
.location-section {
  background:
    linear-gradient(rgba(244, 248, 232, 0.25), rgba(244, 248, 232, 0.25)),
    var(--color-white);
}

.location__head {
  display: grid;
  gap: var(--space-5);
  align-items: end;
  margin-block-end: var(--space-6);
}

@media (min-width: 960px) {
  .location__head {
    grid-template-columns: 1.4fr auto;
    gap: var(--space-8);
  }
}

.location__title {
  font-size: clamp(1.875rem, 6vw, 38px);   /* 30px no mobile → 38px no desktop */
  font-weight: var(--fw-regular);
  letter-spacing: -1px;
  max-width: 642px;         /* limite de largura no desktop (no mobile não tem efeito) */
  text-wrap: pretty;        /* preenche a largura (em vez do "balance" herdado do h2) */
}

/* Div que segura o kicker + os botões — largura DEFINIDA de 422px.
   Largura definida (em vez de só max-width) evita a coluna "auto" do grid
   colapsar para a largura de um botão; os botões então preenchem 207 cada. */
.location__nav {
  width: 422px;
  max-width: 100%;     /* nunca estoura o container (telas estreitas) */
}

.location__kicker {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: normal;      /* sem tracking negativo (mais harmônico c/ os botões) */
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;          /* texto acima dos botões centralizado */
  margin-block-end: var(--space-3);
}

.location__actions {
  display: flex;
  gap: 8px;                 /* 8px de distância entre os dois botões (print) */
  flex-wrap: nowrap;        /* mantém Maps e Waze lado a lado (na horizontal) */
}

/* Botões "Vá de…" — stroke preto 10%, ícone + rótulo, conforme o print
   (W fill, H 38, gap ícone/texto 12, padding 8/12). */
.map-btn {
  flex: 1 1 0;              /* preenche igualmente o container (422) → 207 cada */
  max-width: 207px;         /* largura máx. de cada botão (Waze = Maps) */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 12px;
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--text-primary);
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-std),
              border-color var(--dur-base) var(--ease-std);
}
.map-btn:hover {
  background: var(--color-surface);
  border-color: rgba(0, 0, 0, 0.2);
}
.map-btn__icon {
  width: 20px;
  height: 20px;
  flex: none;
  object-fit: contain;
}

/* Mobile/tablet: empilha os botões de rota full-width (alvo de toque maior, sem aperto).
   Solta a largura fixa de 422px do .location__nav (ela só é necessária no layout de
   2 colunas do desktop, ≥960px, p/ a coluna "auto" do grid não colapsar). Abaixo disso
   o nav passa a ocupar 100% do container e os botões 100% da largura — nunca estouram. */
@media (max-width: 768px) {
  .location__nav { width: 100%; }
  .location__actions { flex-direction: column; }
  .map-btn { flex: 1 1 auto; width: 100%; max-width: none; }
}

.location__map {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--bg-surface);
  overflow: hidden;
  margin-block-end: var(--space-7);
}

/* Mobile/tablet: 16/7 deixa o mapa baixo demais → proporção mais alta */
@media (max-width: 720px) {
  .location__map { aspect-ratio: 4 / 3; }
}

.location__map iframe,
.location__map img {
  width: 100%; height: 100%; border: 0; object-fit: cover;
}

/* Cards de pontos de interesse */
.poi-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.poi-card {
  background: rgba(174, 178, 155, 0.6);   /* #AEB29B a 60% */
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  min-height: 18rem;
}

.poi-card__icon {
  width: 2rem; height: 2rem;
  background: var(--color-white);
  display: grid; place-items: center;
  margin-block-end: auto;
}

.poi-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.poi-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--accent-ink);
}

/* Texto complementar de distância (ex.: "A 5 MINUTOS A PÉ") — bold, caixa-alta,
   menor que título/subtítulo; complementa a hierarquia sem competir. */
.poi-card__distance {
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--accent-ink);
}

.poi-card__text {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: var(--lh-base);
}