/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — Página "A Nossa Empresa"
   Secções: Statement (hero split) · Missão/Valores · Cards flutuantes · Visão
   Os conteúdos são editáveis em Umbraco > A Nossa Empresa
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. STATEMENT ───────────────────────────────────────────────── */
/* Hero de duas colunas: imagem/vídeo à esquerda, texto à direita */
.about-statement {
  background: var(--color-dark);         /* fundo escuro */
  color: var(--color-white);             /* texto branco */
  display: grid;
  grid-template-columns: 1fr 1fr;        /* duas colunas iguais */
  min-height: 90vh;                      /* ocupa quase o ecrã todo */
}
/* coluna esquerda: contentor relativo para a imagem/vídeo em absolute */
.about-statement__img {
  position: relative;                    /* necessário para os filhos em position:absolute */
  overflow: hidden;                      /* corta o conteúdo nas bordas */
}
/* imagem e vídeo de fundo — preenchem toda a célula */
.about-statement__img img,
.about-statement__video {
  position: absolute;                    /* sobrepõe-se a toda a célula */
  inset: 0;                              /* atalho para top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;                     /* corta sem distorcer */
  filter: brightness(0.75);             /* escurece ligeiramente a imagem */
}
/* coluna direita: texto centrado verticalmente com padding fluido */
.about-statement__content {
  display: flex;
  flex-direction: column;
  justify-content: center;              /* centrado verticalmente */
  padding: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem); /* padding responsivo */
}
/* tagline principal em destaque */
.about-statement__tagline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem); /* fluido entre 32px e 52px */
  line-height: 1.1;
  color: var(--color-white);
  margin: 1rem 0 1.5rem;
}
/* mobile: empilha (imagem em cima, texto em baixo) */
@media (max-width: 768px) {
  .about-statement { grid-template-columns: 1fr; min-height: auto; }
  .about-statement__img { height: 280px; position: relative; } /* altura fixa em mobile */
  .about-statement__img img { position: absolute; }            /* mantém o preenchimento absoluto */
}


/* ─── 1 + 4. MISSION + VALUES SIDE BY SIDE ───────────────────────── */
/* Secção clara com missão à esquerda e cards de valores à direita */
.about-mission-values {
  padding: clamp(4rem, 8vw, 7rem) 0;    /* padding vertical responsivo */
  background: var(--color-bg);
}
.about-mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;        /* missão e valores em colunas iguais */
  gap: clamp(2rem, 5vw, 5rem);          /* espaço responsivo entre colunas */
  align-items: center;
}
@media (max-width: 768px) { .about-mv-grid { grid-template-columns: 1fr; } }

/* bloco de missão: borda laranja à esquerda cria acento visual */
.about-mv-mission {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-left: 4px solid var(--color-accent); /* linha laranja vertical */
  padding-left: 2.5rem;                        /* espaço entre a linha e o texto */
}
/* rótulo "MISSÃO" em minúculas laranja acima da citação */
.about-mission__label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.14em;     /* espaçamento entre letras para estilo de legenda */
  text-transform: uppercase;
  color: var(--color-accent);
}
/* citação da missão em destaque tipográfico */
.about-mission__quote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 2rem); /* fluido entre 21px e 32px */
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
  font-style: normal; /* anula o itálico padrão do elemento <blockquote> */
}


/* ─── FLOATING VALUE CARDS ───────────────────────────────────────── */
/* Grelha 2×2 de cards brancos que flutuam com animação desfasada */
.about-mv-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
/* cada card branco com sombra suave */
.about-value-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06); /* sombra muito suave */
}
/* número do valor (01, 02…) em laranja grande */
.about-value__num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}
/* nome do valor em negrito pequeno */
.about-value__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
/* descrição curta do valor */
.about-value__text {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* @keyframes floatCard é definido em variables.css */
/* cada card começa a animação com um atraso diferente para parecer orgânico */
.float-card--1,
.float-card--2,
.float-card--3,
.float-card--4 { will-change: transform; backface-visibility: hidden; } /* optimização GPU */
.float-card--1 { animation: floatCard 6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }       /* sem atraso */
.float-card--2 { animation: floatCard 6s cubic-bezier(0.45, 0, 0.55, 1) infinite 1.5s; }  /* +1.5s */
.float-card--3 { animation: floatCard 6s cubic-bezier(0.45, 0, 0.55, 1) infinite 3s; }    /* +3s */
.float-card--4 { animation: floatCard 6s cubic-bezier(0.45, 0, 0.55, 1) infinite 4.5s; }  /* +4.5s */


/* ─── 4. VISION OVER IMAGE ───────────────────────────────────────── */
/* Secção escura com imagem de fundo opcional e texto de visão centrado */
.about-vision {
  position: relative;                            /* necessário para os pseudo-elementos absolute */
  padding: clamp(5rem, 12vw, 9rem) 0;            /* padding vertical responsivo */
  background: var(--color-dark-2);               /* fallback sem imagem */
  overflow: hidden;                              /* corta qualquer conteúdo que ultrapasse */
}
/* quando a imagem existe, aplica-a como fundo com baixa opacidade */
.about-vision.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vision-bg) center/cover no-repeat; /* --vision-bg definido inline no HTML */
  opacity: 0.2;                                  /* muito subtil — só textura */
}
/* overlay escuro para garantir legibilidade do texto sobre a imagem */
.about-vision__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,13,13,0.85) 0%, rgba(13,13,13,0.5) 100%);
}
/* contentor do texto centrado — fica acima do overlay */
.about-vision__inner {
  position: relative;              /* z-index implícito acima do overlay */
  text-align: center;
  max-width: 760px;
  margin-inline: auto;             /* centrado horizontalmente */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* rótulo "VISÃO" em maiúsculas laranja */
.about-vision__label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
/* frase de visão em destaque — tamanho fluido */
.about-vision__text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.9rem); /* fluido entre 20px e 30px */
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
}