/* =============================================================================
   LOBATO MACHADO — sobre nós
   Complementa style.css. Só o que é exclusivo desta tela.

   01. Topo
   02. História
   03. Missão / Visão / Valores
   04. Galeria da sede
   05. Equipe (cards com foto)
   06. Equipe por departamento (texto)
   07. Responsivo
   ========================================================================== */

/* ─────────────────────────────────────────────────────────── 01. TOPO */
.pagina-sobre { background: var(--surface); }
.sobre { padding-top: var(--header-h); }

.sobre__topo {
  background: var(--bordo);
  color: var(--ink);
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem);
}
.sobre__topo .migalhas { color: var(--ink-50); margin-bottom: 1.25rem; }
.sobre__topo .migalhas a { color: var(--vinho-detalhe); }

.sobre__titulo {
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  max-width: 22ch; text-wrap: balance;
}
.sobre__lede {
  margin-top: 1.15rem; max-width: 68ch;
  font-size: var(--fs-lede); color: var(--ink-70); line-height: 1.7;
}

/* ──────────────────────────────────────────────────────── 02. HISTÓRIA */
.historia { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.historia__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.historia__texto p { color: var(--ink-70); line-height: 1.8; margin-top: 1.1rem; text-align: justify; text-justify: inter-word; hyphens: auto; }
.historia__texto p:first-child { margin-top: 0; }
.historia__texto strong { color: var(--ink); }

.historia__foto { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.historia__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.historia__foto-legenda {
  margin-top: .6rem; font-size: .82rem; color: var(--ink-50); text-align: center;
}

/* ──────────────────────────────────────── 03. MISSÃO / VISÃO / VALORES */
.valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.valor-card {
  background: var(--surface-alt);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.valor-card__icone {
  width: 46px; height: 46px; border-radius: var(--r);
  display: grid; place-items: center; font-size: 1.35rem;
  background: var(--bordo-100); color: var(--ink);
  margin-bottom: 1rem;
}
.valor-card__titulo { font-size: 1.1rem; margin-bottom: .5rem; }
.valor-card p { color: var(--ink-70); line-height: 1.65; }

/* ───────────────────────────────────────────────── 04. GALERIA DA SEDE */
.galeria-sede__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .85rem;
}
.galeria-sede__item {
  display: block; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 4 / 3; position: relative;
}
.galeria-sede__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s var(--ease);
}
.galeria-sede__item:hover img { transform: scale(1.06); }

/* ──────────────────────────────────────────────────────────── 05. EQUIPE */
.equipe__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}
.pessoa {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pessoa:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.pessoa__foto { aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-alt); }
.pessoa__foto img { width: 100%; height: 100%; object-fit: cover; }
.pessoa__corpo { padding: 1rem 1.1rem 1.2rem; }
.pessoa__cargo {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bordo-600); margin-bottom: .3rem;
}
.pessoa__nome { font-size: 1rem; line-height: 1.3; margin-bottom: .4rem; }
.pessoa__creci { font-size: .8rem; color: var(--ink-50); }
.pessoa__wpp {
  margin-top: .65rem; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 700; color: var(--wpp);
}
.pessoa__wpp svg { font-size: 1rem; }
.pessoa__wpp:hover { color: #179445; }

/* ──────────────────────────────────────────── 06. EQUIPE POR DEPARTAMENTO
   Colunas CSS (não grid) de propósito: com grid, a linha inteira fica tão
   alta quanto o departamento mais longo dela (Equipe de Corretores, com 7
   pessoas) — e um departamento curto na mesma linha (Direção, Gestora de
   Vendas) sobra um vão em branco embaixo antes da próxima linha começar.
   Colunas fazem cada bloco encostar no de cima dentro da própria coluna,
   sem esperar o vizinho da linha terminar. */
.departamentos {
  columns: 2; column-gap: 2.5rem;
}
.departamento { break-inside: avoid; margin-bottom: 2rem; }
.departamento:last-child { margin-bottom: 0; }
.departamento__titulo {
  font-size: .95rem; color: var(--vinho-detalhe);
  padding-bottom: .6rem; margin-bottom: .75rem; border-bottom: 2px solid var(--bordo-100);
}
.departamento__lista { display: grid; gap: .55rem; }
.departamento__lista li { font-size: .9rem; color: var(--ink-70); line-height: 1.5; }
.departamento__lista b { color: var(--ink); font-weight: 700; }
.departamento__lista small { display: block; color: var(--ink-50); font-size: .8rem; }

.galeria-sede__item { cursor: zoom-in; border: 0; padding: 0; }

/* ───────────────────────────────────────────────────────── 07. LIGHTBOX
   Mesmo componente/classes da ficha do imóvel (imovel.css) — repetido aqui
   porque cada página só carrega o próprio CSS, sem cross-load entre elas. */
@keyframes fade { from { opacity: 0; } }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 1rem; padding: clamp(1rem, .5rem + 2vw, 2.5rem);
  background: rgba(15, 1, 6, .96);
  animation: fade .2s var(--ease);
}
.lightbox__img { max-width: 100%; max-height: 82svh; margin-inline: auto; border-radius: var(--r); object-fit: contain; }
.lightbox__barra {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, .5rem + 2vw, 2.5rem);
  color: #fff;
}
.lightbox__contador { font-size: .9rem; font-weight: 700; }
.lightbox__fechar, .lightbox__seta {
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1); color: #fff;
  display: grid; place-items: center; font-size: 1.35rem; cursor: pointer;
  transition: background-color .2s var(--ease);
}
.lightbox__fechar:hover, .lightbox__seta:hover { background: rgba(255, 255, 255, .25); }
.lightbox__seta--prev svg { transform: rotate(90deg); }
.lightbox__seta--next svg { transform: rotate(-90deg); }
body.lightbox-aberto { overflow: hidden; }

/* ─────────────────────────────────────────────────────── 08. RESPONSIVO */
@media (max-width: 1024px) {
  .historia__grid { grid-template-columns: 1fr; }
  .historia__foto { max-width: 420px; order: -1; }
}

@media (max-width: 700px) {
  .galeria-sede__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
  .equipe__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
  .pessoa__corpo { padding: .85rem .9rem 1rem; }
  .departamentos { columns: 1; }

  .lightbox { grid-template-columns: 1fr; }
  .lightbox__seta { position: absolute; top: 50%; transform: translateY(-50%); }
  .lightbox__seta--prev { left: 1rem; }
  .lightbox__seta--next { right: 1rem; }
}