/* ==========================================================================
   YPF RUTA — Rediseño 2026 · "Clientes que nos eligen"

   Figma:
     mobile  267:27715  (375)
     tablet  274:35734  (768)
     desktop 267:27291  (1440)

   Dos cards de video que abren un lightbox de YouTube. El modal es el mismo
   de video-modal.css / video-modal.js: acá sólo vive el layout de la sección
   y el diseño de la card.

   Sobre los dos estados de la card: en el Figma la de OCA está dibujada en
   HOVER (barra azul, texto blanco, círculo blanco con play azul) y la de
   SurFrigo en IDLE (barra blanca, texto azul, círculo translúcido con play
   blanco). Es el mismo componente en dos estados —el cursor del mockup está
   apoyado justo sobre la de OCA—, así que acá se implementa como estado, no
   como dos diseños distintos.
   ========================================================================== */

.nd-cases {
  background-color: var(--nd-black);
  overflow: hidden;
  padding: 80px var(--nd-gutter);
  position: relative;

  /* Full bleed, igual que el hero: el fondo va de borde a borde aunque
     .main-layout esté topeado en 1440px. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/* El fondo va aparte para poder animarlo (ver reveal.css) */
.nd-cases::before {
  background-image: url("../../assets/newdesign/home/bkg-clientes-mobile.svg");
  background-position: top center;
  background-repeat: no-repeat;
  /* 100% 100% y no cover: los SVG llevan preserveAspectRatio="none", así que
     el dibujo se mapea exacto sobre la caja de la sección a cualquier ancho.
     Con cover, arriba de 1440 el SVG se agrandaba y recortaba el 25% de abajo,
     y los trazos dejaban de encontrarse entre sección y sección: se veía un
     corte horizontal duro en cada juntura. */
  background-size: 100% 100%;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.nd-cases__inner {
  margin: 0 auto;
  max-width: var(--nd-max-width);
  position: relative;
  width: 100%;
  z-index: 1;
}

/* El panel translúcido que contiene todo. El cristal esmerilado (degradado +
   blur + borde) vive en .nd-panel, en base.css, porque lo comparte con la
   sección "App YPF RUTA". Acá sólo el espaciado. */
.nd-cases__panel {
  padding: 40px 20px;
}

/* --------------------------------------------------------------------------
   Textos
   -------------------------------------------------------------------------- */

.nd-cases__title {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 36px;
  font-weight: var(--nd-w-bold);
  letter-spacing: 0.72px;
  line-height: 42px;
  margin: 0;
}

.nd-cases__lead {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 14px;
  font-weight: var(--nd-w-regular);
  letter-spacing: 0.56px;
  line-height: 22px;
  margin: 24px 0 0;
}

/* --------------------------------------------------------------------------
   Grilla de cards
   -------------------------------------------------------------------------- */

.nd-cases__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 40px auto 0;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.nd-case {
  appearance: none;
  -webkit-appearance: none;
  aspect-ratio: 16 / 9;
  background: none;
  border: 0;
  border-radius: var(--nd-radius);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
  width: 100%;
}

/* Zona de la imagen: el círculo de play va abajo a la izquierda */
.nd-case__media {
  align-items: flex-end;
  display: flex;
  flex: 1 0 0;
  min-height: 0;
  padding: 20px;
  position: relative;
}

.nd-case__image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.nd-case__play {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  position: relative;
  transition: background-color 0.25s ease;
  width: 44px;
}

/* Triángulo de play dibujado con bordes: sin assets y toma el color del estado */
.nd-case__play::before {
  border-bottom: 7px solid transparent;
  border-left: 9px solid var(--nd-white);
  border-top: 7px solid transparent;
  content: "";
  display: block;
  margin-left: 3px; /* centrado óptico dentro del círculo */
  transition: border-left-color 0.25s ease;
}

/* Barra inferior con el título del caso */
.nd-case__label {
  align-items: center;
  background-color: var(--nd-white);
  border: 1px solid #ddd;
  border-top: 0;
  border-radius: 0 0 var(--nd-radius) var(--nd-radius);
  color: var(--nd-blue);
  display: flex;
  flex-shrink: 0;
  font-family: var(--nd-font-display);
  font-size: 14px;
  font-weight: var(--nd-w-medium);
  letter-spacing: 0.14px;
  line-height: 20px;
  padding: 12px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Estado hover / foco — así está dibujada la card de OCA en el Figma
   -------------------------------------------------------------------------- */

.nd-case:hover .nd-case__play,
.nd-case:focus-visible .nd-case__play {
  background-color: var(--nd-white);
}

.nd-case:hover .nd-case__play::before,
.nd-case:focus-visible .nd-case__play::before {
  border-left-color: var(--nd-blue);
}

.nd-case:hover .nd-case__label,
.nd-case:focus-visible .nd-case__label {
  background-color: var(--nd-blue);
  border-color: var(--nd-blue);
  color: var(--nd-white);
}

.nd-case:focus-visible {
  outline: 2px solid var(--nd-white);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Tablet — Figma 274:35734
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .nd-cases {
    padding: 100px var(--nd-gutter);
  }

  .nd-cases::before {
    background-image: url("../../assets/newdesign/home/bkg-clientes.svg");
  }

  .nd-cases__panel {
    padding: 86px 40px;
  }

  .nd-cases__lead {
    max-width: 526px;
  }

  .nd-cases__list {
    flex-direction: row;
    gap: 24px;
    margin-top: 60px;
  }

  .nd-case {
    flex: 1 0 0;
    min-width: 0;
  }

  .nd-case__label {
    font-size: 16px;
    padding: 16px;
  }
}

/* --------------------------------------------------------------------------
   Desktop — Figma 267:27291
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  .nd-cases {
    padding: 200px var(--nd-gutter);
  }

  .nd-cases__panel {
    padding: 86px 110px;
  }

  .nd-cases__title {
    font-size: 48px;
    letter-spacing: 0.48px;
    line-height: 60px;
    max-width: 526px;
  }

  .nd-cases__lead {
    font-size: 16px;
    letter-spacing: 0.32px;
    line-height: 20px;
  }

  /* En el Figma la fila de cards es un poco más angosta que el panel
     y va centrada (1071.47 dentro de 1076 útiles). */
  .nd-cases__list {
    max-width: 1071px;
  }

  .nd-case__media {
    padding: 42px;
  }

  .nd-case__play {
    height: 92px;
    width: 92px;
  }

  .nd-case__play::before {
    border-bottom-width: 14px;
    border-left-width: 19px;
    border-top-width: 14px;
    margin-left: 6px;
  }

  .nd-case__label {
    font-size: 28px;
    letter-spacing: 1.27px;
    line-height: 1.25;
    padding: 20px 24px;
  }
}