/* ============================================================
   KOMFY HOME HERO — Banner principal según handoff "Calm"
   Pisa estilos del swiper del tema base sin tocar el .tpl.
   Aplica solo al slider de home (.js-home-slider-section).
   ============================================================ */

/* Tokens locales (espejo del handoff /handoff/.../styles/tokens.css) */
.js-home-slider-section {
  --kh-carbon: #1C1C1C;
  --kh-yellow: #F5C518;
  --kh-yellow-hover: #ecb70a;
  --kh-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --kh-font-body: 'Noto Sans', system-ui, -apple-system, sans-serif;
}

/* Altura del hero — proporción exacta del asset (sin crop ni stretch):
   desktop 1580×700  →  aspect-ratio 1580/700  (~2.257:1)
   mobile  820×1000  →  aspect-ratio 820/1000  (override en media query)
   El banner escala con el ancho del viewport y siempre matchea la imagen.
   !important para neutralizar el .swiper-slide{height:100%} del swiper base
   (style-critical.scss l.94) y permitir que aspect-ratio determine la altura. */
.js-home-slider-section .js-home-slider,
.js-home-slider-section .js-home-slider-mobile,
.js-home-slider-section .swiper-wrapper,
.js-home-slider-section .slide-container,
.js-home-slider-section .slider-slide {
  height: auto !important;
}
.js-home-slider-section .slide-container,
.js-home-slider-section .slider-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 1580 / 700;
  background: var(--kh-carbon);
  overflow: hidden;
}

/* Imagen del slide ocupa todo el contenedor */
.js-home-slider-section .slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay degradado deshabilitado por pedido — sin sombra sobre el hero.
   Si más adelante se quiere recuperar para legibilidad del copy, restaurar
   el ::after con linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 60%, transparent 100%). */

/* ------------------------------------------------------------
   Bloque de copy: bottom-left, alineado al container del sitio
   ------------------------------------------------------------ */

/* Pisa el .swiper-text del tema base (que es bottom:0; left:-60px; opacity:0)
   para garantizar visibilidad inmediata y nuevo layout flex column. */
.js-home-slider-section .swiper-text,
.js-home-slider-section .swiper-slide-active .swiper-text {
  position: absolute;
  inset: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Vertical: empuja el bloque al fondo. El padding-bottom controla qué tan lejos
     del borde inferior queda. Bajo padding-bottom = bloque más abajo. */
  justify-content: flex-end;
  width: 100%;
  max-width: none;
  /* Paddings individuales (NO shorthand) para que la media query desktop pueda
     pisarlos sin conflicto de specificity contra el selector .swiper-slide-active. */
  padding-top: 0;
  padding-right: 24px;
  padding-bottom: 60px;
  padding-left: 24px;
  opacity: 1;
  transform: none;
  text-align: left;
  pointer-events: none; /* el wrap <a> del slide se encarga del click */
}

@media (min-width: 768px) {
  .js-home-slider-section .swiper-text,
  .js-home-slider-section .swiper-slide-active .swiper-text {
    /* Desktop: padding lateral generoso (clamp 100px ~ 220px). En viewport 1440
       da ~170px que matchea el handoff "Línea Aire". */
    padding-left: clamp(100px, 13vw, 220px);
    padding-right: clamp(100px, 13vw, 220px);
    /* Padding-bottom chico → el bloque queda cerca del borde inferior (handoff). */
    padding-bottom: clamp(60px, 7vh, 90px);
  }
}

/* Reordenar visualmente: title → description → button.
   El HTML del tema renderiza description (p), title (h1-huge), button (.btn). */
.js-home-slider-section .swiper-text > p          { order: 2; }
.js-home-slider-section .swiper-text > .h1-huge   { order: 1; }
.js-home-slider-section .swiper-text > .btn       { order: 3; pointer-events: auto; }

/* ------------------------------------------------------------
   Tipografía del hero (Barlow Condensed para display)
   ------------------------------------------------------------ */

.js-home-slider-section .swiper-text > .h1-huge {
  font-family: var(--kh-font-display);
  font-weight: 600;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  max-width: 720px;
}

.js-home-slider-section .swiper-text > p {
  font-family: var(--kh-font-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: #fff;
  opacity: 0.95;
  margin: 12px 0 0 0;
  max-width: 420px;
}

/* ------------------------------------------------------------
   Botón pill amarillo "Conocé el sillón"
   Pisa .btn-default y el override de .swiper-text-light .btn-default
   ------------------------------------------------------------ */

.js-home-slider-section .swiper-text .btn,
.js-home-slider-section .swiper-text-light .btn-default,
.js-home-slider-section .swiper-text-dark .btn-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 24px 0 0 0;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background-color: var(--kh-yellow);
  color: #fff;
  font-family: var(--kh-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.js-home-slider-section .swiper-text .btn:hover {
  background-color: var(--kh-yellow-hover);
  color: #fff;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   Flechas y paginación: ocultar en hero según handoff (clean look)
   El handoff Calm no muestra arrows ni dots. Si más adelante hay
   varios slides y se quieren mostrar, comentar este bloque.
   ------------------------------------------------------------ */
.js-home-slider-section .js-swiper-home-arrows,
.js-home-slider-section .swiper-pagination {
  display: none;
}

/* ------------------------------------------------------------
   Mobile: tamaños y padding más compactos
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Match exacto del asset mobile: 820×1000 → aspect-ratio 820/1000 (0.82:1) */
  .js-home-slider-section .slide-container,
  .js-home-slider-section .slider-slide {
    aspect-ratio: 820 / 1000;
  }

  .js-home-slider-section .swiper-text > .h1-huge {
    font-size: clamp(36px, 10vw, 56px);
  }

  .js-home-slider-section .swiper-text > p {
    font-size: 15px;
  }
}