/* ==========================================================================
   POLÍTICAS INSTITUCIONAIS — Grid de cards de documentos públicos
   Design: screenshot de referência enviado pelo usuário
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYOUT DA PÁGINA
   -------------------------------------------------------------------------- */

/**
 * @element .politicas-page
 * @description Área principal de conteúdo da página.
 *              Background branco, padding generoso top (compensa o header fixo).
 */
.politicas-page {
  background-color: #ffffff;
  min-height: 60svh;
  padding: 196px 0 80px;
  font-family: 'Google Sans Flex', 'Geist', sans-serif;
}

/**
 * @element .politicas-container
 * @description Container centralizado com max-width e padding lateral.
 */
.politicas-container {
  width: min(calc(100% - 48px), 960px);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   CABEÇALHO DA SEÇÃO
   -------------------------------------------------------------------------- */

/**
 * @element .politicas-header
 * @description Título e subtítulo centralizados no topo da página.
 */
.politicas-header {
  text-align: center;
  margin-bottom: 56px;
}

/**
 * @element .politicas-header__title
 * @description Título principal da seção — "Políticas Institucionais".
 */
.politicas-header__title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

/**
 * @element .politicas-header__subtitle
 * @description Descrição curta abaixo do título.
 */
.politicas-header__subtitle {
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 400;
  color: #6b7280;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   GRID DE CARDS
   -------------------------------------------------------------------------- */

/**
 * @element .politicas-grid
 * @description Grid 2×2 dos cards de política.
 *              Mobile: 1 coluna. Desktop: 2 colunas.
 */
.politicas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

/**
 * @element .politica-card
 * @description Card individual de política institucional.
 *              Borda sutil, fundo branco, border-radius generoso.
 *              Hover: elevação com sombra suave + border tinted.
 */
.politica-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 28px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  cursor: pointer;
}

.politica-card:hover {
  box-shadow: 0 8px 24px rgba(17, 24, 52, 0.08);
  border-color: #d1d5db;
  transform: translateY(-2px);
}

/**
 * @element .politica-card__icon
 * @description Container do ícone SVG. Fundo com cor temática suave.
 *              Tamanho fixo 44×44px, border-radius 10px.
 */
.politica-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.politica-card__icon svg {
  width: 22px;
  height: 22px;
}

/* Variantes de cor por tema */
.politica-card__icon--compliance  { background: #eff6ff; color: #3b82f6; }
.politica-card__icon--anticorrupt { background: #f5f3ff; color: #8b5cf6; }
.politica-card__icon--pld         { background: #ecfdf5; color: #10b981; }
.politica-card__icon--social      { background: #f0fdf4; color: #22c55e; }

/**
 * @element .politica-card__title
 * @description Título do card. Peso 700, cor escura.
 */
.politica-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  margin: 0;
}

/**
 * @element .politica-card__desc
 * @description Descrição curta da política. Cor neutra.
 */
.politica-card__desc {
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

/**
 * @element .politica-card__link
 * @description Link "Acessar documento →" no rodapé do card.
 *              Cor primária em azul, sem underline, com transição.
 */
.politica-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
  margin-top: 4px;
  transition: gap 0.15s ease;
}

.politica-card__link:hover {
  gap: 10px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   BOX DOCUMENTOS PÚBLICOS
   -------------------------------------------------------------------------- */

/**
 * @element .politicas-notice
 * @description Box informativo "Documentos Públicos" no rodapé da seção.
 *              Fundo cinza muito claro, borda sutil, ícone + texto.
 */
.politicas-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  max-width: 520px;
  margin: 0 auto;
}

/**
 * @element .politicas-notice__icon
 * @description Ícone de documento no box de aviso.
 */
.politicas-notice__icon {
  flex-shrink: 0;
  color: #9ca3af;
  margin-top: 2px;
}

.politicas-notice__icon svg {
  width: 20px;
  height: 20px;
}

/**
 * @element .politicas-notice__title
 * @description Título do box de aviso.
 */
.politicas-notice__title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  margin: 0 0 6px;
}

/**
 * @element .politicas-notice__text
 * @description Texto descritivo do box de aviso.
 */
.politicas-notice__text {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   RESPONSIVIDADE
   -------------------------------------------------------------------------- */

/**
 * @breakpoint max 640px
 * @description Mobile: grid passa para coluna única.
 */
@media (max-width: 640px) {
  .politicas-grid {
    grid-template-columns: 1fr;
  }

  .politicas-page {
    padding: 152px 0 60px;
  }

  .politicas-header {
    margin-bottom: 40px;
  }

  .politica-card {
    padding: 22px 20px 20px;
  }

  .politicas-notice {
    padding: 20px;
  }
}