/* ========================================================================== */
/* nat-receitas-page.css — LIMPO e CONSOLIDADO                               */
/* - Estilos dos CARDS (copiados da home)                                     */
/* - Consolidação dos carrosséis Slick (DCM)                                  */
/* - Sem seletores Swiper                                                     */
/* ========================================================================== */

/* ========================= CARDS (base da home) ========================== */

.nat-receita-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 420px;
}

.nat-receita-card {
  display: flex;
  background: #fdba3b;
  box-shadow: 0 10px 32px rgba(0,0,0,0.14);
  box-sizing: border-box;
  min-height: 340px;
  min-width: 320px;
  padding: 40px;
  border-radius: 0px;
  overflow: hidden;
  align-items: stretch;
  transition: box-shadow .18s;
}

.nat-receita-imgwrap {
  width: 45%;
  aspect-ratio: 1/1;
  min-width: 120px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  border-radius: 0px;
  overflow: hidden;
}

.nat-receita-imgwrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@supports not (aspect-ratio: 1/1) {
  .nat-receita-imgwrap::before {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
}

.nat-receita-info {
  width: 55%;
  flex: 1 1 0;
  padding: 5px 0 0 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.nat-receita-titulo {
  font-size: 50px;
  line-height: 1.1;
  font-weight: bold;
  color: #33260c;
}

.nat-receita-underline {
  border-bottom: 2px solid #33260c;
  width: 100%;
  margin: 8px 0 16px 0;
}

.nat-receita-desc {
  color: #33260c;
  font-size: 1.05em;
  margin-bottom: 2em;
  font-family: "Montserrat", sans-serif;
}

.nat-receita-meta {
  margin-top: auto;
  display: flex;
  gap: 12px;
}

.nat-receita-meta span {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  border: 1px solid #3f1a10;
  border-radius: 32px;
  padding: 2px 16px 3px 16px;
  font-size: 13px;
  color: #33260c;
}

.nat-receita-card.cafe-da-manha { background: #ffb833; }
.nat-receita-card.pratos-principais { background: #ff5f33; }
.nat-receita-card.lanches-ou-petiscos { background: #58bf4d; }

/* Desktop: garante que o rodapé do card “grude” na base */
@media (min-width: 981px) {
  .nat-receita-card { min-height: 420px; }
  .nat-receita-info { min-height: 100%; }
}

/* Mobile/Tablet: card em coluna, imagem por cima */
@media (max-width: 980px) {
  .nat-receita-slide { height: auto; }
  .nat-receita-card {
    flex-direction: column;
    border-radius: 0px;
    min-height: 0;
  }
  .nat-receita-imgwrap {
    width: 100%;
    height: 52vw;          /* altura proporcional */
    border-radius: 0px;
  }
  .nat-receita-info {
    width: 100%;
    padding: 8px 2px;
  }
}

/* ========================= CARROSSEL (Slick/DCM) ========================= */
/* Página de Receitas – Carrosséis (DCM/Slick)
   Estrutura: .slick-list > .slick-track > .slick-slide
   Mantém 1 card em destaque no desktop e 1 por viewport no mobile */

.nat-swiper-receitas-desk {
    overflow-x: hidden;
}

/* Viewport e “pista” não devem cortar laterais */
.nat-swiper-cafe-desk .slick-list,
.nat-swiper-almoco-desk .slick-list,
.nat-swiper-lanche-desk .slick-list,
.nat-swiper-receitas-desk .slick-list {
  overflow: visible;
  height: auto;
}
.nat-swiper-cafe-desk .slick-track,
.nat-swiper-almoco-desk .slick-track,
.nat-swiper-lanche-desk .slick-track,
.nat-swiper-receitas-desk .slick-track {
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transition-timing-function: ease;
}

/* Slides */
.nat-swiper-cafe-desk .slick-slide,
.nat-swiper-almoco-desk .slick-slide,
.nat-swiper-lanche-desk .slick-slide,
.nat-swiper-receitas-desk .slick-slide {
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Wrapper interno do slide ocupa 100% */
.nat-swiper-cafe-desk .slick-slide > div,
.nat-swiper-almoco-desk .slick-slide > div,
.nat-swiper-lanche-desk .slick-slide > div,
.nat-swiper-receitas-desk .slick-slide > div {
  width: 100%;
}

/* =================== DESKTOP (>=981px) =================== */
@media (min-width: 981px) {
  /* largura clamp do card em destaque */
  .nat-swiper-cafe-desk .slick-slide > div,
  .nat-swiper-almoco-desk .slick-slide > div,
  .nat-swiper-lanche-desk .slick-slide > div,
  .nat-swiper-receitas-desk .slick-slide > div {
    width: clamp(640px, 58vw, 840px);
    max-width: 90vw;
    margin: 0 auto;
  }

  /* stack/overlap suave controlado por transform (sem margin negativa) */
  .nat-swiper-cafe-desk .slick-slide,
  .nat-swiper-almoco-desk .slick-slide,
  .nat-swiper-lanche-desk .slick-slide,
  .nat-swiper-receitas-desk .slick-slide {
    margin: 0 !important;
    will-change: transform;
    transform: scale(0.9) translateX(0) !important;
  }
  .nat-swiper-cafe-desk .slick-center,
  .nat-swiper-almoco-desk .slick-center,
  .nat-swiper-lanche-desk .slick-center,
  .nat-swiper-receitas-desk .slick-center {
    transform: scale(1) translateX(0) !important;
    z-index: 5;
  }

  /* vizinhos levemente empurrados */
  .nat-swiper-cafe-desk .previousSlide,
  .nat-swiper-almoco-desk .previousSlide,
  .nat-swiper-lanche-desk .previousSlide,
  .nat-swiper-receitas-desk .previousSlide {
    transform: scale(0.9) translateX(200px) !important;
  }
  .nat-swiper-cafe-desk .nextSlide,
  .nat-swiper-almoco-desk .nextSlide,
  .nat-swiper-lanche-desk .nextSlide,
  .nat-swiper-receitas-desk .nextSlide {
    transform: scale(0.9) translateX(-200px) !important;
  }

  /* opcional: realce no card central */
  .nat-swiper-cafe-desk .slick-center .nat-receita-card,
  .nat-swiper-almoco-desk .slick-center .nat-receita-card,
  .nat-swiper-lanche-desk .slick-center .nat-receita-card,
  .nat-swiper-receitas-desk .slick-center .nat-receita-card {
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
  }
}

/* =================== MOBILE/TABLET (<=980px) =================== */
@media (max-width: 980px) {
  .nat-swiper-cafe-desk .slick-slide,
  .nat-swiper-almoco-desk .slick-slide,
  .nat-swiper-lanche-desk .slick-slide,
  .nat-swiper-receitas-desk .slick-slide {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    height: auto;
    transform: none !important;
  }
  .nat-swiper-cafe-desk .slick-arrow,
  .nat-swiper-almoco-desk .slick-arrow,
  .nat-swiper-lanche-desk .slick-arrow,
  .nat-swiper-receitas-desk .slick-arrow {
    display: none !important;
  }
}

/* Segurança de overflow em seções “casca” */
.slider-clip,
.slider-clip .slick-slider { overflow: visible !important; }

/* Debug (ative temporariamente)
#pac_dcm_carousel_1 { outline: 2px dashed #09f; }
#pac_dcm_carousel_1 .slick-slide { outline: 1px solid #f00; }
*/


/* ========================================================================== */
/* HOTFIX — DCM/Slick vs. CSS do plugin (kill width:835px!important)          */
/* Mantém compatível com futuros carrosséis (#pac_dcm_carousel_1 e afins)     */
/* ========================================================================== */

/* 0) Segurança: viewport e pista sem corte */
.pac_dcm_column_1 .slick-list, .pac_dcm_column_2 .slick-list, .pac_dcm_column_3 .slick-list { overflow: visible !important; padding-left: 0 !important; padding-right: 0 !important; }
.pac_dcm_column_1 .slick-track, .pac_dcm_column_2 .slick-track, .pac_dcm_column_3 .slick-track { display: flex !important; align-items: center; }

/* 1) Desktop: remova a largura fixa do slide do plugin (835px) */
@media (min-width: 981px) {
  /* Aumenta a especificidade usando o id do carrossel */
  .pac_dcm_column_1 #pac_dcm_carousel_1 .slick-track .slick-slide, .pac_dcm_column_2 #pac_dcm_carousel_2 .slick-track .slick-slide, .pac_dcm_column_3 #pac_dcm_carousel_3 .slick-track .slick-slide {
    width: auto !important;
    margin: 0 !important; /* evita “saltos” por margin do plugin */
  }
}

/* 2) Mobile/Tablet: 1 slide por viewport, sem offsets/colapso de altura */
@media (max-width: 980px) {
  .pac_dcm_column_1 #pac_dcm_carousel_1 .slick-track .slick-slide,
  .pac_dcm_column_2 #pac_dcm_carousel_2 .slick-track .slick-slide,
  .pac_dcm_column_3 #pac_dcm_carousel_3 .slick-track .slick-slide {
    width: 90vw !important;
    flex: 0 0 100% !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
  /* Esconde setas no mobile, se o DCM as habilitar */
  .pac_dcm_column_1 .slick-arrow, .pac_dcm_column_2 .slick-arrow, .pac_dcm_column_3 .slick-arrow { display: none !important; }
}

/* 3) Neutraliza 3D do plugin (opcional; deixa seu overlap/scale em paz) */
.pac_dcm_column_1 .previousSlide > div, .pac_dcm_column_1 .nextSlide > div,
.pac_dcm_column_2 .previousSlide > div, .pac_dcm_column_2 .nextSlide > div,
.pac_dcm_column_3 .previousSlide > div, .pac_dcm_column_3 .nextSlide > div
{
  transform: none !important;
}

@media (max-width: 980px) {
  /* A) por ID do carrossel (cobre #pac_dcm_carousel_1, _2, _3…): */
  [id^="pac_dcm_carousel_"] .slick-track .slick-slide,
  [id^="pac_dcm_carousel_"] .slick-track .slick-slide img[class*="wp-image-"] {
    max-height: none !important;
    height: auto !important;
    width: 90vw !important;      /* evita width:auto do plugin */
  }

  /* B) reforço por classe da row (caso o ID mude): sobe para 0,4,0 */
  .nat-swiper-receitas-desk.pac_dcm_column_1 .slick-track .slick-slide,  .nat-swiper-receitas-desk.pac_dcm_column_2 .slick-track .slick-slide, .nat-swiper-receitas-desk.pac_dcm_column_2 .slick-track .slick-slide,
  .nat-swiper-cafe-desk.pac_dcm_column_1 .slick-track .slick-slide,
  .nat-swiper-almoco-desk.pac_dcm_column_2 .slick-track .slick-slide,
  .nat-swiper-lanche-desk.pac_dcm_column_3 .slick-track .slick-slide {
    max-height: none !important;
    height: auto !important;
    width: 90vw !important;
    flex: 0 0 100% !important;
  }

  /* C) ainda mais “barato” para subir especificidade sem mexer no HTML: */
  .pac_dcm_column_1:not(.__hack) .slick-track .slick-slide,
  .pac_dcm_column_1:not(.__hack) .slick-track .slick-slide img[class*="wp-image-"],
    .pac_dcm_column_2:not(.__hack) .slick-track .slick-slide,
  .pac_dcm_column_2:not(.__hack) .slick-track .slick-slide img[class*="wp-image-"],
    .pac_dcm_column_3:not(.__hack) .slick-track .slick-slide,
  .pac_dcm_column_3:not(.__hack) .slick-track .slick-slide img[class*="wp-image-"]{
    /* :not(.__hack) adiciona +1 classe -> 0,4,0 */
    max-height: none !important;
    height: auto !important;
    width:90vw!important;
  }
}

/* Se algum wrapper levar .swiper-slide de outro plugin, evite height:100% */
.nat-receita-slide.swiper-slide { height: auto !important; }




/* Debug (ative se precisar)
#pac_dcm_carousel_1 { outline: 2px dashed #09f; }
#pac_dcm_carousel_1 .slick-slide { outline: 1px solid #f00; }
*/


/* ===========================================================
   MOBILE FIX — card sempre dentro da viewport
   =========================================================== */
@media (max-width: 980px) {
  /* 1) Wrappers do slide até o card: 100% da largura da viewport */
  [id^="pac_dcm_carousel_"] .slick-track .slick-slide > div,
  [id^="pac_dcm_carousel_"] .slick-track .slick-slide > div > .nat-receita-slide,
  [id^="pac_dcm_carousel_"] .slick-track .slick-slide > div > .nat-receita-slide > .nat-receita-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 2) O vilão: min-width do card — zerar no mobile */
  .nat-receita-card {
    min-width: 0 !important;
    /* se quiser, suavize o padding pra evitar aperto em telas muito estreitas */
    padding: 16px;
  }

  /* 3) Filhos em coluna ocupando 100% */
  .nat-receita-imgwrap,
  .nat-receita-info {
    width: 100% !important;
  }
    
    .nat-receita-slide.swiper-slide { height: auto !important; width: 90vw; margin: auto; }

  /* 4) Se houver qualquer largura “auto” do plugin no slide, força 1 por viewport */
  [id^="pac_dcm_carousel_"] .slick-track .slick-slide {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
  }

  /* 5) Evita scroll horizontal no mobile (não precisamos “espiar” vizinhos) */
  .nat-swiper-cafe-desk .slick-list,
  .nat-swiper-almoco-desk .slick-list,
  .nat-swiper-lanche-desk .slick-list,
  .nat-swiper-receitas-desk .slick-list {
    overflow-x: hidden !important;
  }
}

/* ===========================================================
   MOBILE — 1 slide = 1 viewport + tampa de largura contra .slick-track
   =========================================================== */
@media (max-width: 980px) {
  /* 1) Cada slide mede EXATAMENTE a viewport (não 100% da track) */
  [class*="pac_dcm_column_"] [id^="pac_dcm_carousel_"] .slick-track .slick-slide {
    width: 90vw !important;
    max-width: 90vw !important;
    flex: 0 0 100vw !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* 2) Qualquer wrapper interno nunca passa da viewport
        (min(100%, 100vw) evita que 100% “pegue” a largura da track) */
  [class*="pac_dcm_column_"] [id^="pac_dcm_carousel_"] .slick-track .slick-slide > div,
  [class*="pac_dcm_column_"] [id^="pac_dcm_carousel_"] .slick-track .slick-slide .et_pb_code,
  [class*="pac_dcm_column_"] [id^="pac_dcm_carousel_"] .slick-track .slick-slide .et_pb_code_inner,
  [class*="pac_dcm_column_"] [id^="pac_dcm_carousel_"] .slick-track .slick-slide [id^="wpv-view-layout-"],
  [class*="pac_dcm_column_"] [id^="pac_dcm_carousel_"] .slick-track .slick-slide .nat-receita-slide,
  [class*="pac_dcm_column_"] [id^="pac_dcm_carousel_"] .slick-track .slick-slide .nat-receita-card {
    width: min(100%, 100vw) !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }

  /* 3) Sem scroll lateral no mobile */
  [class*="pac_dcm_column_"] [id^="pac_dcm_carousel_"] .slick-list {
    overflow-x: hidden !important;
  }

  /* 4) Garantias do card em coluna */
  .nat-receita-card { min-width: 0 !important; padding: 16px; }
  .nat-receita-imgwrap, .nat-receita-info { width: 100% !important; }
  /* Se precisar, mantenha a imagem proporcional */
  .nat-receita-imgwrap { height: 52vw; }
}

/* Se algum wrapper vier com .swiper-slide, evite height:100% “intruso” */
.nat-receita-slide.swiper-slide { height: auto !important; }