/* =====================================================================
   SHOWCASE — galeria full-bleed com painel de texto, legenda e setas
   ---------------------------------------------------------------------
   As fotos são 1920x870 (2.207:1). Painel e legenda vivem DENTRO de cada
   slide, porque mudam junto com a foto; só as setas ficam fora.
   ===================================================================== */

.showcase {
  --panel-w: 31.875rem;      /* 510px @1440 */
  --panel-mask-color: 16, 24, 12;  /* rgb da máscara — oliva quase preto */
  --panel-mask: 0.45;              /* força do escurecimento sobre PhotoBG */
  --arrow-size: 2.75rem;     /* 44px @1440 */
  --overlay-gap: 3.25rem;    /* respiro entre painel e legenda */

  /* Margem do container, em % para ignorar a barra de rolagem.
     Alinha painel e setas com o restante da página. */
  --gutter: max(
    var(--container-pad),
    (100% - var(--container-w)) / 2 + var(--container-pad)
  );

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

/* ------------------------------------------------------ galeria (fotos) */
/* Os slides ocupam a mesma célula do grid e se revezam por opacidade. */
.showcase__media {
  display: grid;
  aspect-ratio: 1920 / 870;
  width: 100%;
}

.showcase__slide {
  position: relative;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}

.showcase__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Desktop e mobile têm galerias próprias — fotos e textos diferentes.
   O carrossel só navega pelos slides visíveis na faixa atual. */
.showcase__slide--mobile { display: none; }

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

/* ------------------------------------------------------- painel escuro */
/* Fundo: PhotoBG.png + máscara escura por cima (--panel-mask) */
.showcase__panel {
  position: absolute;
  left: var(--gutter);
  bottom: 0;
  width: var(--panel-w);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 6rem;          /* 96px @1440 — mesma altura em todos os slides */
  padding: 1.25rem 1.5rem;
  background-color: rgb(var(--panel-mask-color));
  background-image:
    linear-gradient(
      rgba(var(--panel-mask-color), var(--panel-mask)),
      rgba(var(--panel-mask-color), var(--panel-mask))
    ),
    url("../img/PhotoBG.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.showcase__panel-text {
  font-size: 0.875rem;       /* 14px @1440 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--c-white);
}

.showcase__panel-text strong { font-weight: 700; }

/* Limitado pela ALTURA (não pela largura): assim o logo nunca estica o
   painel, que mantém a mesma altura dos outros slides. */
.showcase__panel-logo {
  flex: 0 0 auto;
  height: 3.25rem;           /* 52px @1440 */
  width: auto;
  margin-left: auto;         /* encosta no lado direito do painel */
  margin-right: 1.5rem;
}

/* ------------------------------------------------------------- legenda */
/* Alinhada logo após o painel: margem do container + painel + respiro. */
.showcase__caption {
  position: absolute;
  bottom: 1.75rem;
  left: calc(var(--gutter) + var(--panel-w) + var(--overlay-gap));
  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);
}

/* sobre fundo claro (foto da piscina) */
.showcase__caption--dark {
  color: #000000;
  text-shadow: none;
}

/* --------------------------------------------------------------- setas */
.showcase__nav {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 1.75rem;
}

.showcase__arrow {
  display: grid;
  place-items: center;
  width: var(--arrow-size);
  height: var(--arrow-size);
  background: var(--c-green);
  color: var(--c-white);
  transition: background-color var(--t);
}

.showcase__arrow:hover { background: var(--c-green-light); }

.showcase__arrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================================
   MOBILE — foto em pé, setas nos cantos dela e painel de texto abaixo
   (frame de 430px)
   ===================================================================== */
@media (max-width: 768px) {
  .showcase {
    --arrow-size: 4rem;          /* 64px @430 */
  }

  /* a altura passa a ser foto + painel */
  .showcase__media { aspect-ratio: auto; }

  .showcase__slide {
    display: flex;
    flex-direction: column;
  }

  .showcase__slide--desktop { display: none; }

  .showcase__img {
    aspect-ratio: 430 / 603;
    height: auto;
  }

  /* no mobile o layout não traz a legenda "FOTO DO LOCAL" */
  .showcase__caption { display: none; }

  /* o painel deixa de flutuar sobre a foto e passa a ficar abaixo dela */
  .showcase__panel {
    position: static;
    width: 100%;
    min-height: 0;
    gap: 1rem;
    padding: 2rem;
  }

  .showcase__panel-text {
    font-size: 1rem;             /* 16px @430 */
    line-height: 1.7;
    letter-spacing: 0.02em;
  }

  .showcase__panel-logo {
    height: 4rem;                /* 64px @430 */
    margin-right: 0;
  }

  /* Setas nos cantos inferiores da FOTO, não do bloco inteiro.
     A foto ocupa a largura da viewport, então sua altura é
     100vw * 603/430 — daí sai o deslocamento do topo. */
  .showcase__nav {
    left: 0;
    right: 0;
    bottom: auto;
    top: calc(100vw * 603 / 430 - var(--arrow-size));
    gap: 0;
    justify-content: space-between;
  }
}