/* ==========================================================================
   Atributos — Section 6 (Figma node 6323:2036 / variação das tabs 6240:1137)
   Mobile-first — breakpoint em 1024px (Notebook)
   ========================================================================== */

.attributes {
  background-color: var(--gray-200);
}

.attributes__inner {
  padding-block: 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

/* esta seção usa 1120px como largura máxima também no XL — não cresce
   para 1440px como o .container padrão */
@media (min-width: 1440px) {
  .attributes__inner {
    max-width: var(--container-lg);
  }
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */
.attributes__header {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding-block: 80px;
  background-color: var(--gray-200);
}

@media (min-width: 1024px) {
  .attributes__header {
    flex-direction: row;
    align-items: flex-end;
    gap: 32px;
  }
}

.attributes__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-transform: uppercase;
  color: var(--gray-700);
}

@media (min-width: 1024px) {
  .attributes__heading {
    flex: 1 1 0;
    min-width: 0;
  }
}

.attributes__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;
}

.attributes__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);
}

.attributes__lead {
  margin: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: 14px;
  line-height: var(--line-height-md);
  color: var(--gray-800);
}

@media (min-width: 1024px) {
  .attributes__lead {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.attributes__tabs {
  display: flex;
  width: 100%;
}

@media (min-width: 1024px) {
  .attributes__tabs {
    width: 928px;
  }
}

.attributes__tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 8px;
  border: none;
  /* #BDB1AD é o Gray-500 real usado aqui no Figma — diverge do Gray-500
     usado na seção O Projeto (#5A6668); ver aviso no chat */
  border-bottom: var(--border-width-md) solid #BDB1AD;
  background: none;
  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: var(--gray-600);
  cursor: pointer;
}

.attributes__tab.is-active {
  border-bottom-color: var(--brand-color-secondary);
  color: var(--brand-color-secondary);
}

/* --------------------------------------------------------------------------
   Grid de atributos
   -------------------------------------------------------------------------- */
.attributes__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.attributes__grid[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .attributes__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, fit-content(100%));
    column-gap: 32px;
    row-gap: 32px;
  }

  .attributes__grid--lazer {
    grid-template-columns: repeat(2, 300px);
    justify-content: center;
  }
}

.attributes__item {
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (min-width: 1024px) {
  .attributes__item--floor { grid-column: 1; grid-row: 2; }
  .attributes__item--ac { grid-column: 2; grid-row: 2; }
  .attributes__item--balcony { grid-column: 1; grid-row: 3; }
  .attributes__item--prototype { grid-column: 1; grid-row: 1; }
  .attributes__item--shower { grid-column: 2; grid-row: 1; }

  .attributes__item--gym { grid-column: 1; grid-row: 1; }
  .attributes__item--basket { grid-column: 2; grid-row: 1; }
  .attributes__item--cheers { grid-column: 1; grid-row: 2; }
  .attributes__item--box { grid-column: 2; grid-row: 2; }
  .attributes__item--washer { grid-column: 1; grid-row: 3; }
}

.attributes__icon-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--border-radius-pill);
  border: var(--border-width-default) solid var(--brand-color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.attributes__icon {
  display: block;
  width: 40px;
  height: 40px;
  color: var(--brand-color-secondary);
}

.attributes__text {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: var(--line-height-default);
  color: var(--gray-900);
}

@media (min-width: 1024px) {
  .attributes__grid--lazer .attributes__text {
    flex: none;
    white-space: nowrap;
  }
}