/* Arquivo: portal-kit/assets/css/principal-rotativo.css */
/* VERSÃO COM ASPECT-RATIO PARA PREENCHIMENTO PROPORCIONAL E RESPONSIVO */

.pk-destaques-wrapper-1mais2 *,
.pk-destaques-wrapper-1mais2 *::before,
.pk-destaques-wrapper-1mais2 *::after {
  box-sizing: border-box;
}

.pk-destaques-wrapper-1mais2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  gap: 10px; /* Espaçamento entre os blocos */
  margin-bottom: 30px;
}

/* --- Estilos para cada um dos 3 Blocos de Destaque --- */
.pk-destaque-item {
  /* Aplica-se ao .pk-destaque-grande e .pk-destaque-pequeno */
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  background-color: #1c1c1c; /* Fundo bem escuro, a imagem DEVE cobrir */
  /* A ALTURA SERÁ CONTROLADA PELO ASPECT-RATIO ABAIXO */
}

/* Definindo as proporções (aspect ratios) */
.pk-destaque-grande.pk-destaque-item {
  /* Seletor mais específico */
  flex: 2; /* Proporção de largura em relação aos pequenos */
  /* Exemplo de proporção (largura / altura). Ajuste para o visual desejado.
     16/9 (vídeo) = 1.777. Para algo mais alto como na sua imagem de referência "como-pra-ser.jpg",
     talvez algo como 4/2.5 ou 16/10 (que é 8/5 = 1.6) ou 4/2.8.
     Se "como-pra-ser.jpg" for sua meta, tente medir a proporção dela.
     Exemplo visualmente parecido com a referência "como-pra-ser.jpg" para o grande: */
  aspect-ratio: 4 / 2.7; /* Deixa o bloco grande um pouco mais alto que um 16:9 típico */
}

.pk-destaques-coluna-pequenos {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pk-destaque-pequeno.pk-destaque-item {
  /* Seletor mais específico */
  width: 100%; /* Ocupa toda a largura da coluna dos pequenos */
  /* Proporção para os pequenos. Podem ser mais "quadrados" ou seguir a do grande.
     Exemplo para algo como 4:3 ou um pouco mais retangular: */
  aspect-ratio: 16 / 11; /* Ou 4/3 (resulta em 1.33). 16/11 é ~1.45. Teste! */
}

.pk-destaque-link {
  display: block;
  width: 100%;
  height: 100%; /* O link preenche o .pk-destaque-item (que agora tem altura proporcional) */
  text-decoration: none;
  color: #ffffff;
  position: relative;
}

.pk-destaque-thumb {
  /* Container da imagem */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Preenche o .pk-destaque-link */
  z-index: 1;
}

.pk-destaque-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* Tente 'center top' se as cabeças estiverem sendo cortadas */
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pk-destaque-item:hover .pk-destaque-thumb img {
  transform: scale(1.04); /* Zoom mais sutil */
}

.pk-destaque-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.65) 40%,
    /* Gradiente um pouco mais forte na base */ rgba(0, 0, 0, 0.1) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 1;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.pk-destaque-conteudo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 20px 20px 20px; /* Padding: Topo | Direita/Esquerda | Inferior (RESPIRO) */
  z-index: 3;
  box-sizing: border-box;
}

.pk-destaque-titulo {
  margin: 0;
  line-height: 1.25;
  color: #ffffff !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

.pk-destaque-grande .pk-destaque-titulo {
  font-size: 2.1rem; /* Ajustado para o novo aspect-ratio */
  font-weight: 700;
}

.pk-destaque-pequeno .pk-destaque-titulo {
  font-size: 1rem; /* Ajustado para o novo aspect-ratio */
  font-weight: 600;
}

/* --- Slides Internos (Fade) --- */
.pk-slides-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.pk-slide-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease-in-out, visibility 0s linear 0.7s;
}

.pk-slide-item.pk-slide-ativo {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease-in-out;
}

/* --- Navegação --- */
.pk-sub-carrossel {
}

.pk-carrossel-prev,
.pk-carrossel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: rgba(30, 30, 30, 0.55);
  color: #f0f0f0 !important;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  width: 38px; /* Um pouco menor */
  height: 38px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.pk-sub-carrossel:hover .pk-carrossel-prev,
.pk-sub-carrossel:hover .pk-carrossel-next {
  opacity: 0.85;
}

.pk-carrossel-prev:hover,
.pk-carrossel-next:hover {
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 1;
}

.pk-carrossel-prev {
  left: 12px;
} /* Ajuste se necessário */
.pk-carrossel-next {
  right: 12px;
}

/* --- RESPONSIVIDADE COM ASPECT-RATIO --- */
/* Agora as alturas não são mais fixas nas media queries,
   o aspect-ratio cuida delas em proporção à largura.
   Ajustamos principalmente o flex-direction e os tamanhos de fonte/padding. */

@media (max-width: 992px) {
  /* Tablet */
  /* O layout flex 1+2 ainda pode funcionar aqui, o aspect-ratio vai ajustar as alturas. */
  .pk-destaque-grande .pk-destaque-titulo {
    font-size: 1.9rem;
  }
  .pk-destaque-pequeno .pk-destaque-titulo {
    font-size: 1rem;
  }
  .pk-destaque-conteudo {
    padding: 15px 18px 18px 18px;
  }
}

@media (max-width: 768px) {
  /* Mobile Grande / Tablet Retrato - AQUI QUEBRA PARA EMPILHADO */
  .pk-destaques-wrapper-1mais2 {
    flex-direction: column; /* Empilha */
    gap: 15px;
  }
  .pk-destaque-grande, /* Ocupa 100% da largura, altura definida pelo aspect-ratio */
  .pk-destaques-coluna-pequenos {
    /* Ocupa 100% da largura */
    flex-basis: auto; /* Reset do flex-basis */
    width: 100%;
  }
  /* A coluna dos pequenos ainda tem seu gap interno */
  .pk-destaques-coluna-pequenos {
    gap: 10px;
  } /* Gap entre os pequenos empilhados */

  /* Os .pk-destaque-pequeno dentro da coluna também usam seu aspect-ratio */

  .pk-destaque-grande .pk-destaque-titulo {
    font-size: 1.7rem;
  }
  .pk-destaque-pequeno .pk-destaque-titulo {
    font-size: 1.2rem;
  } /* Aumentando um pouco como pediu */
  .pk-destaque-conteudo {
    padding: 12px 15px 15px 15px;
  }
}

@media (max-width: 480px) {
  /* Mobile Pequeno */
  .pk-destaques-wrapper-1mais2 {
    gap: 10px;
  }
  /* O aspect-ratio continua controlando a altura */
  .pk-destaque-grande .pk-destaque-titulo {
    font-size: 1.4rem;
  }
  .pk-destaque-pequeno .pk-destaque-titulo {
    font-size: 1.1rem;
  }
  .pk-destaque-conteudo {
    padding: 10px 12px 12px 12px;
  }
  .pk-carrossel-prev,
  .pk-carrossel-next {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}

.pk-sem-destaques {
  padding: 20px;
  text-align: center;
  background-color: #f0f0f0 !important;
  border: 1px dashed #d0d0d0 !important;
  color: #666666 !important;
  width: 100%;
  border-radius: 8px;
}