/*
 * Expo Summit SPA — overrides mínimos (prompt.md + paridade com design-system.html):
 * - critical inwink: body overflow hidden → SPA precisa de scroll.
 * - Header: mesmo bloco .app-header do DS; aqui fixamos posição para âncoras (o DS pattern-book usa #ds-doc-nav).
 * - Largura dos cards de programação: .ds-constrain-920 existe só no HTML do pattern-book; replicamos aqui.
 * - Separador de horário: o card CSS injeta "to" em inglês; site pt-BR usa "às".
 */

html.expo-summit-site,
html.expo-summit-site body {
  overflow: auto !important;
  height: auto !important;
  min-height: 100%;
}

html.expo-summit-site #root {
  position: relative;
  min-height: 100vh;
  width: 100%;
  /* Empilhamento: conteúdo fica num contexto abaixo do header fixo (evita cards/elementos a cobrirem o menu). */
  isolation: isolate;
}

/* design-system.html — .ds-constrain-920 (lista de cards) */
.expo-program-list.ds-constrain-920 {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* Header fixo: z-index alto + !important para vencer regras do tema inwink (.app-header { z-index: 1 }, etc.) */
html.expo-summit-site .expo-fixed-app-header.app-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000 !important;
  font-size: 1rem;
  isolation: isolate;
}

html.expo-summit-site .expo-fixed-app-header .app-header-content {
  width: 100%;
  max-width: 100%;
}

/* Conteúdo: contexto de empilhamento abaixo do header; respiro lateral em todas as secções */
.expo-main {
  position: relative;
  z-index: 0;
  padding-top: 5.5rem;
}

html.expo-summit-site .expo-main .dynamicbloc-wrapper {
  padding-inline: clamp(1.125rem, 5vw, 2rem);
  box-sizing: border-box;
}

.expo-main section[id] {
  scroll-margin-top: 6rem;
}

.expo-section .dynamicbloc-wrapper {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

/* Hero: grelha responsiva (layout não vem no bundle; necessário para imagem lateral) */
.expo-hero__inner {
  width: 100%;
  overflow: visible;
}

.expo-hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 1fr;
  overflow: visible;
}

@media (min-width: 900px) {
  .expo-hero__grid {
    grid-template-columns: 1fr minmax(280px, 42%);
  }
}

.expo-hero__figure img {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* Programação: stack de cards (markup = design-system-session-card.css) */
.expo-program-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Separador entre hora início e fim — pt-BR (substitui "to" do design-system-session-card.css) */
article.itemcontent.clickable.card .info .time .time-startDate::after {
  content: "\00A0às\00A0" !important;
  white-space: pre !important;
}

/* Sobre / local */
.expo-sobre-figure {
  margin: 1.5rem 0 0;
}

.expo-sobre-figure img {
  width: 100%;
  max-width: 52rem;
  height: auto;
  display: block;
}

.expo-sobre-caption {
  margin-top: 0.5rem;
  font-size: 0.9em;
  opacity: 0.85;
}

.expo-local-note {
  font-size: 0.95em;
  opacity: 0.85;
}

.expo-local-maplink {
  display: block;
  margin-top: 1rem;
  max-width: 52rem;
}

.expo-local-maplink img {
  width: 100%;
  height: auto;
  display: block;
}

/* Rodapé */
.expo-footer {
  margin-top: 2rem;
}

.expo-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding-block: 2rem;
}

.expo-footer__inner img {
  max-width: 180px;
  height: auto;
}

.expo-footer__social {
  margin: 0;
}

/* Rodapé: mesmo respiro lateral que o main */
html.expo-summit-site footer .dynamicbloc-wrapper {
  padding-inline: clamp(1.125rem, 5vw, 2rem);
  box-sizing: border-box;
}