/* ==========================================================
   PROJECT PAGES — BASE VISUAL SYSTEM
   Bernard Will
   ----------------------------------------------------------
   Este arquivo só atua em páginas com:
   <body class="base-test project-page">

   A home NÃO é afetada por estas regras.
   ========================================================== */


/* ==========================================================
   01. ALINHAMENTO GERAL
   Mesmas margens laterais do mosaico da home
   ========================================================== */

.base-test.project-page .ssp-page .mxd-container,
.base-test.project-page .ssp-page .mxd-container.grid-container {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}


/* ==========================================================
   02. LINGUAGEM DE MÍDIA
   Cantos retos + outline fino
   ========================================================== */

.base-test.project-page .ssp-page .mxd-divider,
.base-test.project-page .ssp-page .mxd-project-cards__inner,
.base-test.project-page .ssp-page .mxd-values__image {
  border: 1px solid var(--t-bright) !important;
  border-radius: 0 !important;

  overflow: hidden !important;
  box-sizing: border-box;
}


/* Remove qualquer radius herdado do template */
.base-test.project-page .ssp-page .radius-m,
.base-test.project-page .ssp-page .mxd-divider__video,
.base-test.project-page .ssp-page .mxd-divider__video_vertical,
.base-test.project-page .ssp-page .mxd-divider__image,
.base-test.project-page .ssp-page .mxd-project-cards__inner video,
.base-test.project-page .ssp-page .mxd-divider video,
.base-test.project-page .ssp-page video.video,
.base-test.project-page .ssp-page .mxd-values__image {
  border-radius: 0 !important;
}


/* ==========================================================
   03. VÍDEO PRINCIPAL DA PÁGINA
   ========================================================== */

.base-test.project-page
.ssp-page > .mxd-section:first-child
.mxd-divider {
  border: 1px solid var(--t-bright) !important;
  border-radius: 0 !important;

  overflow: hidden !important;
}

.base-test.project-page
.ssp-page > .mxd-section:first-child
.mxd-divider__video,
.base-test.project-page
.ssp-page > .mxd-section:first-child
video {
  border-radius: 0 !important;
}


/* ==========================================================
   04. GRID DE MÍDIAS
   Respiro fino, como os tijolos da home
   ========================================================== */

.base-test.project-page .mxd-project-cards .row,
.base-test.project-page .mxd-values .row {
  --bs-gutter-x: 4px !important;
  --bs-gutter-y: 4px !important;
}

.base-test.project-page .mxd-project-cards__item,
.base-test.project-page .mxd-project-cards__itemv,
.base-test.project-page .mxd-values__item {
  box-sizing: border-box;
}


/* ==========================================================
   05. IMAGENS DE FUNDO
   ========================================================== */

.base-test.project-page .ssp-page .mxd-divider__image,
.base-test.project-page .ssp-page .mxd-values__image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ==========================================================
   06. NAVEGAÇÃO PREV / NEXT
   ========================================================== */

.base-test.project-page .mxd-project__divider {
  height: 1px !important;
  border-radius: 0 !important;
  background-color: var(--t-bright) !important;
}


/* ==========================================================
   07. TABLET
   ========================================================== */

@media only screen and (min-width: 768px) and (max-width: 1199px) {

  .base-test.project-page .ssp-page .mxd-container,
  .base-test.project-page .ssp-page .mxd-container.grid-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

}


/* ==========================================================
   08. MOBILE
   ========================================================== */

@media only screen and (max-width: 767px) {

  .base-test.project-page .ssp-page .mxd-container,
  .base-test.project-page .ssp-page .mxd-container.grid-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .base-test.project-page .mxd-project-cards .row,
  .base-test.project-page .mxd-values .row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 4px !important;
  }

}


/* ==========================================================
   VÍDEOS VERTICAIS — SEM CORTE
   O vídeo passa a definir naturalmente a altura do box.
   ========================================================== */

/*
  O template original usa alturas fixas diferentes para
  .mxd-project-cards__itemv e .mxd-divider__video_vertical.
  Aqui removemos essa dependência para preservar 100% do vídeo.
*/
.base-test.project-page .mxd-project-cards__itemv {
  height: auto !important;
}

.base-test.project-page
.mxd-project-cards__itemv
.mxd-project-cards__inner {
  height: auto !important;

  display: block !important;

  border-radius: 0 !important;
  overflow: hidden !important;
}


/* O container acompanha a proporção real do arquivo de vídeo */
.base-test.project-page
.mxd-project-cards__itemv
.mxd-divider__video_vertical {
  position: relative !important;

  width: 100% !important;
  height: auto !important;

  border-radius: 0 !important;
  overflow: hidden !important;
}


/*
  Retira o posicionamento absoluto e deixa o navegador
  calcular a altura pela proporção intrínseca do MP4.
*/
.base-test.project-page
.mxd-project-cards__itemv
.mxd-divider__video_vertical video {
  position: relative !important;
  inset: auto !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;

  object-fit: contain !important;
  object-position: center center !important;

  border-radius: 0 !important;
}


/* ==========================================================
   RESPONSIVIDADE DOS VÍDEOS VERTICAIS
   ========================================================== */

@media only screen and (max-width: 1199px) {

  .base-test.project-page
  .mxd-project-cards__itemv,
  .base-test.project-page
  .mxd-project-cards__itemv
  .mxd-project-cards__inner,
  .base-test.project-page
  .mxd-project-cards__itemv
  .mxd-divider__video_vertical {
    height: auto !important;
  }

}


/* ==========================================================
   ESPAÇAMENTO EDITORIAL ENTRE MÍDIAS
   Sequência mais contínua, alinhada à estética da home
   ========================================================== */

/*
  Mantém 4px entre grupos visuais diferentes.
  Isso complementa os 4px já usados dentro dos grids.
*/
.base-test.project-page
.ssp-page
.mxd-project
> .mxd-container.grid-container
> .mxd-project__block.no-margin
+ .mxd-block {
  margin-top: 4px !important;
}

.base-test.project-page
.ssp-page
.mxd-project
> .mxd-container.grid-container
> .mxd-block
+ .mxd-block {
  margin-top: 4px !important;
}


/* ==========================================================
   RESPIRO DOS BLOCOS DE TEXTO / CRÉDITOS
   ========================================================== */

/*
  O template usa margens muito grandes nesses blocos.
  Reduzimos apenas os blocos editoriais que não são
  o grid de imagens nem a navegação Prev / Next.
*/
.base-test.project-page
.ssp-page
.mxd-project
> .mxd-container.grid-container
> .mxd-project__block:not(.pre-grid):not(.no-margin) {
  margin-top: 7rem !important;
  margin-bottom: 7rem !important;
}


/* Tela grande: um pouco mais de respiro, sem voltar
   ao espaçamento excessivo do template original. */
@media only screen and (min-width: 1600px) {

  .base-test.project-page
  .ssp-page
  .mxd-project
  > .mxd-container.grid-container
  > .mxd-project__block:not(.pre-grid):not(.no-margin) {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important;
  }

}


/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1199px) {

  .base-test.project-page
  .ssp-page
  .mxd-project
  > .mxd-container.grid-container
  > .mxd-project__block:not(.pre-grid):not(.no-margin) {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
  }

}


/* Mobile */
@media only screen and (max-width: 767px) {

  .base-test.project-page
  .ssp-page
  .mxd-project
  > .mxd-container.grid-container
  > .mxd-project__block:not(.pre-grid):not(.no-margin) {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
  }

}


/* ==========================================================
   PRIMEIRO VÍDEO — RESPIRO DO HEADER
   Alinha a abertura da página de projeto à lógica da home.
   ========================================================== */

/*
  A página interna já recebe o padding padrão do template.
  Acrescentamos aqui o mesmo respiro visual de 4rem que existe
  antes da mídia principal da home em desktop.
*/
.base-test.project-page
.ssp-page > .mxd-section:first-child {
  padding-top: 1.5rem !important;
}


/* Tablet: mantém o respiro, um pouco mais compacto */
@media only screen and (min-width: 768px) and (max-width: 1199px) {

  .base-test.project-page
  .ssp-page > .mxd-section:first-child {
    padding-top: 1.5rem !important;
  }

}


/* Mobile: evita consumir altura demais da tela */
@media only screen and (max-width: 767px) {

  .base-test.project-page
  .ssp-page > .mxd-section:first-child {
    padding-top: 1.4rem !important;
  }

}