/* ==========================================================================
   Etéra UDI Complex — Section 3 (Figma node 6318:896 / componente 6318:1032)
   Mobile-first — breakpoint em 1024px (Notebook)
   Desktop: cards com hover interativo (60%/20%/20%)
   Mobile: sem hover — cards já vêm "abertos", empilhados
   ========================================================================== */

.udi {
  background-color: #A29E91;
}

.udi__inner {
  padding-block: 64px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

@media (min-width: 1024px) {
  .udi__inner {
    padding-block: 80px;
  }
}

@media (min-width: 1440px) {
  .udi__inner {
    max-width: var(--container-lg);
  }
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */
.udi__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  padding-inline: 16px;
}

.udi__eyebrow {
  margin: 0;
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: var(--line-height-default);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(35, 31, 18, 0.7);
}

.udi__title {
  margin: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: var(--h2-font-size);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-lg);
  text-transform: uppercase;
  color: #231F12;
}

.udi__lead {
  margin: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: var(--line-height-default);
  color: rgba(35, 31, 18, 0.7);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.udi__cards {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .udi__cards {
    flex-direction: row;
    height: 480px;
  }
}

.udi__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
}

@media (min-width: 1024px) {
  .udi__card {
    flex: 1 1 0;
    padding: 0;
    transition: flex-grow .8s ease;
  }

  .udi__card:hover,
  .udi__card:focus-within {
    flex-grow: 3;
  }

  /* ordem visual no desktop: UDI Complex, Work, Home (no mobile segue a
     ordem do DOM: UDI Complex, Home, Work) */
  .udi__card--complex {
    order: 1;
  }

  .udi__card--work {
    order: 2;
  }

  .udi__card--home {
    order: 3;
  }
}

.udi__card--complex {
  background-color: #776E4E;
}

.udi__card--work {
  background-color: #354445;
}

.udi__card--home {
  background-color: #3F2A26;
}

.udi__card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.udi__card-pattern {
  position: absolute;
  z-index: 1;
  top: 24px;
  left: 24px;
  width: 140px;
  height: auto;
  pointer-events: none;
}

.udi__card-pattern--right {
  left: auto;
  right: 24px;
}

/* --------------------------------------------------------------------------
   Estado colapsado (logo) — só existe no desktop
   -------------------------------------------------------------------------- */
.udi__card-collapsed {
  display: none;
}

@media (min-width: 1024px) {
  .udi__card-collapsed {
    position: relative;
    z-index: 2;
    display: flex;
  }

  .udi__card:hover .udi__card-collapsed,
  .udi__card:focus-within .udi__card-collapsed {
    display: none;
  }
}

.udi__card-logo {
  width: 150px;
  height: auto;
}

.udi__card-logo--udi {
  width: 200px;
}

/* --------------------------------------------------------------------------
   Estado expandido (texto + CTA) — sempre visível no mobile
   -------------------------------------------------------------------------- */
.udi__card-expanded {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  max-width: 360px;
}

@media (min-width: 1024px) {
  .udi__card-expanded {
    display: none;
  }

  .udi__card:hover .udi__card-expanded,
  .udi__card:focus-within .udi__card-expanded {
    display: flex;
  }
}

.udi__card-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.udi__card-title {
  margin: 0;
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-md);
  text-transform: uppercase;
  color: var(--white);
}

.udi__card-eyebrow {
  margin: 0;
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: var(--line-height-default);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.udi__card-text {
  margin: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: var(--line-height-default);
  color: rgba(255, 255, 255, 0.7);
}

.udi__card-badge {
  margin: 0;
  padding: 10px;
  background-color: #002328;
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: var(--line-height-default);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #776E4E;
}

.udi__card-cta {
  margin-top: 16px;
  padding-bottom: 14px;
  border-bottom: var(--border-width-default) solid var(--white);
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  letter-spacing: var(--letter-spacing-md);
  text-transform: uppercase;
  color: var(--white);
}