/*
 Theme Name:   Kiosko Child
 Theme URI:    https://cliquedanutri.com.br
 Description:  Tema filho baseado no Kiosko
 Author:       Marlucio
 Author URI:   https://cliquedanutri.com.br
 Template:     kiosko
 Version:      1.0.0
 Text Domain:  kiosko-child
*/

/* Aqui você coloca o CSS personalizado */

/* Transformamos o UL em grid */
.wp-block-post-template-is-layout-grid.columns-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 colunas no desktop */
  gap: 1rem; /* espaçamento entre produtos */
}

/* Faz cada li ocupar toda a altura disponível dentro da célula */
.wp-block-post-template-is-layout-grid.columns-5 li.wp-block-post {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 350px; /* altura mínima para alinhar botões */
}

/* Responsivo para tablets */
@media (max-width: 1024px) {
  .wp-block-post-template-is-layout-grid.columns-5 {
    grid-template-columns: repeat(3, 1fr); /* 3 colunas no tablet */
  }
}

/* Responsivo para celulares */
@media (max-width: 768px) {
  .wp-block-post-template-is-layout-grid.columns-5 {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas no celular */
  }

  .wp-block-post-template-is-layout-grid.columns-5 li.wp-block-post {
    min-height: 300px; /* ajusta altura para telas pequenas */
  }
}

/* Responsivo para celulares bem pequenos */
@media (max-width: 480px) {
  .wp-block-post-template-is-layout-grid.columns-5 {
    grid-template-columns: 1fr; /* 1 coluna no celular pequeno */
  }

  .wp-block-post-template-is-layout-grid.columns-5 li.wp-block-post {
    min-height: auto; /* altura se ajusta ao conteúdo */
  }
}