/* ==========================================================================
   KOBIL — Inside KOBIL — Section: Showcases
   Figma: desktop 5882:52203 (1264 grid at x=88 — two 612 columns 40 apart, the
   right one dropped 100 lower; cards 40 apart vertically) · mobile 5882:52250
   (one 345 column at x=24, cards 16 apart).

   The cards start at y=621 while the hero gradient runs to y=1318, so this
   section is pulled up over it (405 / 777 on the phone frame). Nothing here
   paints an opaque page background — the gradient has to show through.

   Card chrome is Figma's card/ventures-d (3443:20861) and card/ventures-m
   (3503:25773): white, 10 radius, 48 padding, with the phone mockup
   bottom-cropped at the photo's edge.
   ========================================================================== */

.sec-ik-showcases {
  position: relative;
  z-index: 1;
  /* 1318 (gradient) − 621 (first card) */
  margin-top: calc(-1 * var(--w697));
  /* Figma leaves 70 between the taller column and the FAQ section (16 on the
     phone frame); the page is `flush`, so the gap has to come from here. */
  padding-bottom: var(--w70);
  background: transparent;
}

.ik-showcases__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--w40);
  align-items: start;
  max-width: var(--w1264);
  margin: 0 auto;
}

.ik-showcases__col {
  display: flex;
  flex-direction: column;
  gap: var(--w40);
  min-width: 0;
}

.ik-showcases__col--right {
  padding-top: var(--w100);
}

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

.ik-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--w32);
  padding: var(--w48);
  border-radius: var(--w10);
  background: var(--white);
}

.ik-showcase__text {
  display: flex;
  flex-direction: column;
  gap: var(--w40);
}

/* ---- Head row: logo left, category label right ---- */

.ik-showcase__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--w24);
}

.ik-showcase__logo {
  flex: 0 1 auto;
  min-width: 0;
}

.ik-showcase__logo img {
  height: auto;
}

.ik-showcase__logo--forbes img { width: var(--w166); }
.ik-showcase__logo--esapp img { width: var(--w215); }
.ik-showcase__logo--skor img { width: var(--w163); }
.ik-showcase__logo--caree img { width: var(--w142); }
.ik-showcase__logo--neom img { width: var(--w99); }
.ik-showcase__logo--paw img { width: var(--w90); }

.ik-showcase__logo--mercan img {
  width: var(--w77);
  height: var(--w67);
}

.ik-showcase__logo--spark img { width: var(--w138); }

/* Figma changed this label from 14/20 semibold sans to 12/20 mono. */
.ik-showcase__tag {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w20);
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  color: var(--navy-70);
}

/* ---- Copy ---- */

.ik-showcase__copy {
  display: flex;
  flex-direction: column;
  gap: var(--w14);
}

.ik-showcase__kicker {
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy);
}

.ik-showcase__title {
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 600;
  line-height: var(--w26);
  color: var(--navy);
}

.ik-showcase__desc {
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy-70);
}

/* ---- Media: photo under a blue wash + the phone mockup ---- */

.ik-showcase__media {
  position: relative;
  height: var(--w319);
  border-radius: var(--w8);
  /* Figma clips the phone at the photo edge — without clip its drop-shadow
     would spill onto the white card. */
  overflow: clip;
}

.ik-showcase__photo {
  position: absolute;
  inset: 0;
  border-radius: var(--w8);
  overflow: hidden;
}

.ik-showcase__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ik-showcase__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 70, 207, 0.15);
}

/* The three brightest photos carry a lighter wash in Figma. */
.ik-showcase--caree .ik-showcase__photo::after,
.ik-showcase--neom .ik-showcase__photo::after,
.ik-showcase--paw .ik-showcase__photo::after {
  background: rgba(16, 70, 207, 0.1);
}

/* 117x209 window, bottom-aligned; the 244-tall screen is cropped by it. */
.ik-showcase__phone {
  position: absolute;
  right: var(--w56);
  bottom: 0;
  width: var(--w117);
  height: var(--w209);
  overflow: clip;
  filter: drop-shadow(calc(-1 * var(--w9)) var(--w12) var(--w6) rgba(12, 40, 97, 0.27));
  pointer-events: none;
}

.ik-showcase__screen {
  position: absolute;
  top: var(--w1);
  left: var(--w2);
  width: var(--w113);
  height: var(--w244);
  border-radius: var(--w14);
  overflow: hidden;
}

.ik-showcase__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.ik-showcase__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w117);
  height: var(--w251);
  max-width: none;
}

/* ---- Per-card screen radius + screenshot crop (Figma per instance) ---- */

.ik-showcase--forbes .ik-showcase__screen { background: #000; }

.ik-showcase--forbes .ik-showcase__screen img {
  inset: auto;
  top: 2.87%;
  left: 0.43%;
  width: 99.13%;
  height: 94.49%;
  object-fit: fill;
}

.ik-showcase--esapp .ik-showcase__screen { border-radius: var(--w16); }

.ik-showcase--esapp .ik-showcase__screen img {
  inset: auto;
  left: 0;
  width: 100%;
  height: 100.12%;
  object-fit: fill;
}

/* These two shots are crops of the DESKTOP window (the top 85.25% of the
   screen rect, which is all the phone frame lets through there), so they are
   placed at that height rather than filling the rect. Caree is not in this
   list any more: its shot covers the whole screen rect, so the base
   `inset: 0 / cover` rule serves both frames — the phone frame shows 88% of
   the rect, and a window-cropped shot left a white band under it. */
.ik-showcase--skor .ik-showcase__screen img,
.ik-showcase--paw .ik-showcase__screen img {
  inset: auto;
  width: 100%;
  height: 85.25%;
  object-fit: fill;
}

.ik-showcase--caree .ik-showcase__screen { border-radius: var(--w16); }
.ik-showcase--paw .ik-showcase__screen { border-radius: var(--w15); }

.ik-showcase--neom .ik-showcase__screen img {
  inset: auto;
  top: -4.04%;
  left: 0;
  width: 100%;
  height: 104.86%;
  object-fit: fill;
}

@media (max-width: 768px) {
  .sec-ik-showcases {
    /* 777 (gradient) − 405 (first card) */
    margin-top: calc(-1 * var(--m372));
    padding: 0 var(--m24) var(--m16);
  }

  /* One column, the two desktop columns interleaved the way the phone frame
     orders them: Forbes, Spark, ESAPP, Caree, skor, Neom, Mercan, Paw. */
  .ik-showcases__grid {
    display: flex;
    flex-direction: column;
    gap: var(--m16);
    max-width: none;
  }

  .ik-showcases__col { display: contents; }
  .ik-showcases__col--right { padding-top: 0; }

  .ik-showcases__col--left .ik-showcase:nth-child(1) { order: 1; }
  .ik-showcases__col--right .ik-showcase:nth-child(1) { order: 2; }
  .ik-showcases__col--left .ik-showcase:nth-child(2) { order: 3; }
  .ik-showcases__col--right .ik-showcase:nth-child(2) { order: 4; }
  .ik-showcases__col--left .ik-showcase:nth-child(3) { order: 5; }
  .ik-showcases__col--right .ik-showcase:nth-child(3) { order: 6; }
  .ik-showcases__col--left .ik-showcase:nth-child(4) { order: 7; }
  .ik-showcases__col--right .ik-showcase:nth-child(4) { order: 8; }

  .ik-showcase {
    gap: var(--m16);
    padding: var(--m32) var(--m16) var(--m20);
    border-radius: var(--m6);
  }

  .ik-showcase__text { gap: var(--m24); }
  .ik-showcase__head { gap: var(--m16); }

  /* Figma M card: Forbes 93x33 */
  .ik-showcase__logo--forbes img { width: var(--m93); }
  .ik-showcase__logo--esapp img { width: var(--m155); }
  .ik-showcase__logo--skor img { width: var(--m117); }
  .ik-showcase__logo--caree img { width: var(--m102); }
  .ik-showcase__logo--neom img { width: var(--m71); }
  .ik-showcase__logo--paw img { width: var(--m65); }

  .ik-showcase__logo--mercan img {
    width: var(--m55);
    height: auto;
  }

  .ik-showcase__logo--spark img { width: var(--m88); }

  .ik-showcase__tag {
    font-size: var(--m12);
    line-height: var(--m18);
    letter-spacing: 0.48px;
  }

  .ik-showcase__copy { gap: var(--m6); }

  .ik-showcase__kicker {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .ik-showcase__title {
    font-size: var(--m20);
    line-height: var(--m26);
  }

  .ik-showcase__desc {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .ik-showcase__media {
    height: var(--m180);
    border-radius: var(--m6);
  }

  .ik-showcase__photo { border-radius: var(--m6); }

  /* 82x147 window that Figma lets hang 12 below the photo's bottom edge. */
  .ik-showcase__phone {
    right: var(--m45);
    bottom: calc(-1 * var(--m12));
    width: var(--m82);
    height: var(--m147);
    filter: drop-shadow(calc(-1 * var(--m6)) var(--m9) var(--m4) rgba(12, 40, 97, 0.27));
  }

  .ik-showcase__screen {
    top: var(--m2);
    left: var(--m2);
    width: var(--m79);
    height: var(--m165);
    border-radius: var(--m12);
  }

  .ik-showcase--esapp .ik-showcase__screen,
  .ik-showcase--caree .ik-showcase__screen { border-radius: var(--m14); }
  .ik-showcase--paw .ik-showcase__screen { border-radius: var(--m13); }

  .ik-showcase__frame {
    width: var(--m82);
    height: var(--m176);
  }
}