/* ── Why Quix — interactive selector (left list / centre image / right copy) ── */

.why-quix {
  background: #dadada;
  color: var(--black);
  padding: 80px 38px 120px;
  position: relative;
}

.why-quix__inner {
  max-width: var(--col-width);
  margin: 0 auto;
  padding: 0 30px;
}

.why-quix__heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 56px;
}

.why-quix__grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 457px 1fr;
  gap: 64px;
  align-items: start;
}

/* ── Left: selectable list ───────────────────────────────────────────────── */

.why-quix__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-quix__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
  color: #757575;            /* unselected: slightly grey */
  transition: color 0.15s ease;
}

/* The clickable row (bullet / number / label). A <button> so it's keyboard-
   operable for free; reset its UA chrome and lay it out like the old item. */
.why-quix__head {
  display: grid;
  grid-template-columns: 44px auto 1fr;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  margin: 0;
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: inherit;
  text-align: left;
}

.why-quix__item:hover {
  color: #404040;
}

.why-quix__item.is-active {
  color: var(--black);       /* selected: black text */
  border-bottom-color: var(--orange);
}

/* Black square bullet — only on the active item */
.why-quix__bullet {
  width: 18px;
  height: 18px;
  background: var(--black);
  justify-self: start;
  opacity: 0;
}
.why-quix__item.is-active .why-quix__bullet {
  opacity: 1;
}

.why-quix__num {
  white-space: nowrap;
}

/* ── Centre: image with TL + BR brackets, other corners rounded ──────────── */

.why-quix__media {
  position: relative;
  width: 457px;
  height: 537px;
}

.why-quix__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* TL & BR square (bracketed); TR & BL rounded 8px */
  border-radius: 0 8px 0 8px;
}

.why-quix__corner {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 2;
  pointer-events: none;
}
.why-quix__corner--tl {
  top: -2px;
  left: -2px;
  border-top: 3px solid var(--orange);
  border-left: 3px solid var(--orange);
}
.why-quix__corner--br {
  bottom: -2px;
  right: -2px;
  border-bottom: 3px solid var(--orange);
  border-right: 3px solid var(--orange);
}

/* ── Right: copy ─────────────────────────────────────────────────────────── */

.why-quix__copy {
  font-family: var(--font-sans);
  padding-top: 4px;
}
.why-quix__copy p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.78);
  margin: 0 0 20px;
}
.why-quix__copy p:last-child {
  margin-bottom: 0;
}

/* ── Mobile accordion panel (per-row copy + image) ───────────────────────────
   Lives inside every row but is only revealed on mobile (see media query). */
.why-quix__panel {
  display: none;
}

/* ── Responsive: accordion on narrow viewports ───────────────────────────────
   The 3-column layout collapses to the list alone; each row expands in place
   to show its copy, with the image beneath it. */

@media (max-width: 980px) {
  .why-quix {
    padding: 56px 20px 72px;
  }
  .why-quix__inner {
    padding: 0;
  }
  .why-quix__heading {
    font-size: 34px;
    margin-bottom: 32px;
  }

  .why-quix__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Hide the shared desktop image + copy; rows carry their own now. */
  .why-quix__grid > .why-quix__media,
  .why-quix__grid > .why-quix__copy {
    display: none;
  }

  /* Collapsible panel: animate height between closed and open. */
  .why-quix__panel {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
  }
  .why-quix__item.is-active .why-quix__panel {
    max-height: 1600px;
  }

  .why-quix__panel-copy {
    padding: 4px 0 0;
  }
  .why-quix__panel-copy p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.78);
    margin: 0 0 20px;
  }

  /* Image sits below the copy, capped at the desktop media size. */
  .why-quix__panel-media {
    position: relative;
    width: 100%;
    max-width: 457px;
    aspect-ratio: 457 / 537;
    margin-bottom: 24px;
  }
  .why-quix__panel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0 8px 0 8px;
  }
}