/* =====================================================================
   ARQUITETURA — fundo verde escuro, texto à esquerda, foto do arquiteto
   colada no card do depoimento à direita
   ---------------------------------------------------------------------
   Proporções extraídas do print (base 1202px) → tela de design 1440px.
   A foto e o card ficam flush (sem gap) e esticam para a altura da
   coluna de texto, como no layout.
   ===================================================================== */

.architecture {
  --photo-w: 9.375rem;      /* 150px @1440 */
  --quote-w: 20.625rem;     /* 330px @1440 */
  --arrow-size: 2.75rem;    /* 44px  @1440 */

  background: var(--c-green-forest);
  padding-block: 3.5rem;
}

.architecture__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--photo-w) + var(--quote-w));
  align-items: stretch;
}

/* ============================================================= carrossel */
/* Todos os slides ocupam a mesma célula do grid e se revezam por opacidade,
   então a altura do bloco não pula ao trocar de depoimento. */
.architecture__slider {
  position: relative;
  display: grid;
}

.architecture__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: var(--photo-w) var(--quote-w);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}

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

/* ======================================================= coluna de texto */
.architecture__title {
  font-size: 1.5rem;        /* 24px @1440 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-cream);
  margin-bottom: 1.25rem;
}

.architecture__text {
  max-width: 25rem;         /* 400px @1440 */
  font-size: 0.75rem;       /* 12px @1440 */
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.architecture__text + .architecture__text { margin-top: 1.5rem; }

.architecture__cta {
  margin-top: 2.75rem;
}

/* ================================================================= foto */
.architecture__photo {
  overflow: hidden;
}

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

/* ============================================================ depoimento */
.architecture__quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  background: var(--c-green-mid);
}

.architecture__quote-text {
  font-size: 1rem;          /* 16px @1440 */
  font-weight: 700;
  line-height: 1.75;
  color: var(--c-white);
}

.architecture__quote-author {
  margin-top: 2.25rem;
  font-size: 0.75rem;       /* 12px @1440 */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------- setas */
.architecture__nav {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 3.75rem;             /* 60px @1440 */
}

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

.architecture__arrow:hover { background: var(--c-orange-hover); }

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

/* =====================================================================
   MOBILE — texto, CTA e o card do depoimento empilhados (frame de 430px)
   ---------------------------------------------------------------------
   A foto do arquiteto não aparece no mobile. A navegação passa das
   setas para os indicadores.
   ===================================================================== */
@media (max-width: 768px) {
  .architecture {
    --container-pad: 1.625rem;   /* 26px @430 */

    padding-block: 2.75rem 2.25rem;
  }

  .architecture__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .architecture__title {
    font-size: 1.875rem;         /* 30px @430 */
    line-height: 1.25;
    margin-bottom: 1.25rem;
  }

  .architecture__text {
    max-width: none;
    font-size: 0.875rem;         /* 14px @430 */
    line-height: 1.55;
  }

  .architecture__text + .architecture__text { margin-top: 1.25rem; }

  .architecture__cta { margin-top: 1.5rem; }

  /* ------------------------------------------------ carrossel */
  .architecture__slide { grid-template-columns: 1fr; }

  /* no mobile só o card do depoimento: a foto do arquiteto fica no desktop */
  .architecture__photo { display: none; }

  .architecture__quote { padding: 2rem 1.5rem; }

  .architecture__quote-text {
    font-size: 1.25rem;          /* 20px @430 */
    font-weight: 400;
    line-height: 1.65;
  }

  .architecture__quote-author {
    margin-top: 1.75rem;
    font-size: 0.875rem;
  }

  .architecture__nav { display: none; }

  .architecture__dots { margin-top: 1.75rem; }
}