/* ==========================================================================
   Cases bento grid — standalone, additive. Replaces the accordion presentation
   inside #Cases. The old .cases_dropdown markup stays in the DOM (hidden below)
   for instant rollback. Reuses the site's CSS variables; never edits Webflow's
   generated CSS. Behaviour: js/enhance/cases-bento.js (needs js/enhance/motion.js).
   ========================================================================== */

/* Hide the original accordion dropdowns (kept in DOM for rollback). */
#Cases .cases_dropdown {
  display: none;
}

/* The bento mirrors the Visual & Motion grid: a single hairline frame on the
   container (top + left), each cell carries its own right + bottom hairline,
   no gaps, no rounded corners. The .cases_layout frame is dropped so the
   header sits free above the grid, exactly like OPENSOURCE / VISUAL. */
#Cases .cases_layout {
  border: none;
}

.bento-grid {
  display: grid;
  gap: 0;
  border-top: .5px solid var(--base-color-brand--border-color);
  border-left: .5px solid var(--base-color-brand--border-color);
  grid-template-columns: 1fr;
  grid-template-areas:
    "featured"
    "wide"
    "s1"
    "s2"
    "strip";
}

@media screen and (min-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "featured featured"
      "wide wide"
      "s1 s2"
      "strip strip";
  }
}

@media screen and (min-width: 992px) {

  /* The whole cases section fills the viewport: header on top, grid takes
     the rest (.cases_layout is a flex column; 3rem = the section's vertical
     padding from .padding-section-small). */
  #Cases .cases_layout {
    min-height: calc(100vh - 3rem);
    min-height: calc(100svh - 3rem);
  }

  .bento-grid {
    flex: 1;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr auto;
    grid-template-areas:
      "featured featured wide wide"
      "featured featured s1 s2"
      "strip strip strip strip";
  }
}

.bento-tile--featured { grid-area: featured; }
.bento-tile--wide { grid-area: wide; }
.bento-tile--s1 { grid-area: s1; }
.bento-tile--s2 { grid-area: s2; }
.bento-tile--strip { grid-area: strip; }

.bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-style: none solid solid none;
  border-width: .5px;
  border-color: var(--base-color-brand--border-color);
  background-color: var(--second-alternative-background);
  text-decoration: none;
  color: var(--base-color-brand--text-color);
  min-height: 7rem;
  transition: background-color .25s ease;
}

.bento-tile:focus-visible {
  outline: 2px solid var(--base-color-brand--blue);
  outline-offset: -2px;
}

/* Pointer glow — driven by --mx/--my from cases-bento.js (fine pointers only) */
.bento-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--base-color-brand--blue) 14%, transparent), transparent 70%);
}

.bento-tile:hover::after {
  opacity: 1;
}

.bento-tile_media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex: none;
}

/* On desktop the grid rows stretch to fill the viewport, so every image
   flex-fills whatever height its cell gets (cover-cropped). On stacked
   layouts they keep the 16/9 ratio. The strip overrides this further down. */
@media screen and (min-width: 992px) {
  .bento-tile_media {
    aspect-ratio: auto;
    flex: 1 1 0;
    min-height: 5rem;
  }
}

.bento-tile_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .4s ease, opacity .35s ease;
  /* Smoky edge: the image melts into the tile background where it meets the
     text, instead of ending on a hard straight line. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* Images sit dimmed by default and light up on hover/keyboard focus.
   Only on hover-capable devices — touch users always get the full image. */
@media (hover: hover) {
  .bento-tile_media img {
    opacity: .2;
  }

  .bento-tile:hover .bento-tile_media img,
  .bento-tile:focus-visible .bento-tile_media img {
    opacity: 1;
  }
}

.bento-tile:hover .bento-tile_media img {
  transform: scale(1.03);
}

.bento-tile_body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.1rem 1.25rem 1.25rem;
}

.bento-tile_title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--base-color-brand--text-color);
  transition: color .25s ease;
}

.bento-tile:hover .bento-tile_title {
  color: var(--base-color-brand--text-button-color);
}

.bento-tile_desc {
  margin: 0;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--base-color-brand--text-secondary-color);
}

.bento-tile_tag {
  align-self: flex-start;
  font-size: .7rem;
  line-height: 1.6;
  padding: .25rem .6rem;
  border-radius: 0;
  color: var(--base-color-brand--green);
  background-color: var(--base-color-brand--gree-tag);
}

/* "Ver caso →" — label + arrow, on every tile. align-self keeps it left in
   the column tiles; the strip overrides it to center (its body is a row). */
.bento-tile_cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--base-color-brand--text-button-color);
}

.bento-tile_cta svg {
  width: .7rem;
  height: .6rem;
  transition: transform .25s ease;
}

.bento-tile:hover .bento-tile_cta svg {
  transform: translateX(3px);
}

/* Strip tile reads as a horizontal bar on wider screens: text left, image
   right filling the strip height. On mobile it stacks like the other tiles. */
.bento-tile--strip {
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .bento-tile--strip {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 13rem;
  }

  .bento-tile--strip .bento-tile_media {
    order: 2;
    flex: 0 0 62%;
    width: 62%;
    aspect-ratio: auto;
    min-height: 0;
    position: relative;
  }

  /* Absolute img so its intrinsic height can't inflate the strip row.
     Here the text sits to the LEFT of the image, so the smoky edge fades
     the image's left side instead of the bottom. */
  .bento-tile--strip .bento-tile_media img {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
    mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  }

  /* Title and "Ver caso ->" stack left-aligned, vertically centered in the
     strip, so the image can take the wider right side. */
  .bento-tile--strip .bento-tile_body {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}

/* Scroll reveal — opacity-only so the shared hairlines never detach mid-
   stagger. Initial hidden state applies ONLY when JS is running and motion is
   allowed (cases-bento.js adds .bento-anim); content never hides without JS. */
.bento-anim .bento-tile {
  opacity: 0;
}

.bento-anim .bento-tile.is-in {
  opacity: 1;
  transition: opacity .5s ease var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {

  .bento-anim .bento-tile {
    opacity: 1 !important;
    transform: none !important;
  }

  .bento-tile,
  .bento-tile_media img,
  .bento-tile_cta svg {
    transition: none !important;
  }

  .bento-tile:hover .bento-tile_media img {
    transform: none;
  }
}