/* ==========================================================================
   SOLUTION · FAMILY — só para solution-family.html
   (fork v4 da solution.html: o bloco INTRO + HOW, antes de Results, conta a
   história da família SafeForest® de 4 sistemas — SafeForest, Duo, Shield e
   Helios / Helios PV — seguindo a apresentação "SafeForest — a family of
   early fire AI detection systems"). Reutiliza os tokens e componentes do
   style.css (.section, .flow, .product, .product__media--unit, .photo-frame,
   .browser-frame, .phone-frame…) e acrescenta só o que não existia.
   NÃO é carregado pela solution.html original.
   --------------------------------------------------------------------------
   ÍNDICE
   1. Media "foto + tecnologia" (fotografia real + selo com a unidade/render)
   2. Cloud: browser-frame sem telemóvel (.app-shot--single)
   3. Câmaras de deteção — grelha de 3 (imagens da versão original)
   ========================================================================== */

/* ==========================================================================
   1. MEDIA "FOTO + TECNOLOGIA" — fotografia real da instalação com a unidade
      (caixa Edge, sensor N5, bullet…) num selo ao canto inferior-direito
   ========================================================================== */
.fam-media {
  position: relative;
  padding: 0 clamp(1.2rem, 4vw, 2rem) clamp(1.7rem, 3.5vw, 2.1rem) 0;
}
.fam-media .photo-frame img {
  aspect-ratio: var(--ar, 16 / 10.5);
  object-position: var(--pos, 50% 50%);      /* enquadramento por foto (inline) */
}
/* 4.1–4.4: todas as imagens grandes com o MESMO formato (16/10.5). O render da
   Duo (caixa .product__media--unit, sem foto) recebe a mesma proporção; a
   câmara fica centrada e escala para caber. */
.family .product > .product__media--unit {
  aspect-ratio: 16 / 10.5;
  margin-left: clamp(1.2rem, 4vw, 2rem);   /* mesma largura que as fotos (que reservam este espaço para o selo) */
}
.family .product > .product__media--unit img { max-height: 100%; }

.fam-media__unit {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(112px, 32%, 176px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background:
    radial-gradient(85% 75% at 50% 42%, rgba(var(--brand-rgb), 0.16), transparent 70%),
    linear-gradient(rgba(var(--brand-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff, var(--bg-0));
  background-size: auto, 22px 22px, 22px 22px, auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(44, 47, 32, 0.24);
}
.fam-media__unit img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  filter: drop-shadow(0 10px 14px rgba(40, 43, 28, 0.28));
}

/* variante: foto inteira, sem cortes nem barras — a moldura adota a proporção
   REAL da imagem (retângulo quase quadrado) mas mantém a mesma ALTURA das
   outras molduras 16/10.5 (altura = largura do contentor × 10.5/16, via cqw).
   Fica centrada na coluna; o selo sobrepõe-se ao canto inferior. */
.fam-media--fit { container-type: inline-size; }
.fam-media--fit .photo-frame {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.fam-media--fit .photo-frame img {
  width: auto;
  max-width: 100%;
  height: calc(100cqw * 10.5 / 16);
  aspect-ratio: auto;
  object-fit: contain;
}

/* variante: selo à ESQUERDA (quando o detalhe da foto está em baixo à direita —
   dome do Helios) */
.fam-media--left { padding: 0 0 clamp(1.7rem, 3.5vw, 2.1rem) clamp(1.2rem, 4vw, 2rem); }
.fam-media--left .fam-media__unit { right: auto; left: 0; }


/* Cloud (slide 18): só o browser-frame, sem telemóvel sobreposto → sem o
   padding-bottom que o .app-shot reserva para o phone-frame */
.app-shot--single { padding-bottom: 0; }

/* ==========================================================================
   3. CÂMARAS DE DETEÇÃO — comuns a toda a família (3 cartões)
   ========================================================================== */
.cams { margin-top: clamp(5.6rem, 12vw, 9rem); }   /* mesmo respiro das linhas .product */
.cams__head { max-width: 68ch; }
.cams__title {
  font-size: var(--fs-h3);
  font-weight: 750;
  color: var(--heading);
  line-height: 1.2;
}
.cams__intro {
  margin-top: 0.85rem;
  color: var(--ink-2);
  text-align: justify;
  hyphens: auto;
}
.cams__grid {
  list-style: none;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
}
.cam-card { display: grid; gap: 0.5rem; align-content: start; }
/* reaproveita o fundo "tecnologia" do style.css, mais compacto */
.cam-card__media.product__media--unit {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  min-height: 230px;
}
.cam-card__media.product__media--unit img { max-height: 210px; }
.cam-card__title {
  margin-top: 0.6rem;
  font-size: 1.02rem;
  font-weight: 750;
  color: var(--heading);
}
.cam-card__text {
  font-size: var(--fs-small);
  color: var(--ink-2);
}
@media (min-width: 720px) {
  .cams__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); }
}

/* reveal escalonado dos cartões das câmaras */
.cam-card:nth-child(2) { transition-delay: 0.06s; }
.cam-card:nth-child(3) { transition-delay: 0.12s; }