/* =====================================================================
   news.css — página NOTÍCIAS (news.html) · 2026-09-11
   Conteúdo: as publicações da página LinkedIn da LEITEK
   (linkedin.com/company/leitek-innovative-solutions), texto integral e
   imagens, em EN (HTML) e PT (i18n.js, chaves "news.*").
   Carregado DEPOIS de style.css / hero-tweaks.css / v3-patch.css — só
   acrescenta; não sobrepõe nada das outras páginas.
   Secções:
     1. Cabeçalho (foto da serra de Sintra + título)
     2. Publicações — painéis tipo LinkedIn (foto à esquerda | texto à direita)
     3. Carrossel (posts com várias fotos) — news.js
     (sem CTA final: a última faixa liga direta ao rodapé)
   ===================================================================== */

/* ---------- 1. CABEÇALHO ---------- */
/* header-news-sintra.jpg = serra de Sintra com o mar ao fundo (Images/
   horizontes_ai/sintra-mountains_subtil_upscale.png, 2000×1500, 4:3, inteira).
   A pedido (11/09): a foto fica à largura toda, na sua escala natural (SEM
   zoom, sem véu nem gradiente), e o cabeçalho tem a ALTURA DO ECRÃ — o que
   sobra da foto para baixo é cortado; ao fazer scroll aparece logo o fundo
   claro. min(75svh, 56.25vw): três quartos do ecrã; e como a foto está
   DESLOCADA UM QUARTO PARA CIMA (translateY(-25 %), a pedido de 11/09 — a
   janela é a mesma, vê-se a faixa seguinte da foto), o limite 56.25vw é o
   que resta da foto abaixo do deslocamento, para não sobrar espaço vazio. Título e texto sobrepostos em baixo à esquerda
   (≥ 900 px, a branco); em ecrãs estreitos a foto fica baixa demais para o
   texto caber por cima, por isso o texto passa para baixo da fotografia. */
.page-header--news {
  display: block;
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.page-header--news .page-header__bg {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 1500;
  object-fit: fill;
}
.page-header--news .container {
  position: static;
  padding-block: 1.6rem 2.2rem;
}

.page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-strong);
}
.page-header__eyebrow svg { width: 16px; height: 16px; fill: currentColor; }

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}
.page-header__actions .btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ≥ 900 px: texto por cima da fotografia (canto inferior esquerdo), a branco;
   navbar no topo a branco com sombra, como na home (hero-tweaks.css §4/§7) */
@media (min-width: 900px) {
  .page-header--news {
    display: flex;
    align-items: flex-start;             /* texto no TOPO da foto, logo abaixo da navbar — como em Contactos */
    height: min(75svh, 56.25vw);        /* 3/4 do ecrã (o fundo claro vê-se SEM scroll); máx. = foto que resta após o deslocamento */
    padding-top: clamp(7.5rem, 14vh, 9.5rem);
    padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
  }
  .page-header--news .page-header__bg {
    position: absolute;
    top: 0;
    left: 0;                             /* escala natural: largura 100 %, altura da proporção */
    transform: translateY(-25%);         /* um quarto da foto para cima (mesma janela) */
  }
  .page-header--news .container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: 0;
    display: grid;                       /* texto à esquerda | botões à direita */
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 2.5rem;
    align-items: end;
  }
  .page-header--news .page-header__eyebrow,
  .page-header--news .page-header__title,
  .page-header--news .page-header__lead { grid-column: 1; }
  .page-header--news .page-header__actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
  }
  /* o painel da 1.ª notícia SOBREPÕE-SE ao fundo da fotografia (como os
     cartões de Contactos sobre a foto): a 1.ª faixa sobe ~30 % do ecrã; a
     faixa não tem fundo, por isso a foto vê-se à volta do cartão */
  .news .news-band:first-child {            /* especificidade > regra da secção 2 */
    position: relative;
    z-index: 3;
    margin-top: calc(-1 * min(30svh, 22rem));   /* fallback; news.js: imagem da notícia começa na transição da foto */
    padding-top: 0;
  }
  .news-band:first-child .post { box-shadow: 0 22px 60px rgba(44, 47, 32, 0.28); }
  .page-header--news .page-header__eyebrow { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.45); }
  /* título e texto como no cabeçalho de Contactos (branco, sombra forte) */
  .page-header--news .page-header__title  { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.55); }
  .page-header--news .page-header__lead   { color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.5); }
  /* botão Facebook (ghost) sobre a fotografia: fundo claro sólido para ler */
  .page-header--news .btn--ghost { background: rgba(250, 249, 243, 0.92); border-color: rgba(250, 249, 243, 0.92); }

  .page-news .navbar:not(.is-scrolled) .navbar__nav a:not(.btn) {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.5);
  }
  .page-news .navbar:not(.is-scrolled) .brand__slogan {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }
  .page-news .navbar:not(.is-scrolled) .navbar__nav .btn {
    --ub-c: #fefefe;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
            drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  }
}

/* ---------- 2. PUBLICAÇÕES — painel tipo LinkedIn ---------- */
/* cada notícia vive numa FAIXA (.news-band) a toda a largura; as faixas
   alternam branco quente (--bg-1) e o verde-pedra claro (--bg-0) das secções
   .section--alt de Solutions — mesmo tema */
.news { padding-block: 0; }
.news-band { padding-block: clamp(2rem, 4vw, 3.2rem); }
.news-band:nth-child(even) { background: var(--bg-0); }
.news-band:first-child { padding-top: clamp(2.6rem, 5vw, 4rem); }   /* < 900 px; em desktop é 0 (secção 1, sobreposição) */
.news-band:last-child { padding-bottom: clamp(2.2rem, 4.5vw, 3.6rem); }
/* sem CTA final: o rodapé cola-se à última faixa (o rodapé tem margin-top
   = --space-section por defeito, em style.css §17) */
.page-news .footer { margin-top: 0; }

/* o painel: foto | texto — como a vista de uma publicação no LinkedIn,
   sem a interface (gostos, comentários, partilha) */
.post {
  display: grid;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* foto INTEIRA (object-fit: contain, como no LinkedIn); as bandas que sobram
   (foto vertical, ex.: torre de Lagos) são preenchidas com a PRÓPRIA foto
   desfocada e escurecida (.post__bg com style="background-image" no HTML —
   inline, para o url() resolver em relação à página e não a esta folha) */
.post__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #121212;
}
.post__bg {
  position: absolute;
  inset: -24px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(22px) brightness(0.5);
}
.post__media img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* painel de texto */
.post__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.post__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--line);
}
.post__avatar {                       /* símbolo LEITEK (seta), leitek-mark.png 240×240 */
  flex: none;
  width: 48px;
  height: 48px;
  padding: 5px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.post__who strong {
  display: block;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--heading);
}
.post__who small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.post__text {
  padding: 1rem 1.25rem 1.25rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink);
}
.post__title {
  margin-bottom: 0.75rem;
  font-weight: 700;
  color: var(--heading);
}
.post__text p + p,
.post__text ul + p,
.post__text p + ul { margin-top: 0.7rem; }
.post__text ul { margin: 0.3rem 0 0 1.15rem; padding: 0; }
.post__text li { margin-top: 0.25rem; }
.post__text li::marker { color: var(--brand); }
.post__text a { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; }
/* texto recolhido (≈ 8 linhas) + "…more" — news.js mostra o botão só quando
   há texto escondido; ao clicar abre tudo (sem "less", como no LinkedIn) */
.post__body.is-clamped {
  max-height: calc(1.55em * 8);
  overflow: hidden;
}
.post__more {
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}
.post__more:hover { color: var(--brand-strong); text-decoration: underline; }
.post__more[hidden] { display: none; }

/* rodapé do painel: linha atravessada + "View on LinkedIn", na MESMA posição
   em todos os posts (fora da zona de scroll, sempre no fundo do painel) */
.post__foot {
  margin-top: auto;
  padding: 0.8rem 1.25rem 0.95rem;
  border-top: 1px solid var(--line);
}
.post__link { font-weight: 650; }
.post__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  text-decoration: none;
}
.post__link a:hover { text-decoration: underline; }
.post__link svg { width: 17px; height: 17px; fill: currentColor; }

/* --light (parceria N5): foto de produto em PNG transparente e pequena —
   tamanho real, centrada, sobre fundo claro; sem o fundo escuro desfocado */
.post--light .post__media { background: var(--bg-0); }
.post--light .post__media img {
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 88%;
}

/* ---------- 3. CARROSSEL (posts com várias fotos) ---------- */
.post__slides { position: absolute; inset: 0; }
.post__slides img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.post__slides img.is-on { opacity: 1; }
.post__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.post__nav:hover { background: #fff; }
.post__nav--prev { left: 0.8rem; }
.post__nav--next { right: 0.8rem; }
.post__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}
.post__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.post__dots span.is-on { background: #fff; }

/* ---------- desktop: foto (≈ 63 %) | painel (≈ 37 %), altura fixa; o texto
   faz scroll dentro do painel, como no LinkedIn ---------- */
@media (min-width: 900px) {
  .post {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    height: clamp(480px, 64vh, 640px);
  }
  .post__media { aspect-ratio: auto; height: 100%; }
  .post__panel { height: 100%; }
  /* texto: ocupa o que sobra entre o cabeçalho e o rodapé do painel; quando
     está aberto ("…more") e não cabe, faz scroll DENTRO do painel (LinkedIn) */
  .post__text {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(70, 74, 48, 0.35) transparent;
  }
  .post__text::-webkit-scrollbar { width: 8px; }
  .post__text::-webkit-scrollbar-thumb { background: rgba(70, 74, 48, 0.35); border-radius: 8px; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .post__slides img { transition: none; }
}