/* =====================================================================
   PISCINA NATURAL — faixa fina no topo, formulário sobre bege à esquerda
   e foto sangrando na direita
   ---------------------------------------------------------------------
   Proporções extraídas do print (base 1197px) → tela de design 1440px.
   ===================================================================== */

.nature {
  --split: 51%;             /* largura da coluna bege */
  --rule-h: 3.375rem;       /* 54px @1440 — faixa texturizada do topo */
  --strip-h: 2.75rem;       /* 44px @1440 — folhagem no rodapé da coluna */

  /* Alinha o formulário com o container das demais seções.
     A coluna bege tem 51% da largura da página e a margem do container
     cai em 16.11% dela — logo, 16.11 / 51 = 31.6% de padding interno.
     Em % (e não vw) o valor não sofre com a barra de rolagem. */
  --pad-left: 31.6%;

  background: var(--c-beige);
}

/* ------------------------------------------------------- faixa do topo */
.nature__rule {
  height: var(--rule-h);
  background-color: var(--c-green-dark);
  background-image: url("../img/PhotoBG.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ------------------------------------------------------------- estrutura */
.nature__grid {
  display: grid;
  grid-template-columns: var(--split) 1fr;
  grid-template-rows: 1fr auto;
}

.nature__form {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding: 6.5rem var(--container-pad) 6.5rem var(--pad-left);
}

.nature__form-inner {
  width: 100%;
  max-width: 26.25rem;      /* 420px @1440 */
}

/* ------------------------------------------- folhagem no pé da coluna */
.nature__strip {
  grid-column: 1;
  grid-row: 2;
  height: var(--strip-h);
  background-color: var(--c-green-dark);
  background-image: url("../img/bart-zimny.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ================================================================= foto */
.nature__media {
  position: relative;
  grid-column: 2;
  grid-row: 1 / -1;
  overflow: hidden;
}

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

.nature__caption {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  font-size: 0.625rem;      /* 10px @1440 */
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* =====================================================================
   MOBILE — só a faixa do topo, o formulário e a folhagem no pé
   (frame de 430px)
   ===================================================================== */
@media (max-width: 768px) {
  .nature {
    --rule-h: 2rem;
    --strip-h: 2rem;
    --pad-left: 1.625rem;        /* 26px @430 */
    --container-pad: 1.625rem;
  }

  .nature__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .nature__form {
    grid-column: 1;
    grid-row: 1;
    padding-block: 3rem;
  }

  .nature__form-inner { max-width: none; }

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

  .nature__strip {
    grid-column: 1;
    grid-row: 2;
  }
}