/* =====================================================================
   home-highlights.css — 20-09-2026. Secção "HIGHLIGHTS" da home
   (index.html; era a versão alternativa index-highlights.html, promovida a
   home a 24-09-2026): 3 colunas logo a seguir ao
   hero e antes das soluções — ícone + título + tópicos separados por
   pontos a meio (·).
   Carregado SÓ pela home, depois de style.css / hero-tweaks.css /
   v3-patch.css. Reutiliza os tokens
   do style.css (--heading, --ink, --fire, --line-strong, …).
   Layout:  < 600px  empilhado e centrado
            600–1139 uma linha por tópico (ícone à esquerda, texto à direita)
            ≥ 1140px 3 colunas com filete vertical (só a partir daqui cabem
                     sempre 2 tópicos por linha em cada coluna, PT e EN)
   ===================================================================== */

.highlights__grid {
  display: grid;
  gap: clamp(2.4rem, 6vw, 3rem);
}

.highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ícone — os três PNG têm a MESMA altura (720 px), por isso a mesma altura em
   CSS mantém a espessura do traço igual entre colunas */
.highlight__icon {
  height: clamp(75px, 8.5vw, 105px);
  width: auto;
}

.highlight__title {
  margin-top: 1.3rem;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-wrap: balance;               /* sem palavras órfãs quando parte em 2 linhas */
  color: var(--heading);
}

/* ---- traço vermelho-tijolo entre o título e os tópicos ----
   Em repouso é um traço curto (44 px); com o rato em cima da COLUNA cresce até
   ao comprimento total (--hl-bar). Anima-se o transform (scaleX) e não a
   largura: corre no compositor, por isso fica fluido e não mexe no layout. */
.highlight {
  --hl-bar: 200px;                              /* comprimento cheio */
  --hl-bar-rest: 0.22;                          /* 44 px ÷ 200 px */
}
.highlight__title::after {
  content: "";
  display: block;
  width: var(--hl-bar);
  max-width: 100%;
  height: 3px;
  margin: 0.85rem auto 0;
  border-radius: 2px;
  background: var(--fire);
  transform: scaleX(var(--hl-bar-rest));
  transform-origin: 50% 50%;                    /* cresce do centro para os lados */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.highlight:hover .highlight__title::after { transform: scaleX(1); }

/* ---- tópicos separados por um ponto a meio ----
   Cada <li> é um bloco que não parte (nowrap) com o MESMO respiro dos dois
   lados; o ponto é absoluto, em cima da junção com o tópico anterior — não
   ocupa espaço, por isso a linha fica centrada e escondê-lo não mexe no
   layout. Quando a lista parte em linhas, o script da página marca o tópico
   que ABRE cada linha (.is-line-start: sem ponto à esquerda) e o que a FECHA
   tendo mais tópicos por baixo (.is-line-end: o ponto passa para a direita
   dele) — a 1.ª linha acaba com o divisor, a 2.ª não começa com ele. */
.highlight__topics {
  --hl-gap: 0.8em;                              /* metade do espaço entre tópicos */
  margin-top: 1rem;
  /* o respiro exterior do 1.º/último tópico de cada linha sai para a margem da
     coluna — a lista ganha 2 × --hl-gap de largura útil e parte em menos linhas */
  margin-inline: calc(-1 * var(--hl-gap));
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.9;
}
.highlight__topics li {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding-inline: var(--hl-gap);
}
.highlight__topics li + li::before,        /* o ponto: círculo desenhado, não glifo */
.highlight__topics li.is-line-end::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fire);
}
.highlight__topics li + li::before       { left: 0;  transform: translate(-50%, -50%); }
.highlight__topics li.is-line-end::after { right: 0; transform: translate(50%, -50%); }
.highlight__topics li.is-line-start::before { content: none; }

/* ---- tablet: uma linha por tópico — ícone à esquerda, título + tópicos à direita ---- */
@media (min-width: 600px) and (max-width: 1139.98px) {
  .highlights__grid { gap: 0; }
  .highlight {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto 1fr;   /* título justo; os tópicos ficam com o resto */
    column-gap: clamp(1.4rem, 3.5vw, 2.2rem);
    align-items: start;
    text-align: left;
    padding-block: 1.9rem;
  }
  .highlight:first-child { padding-top: 0; }
  .highlight:last-child  { padding-bottom: 0; }
  .highlight + .highlight { border-top: 1px solid var(--line-strong); }
  .highlight__icon {
    grid-row: 1 / span 2;
    justify-self: center;
    height: 96px;
  }
  .highlight__title { margin-top: 0.15rem; }
  .highlight__title::after {
    margin-left: 0;
    transform-origin: 0 50%;        /* alinhado à esquerda → cresce para a direita */
  }
  /* (alinhado à esquerda: o margin-inline negativo da lista já encosta o
     1.º tópico ao eixo do título) */
}

/* ---- desktop: 3 colunas separadas por um filete vertical ---- */
@media (min-width: 1140px) {
  .highlights__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .highlight {
    --hl-pad: clamp(1.2rem, 2.6vw, 2.4rem);
    padding-inline: var(--hl-pad);
  }
  .highlight + .highlight { border-left: 1px solid var(--line-strong); }
  /* a lista usa quase toda a largura da coluna (fica a 0.4rem dos filetes): o
     respiro exterior dos tópicos é invisível, e assim cabem SEMPRE 2 tópicos na
     1.ª linha e 1 na 2.ª — o mesmo desenho "2 + 1" nas três colunas */
  .highlight__topics { margin-inline: calc(0.4rem - var(--hl-pad)); }

  /* subgrid: a linha do título tem a altura do título MAIS alto, por isso os
     traços vermelhos e os tópicos ficam alinhados entre colunas mesmo quando um
     título parte em 2 linhas (PT) e outro não. Sem suporte → fica o flex acima. */
  @supports (grid-template-rows: subgrid) {
    .highlights__grid { grid-template-rows: auto auto auto; }
    .highlight {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      justify-items: center;
      align-items: start;
    }
    .highlight__title { align-self: end; }
  }
}

/* entrada em cascata (o .reveal vem do style.css §18) */
.highlights__grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.highlights__grid .reveal:nth-child(3) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .highlight__title::after { transition: none; }
}

/* ---------------------------------------------------------------------
   HERO da home (24/25-09-2026)
   • "SafeForest®" por cima do título, a negrito; o ® mais pequeno
     (.hero__reg);
   • frase-assinatura do fundo (hero-tweaks.css §16) com o MESMO tamanho e
     letra do "SafeForest" (--brand-fs, 800, sem espaçamento extra) e, em
     ecrãs ao largo, 5 linhas mais acima, no sítio acertado a olho a 24-09
     (presa pelo topo — ver .hero__tagline);
   • ecrãs ao alto: a frase NÃO sobe (fica por cima do logo LEITEK, como no
     §16) e, nos telemóveis, título e subtítulo ficam um pouco mais pequenos —
     o bloco de texto não pode chegar à mira do fumo. O script do hero em
     index.html garante o resto: afasta a frase do botão (ao largo, parte-a
     em 2 linhas; ao alto, dá mais espaço por baixo do botão) e aumenta a
     altura do hero se o texto ainda tocar na mira.
   --------------------------------------------------------------------- */
.hero { --brand-fs: clamp(1.1rem, 2.1vw, 1.5rem); }

.hero__brand {
  margin: 0 0 0.35em;
  font-size: var(--brand-fs);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.5);
}
.hero__reg {
  font-size: 0.62em;
  vertical-align: 0.42em;
  line-height: 0;
  margin-left: 0.04em;
}

.hero--tagline {
  --tagline-fs: var(--brand-fs);
  --tagline-lift: calc(5 * 1.35 * clamp(0.8rem, 1.5vw, 1.25rem));
}
/* ao largo, a frase fica presa pelo TOPO no sítio onde estava a sua linha a
   24-09 (base + subida + 1 linha do tamanho antigo): a letra maior ou uma 2.ª
   linha crescem para BAIXO, não sobem */
.hero__tagline {
  font-weight: 800;
  letter-spacing: normal;
  bottom: auto;
  top: calc(100% - clamp(0.95rem, 2.5vw, 2.3rem) - var(--tagline-lift)
            - 1.35 * clamp(0.8rem, 1.5vw, 1.25rem));
}
@media (max-aspect-ratio: 1/1) {
  .hero--tagline {
    --tagline-fs: var(--brand-fs);   /* hero-tweaks §16 punha outro tamanho em retrato */
    --tagline-lift: 0px;
  }
  /* repõe a regra de hero-tweaks.css §16, que a de cima (mais tarde) anula */
  .hero__tagline { top: auto; bottom: var(--tagline-bottom); }
  /* o espaço por baixo do botão conta 2 linhas de frase (hero-tweaks §16);
     se a frase partir em 3 (telemóveis estreitos), o script do hero em
     index.html acrescenta o que faltar */
}
@media (max-aspect-ratio: 1/1) and (max-width: 599px) {
  .page-home .hero__title { font-size: 1.625rem; line-height: 1.1; }
  .page-home .hero__lead  { font-size: 1rem; line-height: 1.5; margin-top: 0.9rem; }
}