/* ============================================
   InterAI 2026 — Custom Design System
   Aplicado em todas as páginas públicas
   ============================================ */

/* === CORES BASE === */
:root {
  --interai-dark: #1a2634;
  --interai-mid: #2d3e50;
  --interai-blue: #0066cc;
  --interai-white: #ffffff;
  --interai-bg: #f4f6f8;
  --interai-shadow: 0 2px 20px rgba(0,0,0,0.12);
  --interai-radius: 6px;
  --interai-max: 1035px;
}

/* === CONTEÚDO PRINCIPAL: BOX BRANCO === */
section#one .inner,
section#two .inner,
section#three .inner {
  background-color: var(--interai-white) !important;
  color: var(--interai-dark) !important;
  border-radius: var(--interai-radius) !important;
  box-shadow: var(--interai-shadow) !important;
  padding: 40px !important;
  max-width: var(--interai-max) !important;
  margin: 30px auto !important;
}

/* section#two spotlights: cada card também */
section#two section .content .inner {
  background-color: var(--interai-white) !important;
  color: var(--interai-dark) !important;
  padding: 30px !important;
}

/* === FUNDO DAS SEÇÕES: MANTÉM ORIGINAL === */
section#one,
section#two,
section#three {
  background-color: transparent !important;
}

/* === TIPOGRAFIA ESCURA - Apenas para pages com fundo branco (orga, recursos) === */
.alt section#one h1, .alt section#one h2, .alt section#one h3,
.alt section#one h4, .alt section#one h5, .alt section#one h6,
.alt section#two h1, .alt section#two h2, .alt section#two h3,
.alt section#two h4, .alt section#two h5, .alt section#two h6,
.alt section#three h1, .alt section#three h2, .alt section#three h3,
.alt section#three h4, .alt section#three h5, .alt section#three h6 {
  color: var(--interai-dark) !important;
  font-weight: 600 !important;
  font-size: 0.9em !important;
}

.alt section#one h1 { font-size: 1.6em !important; }
.alt section#one h2 { font-size: 1.3em !important; }
.alt section#one h3 { font-size: 1.1em !important; }
.alt section#one h4 { font-size: 0.95em !important; }

.alt section#one header.major h2,
.alt section#two header.major h2,
.alt section#three header.major h2 {
  color: var(--interai-dark) !important;
  border-bottom: 2px solid var(--interai-mid) !important;
  padding-bottom: 10px !important;
}

.alt section#one p, .alt section#one span,
.alt section#one li, .alt section#one td,
.alt section#one blockquote,
.alt section#two p, .alt section#two span,
.alt section#two li, .alt section#two td,
.alt section#three p, .alt section#three span,
.alt section#three li {
  color: var(--interai-dark) !important;
  line-height: 1.7 !important;
  font-size: 0.92em !important;
}

.alt section#one strong, .alt section#one b,
.alt section#two strong, .alt section#two b,
.alt section#three strong, .alt section#three b {
  color: var(--interai-dark) !important;
}

/* === LINKS - Apenas para pages com fundo branco === */
.alt section#one a, .alt section#two a, .alt section#three a {
  color: var(--interai-blue) !important;
  text-decoration: underline !important;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
  cursor: pointer !important;
}

.alt section#one a:hover,
.alt section#two a:hover,
.alt section#three a:hover {
  color: #004499 !important;
  cursor: pointer !important;
}

/* === MENU & HEADER BUTTONS === */
#menu a,
#header a,
nav a,
.button,
button,
input[type="submit"],
input[type="button"],
a.logo {
  cursor: pointer !important;
}

/* === HEADER - Sans-serif === */
#header,
#header a,
#header .logo,
#header .logo strong {
  font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif !important;
}

/* === BANNER - Serif/Sans-serif contrast === */
#banner h1 {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  margin-bottom: 4px !important;
}

#banner h2,
#banner h3 {
  font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif !important;
  font-weight: 300 !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* === HOMEPAGE TILES - Font and Links Improvements === */
.tiles article h3 {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  font-size: 2.15em !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  margin-bottom: 12px !important;
}

.tiles article h3 a {
  font-family: 'Playfair Display', 'Georgia', serif !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-weight: 700 !important;
  border-bottom: 3px solid rgba(255,255,255,0.6) !important;
  padding-bottom: 4px !important;
}

.tiles article h3 a:hover {
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,1) !important;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important;
}

.tiles article p {
  font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif !important;
  font-size: 1.05em !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.9) !important;
  line-height: 1.5 !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* === BLOCKQUOTE === */
section#one blockquote {
  border-left: 4px solid var(--interai-mid) !important;
  padding-left: 20px !important;
  color: #3a4e62 !important;
  font-style: italic !important;
  background: #f8fafc !important;
  margin: 20px 0 !important;
  padding: 15px 20px !important;
  border-radius: 0 4px 4px 0 !important;
}

/* === IMAGEM DOS PATROCINADORES === */
#footer {
  background-color: var(--interai-white) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#footer .inner {
  padding: 30px 0 !important;
  margin: 0 auto !important;
  max-width: var(--interai-max) !important;
}

#footer ul.icons {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
}

#footer ul.icons li {
  width: 100% !important;
  max-width: var(--interai-max) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#footer ul.icons li img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* === CARDS DE MEMBROS DO COMITÊ === */
.committee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0 32px;
}

.committee-grid--sm {
  grid-template-columns: repeat(2, 1fr);
}

.member-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
}

.member-card strong {
  color: var(--interai-dark) !important;
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.4 !important;
}

.member-card span {
  color: #4a6070 !important;
  font-size: 0.76em;
  line-height: 1.4 !important;
}

/* === RESPONSIVO MOBILE === */
@media screen and (max-width: 768px) {
  .committee-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .committee-grid--sm {
    grid-template-columns: 1fr;
  }

  section#one .inner,
  section#two .inner,
  section#three .inner {
    margin: 15px !important;
    padding: 20px !important;
    border-radius: 4px !important;
  }

  section#two section .content .inner {
    padding: 20px !important;
  }

  #footer .inner {
    padding: 20px 0 !important;
    max-width: 100% !important;
  }

  #footer ul.icons li {
    max-width: 100% !important;
  }

  #footer ul.icons li img {
    width: 100% !important;
  }
}

@media screen and (max-width: 480px) {
  .committee-grid,
  .committee-grid--sm {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  section#one .inner,
  section#two .inner,
  section#three .inner {
    margin: 10px !important;
    padding: 15px !important;
  }

  #footer ul.icons li img {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }
}