/**
 * WEB BRAIN — Banners fijos (seccion "banner").
 *
 * Estilos de los banners renderizados por Naccato_WebBrain_Banner_Template via
 * el shortcode [naccato_banners]. Cinco formatos: ancho / medio / tile /
 * vertical (los cuatro COMPONEN el banner desde textos + packshot) e imagen
 * (el banner ya viene disenado entero, la web solo lo muestra).
 *
 * 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; }

/* =================== FORMATO: imagen (banner YA disenado) =================== */
/* La imagen ENTERA es el banner: no hay fondo, ni gradiente, ni padding, ni
   texto compuesto. Todo lo que se ve lo diseno Matias en su herramienta.
   Por eso este formato NO hereda casi nada de la base. */
.naccato-wb-banner--imagen {
  flex: 1 1 100%;
  display: block;
  min-height: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.naccato-wb-banner--imagen:hover {
  transform: none;
  box-shadow: none;
}
.naccato-wb-banner--imagen picture { display: block; }
/* height auto + width 100%: la imagen manda su propio alto por el ratio que
   trae, y se estira al ancho de la zona. El width/height del <img> reserva el
   lugar antes de que cargue (evita el salto de la pagina). */
.naccato-wb-banner--imagen img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* Sin max-height ni object-fit: recortar el banner de Matias seria comerse
     parte de su diseno. Si el ratio no da, se rechaza al subirlo (el portal
     valida contra la medida de la zona), no se arregla acomodando aca. */
}

/* =================== Zona de ALTO FIJO (las 2 cards del hero) =================== */
/* Solo ARRIBA de 1024: es el unico tramo donde el slider esta efectivamente al
   lado y le clava 430 px de alto a la card. Medido en el home el 13/08/2026, el
   slot vale 288x430 a 1554+ y 244x430 a 1316 — ancho FLUIDO, alto clavado— y de
   1024 para abajo el hero se reordena y las cards pasan a una fila propia,
   apaisadas (487x189). Forzar el alto ahi convertiria el banner en una franja.

   `object-fit: cover` recorta, y en el resto del sitio eso esta prohibido a
   proposito (comerse parte del diseno de Matias). Aca es el mal menor, pero el
   recorte NO es despreciable: como el ancho del slot va de 244 a 288 con el
   alto clavado, en pantallas medianas se come hasta un 15% de los costados. La
   alternativa era un hueco visible al lado del slider. Por eso el portal avisa
   que no se pongan textos pegados al borde izquierdo o derecho. */
@media (min-width: 1025px) {
  .naccato-wb-banners--alto-fijo .naccato-wb-banner--imagen,
  .naccato-wb-banners--alto-fijo .naccato-wb-banner--imagen picture {
    height: 100%;
  }
  .naccato-wb-banners--alto-fijo .naccato-wb-banner--imagen img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
/* El redondeo, en cambio, va en todos los tamanos: la card del hero es la unica
   pieza del home con esquinas redondeadas alrededor, y sin esto el
   banner-imagen entra con las puntas cuadradas al lado de un slider que no las
   tiene. */
.naccato-wb-banners--alto-fijo .naccato-wb-banner--imagen img {
  border-radius: var(--nwb-radius);
}

/* =================== Responsive =================== */
@media (max-width: 768px) {

  /* El formato imagen NO se apila ni se reordena: es una sola imagen. */
  .naccato-wb-banner--imagen { flex-direction: column; }
  .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; }
}