/* ==========================================================================
   SCENE 03: STRUCTURED EDITORIAL BENTO (2 filas, proporciones fijas)
   ========================================================================== */

.bb-bento {
  background-color: var(--bryde-color-light-base, #F3EEE6);
  padding: clamp(24px, 3svh, 40px) 8vw clamp(72px, 9vw, 120px) 8vw;
  position: relative;
  z-index: 1;
}

/* Overlap estructural con la cola muerta de Scene 02 (.bp-principle): esa
   sección reserva 200svh para su scrub + sticky release, pero el contenido
   animado/pinneado solo ocupa el primer 100svh — el segundo 100svh es fondo
   vacío que existe únicamente para soltar el sticky. Subimos Scene 03 dentro
   de ese tramo vacío. El margen negativo es puro layout (siempre aplicado);
   el z-index sube SOLO cuando home-handoff.js confirma que el scroll ya
   pasó el punto exacto de liberación del sticky (bb-bento--surfaced) — así
   nunca se dibuja por encima de Scene 02 mientras sigue activo. */
@media (prefers-reduced-motion: no-preference) {
  .bb-bento {
    margin-block-start: 0;
  }
}

.bb-bento__intro {
  max-width: 1300px;
  margin: 0 auto clamp(32px, 3.2vw, 48px) auto;
  text-align: left;
}

.bb-bento__intro-heading {
  margin: 0;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  font-family: var(--font-clash, 'Clash Display', sans-serif);
  text-transform: uppercase;
  color: var(--bryde-color-dark-base, #070707);
  max-width: 760px;
}

.bb-bento__intro-line {
  display: block;
  font-weight: 500;
  font-size: clamp(38px, 3vw + 1.35rem, 72px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.bb-bento__intro-line--accent {
  color: #A85F3C;
}

/* ==========================================================================
   Grid: dos filas estructuradas, proporciones fijas por columnas (5 tracks
   iguales): fila 1 = 60/40 (Core Logic / Páginas Web), fila 2 = 40/60
   (Método / Sistemas y automatización). Sin offsets ni huecos deliberados.
   ========================================================================== */
.bb-bento__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: clamp(400px, 30vw, 460px) clamp(260px, 20vw, 320px);
  gap: clamp(18px, 1.6vw, 24px);
  max-width: 1300px;
  margin: 0 auto;
}

/* Base Card Styles */
.bb-bento__card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background-color: var(--bryde-color-dark-base, #070707);
  color: var(--bryde-color-light-base, #F3EEE6);
  /* Inicialmente ocultas para la animación de entrada */
  opacity: 0;
  transform: translateY(20px);
}

.bb-bento__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0);
  pointer-events: none;
  transition: background 0.26s ease, box-shadow 0.26s ease;
}

a.bb-bento__card:hover::after,
a.bb-bento__card:focus-visible::after,
.bb-bento__card--method:hover::after,
.bb-bento__card--automation:hover::after {
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
}

.bb-bento__card--web:hover::after,
.bb-bento__card--web:focus-visible::after {
  background: rgba(7,7,7,0.02);
  box-shadow: inset 0 0 0 1px rgba(7,7,7,0.08);
}

a.bb-bento__card:focus-visible {
  outline: 2px solid rgba(243, 238, 230, 0.6);
  outline-offset: 3px;
}

.bb-bento__card--web:focus-visible {
  outline-color: rgba(7, 7, 7, 0.45);
}

.bb-bento__content {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
}

.bb-bento__eyebrow {
  font-family: var(--font-cabinet, 'Cabinet Grotesk', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-bento__title {
  font-family: var(--font-clash, 'Clash Display', sans-serif);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 14px 0 8px 0;
}

.bb-bento__body {
  font-family: var(--font-cabinet, 'Cabinet Grotesk', sans-serif);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(243, 238, 230, 0.7);
  margin: 0;
}

.bb-bento__link {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  font-family: var(--font-cabinet, 'Cabinet Grotesk', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-copper, #C9784C);
}

/* ==========================================================================
   1. Core Logic — pieza dominante, horizontal, media de fondo con scrim
   ========================================================================== */
.bb-bento__card--core {
  grid-column: 1 / 4;
  grid-row: 1;
}
.bb-bento__card--core .bb-bento__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(7,7,7,.96) 0%, rgba(7,7,7,.88) 26%, rgba(7,7,7,.5) 50%, rgba(7,7,7,0) 74%);
}
.bb-bento__card--core .bb-bento__title { font-size: clamp(20px, 1.7vw, 26px); }
.bb-bento__card--core .bb-bento__media {
  position: absolute;
  inset: 6%;
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
}
.bb-bento__card--core .bb-bento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.bb-bento__card--core:hover .bb-bento__media img {
  transform: scale(1.02);
}

/* ==========================================================================
   2. Páginas Web — secundaria fuerte, misma fila que Core Logic (40%).
      Copy y media son bloques separados en flujo normal: nunca colisionan.
   ========================================================================== */
.bb-bento__card--web {
  grid-column: 4 / 6;
  grid-row: 1;
  background-color: #E2DDD5;
  color: #070707;
}
.bb-bento__card--web .bb-bento__body {
  color: rgba(7, 7, 7, 0.65);
}
.bb-bento__card--web .bb-bento__title { font-size: clamp(18px, 1.4vw, 22px); }
.bb-bento__card--web .bb-bento__content {
  flex: 0 0 auto;
}
.bb-bento__card--web .bb-bento__media {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}
.bb-bento__web-asset {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.bb-bento__card--web:hover .bb-bento__web-asset { transform: scale(1.02); }

/* ==========================================================================
   3 / 4. Método y Automatización — fila de soporte, subordinada por altura
   y contenido (no por posición): 40/60 en la segunda fila, mismo alto fijo.
   ========================================================================== */
.bb-bento__card--method,
.bb-bento__card--automation {
  flex-direction: row;
  align-items: stretch;
  background-color: #100E0D;
}

.bb-bento__card--method .bb-bento__media::after,
.bb-bento__card--automation .bb-bento__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.bb-bento__card--method .bb-bento__media::after {
  background: rgba(7, 7, 7, 0.28);
}
.bb-bento__card--automation .bb-bento__media::after {
  background: rgba(7, 7, 7, 0.19);
}
.bb-bento__card--method {
  grid-column: 1 / 3;
  grid-row: 2;
}
.bb-bento__card--automation {
  grid-column: 3 / 6;
  grid-row: 2;
}
.bb-bento__card--method .bb-bento__content,
.bb-bento__card--automation .bb-bento__content {
  padding: clamp(20px, 2vw, 28px);
  flex: 1 1 auto;
  justify-content: center;
}
.bb-bento__card--method .bb-bento__media {
  position: relative;
  flex: 0 0 auto;
  width: clamp(96px, 9vw, 132px);
  height: auto;
  overflow: hidden;
}
.bb-bento__card--method .bb-bento__title,
.bb-bento__card--automation .bb-bento__title {
  font-size: clamp(15px, 1.1vw, 18px);
}
.bb-bento__card--method .bb-bento__body,
.bb-bento__card--automation .bb-bento__body {
  font-size: 13px;
}
.bb-bento__card--method .bb-bento__media img,
.bb-bento__card--automation .bb-bento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Método: estratos + línea cobriza como fondo lateral (mismo patrón que
   Automatización), ocupa el 42–48% derecho de la card y se funde con el
   fondo oscuro vía degradado, sin recuadro ni marco propio. */
.bb-bento__card--method .bb-bento__media img {
  object-position: 74% center;
}
@media (min-width: 821px) {
  .bb-bento__card--method .bb-bento__media {
    position: relative;
    flex: 0 0 45%;
    width: 45%;
    height: auto;
    overflow: hidden;
  }
  .bb-bento__card--method .bb-bento__media::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(to right, #100E0D 0%, rgba(16,14,13,0.7) 32%, rgba(16,14,13,0.22) 64%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
}

/* Automatización: asset de campo como fondo lateral (no icono), ocupa el
   45–48% derecho de la card y se corta contra los bordes derecho/inferior
   gracias al overflow:hidden + border-radius ya definidos en .bb-bento__card. */
.bb-bento__card--automation .bb-bento__media img {
  object-position: 90% center;
}
@media (min-width: 821px) {
  .bb-bento__card--automation .bb-bento__media {
    position: relative;
    flex: 0 0 47%;
    width: 47%;
    height: auto;
    overflow: hidden;
  }
  .bb-bento__card--automation .bb-bento__media::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 38%;
    background: linear-gradient(to right, #100E0D 0%, rgba(16,14,13,0.75) 30%, rgba(16,14,13,0.25) 65%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
}

/* ==========================================================================
   Responsive: Mobile (<= 820px)
   ========================================================================== */
@media (max-width: 820px) {
  .bb-bento {
    padding: clamp(64px, 12svh, 100px) 6vw clamp(56px, 10vw, 84px);
  }

  @media (prefers-reduced-motion: no-preference) {
    .bb-bento {
      margin-block-start: 0;
    }
  }

  .bb-bento__intro {
    margin: 0 auto clamp(32px, 6svh, 44px) auto;
  }

  .bb-bento__intro-heading {
    max-width: none;
  }

  .bb-bento__grid {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 5vw, 28px);
  }

  .bb-bento__card--core {
    aspect-ratio: 1.1;
    min-height: 320px;
  }

  .bb-bento__card--web {
    aspect-ratio: 0.9;
    min-height: 300px;
  }
  .bb-bento__web-asset {
    object-position: 32% top;
  }

  /* en mobile la banda de soporte vuelve a apilar media/texto: la fila horizontal
     de desktop no cabe con comodidad en 6vw de margen */
  .bb-bento__card--method,
  .bb-bento__card--automation {
    flex-direction: column;
  }
  .bb-bento__card--method .bb-bento__media,
  .bb-bento__card--automation .bb-bento__media {
    width: 100%;
    height: 72px;
  }

  .bb-bento__card--method .bb-bento__media {
    height: 150px;
  }

  .bb-bento__card--method .bb-bento__media img {
    object-position: 68% center;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bb-bento__intro-heading {
    opacity: 1 !important;
    transform: none !important;
  }

  .bb-bento__card {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .bb-bento__card--core:hover .bb-bento__media img { transform: scale(1); }
  .bb-bento__card--web:hover .bb-bento__web-asset { transform: scale(1); }
}