/* ==========================================================================
   Enhance layer — additive styles for the interactive revamp.
   Never edit webflow.css / terry-mota.webflow.css; override here instead.
   Hooks documented in js/enhance/HOOKS.md
   ========================================================================== */

/* --- Hero: canvas ASCII portrait ---------------------------------------- */

.ascii-hero-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#ascii-display {
  cursor: crosshair;
}

/* --- Hero: mobile content order ------------------------------------------
   On phones .hero_main stacks vertically with the ASCII square first,
   pushing the H1 ~1400px down. Bring the message into the first viewport;
   the portrait follows right below. Desktop untouched. */

@media screen and (max-width: 767px) {
  .hero_main .hero_content {
    order: -1;
  }

  .hero_main .hero_animation {
    order: 1;
  }
}

/* --- Cases bento grid ----------------------------------------------------
   Replaces the accordion list inside #Cases. The old dropdowns stay in the
   DOM (hidden below) for easy rollback. */

#Cases .cases_dropdown {
  display: none;
}

/* The bento now 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 already 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: 100px;
  color: var(--base-color-brand--green);
  background-color: var(--base-color-brand--gree-tag);
}

.bento-tile_cta {
  font-size: .8rem;
  color: var(--base-color-brand--text-button-color);
}

.bento-tile_arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  color: var(--base-color-brand--text-button-color);
  opacity: .55;
  transition: opacity .25s ease, transform .25s ease;
}

.bento-tile:hover .bento-tile_arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* 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 45%;
    width: 45%;
    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%);
  }

  .bento-tile--strip .bento-tile_body {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* Keep the arrow clear of the image — it sits between text and thumbnail */
  .bento-tile--strip .bento-tile_arrow {
    position: static;
    align-self: center;
    margin-right: 1.25rem;
  }
}

/* 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);
}

/* --- Reduced motion safety net -------------------------------------------
   JS modules already gate themselves; this catches any CSS-driven motion
   added by the enhance layer later (bento, /lab). */

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

  .ascii-hero-title .word span {
    transform: none !important;
    opacity: 1 !important;
  }

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

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

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