/* p2-home.css — ajustes da HOME (hero, founding, carrossel de programas, instrutores). Carrega depois de blocks.css. */

/* ===== Hero: vídeo de fundo que toca sozinho ===== */
/* O vídeo (slide type=video) cobre o quadro como as fotos; sem controles, sem clique, sem interação. */
.hero-slide-video { pointer-events: none; object-fit: cover; background: var(--color-bg, #0f1318); }
.hero-bg .hero-slide-video::-webkit-media-controls { display: none !important; }

/* ===== "Become a Founding Member": foto do grupo como MARCA D'ÁGUA ===== */
.founding--image { padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(72px, 10vw, 120px); }
/* A foto vira marca d'água: muito transparente sobre o fundo da seção, cobrindo tudo, centralizada nas pessoas. */
.founding--image .founding-bg { width: 100%; height: 100%; object-fit: cover; opacity: var(--founding-bg-opacity, .1); pointer-events: none; }
.founding--image picture { position: absolute; inset: 0; display: block; z-index: 0; }
/* Sem o véu escuro do .founding::before: com a foto a 10% ele a apagaria por completo. */
.founding--image::before { background: none; }
/* Founding v3 (pedido do dono 15/10): foto do grupo VISÍVEL, degradês que fundem com as seções vizinhas, painel de vidro com borda dourada. */
.founding--image { background: #0e1219; min-height: 620px; display: flex; align-items: center; }
.founding--image .founding-bg { opacity: calc(var(--founding-bg-opacity, .1) * 5.5) !important; filter: saturate(.85) contrast(1.05); object-fit: cover; }
.founding--image::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 50% 52%, rgba(10,13,18,.55) 0%, rgba(10,13,18,0) 70%),
    linear-gradient(to bottom, rgb(24,29,37) 0%, rgba(24,29,37,0) 22%, rgba(16,19,25,0) 72%, rgb(16,19,25) 100%);
}
.founding--image > *:not(picture) { position: relative; z-index: 2; }
.founding--image .founding-inner {
  max-width: 780px; margin: 0 auto; padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px);
  background: linear-gradient(180deg, rgba(12,16,22,.78), rgba(12,16,22,.86));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212,175,55,.45); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.founding--image .founding-inner h2 { position: relative; padding-bottom: 18px; margin-bottom: 18px; }
.founding--image .founding-inner h2::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 72px; height: 3px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
}
@media (max-width: 767px) { .founding--image { min-height: 0; } .founding--image .founding-inner { border-radius: 14px; } }

/* ===== Carrossel "Programs and Training Experiences": páginas de cards inteiros ===== */
.pcar2 { --pcar2-gap: 16px; --pcar2-n: 1; position: relative; }
@media (min-width: 640px) { .pcar2 { --pcar2-n: 2; } }
@media (min-width: 1024px) { .pcar2 { --pcar2-n: 3; } }
.pcar2-track {
  position: relative; display: flex; gap: var(--pcar2-gap); margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pcar2-track::-webkit-scrollbar { display: none; }
/* Largura exata: N cards inteiros + (N-1) vãos = 100% do trilho. Nada cortado nas laterais. */
.pcar2-slide { flex: 0 0 calc((100% - var(--pcar2-gap) * (var(--pcar2-n) - 1)) / var(--pcar2-n)); min-width: 0; scroll-snap-align: start; }
.pcar2-link { display: block; color: inherit; text-decoration: none; border-radius: 0; -webkit-user-drag: none; }
/* Sem borda arredondada, sem sombra e sem fundo desfocado. A arte é 3:4; "contain" garante que nunca corta. */
.pcar2-frame { display: block; aspect-ratio: 3 / 4; background: #0b0e12; border-radius: 0; overflow: hidden; }
.pcar2-frame picture { display: block; width: 100%; height: 100%; }
.pcar2-img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.pcar2-name { display: block; margin-top: 10px; font-weight: 600; text-align: center; font-size: 15px; line-height: 1.3; }
.pcar2-link:hover .pcar2-name { color: var(--color-accent-light, #6aabf0); }
.pcar2-link:focus-visible { outline: 3px solid var(--color-accent-light, #6aabf0); outline-offset: 3px; }
.pcar2-nav {
  position: absolute; top: calc(50% - 40px); z-index: 3; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0 0 3px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.65); color: #fff; font-size: 30px; line-height: 1;
}
.pcar2-nav[hidden], .pcar2-pause[hidden] { display: none; }
.pcar2-prev { left: 8px; } .pcar2-next { right: 8px; }
.pcar2-nav:hover { background: rgba(0,0,0,.88); }
.pcar2-nav:focus-visible, .pcar2-pause:focus-visible { outline: 2px solid var(--color-accent-light, #6aabf0); outline-offset: 2px; }
.pcar2-pause {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 14px auto 0; padding: 0; cursor: pointer;
  border-radius: 50%; color: #fff; background: rgba(15,19,24,.82); border: 2px solid rgba(255,255,255,.6);
}
.pcar2-pause:hover { border-color: #fff; }
.pcar2-pause .pcar2-pause-ico--play { display: none; }
.pcar2-pause.is-paused .pcar2-pause-ico--pause { display: none; }
.pcar2-pause.is-paused .pcar2-pause-ico--play { display: block; }

/* ===== "Meet Our Instructors": nome primeiro, arte da faixa embaixo ===== */
.instructor-info .ins-belt-img { max-width: 300px; margin: -6px 0 16px; }
.instructor-info .ins-belt-img + .ins-role { margin-top: 0; }
.ins-body .ins-belt-img { max-width: 200px; margin: 4px auto 8px; }
.instructor-info h3 { margin-bottom: 12px; }
@media (max-width: 768px) {
  .instructor-info .ins-belt-img { max-width: 220px; margin-left: auto; margin-right: auto; }
}

/* ===== Carrossel: introdução e botão "Explore" ===== */
.block--program-carousel .sec-head--below { margin-top: 28px; margin-bottom: 18px; }
.block--program-carousel .sec-head--below .section-intro { max-width: 60ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.pcar2-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 220px; white-space: nowrap; letter-spacing: .08em; }
.pcar2-cta::after { content: "\2192"; font-size: 1.15em; line-height: 1; transition: transform .2s ease; }
.pcar2-cta:hover::after, .pcar2-cta:focus-visible::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .pcar2-cta::after { transition: none; } }

/* ===== Hero com vídeo: o quadro tem a proporção do vídeo (sem zoom) ===== */
@media (min-width: 768px) {
  /* 16:9, largura total, no máximo a altura da tela; se a tela for mais "baixa" que 16:9, o vídeo ganha tarjas (letterbox), nunca zoom. */
  /* width:100% explícito: sem ele, o aspect-ratio + max-height encolhe a LARGURA do quadro e ele encosta à esquerda. */
  .hero--media:not(.hero--compact) { width: 100%; max-width: none; margin-left: auto; margin-right: auto; min-height: 0; aspect-ratio: 16 / 9; max-height: none; }
  .hero--media .hero-bg { left: 0; right: 0; width: 100%; }
  /* Vídeo (montagem em 3 colunas) cobre o quadro inteiro, centralizado; artes ficam inteiras e centralizadas. */
  .hero--media .hero-slide-video { object-fit: cover; object-position: center center; }
  .hero--media .hero-art .hero-art-img { width: 100%; height: 100%; object-fit: contain; }
  /* Degradê mais leve na esquerda: o vídeo continua visível por inteiro e o texto segue legível. */
  .hero--media .hero-bg::after {
    background:
      linear-gradient(to right, rgba(15,19,24,.82) 0%, rgba(15,19,24,.5) 32%, rgba(15,19,24,.08) 60%, transparent 75%),
      linear-gradient(to bottom, rgba(15,19,24,.55) 0%, transparent 14%);
  }
  .hero--media .hero-content { text-shadow: 0 2px 16px rgba(0,0,0,.55); }
}
@media (max-width: 767px) {
  /* Celular em pé: quadro 4:5 (o vídeo vertical quase não é cortado; nada do 16:9 ampliado). */
  .hero--media .hero-bg { height: auto; aspect-ratio: 4 / 5; max-height: 64vh; max-height: 64svh; }
  .hero--media .hero-slide-video { object-position: center 40%; }
}
@media (min-width: 768px) {
  /* Quadro 16:9 é mais baixo que a tela cheia: título um pouco menor e respiro embaixo do menu fixo. */
  .hero--media:not(.hero--compact) .hero-content { padding-top: 96px; padding-bottom: 48px; }
  .hero--media:not(.hero--compact) .hero-title { font-size: clamp(2rem, 3.5vw, 3.4rem); }
}

/* ===== Hero: tudo CENTRALIZADO (arte, foto, vídeo), em qualquer largura ===== */
.hero-art { align-items: center; justify-content: center; }
.hero-art picture, .hero-art .hero-art-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.hero-art .hero-art-img { margin: auto; object-position: center center !important; }
.hero-bg-img, .hero-slide-video { object-position: center center; }
@media (min-width: 768px) {
  /* Quadro 16:9 e arte 16:9: a arte ocupa o hero todo, sem faixa vazia (o respiro de 96px do menu só vale no celular). */
  .hero--media .hero-art { padding: 0; }
}

/* ===== Ajustes do dono 15/10 (noite) ===== */
/* Menu sempre legível sobre qualquer imagem do topo: degradê escuro no alto do hero. */
.hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 190px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,10,14,.88) 0%, rgba(8,10,14,.5) 55%, transparent 100%);
}
/* Botões do topo alinhados à esquerda, com o texto. */
.hero-actions { justify-content: flex-start; }
.hero-content .btn, .hero-actions .btn { margin-left: 0; }
/* Texto ao lado de imagem: o rótulo (ex.: "THE ART") começa na mesma linha do topo da imagem. */
.itl { align-items: start; }
.itl-text > :first-child, .itl-text .section-label:first-child { margin-top: 0; }
/* Fundo do founding: mais chão, menos teto. */
/* (enquadramento do fundo do founding vem do ponto focal da mídia; ver HomeOrdemEnquadramentoSeeder) */

/* ===== Faixa dos instrutores: barra 100% da largura, colada na foto, acima do nome, todas iguais ===== */
.ins-belt-img, .ins-belt-bar {
  display: block; width: 100%; max-width: none !important; height: 18px; object-fit: fill;
  margin: 0 !important; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); outline: 1px solid rgba(255,255,255,.18); outline-offset: -1px;
}
.instructor-card .ins-belt-bar, .ins-tile .ins-belt-bar { margin-top: -1px !important; }
.ins-profile-media .ins-belt-img { height: 22px; }
/* Slide com botão dourado (ex.: foto do mestre André em ambiente preto e dourado). */
.hero .btn { transition: background-color .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease; }
.hero.is-theme-gold .hero-actions .btn-primary, .hero.is-theme-gold .hero-actions .btn:first-child {
  background: linear-gradient(135deg, #e9c86b 0%, #c9a13b 55%, #a8801f 100%); border-color: #d4af37; color: #111;
  box-shadow: 0 10px 30px rgba(212,175,55,.35);
}
.hero.is-theme-gold .hero-tag { color: #e2bf5a; }
.hero.is-theme-gold .hero-title span, .hero.is-theme-gold .hero-title em { color: #e2bf5a; }
/* Lista de instrutores: foto + faixa na mesma coluna; a faixa encosta na base da foto. */
.instructor-photo { display: flex; flex-direction: column; }
.instructor-photo .ins-belt-bar { border-radius: 0 0 6px 6px; }
.instructor-photo picture img, .instructor-photo .instructor-img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }