/* Rules Configuration case study only */

/* Overview Section */
.overview { padding: 40px 0; }
.overview__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.overview-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 80px;
}
.overview-row .text-box { width: 325.333px; }
.overview-row__img { position: relative; flex-shrink: 0; overflow: hidden; }
.overview-row__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.overview-row__img--user { width: 400.5px; height: 264px; }
.overview-row__img--tool { width: 400px; height: 323px; }
.overview-row__img--tool img {
  position: absolute;
  left: -22.25%;
  top: -0.31%;
  width: 143.75%;
  height: 100.15%;
  max-width: none;
}
.overview-row--problem {
  width: 800px;
  height: 300px;
  justify-content: space-between;
  gap: 0;
}
.overview-row--problem .text-box { width: 390px; }
.overview-row__img--problem { width: 330px; height: 184px; }

/* Connector line between "Our User" and "The tool" */
.overview__connector {
  position: absolute;
  left: 197px;
  top: 136px;
  width: 218px;
  height: 201px;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  /* Figma drop shadow (white 20%, x0 y0, blur 16) plus a tighter core glow
     so it reads on screen; a 3px line spreads the Figma shadow too thin to see. */
  filter: drop-shadow(0 0 3px var(--connector-glow-core)) drop-shadow(0 0 16px var(--connector-glow));
}
.overview__connector path {
  fill: none;
  stroke: var(--connector-blue);
  stroke-width: 2;
}

/* Hypothesis card */
.hypothesis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21.333px;
  width: 800px;
  padding: 42.667px 33.333px;
  overflow: clip;
  background:
    linear-gradient(var(--surface-darkgrey), var(--surface-darkgrey)) padding-box,
    var(--border-bluegradient) border-box;
  border: 2.667px solid transparent;
  border-radius: 16px;
  box-shadow: 0 2.667px 21.333px 0 rgba(0, 0, 0, 0.25);
}
.hypothesis__images {
  display: flex;
  justify-content: center;
  gap: 40px;
  width: 760px;
  max-width: 100%;
  height: 200px;
}
.hypothesis__img {
  position: relative;
  flex-shrink: 0;
  width: 361.162px;
  height: 199.635px;
  overflow: hidden;
  border-radius: 5.197px;
  box-shadow: -6.929px 3.464px 7.535px 0 rgba(0, 0, 0, 0.25);
}
.hypothesis__img img { position: absolute; max-width: none; display: block; }
.hypothesis__img--1 img { left: 0; top: 0.02%; width: 100%; height: 99.95%; }
.hypothesis__img--2 img { left: -7.13%; top: -9.02%; width: 115.56%; height: 126.91%; }
.hypothesis .text-box { align-items: center; width: 573.333px; max-width: 100%; text-align: center; }

/* Research table */
.research__container {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}
.research-table { width: 100%; color: var(--text-muted); font-feature-settings: "salt" 1; }
.research-table__head,
.research-table__row {
  display: grid;
  grid-template-columns: 133.333px 240px 320px;
  column-gap: 32px;
  align-items: start;
}
.research-table__head {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.7px;
}
.research-table__body {
  overflow: clip;
  border: 0.667px solid var(--border-lightgrey);
  border-radius: 8px;
  box-shadow: 0 2.667px 2.667px 0 rgba(0, 0, 0, 0.25);
}
.research-table__row {
  padding: 16px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.32px;
  background: var(--black);
}
.research-table__row + .research-table__row { border-top: 0.667px solid var(--border-lightgrey); }
.research-table__row:nth-child(even) { background: var(--surface-darkgrey); }
.research-table strong { font-weight: 400; color: var(--text-white); }
.research-table__label { display: none; }

/* Design section */
.design__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
}
.cs-block--rm { gap: 32px; }
.cs-figure--rule-access { height: 440px; }
.cs-figure--rule-access img { position: absolute; left: 0; top: -0.5px; }
.cs-figure--config { height: 480px; display: flex; align-items: center; }

/* Summary / Reflections */
.summary__body { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.reflections__pairs { display: flex; flex-direction: column; gap: 24px; width: 100%; }

@media (max-width: 900px) {
  .overview__connector { display: none; }
  .overview__container { gap: 48px; }
  .overview-row,
  .overview-row--problem {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: auto;
    gap: 24px;
  }
  .overview-row--tool { flex-direction: column-reverse; }
  .overview-row .text-box,
  .overview-row--problem .text-box { width: 100%; }
  .overview-row__img--user,
  .overview-row__img--tool,
  .overview-row__img--problem { width: 100%; height: auto; aspect-ratio: 400 / 264; }
  .overview-row__img--tool { aspect-ratio: 400 / 323; }
  .overview-row__img--problem { aspect-ratio: 330 / 184; }
  .hypothesis { width: 100%; padding: 32px 20px; }
  .hypothesis__images { flex-direction: column; height: auto; gap: 20px; }
  .hypothesis__img { width: 100%; height: auto; aspect-ratio: 361 / 200; }

  .research-table__head { display: none; }
  .research-table__row { grid-template-columns: 1fr; row-gap: 8px; }
  .research-table__label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.6px;
    color: var(--text-grey);
  }
  .cs-figure--rule-access,
  .cs-figure--config { height: auto; }
  .cs-figure--rule-access img { position: static; }
}