/* ==========================================================================
   KOBIL — SuperApp family: Features ("Core capabilities")
   Figma: /superapp/ 5501:34171 (mobile 6087:53593) ·
          /digital-workplace-superapp/ 5501:33646 (mobile 5501:35361)

   Accordion on the left, illustration on the right. Figma's contract
   (5501:34252 / 5501:33655): rows carry NO chevron; the open item sits on
   a #F9FAFD panel (radius 2) — the first row rests open and HOVERING
   another row opens it instead, collapsing the resting one. The phone
   frames (6087:53593 / 5501:35361) show every item expanded with no
   panel fill, so mobile is simply all-open with no interaction.
   ========================================================================== */

/* Three grid children rather than two, because the phone frame interleaves
   them: head → lead → illustration → accordion. Named areas let desktop
   keep the illustration in its own full-height right column while mobile
   just stacks them in source order. */
.sec-sa-features__grid {
  display: grid;
  grid-template-columns: minmax(0, var(--copy-col, var(--w611))) minmax(0, 1fr);
  grid-template-areas:
    "intro media"
    "accordion media";
  align-content: center;
  column-gap: var(--split-gap, var(--w56));
}

.sec-sa-features__intro {
  grid-area: intro;
}

.sec-sa-features__media {
  grid-area: media;
  align-self: center;
  justify-self: end;
  /* --media-w lets a page pin the Figma frame width even when the grid
     track is narrower: on /superapp/ the copy column (611) and the Image
     frame (646 at x 674) overlap by 17px in Figma, so the 1fr track alone
     (613) undersizes the media. The overflow to the left is transparent
     asset padding. --media-mr mirrors .sa-split__media's per-section inset
     from the 80px gutter (40 on /superapp/, flush on DWS). */
  width: var(--media-w, 100%);
  max-width: var(--media-w, var(--w646));
  margin-right: var(--media-mr, 0);
}

.sec-sa-features__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Same ramp as .sa-lead — Figma paints it as body copy (grey regular,
   5501:34176 / 5501:33650), not as a bold sub-heading. */
.sec-sa-features__lead {
  margin-top: var(--w32);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* ---- Accordion ---- */

.sec-sa-features__accordion {
  grid-area: accordion;
  margin-top: var(--w24);
  max-width: var(--w507);
}

.sec-sa-features__item {
  border-bottom: 1px solid var(--navy-40);
  border-radius: 2px;
  transition: background-color var(--dur) var(--ease);
}

.sec-sa-features__item:first-child {
  border-top: 1px solid var(--navy-40);
}

/* The open panel fill — Figma #F9FAFD, and only while the item is the one
   showing its body. */
.sec-sa-features__item.is-open {
  background: #f9fafd;
}

@media (hover: hover) {
  .sec-sa-features__item:hover {
    background: #f9fafd;
  }

  .sec-sa-features__accordion:hover .sec-sa-features__item.is-open:not(:hover) {
    background: transparent;
  }
}

.sec-sa-features__item-heading {
  margin: 0;
}

/* Plain row head — Figma draws no chevron and no hover colour shift on the
   title; the panel fill is the whole affordance. Kept as a <button> for
   focus reachability (focus-within opens the body below). */
.sec-sa-features__item-head {
  display: block;
  width: 100%;
  padding: var(--w16);
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w23);
  text-align: left;
  color: var(--navy);
  cursor: default;
}

.sec-sa-features__item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.sec-sa-features__item.is-open .sec-sa-features__item-body {
  grid-template-rows: 1fr;
}

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

  .sec-sa-features__accordion:hover .sec-sa-features__item.is-open:not(:hover) .sec-sa-features__item-body {
    grid-template-rows: 0fr;
  }
}

.sec-sa-features__item-body-inner {
  overflow: hidden;
}

.sec-sa-features__item-text {
  padding: 0 var(--w16) var(--w16);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy-70);
}

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

/* Figma's phone frames run title → lead → illustration → items, which is
   exactly source order once the columns collapse. */
/* Phone — every item open, no panel fill, nothing to interact with. */
@media (max-width: 768px) {
  .sec-sa-features__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "media"
      "accordion";
    row-gap: var(--m32);
  }

  .sec-sa-features__media {
    justify-self: center;
    width: 100%;
    max-width: min(var(--media-max, var(--w646)), 100%);
    margin-right: 0;
  }

  .sec-sa-features__accordion {
    margin-top: 0;
    max-width: 100%;
  }

  .sec-sa-features__item-body,
  .sec-sa-features__accordion:hover .sec-sa-features__item.is-open:not(:hover) .sec-sa-features__item-body {
    grid-template-rows: 1fr;
  }

  .sec-sa-features__item.is-open {
    background: transparent;
  }

  .sec-sa-features__lead {
    margin-top: var(--m24);
    font-size: var(--m14);
    line-height: var(--m20);
    font-weight: 400;
    color: var(--navy-70);
  }

  .sec-sa-features__item-head {
    padding: var(--m14) 0 var(--m6);
    font-size: var(--m16);
    line-height: var(--m22);
  }

  .sec-sa-features__item-text {
    padding: 0 0 var(--m14);
    font-size: var(--m14);
    line-height: var(--m20);
  }
}