/* ==========================================================================
   JJACTIVOS — 01-LAYOUT.CSS
   --------------------------------------------------------------------------
   Estruturas de layout reutilizáveis:
   - Container e grelha
   - Secções e bandas (claras, alternadas e escuras)
   - Sistema de "máscaras geométricas" da marca (recorte da fotografia)
   - Placeholders de fotografia com gradiente
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINER
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }

/* --------------------------------------------------------------------------
   2. SECÇÕES / BANDAS
   Alternância de fundo para criar ritmo (spec: "muito branco",
   bandas claras #F4F8FA e bandas escuras deep navy).
   -------------------------------------------------------------------------- */
.section {
  padding-block: clamp(3.5rem, 2rem + 7vw, 1.5rem);
}
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 1.5rem); }

.section--light { background: var(--color-light-bg); }
.section--white { background: var(--color-white); }

/* Banda escura deep navy — usada em cobertura, confiança, CTAs e footer */
.section--dark {
  background: var(--color-deep-navy);
  color: var(--color-white);
  padding-bottom: 50px;
  padding-top: 50px;
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--color-white); }

/* --------------------------------------------------------------------------
   3. GRELHAS AUXILIARES
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Duas colunas assimétricas (texto + visual), típica dos heros */
.grid--split {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

@media (max-width: 1100px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--split { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid--2 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr; }
  .grid--5 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   4. CABEÇALHO DE SECÇÃO (eyebrow + título)
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space-4);
}
/* Traço ciano curto que precede/segue o eyebrow (detalhe da marca) */
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-cyan);
  display: inline-block;
}
.section--dark .eyebrow { color: var(--color-cyan); }

.section-head { max-width: 760px; margin-bottom: var(--space-7); }
.section-head p { color: var(--color-muted); margin-top: var(--space-4); font-size: var(--fs-body-lg); }
.section--dark .section-head p { color: var(--color-muted-on-dark); }

/* --------------------------------------------------------------------------
   5. SISTEMA DE MÁSCARA GEOMÉTRICA
   A spec pede fotografia "recortada pela geometria JJActivos", evitando
   rectângulos genéricos. Recriamos esse recorte com clip-path.
   -------------------------------------------------------------------------- */

/* Contentor do visual (mantém proporção) */
.geo-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* Slot de fotografia. Passou a mostrar a imagem real de arquitectura
   (recortada na geometria da marca). Onde o cliente tiver fotos finais
   específicas (equipas, cidade, etc.), pode substituir por <img> próprio. */
.photo-placeholder {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/hero-architecture-mask.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
/* Textura removida: já temos imagem real */
.photo-placeholder::after { display: none; }
/* Etiqueta de placeholder escondida (já não é placeholder) */
.photo-placeholder__label { display: none; }

/* Variantes de recorte — invocam a geometria da marca (checkmark/onda) */
.mask--check {
  /* Recorte que evoca a "onda"/checkmark do símbolo JJActivos */
  clip-path: polygon(0 22%, 60% 22%, 78% 0, 100% 0, 100% 100%, 22% 100%, 0 78%);
}
.mask--wave {
  clip-path: polygon(12% 0, 100% 0, 100% 78%, 88% 100%, 0 100%, 0 22%);
}
.mask--slash {
  /* Corte diagonal duplo, usado em bandas e imagens de apoio */
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.mask--arrow {
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%, 18% 50%);
}

/* --------------------------------------------------------------------------
   6. UTILITÁRIOS
   -------------------------------------------------------------------------- */
.lead { font-size: var(--fs-body-lg); color: var(--color-muted); }
.section--dark .lead { color: var(--color-muted-on-dark); }

.muted { color: var(--color-muted); }
.section--dark .muted { color: var(--color-muted-on-dark); }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.max-60 { max-width: 60ch; }

/* Breadcrumb (migalhas) das páginas interiores */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}
.breadcrumb a:hover { color: var(--color-blue); }
.breadcrumb span[aria-hidden] { color: var(--color-border-strong); }