/* ==========================================================================
   EMDURB Modern — Components
   Cards, sidebar, processos seletivos, botões, imagens quebradas
   ========================================================================== */

/* ════════════════════════════════════════════════════════════════
   CARDS DE NOTÍCIAS / BLOG
   ════════════════════════════════════════════════════════════════ */
.blog-item .blog-item-wrap,
.recent-post,
li.blog-item {
  background: var(--color-white);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-bounce), box-shadow var(--transition-bounce);
  border: 1px solid var(--color-gray-200) !important;
  margin-bottom: var(--spacing-6);
}

.blog-item .blog-item-wrap:hover,
li.blog-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary) !important;
}

/* Imagem do card */
.blog-item figure,
.blog-item .animated-overlay {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  overflow: hidden !important;
}

.blog-item figure img,
.blog-item .animated-overlay img {
  height: 220px;
  width: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-item:hover figure img,
.blog-item:hover .animated-overlay img {
  transform: scale(1.06);
}

/* Overlay na imagem */
.blog-item figure.animated-overlay figcaption {
  background: linear-gradient(transparent 40%, rgba(0,0,0,0.4) 100%) !important;
}

/* Área de texto */
.blog-item .blog-item-details,
.blog-item .details-wrap {
  padding: var(--spacing-5) var(--spacing-6) var(--spacing-6) !important;
}

/* Data nos cards */
.blog-item .blog-item-details .blog-item-date,
.blog-item time,
.blog-item .post-item-details time {
  font-size: var(--font-size-xs) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-block;
  margin-bottom: var(--spacing-2);
  background: var(--color-primary-light);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* Título do card */
.blog-item h5,
.blog-item h5 a,
.blog-item .details-wrap h5 {
  font-size: var(--font-size-base) !important;
  font-weight: 700 !important;
  color: var(--color-blue-dark) !important;
  line-height: 1.4 !important;
  margin-bottom: var(--spacing-3) !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-item h5 a:hover {
  color: var(--color-primary) !important;
}

/* Excerpt do card */
.blog-item .blog-excerpt,
.blog-item .blog-item-details p {
  font-size: var(--font-size-sm) !important;
  color: var(--color-gray-600) !important;
  line-height: 1.6;
}

/* Grid de cards */
.blog-items.masonry-items,
.blog-items.standard-items {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-8) !important;
  float: none !important;
}

.blog-items.masonry-items > li,
.blog-items.standard-items > li {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Simple Recent Posts widget */
.simple-recent-posts .recent-post {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4) !important;
  border-radius: var(--radius-md) !important;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  margin-bottom: var(--spacing-3) !important;
  border: 1px solid transparent;
}

.simple-recent-posts .recent-post:hover {
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gray-200);
}

.simple-recent-posts .recent-post img {
  border-radius: var(--radius-md) !important;
  width: 90px !important;
  height: 70px !important;
  object-fit: cover !important;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR DE TRANSPARÊNCIA
   ════════════════════════════════════════════════════════════════ */
.sidebar .widget {
  background: var(--color-white);
  border-radius: var(--radius-lg) !important;
  padding: var(--spacing-6) !important;
  border-left: 4px solid var(--color-primary) !important;
  margin-bottom: var(--spacing-6) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: var(--shadow-md);
}

.sidebar .widget-title,
.sidebar .widget h4 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--color-blue-dark) !important;
  margin-bottom: var(--spacing-5) !important;
  padding-bottom: var(--spacing-3) !important;
  border-bottom: 2px solid var(--color-gray-200) !important;
}

.sidebar .widget ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar .widget ul li {
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar .widget ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) var(--spacing-4) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500;
  color: var(--color-gray-700) !important;
  transition: all var(--transition-fast) !important;
  text-decoration: none !important;
  border: none !important;
}

.sidebar .widget ul li a:hover {
  background: var(--color-primary-light) !important;
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
  color: var(--color-primary) !important;
}

.sidebar .widget ul li a::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23607d8b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform var(--transition-fast);
}

.sidebar .widget ul li a:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23e25f33'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
  transform: translateX(3px);
}

/* ════════════════════════════════════════════════════════════════
   PROCESSOS SELETIVOS / CONCURSOS — Cards estilo documento
   ════════════════════════════════════════════════════════════════ */

/* Cards na listagem de categoria */
.category-processos-seletivos .blog-item .blog-item-wrap,
.category-concursos-publicos .blog-item .blog-item-wrap,
.blog-item.category-processos-seletivos .blog-item-wrap,
.blog-item.category-concursos-publicos .blog-item-wrap {
  background: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--spacing-6) var(--spacing-8) !important;
  margin-bottom: var(--spacing-4) !important;
  border: 1px solid var(--color-gray-200) !important;
  border-left: 5px solid var(--color-blue) !important;
  transition: all var(--transition-fast) !important;
}

.category-processos-seletivos .blog-item .blog-item-wrap:hover,
.category-concursos-publicos .blog-item .blog-item-wrap:hover,
.blog-item.category-processos-seletivos .blog-item-wrap:hover,
.blog-item.category-concursos-publicos .blog-item-wrap:hover {
  border-left-color: var(--color-primary) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateX(4px) !important;
}

.category-processos-seletivos .blog-item h5 a,
.category-concursos-publicos .blog-item h5 a {
  font-size: var(--font-size-base) !important;
  font-weight: 700 !important;
  color: var(--color-blue-dark) !important;
}

.category-processos-seletivos .blog-item h5 a:hover,
.category-concursos-publicos .blog-item h5 a:hover {
  color: var(--color-primary) !important;
}

/* Esconder imagem quebrada em processos seletivos */
.category-processos-seletivos .blog-item figure,
.category-concursos-publicos .blog-item figure {
  display: none !important;
}

/* Single de processo seletivo — conteúdo com PDF/documento */
.single .entry-content img[src*="placeholder"],
.single .entry-content img[src=""],
.single .entry-content img:not([src]) {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   ÍCONES DE ACESSO RÁPIDO (Homepage)
   ════════════════════════════════════════════════════════════════ */
.sf-icon-box {
  padding: var(--spacing-8) var(--spacing-6) !important;
  background: var(--color-white) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  text-align: center;
  border: 1px solid var(--color-gray-200) !important;
  border-bottom: 4px solid var(--color-blue) !important;
  transition: all var(--transition-bounce) !important;
}

.sf-icon-box:hover {
  box-shadow: var(--shadow-xl) !important;
  transform: translateY(-6px);
  border-bottom-color: var(--color-primary) !important;
}

.sf-icon-box .sf-icon-box-icon {
  width: 72px !important;
  height: 72px !important;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-blue-light)) !important;
  border-radius: var(--radius-xl) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-5) auto !important;
  transition: background var(--transition-fast);
}

.sf-icon-box:hover .sf-icon-box-icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-blue)) !important;
}

.sf-icon-box .sf-icon-box-icon i,
.sf-icon-box .sf-icon-box-icon .sf-icon {
  font-size: 30px !important;
  color: var(--color-primary) !important;
  transition: color var(--transition-fast);
}

.sf-icon-box:hover .sf-icon-box-icon i,
.sf-icon-box:hover .sf-icon-box-icon .sf-icon {
  color: var(--color-white) !important;
}

.sf-icon-box .sf-icon-box-content-wrap h3 {
  font-size: var(--font-size-base) !important;
  font-weight: 700 !important;
  color: var(--color-blue-dark) !important;
  margin-top: var(--spacing-2) !important;
}

/* ════════════════════════════════════════════════════════════════
   BOTÕES GENÉRICOS
   ════════════════════════════════════════════════════════════════ */
.sf-button.accent,
.btn-primary,
.btn.btn-primary,
input[type="submit"],
button.btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  font-family: var(--font-primary) !important;
  font-size: var(--font-size-sm) !important;
  padding: var(--spacing-3) var(--spacing-6) !important;
  transition: all var(--transition-fast) !important;
  text-transform: none !important;
  letter-spacing: 0;
  box-shadow: none !important;
  cursor: pointer;
}

.sf-button.accent:hover,
.btn-primary:hover,
.btn.btn-primary:hover,
input[type="submit"]:hover,
button.btn-primary:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary) !important;
}

/* Botão secundário (azul) */
.btn-secondary,
.btn.btn-secondary {
  background: var(--color-blue) !important;
  border-color: var(--color-blue) !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  padding: var(--spacing-3) var(--spacing-6) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
  background: var(--color-blue-dark) !important;
  box-shadow: var(--shadow-blue) !important;
}

/* ════════════════════════════════════════════════════════════════
   DATATABLES (Concursos / Processos Seletivos)
   ════════════════════════════════════════════════════════════════ */
.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  width: 100% !important;
}

.dataTable thead th {
  background: var(--color-blue) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: var(--font-size-sm) !important;
  padding: var(--spacing-4) var(--spacing-5) !important;
  border-bottom: none !important;
  letter-spacing: 0.02em;
}

.dataTable tbody tr {
  transition: background var(--transition-fast);
}

.dataTable tbody tr:nth-child(even) {
  background: var(--color-gray-50);
}

.dataTable tbody tr:hover {
  background: var(--color-blue-lighter) !important;
}

.dataTable tbody td {
  padding: var(--spacing-4) var(--spacing-5) !important;
  font-size: var(--font-size-sm) !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
  vertical-align: middle;
  color: var(--color-gray-700);
}

.dataTable tbody td a {
  color: var(--color-blue) !important;
  font-weight: 600;
}

.dataTable tbody td a:hover {
  color: var(--color-primary) !important;
}

.dataTable tfoot th {
  background: var(--color-gray-100) !important;
  padding: var(--spacing-3) var(--spacing-4) !important;
}

.dataTable tfoot input {
  border: 2px solid var(--color-gray-300) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-2) var(--spacing-3) !important;
  font-size: var(--font-size-xs) !important;
  width: 100%;
  transition: border-color var(--transition-fast);
}

.dataTable tfoot input:focus {
  border-color: var(--color-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-2) var(--spacing-4) !important;
  margin: 0 var(--spacing-1) !important;
  transition: all var(--transition-fast) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* ════════════════════════════════════════════════════════════════
   PLACEHOLDER PARA IMAGENS QUEBRADAS
   ════════════════════════════════════════════════════════════════ */
.emdurb-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--spacing-4);
  background: linear-gradient(135deg, var(--color-blue-lighter), var(--color-primary-lighter));
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--spacing-10);
  min-height: 200px;
  text-align: center;
}

.emdurb-image-placeholder svg {
  width: 56px;
  height: 56px;
  color: var(--color-blue);
  opacity: 0.6;
}

.emdurb-image-placeholder .placeholder-text {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-blue);
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════
   DOCUMENT CARD (para substituir imagens quebradas em posts)
   ════════════════════════════════════════════════════════════════ */
.emdurb-doc-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 5px solid var(--color-blue);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6) var(--spacing-8);
  transition: all var(--transition-fast);
  margin-bottom: var(--spacing-5);
}

.emdurb-doc-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateX(4px);
  border-left-color: var(--color-primary);
}

.emdurb-doc-card .doc-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-blue), var(--color-blue-dark));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emdurb-doc-card .doc-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-white);
}

.emdurb-doc-card .doc-info {
  flex: 1;
  min-width: 0;
}

.emdurb-doc-card .doc-title {
  font-weight: 700;
  color: var(--color-blue-dark);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-1);
}

.emdurb-doc-card .doc-date {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.emdurb-doc-card .doc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.emdurb-doc-card .doc-btn:hover {
  background: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary);
}

/* ════════════════════════════════════════════════════════════════
   CARDS PARA FALE CONOSCO
   ════════════════════════════════════════════════════════════════ */
.emdurb-contact-card {
  background: var(--color-white);
  border-left: 5px solid var(--color-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

.emdurb-contact-card h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-blue-dark);
  margin-bottom: var(--spacing-5);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.emdurb-contact-card h3 svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.emdurb-contact-card .contact-item {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  align-items: flex-start;
}

.emdurb-contact-card .contact-label {
  font-weight: 700;
  color: var(--color-gray-800);
  font-size: var(--font-size-sm);
  min-width: 100px;
}

.emdurb-contact-card .contact-value {
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
}

.emdurb-contact-card .contact-value a {
  color: var(--color-primary);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   CARDS PARA DIRIGENTES
   ════════════════════════════════════════════════════════════════ */
.emdurb-director-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-8);
  border-top: 5px solid var(--color-blue);
  text-align: center;
  transition: all var(--transition-bounce);
}

.emdurb-director-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-6px);
  border-top-color: var(--color-primary);
}

.emdurb-director-card .director-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue), var(--color-blue-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-5);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: #fff;
  box-shadow: var(--shadow-blue);
}

.emdurb-director-card .director-role {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  padding: var(--spacing-1) var(--spacing-4);
  font-size: var(--font-size-xs);
  font-weight: 700;
  margin-bottom: var(--spacing-3);
  letter-spacing: 0.03em;
}

.emdurb-director-card .director-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-blue-dark);
  margin-bottom: var(--spacing-2);
}

/* ════════════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════════════ */
.pagination-wrap {
  margin-top: var(--spacing-10);
  text-align: center;
}

.pagination-wrap .page-numbers,
.pagination-wrap li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all var(--transition-fast);
  margin: 0 var(--spacing-1);
  border: 2px solid var(--color-gray-200);
  color: var(--color-gray-700);
}

.pagination-wrap .page-numbers:hover,
.pagination-wrap li a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.pagination-wrap .page-numbers.current,
.pagination-wrap li a.current,
.pagination-wrap li .current {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-primary);
}

/* ════════════════════════════════════════════════════════════════
   SCROLL TO TOP
   ════════════════════════════════════════════════════════════════ */
#back-to-top {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--color-blue) !important;
  transition: all var(--transition-fast) !important;
  width: 48px !important;
  height: 48px !important;
}

#back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl) !important;
  background: var(--color-primary) !important;
}

/* ════════════════════════════════════════════════════════════════
   FORMULÁRIOS
   ════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
  border: 2px solid var(--color-gray-300) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-3) var(--spacing-4) !important;
  font-size: var(--font-size-sm) !important;
  font-family: var(--font-primary) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  background: var(--color-white) !important;
  color: var(--color-gray-800) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-light) !important;
  outline: none !important;
}

/* ════════════════════════════════════════════════════════════════
   LAZY LOAD
   ════════════════════════════════════════════════════════════════ */
img[loading="lazy"] {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVIDADE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .blog-items.masonry-items,
  .blog-items.standard-items {
    grid-template-columns: 1fr !important;
  }

  .sidebar .widget {
    padding: var(--spacing-5) !important;
  }

  .sf-icon-box {
    padding: var(--spacing-6) var(--spacing-4) !important;
  }

  .emdurb-contact-card {
    padding: var(--spacing-5) var(--spacing-6);
  }

  .emdurb-doc-card {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-5);
  }

  .emdurb-director-card {
    padding: var(--spacing-6);
  }
}

@media (max-width: 480px) {
  .blog-item figure img,
  .blog-item .animated-overlay img {
    height: 180px;
  }
}