/* =========================================================================
   Etéra Work — Section 3: /etéra udi complex
   Figma: node 6321:661 · interação de hover: node 6224:415
   ========================================================================= */

.complexo {
  padding-block: 80px;
  background-color: var(--gray-200);
  overflow: hidden;
}

.complexo__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* -------------------------------------------------------------------------
   Cabeçalho
   ------------------------------------------------------------------------- */

.complexo__header {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 100%;
  text-align: center;
}

.complexo__eyebrow {
  color: var(--brand-color-secondary-shade-2-70);
  text-transform: uppercase;
}

.complexo__heading {
  color: var(--gray-700);
  text-transform: uppercase;
}

.complexo__intro {
  color: var(--brand-color-secondary-shade-2-70);
}

/* O eyebrow e o heading formam um grupo com gap menor que o do bloco. */
.complexo__header > .complexo__eyebrow + .complexo__heading {
  margin-top: -8px; /* 32px do container - 24px do grupo */
}

/* -------------------------------------------------------------------------
   Cards
   Mobile: empilhados, conteúdo sempre visível.
   ------------------------------------------------------------------------- */

.complexo__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
}

.complexo__card {
  position: relative;
  background-color: var(--complexo-card-bg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

.complexo__card--udi {
  --complexo-card-bg: var(--brand-color-secondary);
  background-image: image-set(
    url("../../img/bg-complex-udi.jpg") 1x,
    url("../../img/bg-complex-udi@2x.jpg") 2x
  );
}

.complexo__card--stay {
  --complexo-card-bg: #3f3428;
  background-image: image-set(
    url("../../img/bg-complex-stay.jpg") 1x,
    url("../../img/bg-complex-stay@2x.jpg") 2x
  );
}

.complexo__card--home {
  --complexo-card-bg: #3f2a26;
  background-image: image-set(
    url("../../img/bg-complex-home.jpg") 1x,
    url("../../img/bg-complex-home@2x.jpg") 2x
  );
}

.complexo__card-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 328 / 488;
  padding: 40px 16px;
  text-align: center;
}

.complexo__logo {
  width: 130px;
  height: auto;
}

.complexo__card--udi .complexo__logo {
  width: 160px;
}

.complexo__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 360px;
}

.complexo__card-title {
  width: 100%;
  color: var(--white);
  text-transform: uppercase;
}

.complexo__card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  color: rgb(255 255 255 / 70%);
}

.complexo__card-sub {
  text-transform: uppercase;
}

.complexo__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 14px;
  border-bottom: var(--border-width-default) solid var(--white);
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}

/* =========================================================================
   LG — Notebook (min-width: 1366px)
   Os três cards viram uma faixa de 480px. O card sob o cursor cresce de
   1fr para 3fr (373,33px -> 672px) e os outros recuam para 224px, que é
   exatamente a proporção 3fr/1fr/1fr do Figma.
   ========================================================================= */

@media (min-width: 1366px) {
  .complexo__cards {
    flex-direction: row;
    height: 480px;
    overflow: hidden;
  }

  .complexo__card {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    transition: flex-grow .8s ease;
  }

  .complexo__card-link {
    aspect-ratio: auto;
    height: 100%;
    padding: 40px 24px;
  }

  /* Em repouso: só a logo. */
  .complexo__logo {
    transition: opacity 250ms ease;
  }

  .complexo__content,
  .complexo__cta {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 250ms ease;
  }

  .complexo__content {
    top: 50%;
    left: 50%;
    width: 360px;
    transform: translate(-50%, -50%);
  }

  .complexo__cta {
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Ao passar o mouse ou receber foco pelo teclado. */
  .complexo__card:hover,
  .complexo__card:focus-within {
    flex-grow: 3;
  }

  .complexo__card:hover .complexo__logo,
  .complexo__card:focus-within .complexo__logo {
    opacity: 0;
  }

  .complexo__card:hover .complexo__content,
  .complexo__card:focus-within .complexo__content,
  .complexo__card:hover .complexo__cta,
  .complexo__card:focus-within .complexo__cta {
    opacity: 1;
    visibility: visible;
  }

  .complexo__card--udi {
    background-image: image-set(
      url("../../img/bg-complex-udi-lg.jpg") 1x,
      url("../../img/bg-complex-udi-lg@2x.jpg") 2x
    );
  }

  .complexo__card--stay {
    background-image: image-set(
      url("../../img/bg-complex-stay-lg.jpg") 1x,
      url("../../img/bg-complex-stay-lg@2x.jpg") 2x
    );
  }

  .complexo__card--home {
    background-image: image-set(
      url("../../img/bg-complex-home-lg.jpg") 1x,
      url("../../img/bg-complex-home-lg@2x.jpg") 2x
    );
  }
}

/* =========================================================================
   XL — Desktop (min-width: 1920px)
   Sem artboard no Figma. O card expandido passa a 864px (3/5 de 1440), e o
   asset xl tem 944px de largura, então ainda cobre.
   ========================================================================= */

@media (min-width: 1920px) {
  .complexo__card--udi {
    background-image: image-set(
      url("../../img/bg-complex-udi-xl.jpg") 1x,
      url("../../img/bg-complex-udi-xl@2x.jpg") 2x
    );
  }

  .complexo__card--stay {
    background-image: image-set(
      url("../../img/bg-complex-stay-xl.jpg") 1x,
      url("../../img/bg-complex-stay-xl@2x.jpg") 2x
    );
  }

  .complexo__card--home {
    background-image: image-set(
      url("../../img/bg-complex-home-xl.jpg") 1x,
      url("../../img/bg-complex-home-xl@2x.jpg") 2x
    );
  }
}