/* ==========================================================================
   Flow & Roll — layout novo — página Professores
   Usa as variáveis e classes de /site/novo.css. Só aparência: toda a lógica
   (menu, i18n, modal de bio, cookies) já vem do shell + /script.js + /site/novo.js.
   ========================================================================== */

/* ---------- Abertura ---------- */
.prof-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.prof-hero__bg, .prof-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.prof-hero__bg img { object-fit: cover; object-position: 50% 38%; }
.prof-hero__shade { position: absolute; inset: 0; background: rgba(0, 15, 42, 0.5); }

.prof-hero__copy {
  position: relative;
  z-index: 2;
  padding-top: clamp(140px, 19vh, 210px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.prof-hero__copy .h-display { max-width: 14ch; }
.prof-hero__lead { max-width: 56ch; }

.prof-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.prof-hero__chips .chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--navy-deep);
  box-shadow: inset 0 0 0 1.5px rgba(244, 244, 244, 0.28), 0 8px 20px rgba(0, 8, 26, 0.3);
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s var(--ease);
}
.prof-hero__chips .chip:hover {
  background: var(--sun);
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--sun);
  transform: translateY(-2px);
}

.prof-hero__lead { color: var(--fg); }
.prof-hero__group {
  position: relative;
  display: block;
  margin-top: clamp(28px, 4vw, 48px);
  width: min(1100px, 94vw);
  z-index: 1;
  filter: drop-shadow(0 30px 46px rgba(0, 8, 26, 0.4));
}

@media (max-width: 860px) {
  .prof-hero { padding-bottom: 12px; align-items: stretch; }
  .prof-hero__bg img { object-position: 60% 32%; }
  .prof-hero__copy { padding-top: 104px; gap: 18px; }
  .prof-hero__copy .h-display { max-width: none; }
  .prof-hero__group { width: 150vw; max-width: none; margin: 18px 0 -6px calc(50% - 75vw); }
}

/* ---------- Blocos de cada professor ---------- */
.coach-block { scroll-margin-top: 100px; }
.coach-block--navy { background: var(--navy); color: var(--fg); }
.coach-block--deep { background: var(--navy-deep); color: var(--fg); }

.coach-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
/* Layout alternado: no flip o DOM já vem corpo-depois-mídia, então as
   colunas são invertidas (texto largo primeiro) em vez de usar `order`
   (que não reordena colunas de grid, só a posição de pintura). */
.coach-block__grid--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.coach-block__media {
  margin: 0;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy-2);
  box-shadow: var(--shadow);
}
.coach-block__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* width definida (não max-width): a figura só tem um <img> absoluto por
   dentro, sem tamanho intrínseco, então margin-inline:auto a colapsaria. */
.coach-block__media--sm { width: min(380px, 100%); margin-inline: auto; }

.coach-block__body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.coach-block__role { font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sun); }
.coach-block__name { margin: 0; max-width: none; }

.coach-block__titles { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.coach-block__titles li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.coach-block__titles svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--gold); }

.coach-block__bio { display: flex; flex-direction: column; gap: 16px; max-width: 62ch; }
.coach-block__bio p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--fg-2); }

@media (max-width: 1080px) {
  .coach-block__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
  .coach-block__grid--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

@media (max-width: 860px) {
  .coach-block__grid { grid-template-columns: 1fr; gap: 28px; }
  .coach-block__grid--flip .coach-block__body,
  .coach-block__grid--flip .coach-block__media { order: 0; }
  .coach-block__media { order: -1; width: min(420px, 100%); margin-inline: auto; }
  .coach-block__media--sm { width: min(300px, 100%); }
  .coach-block__body { align-items: stretch; }
  .coach-block__name { font-size: clamp(2rem, 1.5rem + 2.6vw, 2.75rem); }
  .coach-block__bio, .coach-block__titles { max-width: none; }
}

/* ---------- No campeonato ---------- */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.reel-card { position: relative; margin: 0; }
.reel-card__full {
  position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: rgba(0, 23, 53, 0.72); color: var(--fg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease);
}
.reel-card__full svg { width: 20px; height: 20px; }
.reel-card__full:hover { background: var(--sun); color: var(--navy); transform: scale(1.06); }
.reel-card { cursor: zoom-in; }
/* com mouse: o botão só aparece ao passar por cima; no toque fica sempre visível */
@media (hover: hover) and (pointer: fine) {
  .reel-card__full { opacity: 0; transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease); }
  .reel-card:hover .reel-card__full, .reel-card__full:focus-visible { opacity: 1; }
  .reel-card:hover .reel-card__full { background: var(--sun); color: var(--navy); }
}
.reel-grid__vid {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
  object-fit: cover;
}

@media (max-width: 1080px) {
  .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .reel-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    scrollbar-width: none;
    margin-inline: calc((100vw - 100%) / -2);
    padding-inline: calc((100vw - 100%) / 2);
    scroll-padding-inline: 24px;
  }
  .reel-grid::-webkit-scrollbar { display: none; }
  .reel-card { flex: 0 0 min(240px, 72vw); scroll-snap-align: start; }
}