/* ============================================================
   HORST & CO. — PÁGINA "PROJETOS" (grid mosaico)
   ------------------------------------------------------------
   Este arquivo assume que assets/css/style.css já foi carregado
   antes (variáveis de cor, fontes, .nav, .label, .logo-fixo,
   .rodape-fino e .reveal vêm de lá).
   ============================================================ */

.mosaico-page {
  background: var(--pearl);
}

/* ---------- introdução ---------- */
.mosaico-intro {
  padding: 150px var(--pad) 34px;
  max-width: 1440px;
  margin: 0 auto;
}

.mosaico-intro .label { margin-bottom: 18px; }

.mosaico-intro h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.14;
  color: var(--leather);
  max-width: 17ch;
}

/* ---------- grid mosaico ---------- */
.mosaico-secao {
  padding: 20px var(--pad) 120px;
}

/* distribuição pedida pela arquiteta: coluna única centralizada,
   um projeto abaixo do outro, com respiro nas laterais */
.mosaico-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 3vw, 44px);
  max-width: 1440px;
  margin: 0 auto;
}

.mosaico-tile,
.mosaico-tile.tile--tall,
.mosaico-tile.tile--wide,
.mosaico-tile.tile--square,
.mosaico-tile.tile--full {
  /* teste: imagem mais longa, ocupando mais da largura */
  width: min(74vw, 1160px);
}

.mosaico-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--taupe);
  cursor: pointer;
}

.mosaico-tile img {
  width: 100%;
  aspect-ratio: 21 / 10;
  object-fit: cover;
  display: block;
  filter: blur(0px);
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}

/* escurecido no hover — camada separada da imagem embaçada */
.mosaico-overlay {
  position: absolute;
  inset: 0;
  background: rgba(38, 38, 38, 0.35);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.mosaico-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.mosaico-nome {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(14px, 1.5vw, 19px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--pearl);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.mosaico-sub {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.85);
}

/* hover só em dispositivos com ponteiro real — evita "hover preso" no touch */
@media (hover: hover) {
  .mosaico-tile:hover img { filter: blur(5px); transform: scale(1.045); }
  .mosaico-tile:hover .mosaico-overlay,
  .mosaico-tile:hover .mosaico-caption { opacity: 1; }
}

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .mosaico-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 230px; }
}

/* abaixo daqui: sem hover — legenda sempre visível, discreta, abaixo da imagem */
@media (max-width: 820px) {
  .mosaico-intro { padding-top: 130px; }

  .mosaico-grid { gap: 30px; }

  .mosaico-tile,
  .mosaico-tile.tile--tall,
  .mosaico-tile.tile--wide,
  .mosaico-tile.tile--square,
  .mosaico-tile.tile--full {
    width: 100%;
  }

  .mosaico-tile img {
    aspect-ratio: 4 / 5;
    filter: none !important;
    transform: none !important;
  }

  .mosaico-overlay { display: none; }

  /* faixa "embaçada" (vidro fosco) sobre a base da foto, com respiro */
  .mosaico-caption {
    position: absolute;
    inset: auto 0 0 0;
    opacity: 1;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding: 14px 18px;
    background: rgba(250, 248, 245, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mosaico-nome {
    color: var(--leather);
    font-size: 13px;
    letter-spacing: 0.24em;
    text-shadow: none;
  }

  .mosaico-sub {
    color: var(--cacao);
    font-size: 10.5px;
    margin-top: 5px;
  }
}

@media (max-width: 560px) {
  .mosaico-grid { grid-template-columns: 1fr; }
}