/*
  Medic Raptor — Home
  Estilos específicos da página inicial: ambientação do hero (vídeo em
  loop, leve, sem áudio), tipografia de impacto, faixas institucionais.
  Composição + tipografia + luz fazem o trabalho "cinematográfico" — sem
  imagem de banco de estoque genérica.
*/

/* ---------- Faixa de divulgação temporária (Experience 2026) ---------- */
/* Fluxo normal da página, entre header e hero — nunca popup/overlay/
   animação. Ativação e expiração: ver
   public/partials/experience-2026-banner.php e
   app/Content/experience-2026.php ($event['banner']). */

.promo-banner {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-accent);
}

.promo-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.promo-banner__text {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.promo-banner__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-accent);
  font-size: var(--fs-200);
}

.promo-banner__meta {
  font-size: var(--fs-200);
  color: var(--text-secondary);
}

.promo-banner__desc {
  font-size: var(--fs-200);
  color: var(--text-primary);
}

.promo-banner__cta {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .promo-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .promo-banner__text {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

.hero {
  /* Fundo chapado, sem gradiente diluído — a marca é angular e sólida,
     não um wash de cor pastel. */
  background: var(--raptor-black);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 0%, black, transparent 75%);
  opacity: 0.35;
}

/* Acento sólido, aresta dura — nada de glow/blur. Mobile-first: base
   pequena (recorta só o canto da foto do hero, sem invadir o texto
   abaixo dela); cresce a partir de 1024px, onde tem espaço de sobra. */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 130px;
  z-index: 2;
  pointer-events: none;
  background: var(--raptor-olive);
  clip-path: polygon(100% 0, 100% 100%, 30% 0);
  opacity: 0.9;
}

@media (min-width: 1024px) {
  .hero::after {
    width: 340px;
    height: 340px;
  }
}

/* Vídeo de fundo do hero — mesmo tratamento em qualquer largura (o
   clipe é leve, ~2,3MB, o mesmo padrão já usado em /protocolos.php em
   mobile sem problema). */
.hero__media-video {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Leve recuperação de sombra na fotografia/vídeo (feedback de usuários:
     conjunto fotográfico do site percebido como sombrio demais) — sutil,
     sem lavar a imagem nem tocar UI/logo. */
  filter: brightness(1.05) contrast(1.02);
}

/* Wash leve de clima geral, visível em qualquer largura — o contraste
   do texto é responsabilidade do scrim dedicado em .hero__grid::before
   abaixo, não deste wash (por isso ele pode ficar bem mais transparente
   que uma tentativa de resolver as duas coisas com uma camada só). */
.hero__media-video-wash {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(13, 17, 23, 0.28) 0%,
    rgba(13, 17, 23, 0.07) 100%);
}

.hero__grid {
  position: relative;
  z-index: 1;
}

/* Scrim atrás do bloco de texto. Mobile: o texto ocupa quase a largura
   inteira do container (não sobra "lado vazio" pra revelar vídeo como
   em desktop), então é só um preenchimento uniforme — bleed pelo mesmo
   padding do container (--content-padding-inline já muda por
   breakpoint sozinho) pra cobrir até a borda real da hero. */
.hero__grid::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--space-8)) calc(-1 * var(--content-padding-inline)) calc(-1 * var(--space-6));
  z-index: -1;
  pointer-events: none;
  background: rgba(13, 17, 23, 0.62);
}

@media (min-width: 1024px) {
  .hero__grid {
    /* Antes 60ch (~480px): a marca MEDIC RAPTOR não aparece mais como
       wordmark aqui (segue só no header), então a headline — agora o
       elemento dominante do Hero — precisa de uma coluna bem mais
       larga para compor em ~3 linhas sem fragmentar. Ainda deixa faixa
       de vídeo visível à direita dentro do container de 1280px. */
    max-width: 64rem;
    /* Compensa a headline mais alta (3 linhas) sem herdar o mesmo
       respiro vertical generoso que existia entre 6 blocos menores. */
    gap: var(--space-5);
  }

  /* Desktop: vira gradiente ancorado à largura real da coluna de texto
     (não a uma % da hero inteira), revelando o vídeo à direita, onde
     não há texto. Em telas menores (1024–1280px) o texto ocupa
     proporção maior da hero, então uma % fixa deixava o vídeo "vazar"
     atrás do parágrafo — daí o bleed fixo em vez de percentual. */
  .hero__grid::before {
    top: calc(-1 * var(--space-10));
    bottom: calc(-1 * var(--space-9));
    left: calc(-1 * var(--space-8));
    right: -120px;
    background: linear-gradient(90deg,
      rgba(13, 17, 23, 0.74) 0%,
      rgba(13, 17, 23, 0.7) 60%,
      rgba(13, 17, 23, 0) 100%);
  }
}

/* Headline dominante do Hero — assume o papel visual que antes era do
   wordmark "MEDIC RAPTOR" (removido daqui; a marca segue só no
   header). Fonte de corpo (Inter), não a display (Orbitron) do
   wordmark: Orbitron é larga demais para uma frase deste tamanho sem
   forçar quebras ruins ou uma coluna enorme. */
.hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}

/* "Pré-hospitalar" não deve quebrar no hífen interno — se não couber
   ao lado das palavras vizinhas, a palavra inteira desce como bloco. */
.hero__tagline-nowrap {
  white-space: nowrap;
}

/* Territórios técnicos (TCCC/TECC/MARCH/MEDEVAC/Medicina Austera) —
   precisa ser lido de imediato, mas sem competir com o wordmark ou a
   tagline acima. Sobrescreve o tamanho pequeno herdado de layout.css
   (compartilhado com outras heroes), só aqui na Home. */
.hero__eyebrow {
  font-size: clamp(var(--fs-300), 1.6vw, var(--fs-400));
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
  gap: var(--space-2) var(--space-3);
}

.hero__subtext {
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--fs-300);
}

.hero__subtext p + p {
  margin-top: var(--space-3);
}

.hero__origin {
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hero__origin strong {
  color: var(--text-accent);
}

/* Microcopy discreto sob o CTA primário — legível, mas sem competir
   com o wordmark/tagline. Não é selo de e-commerce, é um esclarecimento. */
.hero__cta-note {
  margin-top: var(--space-2);
  font-size: var(--fs-100);
  color: var(--text-secondary);
}

/* ---------- Media band (fotografia entre seções) ---------- */
/* Full-bleed, sem moldura arredondada nem sombra — se precisa de corte,
   é aresta dura via clip-path (variante --cut), nunca border-radius. */

.media-band {
  margin: 0;
  line-height: 0;
  background: var(--raptor-black);
}

/* Altura em vw (não px fixo) — um teto fixo cortava quase toda a
   composição vertical em telas largas (a proporção cortada crescia junto
   com a largura, ao contrário do esperado). Em vw, a fração da foto
   visível fica constante em qualquer largura de viewport. */
.media-band img {
  display: block;
  width: 100%;
  height: clamp(220px, 40vw, 640px);
  object-fit: cover;
}

.media-band--cut img {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

/* ---------- Brazil / Global ---------- */

.origin-panel {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.origin-panel--brazil {
  border-color: color-mix(in srgb, var(--raptor-olive) 45%, var(--border-subtle));
}

.origin-panel--global {
  border-color: var(--border-strong);
}

.origin-panel__label {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---------- CTA final ---------- */

.final-cta {
  text-align: center;
  padding-block: var(--space-9);
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
}

.final-cta h2 {
  font-size: clamp(var(--fs-700), 6vw, var(--fs-800));
}

.final-cta__lead {
  max-width: 60ch;
  margin-inline: auto;
}

.final-cta__note {
  font-size: var(--fs-100);
}

/* ---------- Classroom (vitrine) ---------- */
/* Dobra "sandwich" — imagem cinematográfica seguida de bloco textual,
   no mesmo peso visual das outras faixas de mídia da home. A arte
   (doc-instructor-in-the-field.png / band-classroom-instrutor.jpg) já
   traz instrutor + wordmark + os quatro pilares embutidos; por isso
   aqui usamos height:auto (nunca object-fit:cover) — um crop cortaria
   o capacete ou o texto institucional da própria arte. */

.classroom-showcase__media {
  margin: 0;
  line-height: 0;
  background: var(--raptor-black);
}

.classroom-showcase__media img {
  display: block;
  width: 100%;
  height: auto;
}

.classroom-showcase__header h2 {
  font-size: clamp(var(--fs-600), 5vw, var(--fs-700));
}

.classroom-showcase__body {
  max-width: 65ch;
  color: var(--text-secondary);
}

/* Frase-síntese do posicionamento — "ferramenta, não concorrente" —
   com peso tipográfico maior que o corpo, mas sem virar um segundo H2. */
.classroom-showcase__value {
  max-width: 50ch;
  margin-top: var(--space-5);
  font-size: var(--fs-400);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

.classroom-showcase__audiences {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.classroom-showcase__audiences h3 {
  font-size: var(--fs-300);
  color: var(--text-accent);
}

.classroom-showcase__audiences p {
  margin-top: var(--space-1);
}

@media (min-width: 768px) {
  .classroom-showcase__audiences {
    grid-template-columns: repeat(3, 1fr);
  }
}

.classroom-showcase__b2b {
  margin-top: var(--space-6);
  font-size: var(--fs-200);
}

.classroom-teaser__cta {
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .classroom-teaser__cta {
    justify-content: flex-start;
  }
}