/* --- BASE DE ESTILOS EXCLUSIVA PARA INDEX --- */
/* Variáveis em design-tokens.css (core/styles) */

/* Fontes em design-tokens.css */

html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--surface-base);
  color: var(--text-primary);
  overflow: hidden !important;
  /* BLOQUEIO TOTAL DE SCROLL NA PÁGINA */
}

.container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--page-overlay);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Main: vão simétrico em cima (header) e embaixo (nav). */
.container main {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  height: auto;
  overflow: hidden;
  position: relative;
  z-index: 2;
  padding: 6px max(0px, var(--wpc-safe-right))
    calc(var(--bottom-nav-occupied) + 6px)
    max(0px, var(--wpc-safe-left));
  padding-bottom: calc(var(--bottom-nav-occupied) + 6px) !important;
  margin-top: 0;
  box-sizing: border-box;
}

/* HUD da home — .index-hub (carrossel YouTube + área principal acima da nav) */

.index-hub {
  /* Mesma proporção do .oficiais-container (max 1100px). */
  --index-gutter: clamp(10px, 2.8vw, 16px);
  width: 100%;
  max-width: min(
    1100px,
    calc(100% - var(--wpc-safe-left) - var(--wpc-safe-right))
  );
  flex: 1 1 auto;
  align-self: stretch;
  max-height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media screen and (max-width: 768px) {
  .index-hub {
    /* Coluna full-bleed; o casco visível é o .index-hub-panel (~95%) */
    width: 100%;
    max-width: 100%;
    margin: 0;
    flex: 1 1 auto;
    gap: 0;
  }

  .index-hub-panel {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 480px) {
  .index-hub {
    --index-gutter: clamp(8px, 2.2vw, 12px);
    width: 100%;
    max-width: 100%;
  }
}

/* =====================================================
   HUD INDEX — BLOCO UNIFICADO
   Shell único sobre o wallpaper. Hierarquia de elevação:
     página (--surface-base) → shell (borda única)
       → cards internos (--card + shadow)
         → subcards (--subcard)
   Separação entre seções = gap + padding. Zero linhas duras.
   ===================================================== */

.index-hub-panel {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 var(--index-gutter, 12px);
  border-radius: var(--card-radius);
  border: var(--shell-border);
  background: var(--surface-base);
  /* Shadow real — o hub se destaca sobre o wallpaper */
  box-shadow:
    0 4px 24px var(--black-50),
    inset 0 1px 0 var(--white-04);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vw, 20px);
  padding: clamp(10px, 2vw, 14px) 0;
}

.index-hub-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Dividers no HTML ficam presentes mas invisíveis — gap faz o trabalho */
.index-hub-divider {
  display: none;
}


/* Header da home: mesma altura do chrome (--chrome-bar-height), sem folgas fantasmas */
.container header,
header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: var(--chrome-bar-height) !important;
  min-height: var(--chrome-bar-height) !important;
  max-height: var(--chrome-bar-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  background: var(--surface-base) !important;
  background-color: var(--surface-base) !important;
  background-image: none !important;
  border-bottom: var(--chrome-edge-border);
  overflow: hidden;
}

header h1,
.main-title {
  text-align: center;
  margin: 0 auto;
  padding: 0 56px;
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(1.15rem, 2.8vw, 1.65rem);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  color: var(--primary);
  text-shadow:
    2px 2px 0 var(--black-50),
    -2px 2px 0 var(--black-50),
    2px -2px 0 var(--black-50),
    -2px -2px 0 var(--black-50);
}

title {
  font-family: var(--font-heading);
  font-size: 130%;
}

.main-title .highlight-yellow {
  color: var(--primary-light) !important;
}

.main-title .highlight-white {
  color: var(--text-primary);
}

/* Ajustes responsivos para o layout no-scroll */
@media screen and (max-width: 768px) {
  .container main {
    height: auto;
    margin-top: 0;
    padding-bottom: calc(var(--bottom-nav-occupied) + 6px) !important;
    padding-inline: 0;
    justify-content: flex-start;
  }

  .container header,
  header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    height: var(--chrome-bar-height) !important;
    min-height: var(--chrome-bar-height) !important;
    max-height: var(--chrome-bar-height) !important;
  }

  .main-title,
  header h1 {
    font-size: clamp(1.1rem, 5vw, 1.45rem) !important;
    margin-bottom: 0 !important;
    padding-left: 56px !important;
    padding-right: 56px !important;
    text-align: center !important;
  }

  .social-icons {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    justify-content: center !important;
  }

  .social-icons a {
    font-size: 1.2em !important;
    padding: 2px !important;
  }
}

@media screen and (max-width: 360px) {
  .main-title {
    font-size: 1.2em;
  }
}

@media all and (display-mode: standalone) {
  html,
  body,
  .container {
    height: 100svh;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none;
  }

  .container main {
    overflow: hidden;
    padding-bottom: calc(var(--bottom-nav-occupied) + 6px) !important;
  }
}
/* Estilos para thumbnails e botões play - REMOVIDOS (agora em index-carousel.css) */