/* Case-study layout: shared design tokens and components remain authoritative. */
.gn-case .gn-page-toc { margin-top: var(--gn-space-8); }

.gn-case__intro {
  display: grid;
  gap: var(--gn-space-6);
  padding-block: var(--gn-space-8) var(--gn-space-10);
}

.gn-case__title {
  margin-block: var(--gn-space-4) var(--gn-space-6);
  font-size: var(--gn-fs-page-title);
  line-height: var(--gn-lh-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.gn-case__title-part { display: inline-block; }
.gn-case__client { font-weight: 500; }

.gn-case__intro-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gn-space-4);
}

.gn-case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gn-space-2);
}

.gn-case__stage {
  position: relative;
  padding: var(--gn-space-6) var(--gn-space-8) var(--gn-space-8) var(--gn-space-4);
  background: var(--gn-color-bg-service);
  border: 1px solid var(--gn-color-border-soft);
}

.gn-case__desktop {
  width: 89%;
  overflow: hidden;
  background: var(--gn-color-bg);
  border: 1px solid var(--gn-color-border);
  border-radius: var(--gn-radius);
  box-shadow: var(--gn-shadow-card-hover);
}

.gn-case__browser {
  display: flex;
  justify-content: space-between;
  gap: var(--gn-space-3);
  padding: var(--gn-space-2) var(--gn-space-3);
  color: var(--gn-color-text-secondary);
  background: var(--gn-color-bg-sub);
  font-size: var(--gn-fs-small);
}
.gn-case__browser span:last-child { display: none; }

.gn-case__mobile {
  position: absolute;
  right: 3%;
  bottom: 5%;
  width: 20%;
  padding: var(--gn-space-1);
  background: var(--gn-color-text);
  border-radius: var(--gn-radius-lg);
  box-shadow: var(--gn-shadow-card-hover);
  overflow: hidden;
}
.gn-case__stage--desktop .gn-case__desktop { width: 100%; }

.gn-case__hero > figcaption {
  margin-top: var(--gn-space-3);
  font-size: var(--gn-fs-small);
  color: var(--gn-color-text-secondary);
}
.gn-case__mobile img { border-radius: var(--gn-radius); }
.gn-case__section { padding-block: var(--gn-space-16); }

.gn-case__split {
  display: grid;
  gap: var(--gn-space-8);
}
.gn-case__section-label .gn-eyebrow { margin-bottom: var(--gn-space-3); }

.gn-case__heading {
  font-size: var(--gn-fs-h3);
  line-height: var(--gn-lh-heading);
}
.gn-case__copy { min-width: 0; }
.gn-case__copy > * + * { margin-top: var(--gn-space-5); }

.gn-case__copy > p {
  color: var(--gn-color-text-secondary);
  line-height: var(--gn-lh-body);
}
.gn-case__facts { margin: 0; }

.gn-case__facts > div {
  display: grid;
  grid-template-columns: minmax(5rem, 0.3fr) 1fr;
  gap: var(--gn-space-4);
  padding-block: var(--gn-space-4);
  border-bottom: 1px solid var(--gn-color-border);
}

.gn-case__facts dt {
  font-size: var(--gn-fs-small);
  font-weight: 500;
  color: var(--gn-color-text-secondary);
}

.gn-case__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.gn-case__text-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gn-space-6);
  padding-block: var(--gn-space-4);
  color: var(--gn-color-primary);
  font-weight: 500;
}

.gn-case__text-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.gn-case__points {
  padding-block: var(--gn-space-12);
  background: var(--gn-color-bg-service);
}
.gn-case__points .gn-case__heading { margin-top: var(--gn-space-3); }

.gn-case__point-list {
  display: grid;
  gap: var(--gn-space-8);
  margin-top: var(--gn-space-8);
}

.gn-case__point-list li {
  border-top: 1px solid var(--gn-color-primary-line);
  padding-top: var(--gn-space-5);
}

.gn-case__number {
  display: block;
  color: var(--gn-color-primary);
  font-family: var(--gn-font-en);
  font-size: var(--gn-fs-h3);
  margin-bottom: var(--gn-space-4);
}

.gn-case__point-list h3, .gn-case__copy h3 {
  font-size: var(--gn-fs-cta-title);
  line-height: var(--gn-lh-heading);
}

.gn-case__point-list p {
  color: var(--gn-color-text-secondary);
  margin-top: var(--gn-space-4);
}

.gn-case__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gn-space-5);
  padding-bottom: var(--gn-space-16);
}

.gn-case__body {
  max-width: calc(var(--gn-container-case) + var(--gn-container-pad) * 2);
  padding-block: var(--gn-space-16);
  overflow-wrap: anywhere;
}
.gn-case__body > * + * { margin-top: var(--gn-space-6); }

.gn-case__body h2 {
  font-size: var(--gn-fs-h3);
  line-height: var(--gn-lh-heading);
}

.gn-case__body h2:not(:first-child) {
  margin-top: var(--gn-space-16);
  padding-top: var(--gn-space-8);
  border-top: 1px solid var(--gn-color-border);
}

.gn-case__body h3 {
  margin-top: var(--gn-space-8);
  font-size: var(--gn-fs-cta-title);
  line-height: var(--gn-lh-heading);
}

.gn-case__body p {
  color: var(--gn-color-text-secondary);
  line-height: var(--gn-lh-body);
}
.gn-case__body :is(ul, ol) { padding-inline-start: var(--gn-space-6); }
.gn-case__body ul { list-style-type: disc; }
.gn-case__body ol { list-style-type: decimal; }

.gn-case__body blockquote {
  border-inline-start: 3px solid var(--gn-color-primary);
  padding-inline-start: var(--gn-space-6);
}
.gn-case__body figure { margin-block: var(--gn-space-8); }

.gn-case__body img {
  width: 100%;
  height: auto;
  border: 1px solid var(--gn-color-border);
}

.gn-case__body figcaption {
  margin-top: var(--gn-space-3);
  font-size: var(--gn-fs-small);
  color: var(--gn-color-text-secondary);
}

@media (width >= 768px) {
  .gn-case__intro { padding-block: var(--gn-space-10) var(--gn-space-12); }
  .gn-case__stage { padding: var(--gn-space-12) var(--gn-space-20) var(--gn-space-16) var(--gn-space-12); }
  .gn-case__browser span:last-child { display: inline; }

  .gn-case__mobile {
    right: 5%;
    width: 19%;
    padding: var(--gn-space-2);
  }
}

@media (width >= 1024px) {
  .gn-case__split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.8fr);
    gap: var(--gn-space-16);
  }

  .gn-case__point-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gn-space-10);
  }
  .gn-case__point-list--1 { grid-template-columns: minmax(0, 1fr); }
  .gn-case__point-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}