/**
 * WEB BRAIN — Banners fijos (seccion "banner").
 *
 * Estilos de los banners renderizados por Naccato_WebBrain_Banner_Template via
 * el shortcode [naccato_banners]. Tres formatos: ancho / medio / tile.
 *
 * Tokens al tope para tunear la marca sin tocar el resto. Las tipografias
 * (Oswald para titulos, Roboto para texto) ya las carga el theme WoodMart.
 */

.naccato-wb-banners {
  /* --- Tokens de marca Naccato (ajustables) --- */
  --nwb-navy: #14315c;
  --nwb-navy-2: #1f4a86;
  --nwb-accent: #f4b223;       /* dorado de acento */
  --nwb-text: #ffffff;
  --nwb-text-muted: rgba(255, 255, 255, .82);
  --nwb-radius: 14px;
  --nwb-pad: 28px;

  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  margin: 0;
  /* height 100%: si el banner vive en un slot de ALTURA fija (ej. la columna
     derecha del hero, al lado del slider), la card se estira a esa altura en vez
     de quedar más baja y romper el grid. En slots de altura libre (demo) el
     parent es content-height, asi que 100% no fuerza nada. */
  height: 100%;
}

/* La cadena de Elementor (widget shortcode -> .elementor-shortcode) debe pasar
   el alto hacia abajo para que la card pueda estirarse. Scopeado con :has() a
   solo los shortcodes que contienen NUESTROS banners (no afecta otros shortcodes). */
.elementor-shortcode:has(.naccato-wb-banners) { height: 100%; }

/* Por perfil de producto: vira el gradiente de fondo. */
.naccato-wb-banner--panko  { --nwb-navy: #14315c; --nwb-navy-2: #235a9c; }
.naccato-wb-banner--salsas { --nwb-navy: #5a1f2b; --nwb-navy-2: #9c3346; }
.naccato-wb-banner--bazar  { --nwb-navy: #163a34; --nwb-navy-2: #1f6b5c; }

/* --- Base comun a los 3 formatos --- */
.naccato-wb-banner {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--nwb-radius);
  background: linear-gradient(115deg, var(--nwb-navy) 0%, var(--nwb-navy-2) 100%);
  color: var(--nwb-text);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  transition: transform .25s ease, box-shadow .25s ease;
  min-height: 180px;
}
.naccato-wb-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
  color: var(--nwb-text);
}

.naccato-wb-banner__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: var(--nwb-pad);
  z-index: 2;
  flex: 1 1 55%;
}

.naccato-wb-banner__kicker {
  font-family: "Oswald", "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nwb-accent);
}

.naccato-wb-banner__title {
  font-family: "Oswald", "Roboto", sans-serif;
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  color: var(--nwb-text);
}

.naccato-wb-banner__subtitle {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  color: var(--nwb-text-muted);
  max-width: 38ch;
}

.naccato-wb-banner__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--nwb-accent);
  color: #1a1a1a;
  font-family: "Oswald", "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.naccato-wb-banner:hover .naccato-wb-banner__cta {
  filter: brightness(1.06);
}

.naccato-wb-banner__media {
  position: relative;
  flex: 1 1 45%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.naccato-wb-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: contain;       /* packshots transparentes: NO recortar */
  object-position: center;
}

/* =================== FORMATO: ancho (full-width) =================== */
.naccato-wb-banner--ancho {
  flex: 1 1 100%;
  min-height: 240px;
}
.naccato-wb-banner--ancho .naccato-wb-banner__title { font-size: 30px; }
.naccato-wb-banner--ancho .naccato-wb-banner__body  { flex-basis: 52%; }
.naccato-wb-banner--ancho .naccato-wb-banner__media { flex-basis: 48%; }

/* =================== FORMATO: medio (1/2 columna) =================== */
.naccato-wb-banner--medio {
  flex: 1 1 calc(50% - 10px);
  min-width: 320px;
  min-height: 200px;
}
.naccato-wb-banner--medio .naccato-wb-banner__title { font-size: 23px; }
.naccato-wb-banner--medio .naccato-wb-banner__media img { max-height: 190px; }

/* =================== FORMATO: tile (compacto) =================== */
.naccato-wb-banner--tile {
  flex: 1 1 calc(33.333% - 14px);
  min-width: 220px;
  min-height: 150px;
  flex-direction: column;
  align-items: stretch;
}
.naccato-wb-banner--tile .naccato-wb-banner__media {
  flex: 0 0 auto;
  padding-top: 14px;
}
.naccato-wb-banner--tile .naccato-wb-banner__media img { max-height: 92px; }
.naccato-wb-banner--tile .naccato-wb-banner__body {
  flex: 1 1 auto;
  padding-top: 12px;
  gap: 6px;
}
.naccato-wb-banner--tile .naccato-wb-banner__title { font-size: 19px; }
.naccato-wb-banner--tile .naccato-wb-banner__cta {
  margin-top: auto;
  padding: 7px 16px;
  font-size: 12px;
}
/* El tile sin imagen centra el texto verticalmente. */
.naccato-wb-banner--tile.is-no-image .naccato-wb-banner__body { justify-content: center; }

/* =================== FORMATO: vertical (card CLARO, packshot abajo) =================== */
/* Estilo "Energy Drinks" del demo: fondo claro, texto centrado en columna
   (kicker -> titulo -> CTA), y el packshot grande centrado ABAJO. */
.naccato-wb-banner--vertical {
  flex: 1 1 calc(33.333% - 14px);
  /* min-width 0: cuando el banner va en un slot angosto (ej. 2 cards lado a lado
     en la columna derecha del hero), debe poder ENCOGERSE en vez de forzar
     overflow horizontal y romper el grid. En multi-card (demo) igual encajan. */
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px 0;
  /* Tema CLARO: invierte texto/fondo respecto de los otros formatos. */
  --nwb-text: #14315c;
  --nwb-text-muted: #54657d;
  color: var(--nwb-text);
  background: linear-gradient(180deg, #e9f2fb 0%, #cfe2f5 100%);
}
.naccato-wb-banner--vertical.naccato-wb-banner--panko  { background: linear-gradient(180deg, #e9f2fb 0%, #cfe2f5 100%); --nwb-accent: #235a9c; }
.naccato-wb-banner--vertical.naccato-wb-banner--salsas { background: linear-gradient(180deg, #fbecee 0%, #f3d2d8 100%); --nwb-accent: #9c3346; }
.naccato-wb-banner--vertical.naccato-wb-banner--bazar  { background: linear-gradient(180deg, #e9f7f3 0%, #cfeee6 100%); --nwb-accent: #1f6b5c; }

.naccato-wb-banner--vertical .naccato-wb-banner__body {
  order: 1;
  flex: 0 0 auto;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 0 0 18px;
}
.naccato-wb-banner--vertical .naccato-wb-banner__kicker   { color: var(--nwb-text-muted); }
.naccato-wb-banner--vertical .naccato-wb-banner__title    { font-size: 26px; }
.naccato-wb-banner--vertical .naccato-wb-banner__subtitle { max-width: 30ch; }

/* CTA estilo "Ver Mas" subrayado (no pill). */
.naccato-wb-banner--vertical .naccato-wb-banner__cta {
  background: transparent;
  color: var(--nwb-text);
  padding: 4px 2px 6px;
  border-radius: 0;
  border-bottom: 3px solid var(--nwb-accent);
  letter-spacing: 1.5px;
}
.naccato-wb-banner--vertical:hover .naccato-wb-banner__cta { filter: none; opacity: .8; }

.naccato-wb-banner--vertical .naccato-wb-banner__media {
  order: 2;
  width: 100%;
  /* flex-basis 0 + min-height 0: la imagen NO impone su alto sobre la fila del
     hero. Asi el alto de la fila lo manda la columna del slider (alto fijo de
     WoodMart) y estas cards se estiran/encogen para igualarlo. Robusto ante
     titulos de 1 o 2 lineas: el body toma lo que necesita y el media absorbe el
     resto sin desbordar. */
  flex: 1 1 0;
  min-height: 0;
  align-self: stretch;
  align-items: flex-end;   /* packshot anclado ABAJO del espacio disponible */
  margin-top: 0;
}
/* La imagen escala al espacio disponible del media (nunca fuerza el alto de la
   card). Cap de 300px para el layout multi-card del demo, donde las cards son
   mas altas. */
.naccato-wb-banner--vertical .naccato-wb-banner__media img { max-height: 100%; max-width: 100%; height: auto; }

/* =================== Responsive =================== */
@media (max-width: 768px) {
  .naccato-wb-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .naccato-wb-banner__media { order: -1; }
  .naccato-wb-banner__media img { max-height: 160px; }
  .naccato-wb-banner--medio,
  .naccato-wb-banner--tile { flex-basis: 100%; min-width: 0; }
  .naccato-wb-banner--ancho .naccato-wb-banner__title { font-size: 25px; }
  /* El vertical conserva centrado + imagen ABAJO tambien en mobile. */
  .naccato-wb-banner--vertical { flex-basis: 100%; min-width: 0; align-items: center; text-align: center; }
  /* En mobile la card se apila a lo alto de su contenido (no hay fila de altura
     fija que iguale al slider), asi que el media vuelve a dimensionarse por su
     contenido: sin esto, flex-basis 0 + min-height 0 colapsarian la imagen. */
  .naccato-wb-banner--vertical .naccato-wb-banner__media { order: 2; flex: 0 0 auto; min-height: auto; }
  .naccato-wb-banner--vertical .naccato-wb-banner__media img { max-height: 260px; }
}