/* =====================================================================
   LAZER — painel verde com lista de comodidades + foto da piscina
   ---------------------------------------------------------------------
   O fundo verde cobre a seção inteira e a foto é posicionada por cima,
   ocupando a faixa direita. Assim o conteúdo usa o `.container` normal e
   alinha exatamente com o header e as demais seções, sem cálculo de vw.
   ===================================================================== */

.leisure {
  --media-w: 37.8%;         /* largura da faixa da foto */
  --content-w: 40rem;       /* 640px @1440 — largura útil do texto */
  --dot-size: 0.5rem;       /* 8px @1440 — tamanho REAL do anel */

  position: relative;
  background: var(--c-green);
  overflow: hidden;
}

.leisure__inner {
  position: relative;
  z-index: 1;
  padding-block: 5rem;
}

/* ---------------------------------------------------------------- título */
.leisure__title {
  max-width: 33rem;
  font-size: 1.375rem;      /* 22px @1440 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-beige);
  margin-bottom: 3.5rem;
}

/* ------------------------------------------------------------ comodidades */
.amenities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 2rem;
  column-gap: 0.75rem;
  max-width: var(--content-w);
  margin-bottom: 2.75rem;
}

/* a bolinha vem do componente .dot-item (base.css) */
.amenities__item {
  --dot-gap: 0.6875rem;
  font-size: 0.75rem;       /* 12px @1440 */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--c-beige);
}

/* ============================================================== FOTO */
.leisure__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--media-w);
  z-index: 2;
}

.leisure__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.leisure__caption {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  font-size: 0.625rem;      /* 10px @1440 */
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000000;
}

/* =====================================================================
   MOBILE — sem foto, lista vira trilho horizontal (frame de 430px)
   ---------------------------------------------------------------------
   A grade continua sendo a mesma do desktop (4 colunas, ordem por linha),
   só que mais larga que a tela: assim cada coluna do mobile é uma coluna
   do desktop e a leitura mantém o mesmo agrupamento.
   ===================================================================== */
@media (max-width: 768px) {
  .leisure {
    --dot-gap: 1.5rem;
    --container-pad: 1.625rem;   /* 26px @430 */
  }

  /* a foto da piscina não entra no mobile */
  .leisure__media { display: none; }

  .leisure__inner { padding-block: 3.25rem 3rem; }

  .leisure__title {
    max-width: none;
    font-size: 1.875rem;         /* 30px @430 */
    line-height: 1.3;
    margin-bottom: 3.5rem;
  }

  .amenities {
    grid-template-columns: repeat(4, 46%);
    column-gap: 0;
    row-gap: 2.75rem;
    max-width: none;
    margin-bottom: 0;
    margin-right: calc(-1 * var(--container-pad));  /* sangra na direita */

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .amenities::-webkit-scrollbar { display: none; }

  .amenities__item {
    scroll-snap-align: start;
    font-size: 1rem;             /* 16px @430 */
  }

  .scroller__dots { margin-top: 2rem; }

  .leisure__cta { margin-top: 2.5rem; }
}