/* ================================================================
   ELIOR ENERGY · TARJETA DE BANNER (componente compartido)
   La usan Inicio (carrusel) y cada página de categoría (banner único) a través de compartido/banner-tarjeta.js, y la vista previa del panel administrativo.
   Salió de layout-global.css (2026-10-14) para que la hoja global —que carga TODA página— solo lleve lo que todas usan; cada regla conserva su texto y su orden.
   Necesita la paleta (--prussian, --lime, --bg, --border, --surface, --ink, --muted): paleta-global.css la trae en el sitio y la vista previa del panel la define en su host.
   ================================================================ */

/**
 * TARJETA DE BANNER (compartida) — frontend/compartido/banner-tarjeta.js.
 * Reemplaza el antiguo bloque .promotion (rectángulo azul fijo + botón de
 * texto hardcodeado en CSS ::after, ver commit anterior). Un único
 * componente para el carrusel de Inicio y el banner de categoría, con 3
 * composiciones controladas desde el panel (banner.layoutPreset) y colores
 * opcionales por banner vía variables CSS con su propio fallback de marca.
 */
.banner-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--banner-bg, var(--prussian));
  color: var(--banner-text, var(--bg));
  text-decoration: none;
}

/**
 * Tamaños compactos (auditoría UX): antes split/image_full llegaban a
 * 320-340px de alto en desktop — casi media pantalla en portátiles antes de
 * que el usuario viera un solo producto. Los 3 presets comparten ahora un
 * rango de altura coherente (~170-230px vía clamp, nunca un valor fijo) y
 * padding/tipografía más ajustados: se sienten una cabecera promocional,
 * no un hero de página completa. Ningún contenido se quita, solo se
 * reacomoda (ver banner-card__title/__subtitle/__button más abajo).
 */
.banner-card--split {
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
  /* height, no min-height: con min-height la fila del grid crecía para
     acomodar la altura NATURAL de la foto (una imagen ancha a menudo mide
     más que el techo que se quería) y el banner volvía a ser gigante.
     Con una altura real, object-fit: cover recorta la imagen para llenar
     esa caja en vez de estirar el banner para llenar la imagen. */
  height: clamp(170px, 15vw, 230px);
}

.banner-card--image_full {
  display: block;
  height: clamp(160px, 14vw, 220px);
}

.banner-card--minimal {
  min-height: 0;
  padding: clamp(20px, 2.6vw, 30px) clamp(24px, 4vw, 56px);
  background: var(--banner-bg, var(--surface));
  color: var(--banner-text, var(--ink));
  text-align: center;
}

.banner-card__content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: clamp(18px, 2.2vw, 32px) clamp(24px, 4vw, 48px);
}

.banner-card--minimal .banner-card__content {
  justify-items: center;
  padding: 0;
}

/* El relleno VERTICAL es corto a propósito: el banner mide 160–220 px y título, subtítulo y botón necesitan ~110 px (con 54 px arriba y abajo el título quedaba recortado). */
.banner-card--image_full .banner-card__content {
  max-width: 560px;
  height: 100%;
  padding: clamp(14px, 1.8vw, 24px) clamp(24px, 4vw, 56px);
}

.banner-card__title {
  max-width: 520px;
  margin: 0;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Un título largo nunca debe disparar la altura del banner: 2 líneas como
     máximo, con puntos suspensivos en vez de seguir creciendo. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.banner-card__subtitle {
  max-width: 460px;
  margin: 0;
  color: var(--banner-text, var(--bg));
  opacity: 0.85;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.4;
}

.banner-card__button {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 9px 18px;
  border-radius: 7px;
  background: var(--banner-accent, var(--lime));
  color: #142000;
  font-size: 13px;
  font-weight: 800;
}

.banner-card__media {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  background: rgb(0 0 0 / 6%);
}

.banner-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-card__media.is-empty img {
  display: none;
}

.banner-card__media.is-empty::after {
  color: var(--muted);
  font-size: 13px;
  content: "Imagen por agregar";
}

.banner-card--image_full .banner-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.banner-card--image_full::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: linear-gradient(100deg, rgb(0 20 36 / 74%) 0%, rgb(0 20 36 / 46%) 45%, rgb(0 20 36 / 0%) 80%);
}

/**
 * Entrada suave y opcional (banner.animationPreset): el estado de reposo es
 * siempre 100% visible sin transformar — si por lo que sea nunca se agrega
 * la clase --enter (JS no llegó a correr), la tarjeta igual se ve completa,
 * nunca se queda invisible.
 */
.banner-card--enter[data-animation="fade"] {
  animation: banner-card-fade 550ms ease both;
}

.banner-card--enter[data-animation="slide"] {
  animation: banner-card-slide 550ms ease both;
}

.banner-card--enter[data-animation="zoom_soft"] {
  animation: banner-card-zoom 550ms ease both;
}

@media (prefers-reduced-motion: reduce) {
  .banner-card--enter {
    animation: none !important;
  }
}

@media (max-width: 680px) {
  .banner-card--split {
    grid-template-columns: minmax(0, 1fr);
    /* La regla de escritorio usa "height" (no min-height, ver más arriba) para
       que object-fit: cover recorte la foto en vez de estirar el banner. En
       móvil el layout se apila (imagen + contenido en filas separadas): esa
       misma altura fija no tiene sentido aquí y hay que quitarla del todo
       (no basta con min-height:0, que ya no es la propiedad que manda) para
       que cada fila mida lo que su propio contenido necesita.  */
    height: auto;
    min-height: 0;
  }
  .banner-card--split .banner-card__media {
    order: -1;
    /* Más ancho que alto (en vez de 16/9): en pantallas angostas deja ver el
       inicio del catálogo sin desplazarse tanto, sin perder la imagen. */
    aspect-ratio: 16 / 7;
  }
  .banner-card--image_full {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .banner-card__content {
    padding: clamp(16px, 4vw, 22px) clamp(18px, 5vw, 24px);
    gap: 5px;
  }
  .banner-card__title {
    font-size: clamp(18px, 5vw, 24px);
  }
  .banner-card__subtitle {
    font-size: 12.5px;
  }
}

@keyframes banner-card-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes banner-card-slide {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes banner-card-zoom {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}