/* ==========================================================================
   KOBIL — Homepage: "Securing Fortune 100s, governments, and industries…"
   Figma: D-Homepage → 6019:111761, cards 6019:111767/:111768/:111794
   (415x592 each). Mobile: 6203:46546.

   Replaces the old `kobil-in-action` carousel. Three case cards: tinted
   wash + brand wordmark + a device/icon composition overflowing the top
   edge, then eyebrow, serif title, description, "Read the case".
   ========================================================================== */

.sec-in-action {
  /* No fill in Figma — page white, the cards carry their own shadows. */
  background: var(--white);
  padding: var(--w88) 0 var(--w96);
}

.sec-in-action__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--w80);
}

.sec-in-action__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 600;
  line-height: var(--w18);
  letter-spacing: 2.04px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.sec-in-action__title {
  margin-top: var(--w20);
  max-width: var(--w900);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.2;
  color: var(--navy);
}

.sec-in-action__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--w18);
  margin-top: var(--w48);
}

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

.sec-in-action__card {
  position: relative;
  /* Figma: clipsContent=true — the corner glow is clipped INSIDE the card,
     it never bleeds onto the section white. r16 and a whisper of a shadow
     (0 8 30 @ 4%), both straight off the node; the heavier values used
     before were what painted grey into the gaps between cards. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--w44) var(--w32) var(--w40);
  background: var(--white);
  border-radius: var(--w16);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

/* Everything except the tile paints above it. */
.sec-in-action__card > :not(.sec-in-action__tile) {
  position: relative;
  z-index: 1;
}

.sec-in-action__card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto 0;
  height: var(--w210);
  border-radius: var(--w16) var(--w16) 0 0;
  background: linear-gradient(165deg, var(--card-accent, rgba(105, 110, 245, 0.18)) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

/* The gradient corner glow — Figma's 192x192 "Container" (e.g. 6019:111769)
   is NOT a crisp tile: the node carries opacity 0.3–0.4 and a 142px
   LAYER_BLUR, so it reads as a soft pastel bloom behind the card's
   top-right corner (60px above, 35px past the edge). The white icon pair
   from the head row floats over it. */
.sec-in-action__tile {
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--w60));
  right: calc(-1 * var(--w35));
  width: var(--w192);
  height: var(--w192);
  border-radius: var(--w44);
  background: linear-gradient(
    125deg,
    #3ebffc 7%,
    #1046cf 24%,
    #696ef5 55%,
    #ca80f4 76%,
    #ffc4a0 100%
  );
  opacity: 0.38;
  filter: blur(56px);
  pointer-events: none;
}

/* Logo left, the white icon + phone pair right — the pair sits on the tile. */
.sec-in-action__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--w16);
}

.sec-in-action__head-icons {
  display: flex;
  align-items: center;
  gap: var(--w12);
  margin-top: calc(-1 * var(--w4));
}

.sec-in-action__head-plus {
  font-family: var(--font-mono);
  font-size: var(--w24);
  font-weight: 300;
  line-height: 1;
  color: var(--white);
}

/* Each mark gets the height ITS Figma node has, not one shared cap. The row used
   `max-height: 40` for all three with `height="40"` in the markup, and the three
   logos are not the same shape: Forbes is a one-line wordmark (92x24 in Figma,
   6019:111774), Spark a two-line lockup (95x51, 6019:111775), ESAPP a long thin
   wordmark (140x22, 6019:111802). Forcing 40 on all of them drew Forbes 1.67x
   too tall and Spark 0.79x too short — the "one big, one small" that showed in
   the row. Height only, never width: the width follows each file's own aspect,
   so nothing is stretched. */
.sec-in-action__logo {
  width: auto;
  align-self: flex-start;
}

.sec-in-action__logo--forbes {
  height: var(--w24);
}

.sec-in-action__logo--spark {
  height: var(--w51);
}

.sec-in-action__logo--esapp {
  height: var(--w22);
}

.sec-in-action__card-eyebrow {
  margin-top: var(--w40);
  font-family: var(--font-mono);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w18);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.sec-in-action__card-title {
  margin-top: var(--w14);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w36);
  line-height: 1.15;
  color: var(--navy);
}

.sec-in-action__card-text {
  margin-top: var(--w16);
  font-family: var(--font-sans);
  font-size: var(--w17);
  font-weight: 400;
  line-height: var(--w24);
  color: var(--navy-70);
}

.sec-in-action__case {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--w28);
  font-family: var(--font-sans);
  font-size: var(--w15);
  font-weight: 600;
  line-height: var(--w20);
  color: #1046cf;
  transition: opacity var(--dur) var(--ease);
}

.sec-in-action__case:hover {
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Figma's phone frame (6203:46546) puts the three cards in a horizontally
   scrolling row — 321px cards, 12px gap — same pattern as the capabilities
   row. The row bleeds to the section edge and is the only thing that
   scrolls. */
@media (max-width: 768px) {

  .sec-in-action__grid {
    display: flex;
    gap: var(--m12);
    /* Bleeds to the section edge, so these two have to stay equal to
       `__inner`'s inset above — otherwise the first card stops short of the
       title and the scroll area starts in the wrong place. */
    margin: var(--m48) calc(-1 * var(--m16)) 0;
    padding: 0 var(--m16) var(--m12);
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sec-in-action__grid::-webkit-scrollbar {
    display: none;
  }

  .sec-in-action__card {
    flex: 0 0 var(--m321);
  }

  /* Inside the scroll row the glow stays within its own card's slot. */
  .sec-in-action__tile {
    right: calc(-1 * var(--m6));
    width: var(--m160);
    height: var(--m160);
  }

  /* Same as the capabilities row: no scroll-reveal fade while swiping. */
  .sec-in-action__grid [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Figma 6203:46546: the head block sits at x=16, y=40 — so 40 on top, and a
     16 inset that lines this section's left edge up with Industries above it
     (both frames use 16; this file still had the older 24). */
  .sec-in-action {
    padding: var(--m40) 0 var(--m60);
  }

  .sec-in-action__inner {
    padding: 0 var(--m16);
  }

  .sec-in-action__title {
    font-size: var(--m34);
  }

  .sec-in-action__card {
    padding: var(--m36) var(--m24) var(--m32);
  }


  /* Phone frame 6203:46546: Forbes 90x23, Spark 78x42, ESAPP 124x19.5. */
  .sec-in-action__logo--forbes {
    height: var(--m23);
  }

  .sec-in-action__logo--spark {
    height: var(--m42);
  }

  .sec-in-action__logo--esapp {
    height: var(--m20);
  }

  .sec-in-action__card-title {
    font-size: var(--m28);
  }

  .sec-in-action__card-text {
    font-size: var(--m15);
    line-height: var(--m21);
  }
}