/* =========================================================================
   ETÉRA HOME — Componentes reutilizáveis
   ========================================================================= */

/* -------------------------------------------------------------------------
   Nav bar
   Figma: nav-bar (I6567:676 LG · I6522:458 SM)
   Texto em branco puro (#FFF), não no token $white — conforme design.
   ------------------------------------------------------------------------- */

.nav-bar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 32px;
  padding: 16px;
  color: #ffffff;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    padding 0.3s ease;
}

.nav-bar--hidden {
  transform: translateY(-100%);
}

.nav-bar--fixed {
  position: fixed;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: var(--brand-color-primary);
}

.nav-bar__logo {
  display: flex;
  align-items: flex-start;
  transition: padding 0.3s ease;
}

.nav-bar__logo img {
  width: 160px;
  height: 73.661px;
  transition:
    width 0.3s ease,
    height 0.3s ease;
}

.nav-bar--fixed .nav-bar__logo {
  align-items: center;
}

.nav-bar--fixed .nav-bar__logo img {
  width: 120px;
  height: auto;
}

/* Botão hambúrguer — só no mobile */
.nav-bar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: inherit;
}

.nav-bar__toggle-icon {
  display: block;
  width: 44px;
  height: 44px;
}

/* Menu — painel sobreposto no mobile, lista inline a partir de LG */
.nav-bar__menu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: none;
  padding: 16px;
  background-color: var(--brand-color-primary);
}

.nav-bar__menu.is-open {
  display: block;
}

.nav-bar__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nav-bar__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 16px;
  font-family: var(--font-family-02);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 1366px) {
  .nav-bar {
    grid-template-columns: fit-content(100%) minmax(0, 1fr);
    padding-inline: 64px;
  }

  .nav-bar--fixed {
    padding: 8px 64px;
  }

  .nav-bar__logo {
    justify-self: center;
    align-items: center;
    padding-block: 16px;
  }

  .nav-bar--fixed .nav-bar__logo {
    padding-block: 0;
  }

  .nav-bar__toggle {
    display: none;
  }

  .nav-bar__menu {
    position: static;
    display: block;
    justify-self: end;
    padding: 0;
    background-color: transparent;
  }

  .nav-bar__list {
    flex-direction: row;
    align-items: center;
  }

  /* Separadores verticais de 1px entre os itens */
  .nav-bar__item:not(:first-child)::before {
    content: "";
    flex-shrink: 0;
    width: var(--border-width-default);
    height: 16px;
    background-color: currentColor;
  }
}

/* -------------------------------------------------------------------------
   Botão — Figma: $Button
   ------------------------------------------------------------------------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  padding: 14px 24px 12px;
  background-color: var(--white);
  color: var(--brand-color-primary);
  font-family: var(--font-family-02);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 200ms ease;
}

/* Estado de hover não consta no Figma — ver pendência no report */
.btn:hover {
  opacity: var(--opacity-level-semi-opaque);
}

.btn--secondary {
  background-color: var(--brand-color-secondary);
  color: var(--white);
}

/* -------------------------------------------------------------------------
   Carrossel
   Figma: area-comum (6528:839) · area-privativa (6528:887)
   Um slide ativo centralizado, vizinhos vazando até a borda da viewport.
   ------------------------------------------------------------------------- */

.carousel {
  /* cqw em vez de % porque a track carrega a margem de centralização — uma
     porcentagem resolveria contra ela e devolveria um slide menor. */
  container-type: inline-size;

  --carousel-slide-w: calc(100cqw - 32px);
  --carousel-gap: 16px;
  --carousel-btn-size: 19.561px;
  --carousel-icon-size: 8.892px;
  /* Botões alinhados às bordas do slide ativo */
  --carousel-btn-offset: calc(50% - var(--carousel-slide-w) / 2);

  position: relative;
}

.carousel__stage {
  overflow: hidden;
}

.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  /* O slide ativo é o SEGUNDO filho, não o primeiro: a margem recua um passo
     inteiro para que sempre exista um slide à esquerda dele preenchendo o
     vazio — sem isso a borda esquerda fica em branco e o loop "pisca".
     O deslize é feito via Web Animations API, sem transição em CSS. */
  margin-inline-start: calc(
    50% - var(--carousel-slide-w) / 2 - var(--carousel-slide-w) - var(--carousel-gap)
  );
}

.carousel__slide {
  flex: 0 0 var(--carousel-slide-w);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.carousel__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.carousel__media picture,
.carousel__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel__caption {
  color: var(--gray-900);
}

/* Faixa dos controles: cobre só a altura da imagem, por isso desconta
   o gap de 16px e a linha da legenda */
.carousel__nav {
  position: absolute;
  inset-inline: 0;
  top: 0;
  bottom: calc(16px + var(--font-size-sm) * var(--line-height-default));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--carousel-btn-size);
  height: var(--carousel-btn-size);
  padding: 0;
  border: var(--border-width-md) solid rgba(214, 211, 203, 0.9); /* $white a 90% */
  background-color: #ebebeb;
  color: var(--gray-900);
  pointer-events: auto;
  transition: opacity 200ms ease;
}

/* Estado de hover não consta no Figma — ver pendência no report */
.carousel__btn:hover {
  opacity: var(--opacity-level-semi-opaque);
}

.carousel__btn--prev {
  margin-inline-start: var(--carousel-btn-offset);
}

.carousel__btn--next {
  margin-inline-end: var(--carousel-btn-offset);
}

.carousel__icon {
  display: block;
  width: var(--carousel-icon-size);
  height: var(--carousel-icon-size);
}

.carousel__btn--prev .carousel__icon {
  rotate: 180deg;
}

@media (min-width: 1366px) {
  .carousel {
    --carousel-slide-w: 736px;
    --carousel-gap: 32px;
    --carousel-btn-size: 44px;
    --carousel-icon-size: 20px;
    /* No LG os botões ficam 10px para fora do slide ativo */
    --carousel-btn-offset: calc(
      50% - var(--carousel-slide-w) / 2 - 10px - var(--carousel-btn-size)
    );
  }
}

/* Sem artboard 1920: a largura do slide vem do handoff (img-gallery-*-xl) */
@media (min-width: 1920px) {
  .carousel {
    --carousel-slide-w: 1036px;
  }
}

/* -------------------------------------------------------------------------
   Campo de formulário
   ------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field__label {
  color: var(--white);
  white-space: nowrap;
}

.field__input {
  width: 100%;
  padding: 12px 20px 10px;
  border: var(--border-width-default) solid var(--white);
  border-radius: var(--border-radius-none);
  background-color: transparent;
  color: var(--white);
  font-family: var(--font-family-01);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-sm);
  line-height: var(--line-height-default);
}

.field__input::placeholder {
  color: rgba(214, 211, 203, 0.7); /* $white a 70% */
  opacity: 1;
}

/* -------------------------------------------------------------------------
   Checkbox
   ------------------------------------------------------------------------- */

.checkbox {
  display: flex;
  align-items: center;
  gap: 16px;
}

.checkbox__input {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin: 0 0 2px;
  appearance: none;
  border: var(--border-width-default) solid var(--white);
  background-color: transparent;
  cursor: pointer;
}

.checkbox__input:checked {
  background-color: var(--white);
}

.checkbox__label {
  color: var(--white);
  cursor: pointer;
}

.checkbox__link {
  text-decoration: underline;
  text-underline-offset: 2px;
}