/* ==========================================================================
   KOBIL — Homepage: "Everything a trusted ecosystem needs"
   Figma: D-Homepage → 6019:111667 (1440x750), mobile 6213:48467
   Items: 6019:111676 … :111681 · compliance row 6019:111689

   Replaces the old `security-compliance` section. Two stacked blocks: six
   capability columns with a "Post-Quantum Ready" badge under them, then a
   hairline and the compliance strip.

   The prototype gives each capability item an ON_HOVER SMART_ANIMATE at
   0.5s ease-out; reproduced as a transition on the icon + title.

   Sits on the homepage's `.page--flush` wrapper: full 1440 width, no card
   radius, own 80px inset. See homepage-2026-plan.md.
   ========================================================================== */

.sec-capabilities {
  background: var(--white);
  padding: var(--w88) 0 var(--w80);
}

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

/* ---- Head ---- */

.sec-capabilities__head {
  max-width: var(--w820);
  margin: 0 auto;
  text-align: center;
}

.sec-capabilities__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-capabilities__title {
  margin-top: var(--w20);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.2;
  color: var(--navy);
}

.sec-capabilities__lead {
  margin-top: var(--w16);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* ---- Six capability columns ---- */

.sec-capabilities__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--w22);
  margin-top: var(--w64);
  /* Only the hovered card may grow. Stretching the items would hand the
     expanded card's height to its five idle neighbours (the same trap the
     ecosystem cards hit) — `start` plus the collapsed min-height below keeps
     them level at rest and independent on hover. */
  align-items: start;
}

.sec-capabilities__item {
  display: flex;
  flex-direction: column;
  /* Spacing lives on the children, not as a flex `gap`: the reveal panel is a
     third child that measures 0 while collapsed, and a gap would still add its
     own row — which made the collapsed card 168 instead of Figma's 153. */
  min-height: var(--w153);
  min-width: 0;
}

.sec-capabilities__icon {
  width: var(--w48);
  height: var(--w48);
  /* 0.5s ease-out — the item's own prototype transition. */
  transition: transform 0.5s var(--ease);
}

.sec-capabilities__item:hover .sec-capabilities__icon {
  transform: translateY(-4px);
}

.sec-capabilities__item-title {
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 600;
  line-height: var(--w24);
  color: var(--navy);
  transition: color 0.5s var(--ease);
}

.sec-capabilities__item:hover .sec-capabilities__item-title {
  color: var(--blue);
}

/* Figma card 5725:39243 / :39244 — icon 48, then 25 to the head. */
.sec-capabilities__item-head {
  margin-top: var(--w25);
}

.sec-capabilities__item-text {
  margin-top: var(--w4);
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

/* ---- The feature list + case link the hover reveals ---- */

.sec-capabilities__reveal {
  display: grid;
  grid-template-rows: 0fr;
  /* 0.5s ease-out — this item's own prototype transition. */
  transition: grid-template-rows 0.5s var(--ease);
}

.sec-capabilities__item.is-open .sec-capabilities__reveal {
  grid-template-rows: 1fr;
}

@media (hover: hover) {
  .sec-capabilities__item:hover .sec-capabilities__reveal,
  .sec-capabilities__item:focus-within .sec-capabilities__reveal {
    grid-template-rows: 1fr;
  }
}

.sec-capabilities__reveal-inner {
  overflow: hidden;
}

.sec-capabilities__list {
  display: flex;
  flex-direction: column;
  /* Figma card 5725:39244: 6 between rows, 6 between badge and label, and
     12 down from the head. */
  gap: var(--w6);
  padding-top: var(--w12);
}

.sec-capabilities__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--w6);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy-70);
  /* Long entries like "Strong Customer Authentication (SCA)" have to wrap
     inside a 195px column rather than widening it — that overflow was what
     pushed the page into a horizontal scroll on phones. */
  overflow-wrap: anywhere;
}

/* 18px check badge, optically centred on the first line of a 20px row. */
.sec-capabilities__check {
  flex: none;
  width: var(--w18);
  height: var(--w18);
  margin-top: var(--w1);
}

.sec-capabilities__case {
  display: inline-flex;
  align-items: center;
  gap: var(--w8);
  margin-top: var(--w25);
  font-family: var(--font-sans);
  font-size: var(--w15);
  font-weight: 600;
  /* Figma: 15/22.5 */
  line-height: 1.5;
  color: #1046cf;
  transition: opacity var(--dur) var(--ease);
}

.sec-capabilities__case-icon {
  flex: none;
  width: var(--w16);
  height: var(--w16);
  transition: transform var(--dur) var(--ease);
}

.sec-capabilities__case:hover .sec-capabilities__case-icon {
  transform: translateX(3px);
}

.sec-capabilities__case:hover {
  opacity: 0.75;
}

/* ---- Touch-only toggle, same contract as the ecosystem cards ---- */

.sec-capabilities__toggle {
  display: none;
  align-self: flex-start;
  align-items: center;
  gap: var(--w8);
  margin-top: var(--w4);
  padding: var(--w8) var(--w16);
  background: none;
  border: 1px solid var(--navy);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--w13);
  font-weight: 600;
  line-height: var(--w18);
  color: var(--navy);
  cursor: pointer;
}

.sec-capabilities__toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: var(--w11);
  height: var(--w11);
}

.sec-capabilities__toggle-icon::before,
.sec-capabilities__toggle-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease);
}

.sec-capabilities__toggle-icon::after {
  transform: rotate(90deg);
}

.sec-capabilities__item.is-open .sec-capabilities__toggle-icon::after {
  transform: rotate(0deg);
}

.sec-capabilities__item.is-open .sec-capabilities__toggle-more,
.sec-capabilities__toggle-less {
  display: none;
}

.sec-capabilities__item.is-open .sec-capabilities__toggle-less {
  display: inline;
}

/* Touch devices can't hover-reveal the card body, whatever their width. */
@media (hover: none) {
  .sec-capabilities__toggle {
    display: inline-flex;
  }
}

/* ---- Post-Quantum Ready badge ---- */

.sec-capabilities__pq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--w12);
  margin-top: var(--w48);
}

.sec-capabilities__pq img {
  width: var(--w24);
  height: var(--w24);
}

/* The label carries the same four-stop ramp as its icon's strokes. */
.sec-capabilities__pq span {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w24);
  line-height: 1.3;
  background-image: linear-gradient(
    90deg,
    #1046cf 0%,
    #696ef5 24.5%,
    #ca80f4 47.6%,
    #ffc4a0 70.7%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: #696ef5;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* ---- Compliance strip ---- */

.sec-capabilities__compliance {
  margin-top: var(--w60);
  padding-top: var(--w60);
  border-top: 1px solid var(--navy-40);
  text-align: center;
}

.sec-capabilities__compliance-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w32);
  line-height: 1.3;
  color: var(--navy);
}

/* Figma lays the ten badges out along a single 1067x54 row with uneven
   spacing, i.e. space-between rather than a fixed gap. */
.sec-capabilities__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--w24);
  max-width: var(--w1067);
  margin: var(--w40) auto 0;
}

/* Each badge keeps its own Figma dimensions (19–44px tall inside the 54px
   row) rather than being forced to a common height — they are different
   shapes and a uniform height distorts the wide wordmarks. The width/height
   attributes in the markup carry those 1x sizes; the files themselves are 3x
   exports, so they stay sharp on dense screens. No greyscale filter: the row
   in Figma shows each badge in its own colour. */
/* No width/height here on purpose: the files are 3x exports, so the 1x
   width/height attributes in the markup are what set the display size.
   Declaring `width: auto` would hand sizing back to the intrinsic 3x
   dimensions and blow the row onto three lines. */
.sec-capabilities__logos img {
  display: block;
  max-width: 100%;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}

.sec-capabilities__logos img:hover {
  opacity: 1;
}

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

@media (max-width: 768px) {
  .sec-capabilities {
    padding: var(--m56) 0 var(--m52);
  }

  .sec-capabilities__inner {
    padding: 0 var(--m24);
  }

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

  .sec-capabilities__lead {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  /* Figma's phone frame (6203:46491): the six cards sit FULLY EXPANDED in a
     horizontally scrolling row — 195px cards, 24px gap, "Learn more"
     visible at the bottom of each, no toggle. The row bleeds to the section
     edge so it scrolls edge-to-edge, and only IT scrolls: the page itself
     stays at viewport width. */
  .sec-capabilities__grid {
    display: flex;
    gap: var(--m24);
    margin: var(--m40) calc(-1 * var(--m24)) 0;
    padding: 0 var(--m24) var(--m8);
    /* x scrolls, y must not: `overflow-x: auto` alone computes overflow-y
       to auto as well, and the mixed card heights then produce a stray
       vertical scrollbar inside the row. */
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sec-capabilities__grid::-webkit-scrollbar {
    display: none;
  }

  .sec-capabilities__item {
    flex: 0 0 var(--m195);
    min-height: 0;
  }

  .sec-capabilities__item-head { margin-top: var(--m16); }
  .sec-capabilities__item-text { margin-top: var(--m4); }
  .sec-capabilities__list { padding-top: var(--m12); }
  .sec-capabilities__case { margin-top: var(--m16); }

  .sec-capabilities__list { gap: var(--m6); }
  .sec-capabilities__list li { gap: var(--m6); }

  .sec-capabilities__check {
    width: var(--m18);
    height: var(--m18);
    margin-top: var(--m1);
  }

  .sec-capabilities__case { gap: var(--m8); }

  .sec-capabilities__case-icon {
    width: var(--m16);
    height: var(--m16);
  }

  /* Always open on the phone row — no hover, no toggle. */
  .sec-capabilities__reveal {
    grid-template-rows: 1fr;
  }

  .sec-capabilities__toggle {
    display: none;
  }

  /* Cards render immediately — the scroll-reveal fade would otherwise
     replay as each card enters the viewport while swiping sideways. */
  .sec-capabilities__grid [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sec-capabilities__compliance {
    border-top: 0;
  }

  .sec-capabilities__compliance-title {
    font-size: var(--m34);
    line-height: 1.2;
  }

  .sec-capabilities__item-title,
  .sec-capabilities__item-text {
    font-size: var(--m15);
    line-height: var(--m21);
  }

  .sec-capabilities__pq {
    margin-top: var(--m36);
  }

  .sec-capabilities__pq span {
    font-size: var(--m20);
  }

  .sec-capabilities__compliance {
    margin-top: var(--m44);
    padding-top: var(--m44);
  }

  .sec-capabilities__logos {
    justify-content: center;
    gap: var(--m20) var(--m24);
    margin-top: var(--m28);
  }

  /* Scaled down together so the relative sizes Figma gives them survive. */
  .sec-capabilities__logos img {
    transform: scale(0.78);
    transform-origin: center;
    margin: calc(-1 * var(--m4));
  }
}

@media (max-width: 359px) {
  .sec-capabilities__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}