/* CT Dell Futshow — fotos de treinos e vídeos.
   A primeira dobra/hero permanece exatamente como está. */

/* As imagens do treinador e do lance substituem as fotos genéricas de torneio
   nas seções já existentes, sem mexer nos respectivos textos ou layouts. */
.training .photo-card {
  background:
    linear-gradient(0deg, rgba(0,0,0,.58), transparent 55%),
    url("../img/treinos/lance-futevolei.jpg") center 58% / cover no-repeat,
    url("../img/aula-experimental.jpg") center / cover no-repeat;
}
.community .community-photo {
  background: url("../img/treinos/dell-treinando.jpg") center 43% / cover no-repeat,
              url("../img/galeria-ct.jpg") center / cover no-repeat;
}

/* A galeria agora contém fotografias de aulas e dois vídeos. Não deve
   forçar a composição inteira a caber artificialmente em uma viewport. */
.real-gallery {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(54px, 7vw, 92px) 0 !important;
}
.real-gallery .gallery-head { align-items: end; margin-bottom: 24px; }
.real-gallery .gallery-head h2 { max-width: 10em; }

.training-photo-grid {
  display: grid;
  grid-template-columns: 1.22fr .9fr .9fr;
  gap: 12px;
  min-width: 0;
}
.training-photo {
  position: relative;
  min-width: 0;
  height: clamp(310px, 39vw, 470px);
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--soft);
}
.training-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.training-photo-feature img { object-position: center 45%; }
.training-photo-night img { object-position: center 48%; }
.training-photo-technique img { object-position: center 43%; }
.training-photo figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(9,10,10,.86);
  color: #fff;
  font-size: .75rem;
  line-height: 1.35;
  font-weight: 700;
}

.training-video-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: clamp(42px, 6vw, 70px) 0 19px;
}
.training-video-heading h3 {
  margin: 8px 0 0;
  max-width: 12em;
  font-size: clamp(2rem, 4vw, 3.65rem);
  line-height: .96;
  letter-spacing: -.05em;
}
.training-video-heading p {
  max-width: 335px;
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}
.training-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 430px);
  justify-content: center;
  gap: 16px;
}
.training-video {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}
.training-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: #080808;
  object-fit: contain;
}
.training-video figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
}
.training-video figcaption strong {
  color: var(--ink);
  font-size: 1.1rem;
}
.training-video figcaption span {
  color: var(--muted);
  font-size: .81rem;
  line-height: 1.45;
}
@media (max-width: 820px) {
  .real-gallery { padding: 48px 0 !important; }
  .training-photo-grid { grid-template-columns: 1.2fr .8fr; gap: 9px; }
  .training-photo { height: clamp(210px, 43vw, 340px); border-radius: 14px; }
  .training-photo-feature { grid-row: span 2; height: auto; }
  .training-video-heading { margin-top: 44px; }
  .training-video video { height: auto; }
}
@media (max-width: 600px) {
  .real-gallery { padding: 44px 0 !important; }
  .real-gallery .gallery-head { display: block; }
  .real-gallery .gallery-head p { margin-top: 14px; }
  .training-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-photo-feature { grid-column: 1 / -1; grid-row: auto; height: auto; aspect-ratio: 4 / 3; }
  .training-photo:not(.training-photo-feature) { height: auto; aspect-ratio: 4 / 5; }
  .training-photo figcaption { left: 8px; right: 8px; bottom: 8px; padding: 7px 9px; font-size: .65rem; }
  .training-video-heading { display: block; margin-top: 42px; }
  .training-video-heading p { margin-top: 12px; }
  .training-video-grid { grid-template-columns: 1fr; gap: 12px; }
  .training-video video { height: auto; aspect-ratio: 9 / 16; max-height: none; }
  .training-video figcaption { padding: 13px 15px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .training-photo *,
  .training-video * { scroll-behavior: auto; }
}

/* Keep unavailable videos out of the live page until both player source paths exist. */
.training-video-heading[hidden], .training-video-grid[hidden], .training-video[hidden] { display: none !important; }