/* ---  Editorial  --- */
.grid-editorial {
  display: grid;
  grid-template-columns: 1fr; /* Cada card ocupa uma linha inteira */
  background-color: var(--black);
}
.card-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; /* Centraliza os itens verticalmente, a imagem dita a altura */
  overflow: hidden; /* Garante que nada vaze das bordas */
  /* bordas internas top/left evitam redundância na borda externa */
  background-color: var(--black);
  height: 60vh;
  border-bottom: 1px solid var(--black);
}
.card-editorial-image-wrapper {
  overflow: hidden; /* esconde o que ultrapassa o wrapper */
  line-height: 0; /* Remove qualquer espaço extra que o wrapper possa ter */
  width: 100%;
  height: 100%;
}
.card-editorial img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* cobre o container, fazendo crop/zoom quando necessário */
  object-position: center center; /* centraliza o corte */
  transition: transform 10s ease-in-out;
}

.card-editorial-content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centraliza verticalmente */
  height: 100%;
  padding: 30px;
  color: var(--black);
  transition: var(--transition);
  border-left: 1px solid var(--black); /* ainda separa do lado da imagem no layout 2-col */
}
.card-editorial-content h2 {
  color: var(--black);
  padding-bottom: 20px;
}
.card-editorial-content p {
  padding-bottom: 10px;
}
.card-editorial-content .p-small {
}
.card-editorial-content:hover {
  background-color: var(--white);
  text-shadow: none; /* Remove a sombra para melhor legibilidade no fundo claro */
}
.card-editorial:hover .p-small {
  color: var(--black);
}
/* Quando o mouse passa sobre o card inteiro, a imagem aplica o zoom. */
.card-editorial:hover img {
  transform: scale(1.15); /* Aplica um zoom muito sutil na imagem */
  filter: grayscale(
    0
  ); /* Remove o efeito grayscale para mostrar a imagem colorida */
}

/* --- Layout Alternado para os Cards --- */

.grid-editorial > a:nth-child(even) .card-editorial .card-editorial-content {
  order: -1; /* Move o bloco de conteúdo para antes da imagem no fluxo do grid */
  border-left: none; /* Remove a borda da esquerda */
  border-right: 1px solid var(--black); /* Adiciona uma borda à direita para separar da imagem */
}

@media (max-width: 768px) {
  .card-editorial,
  .grid-editorial > a:nth-child(even) .card-editorial {
    grid-template-columns: 1fr; /* Em telas menores, volta para layout de 1 coluna (vertical) */
    height: auto;
  }
  /* Força o wrapper da imagem a ter proporção 16:9 em mobile e a imagem a preencher */
  .card-editorial-image-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    overflow: hidden; /* garante que o crop funcione */
  }
  .card-editorial-image-wrapper img {
    width: 100%;
    height: auto; /* deixa o img respeitar o aspect-ratio do wrapper */
    object-fit: cover;
    object-position: center center;
  }
  .grid-editorial > a:nth-child(even) .card-editorial .card-editorial-content {
    order: 0; /* Move o bloco de conteúdo para antes da imagem no fluxo do grid */
  }
  .card-editorial-content {
    order: initial; /* Garante que o conteúdo venha sempre depois */
    border-left: none; /* remove a divisória central em mobile */
    border-right: none;
    border-top: 1px solid var(--black); /* Adiciona a borda superior de volta */
    padding: 10px;
    align-items: flex-start; /* Alinha o texto à esquerda em mobile para melhor leitura */
    text-align: left; /* Alinha o texto à esquerda em mobile para melhor leitura */
  }
  .card-editorial-content h2 {
    font-size: clamp(22pt, 7vw, 48pt);
  }
  .card-editorial-content p {
    font-size: 15pt;
    margin: 5px 0;
  }
  .post-meta p {
    font-size: 10pt;
  }
}

/* --- LIGHT THEME --- */
/* Card Editorial */
.page-light-theme .card-editorial-content,
.page-light-theme .right-column .card-editorial-content {
  background-color: var(--white);
  color: var(--black);
}
.page-light-theme .card-editorial-content h2,
.page-light-theme .right-column .card-editorial-content h2 {
  background-color: var(--white);
  color: var(--black);
}
.page-light-theme .card-editorial:hover .card-editorial-content,
.page-light-theme .right-column .card-editorial:hover .card-editorial-content {
  background-color: var(--white);
  color: var(--black);
}
.page-light-theme .card-editorial:hover .card-editorial-content h2,
.page-light-theme
  .right-column
  .card-editorial:hover
  .card-editorial-content
  h2 {
  color: var(--black);
}