/* What is GIS? education page. Tokens only. */

/* Section rhythm */
.wig-section {
  padding-block: var(--space-6);
}

.wig-section--alt {
  background: var(--color-surface-alt);
}

/* Hero band */
.wig-hero {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding-block: var(--space-7);
}

.wig-hero h1 {
  color: var(--color-on-primary);
}

.wig-hero .eyebrow {
  color: var(--color-on-primary);
  opacity: 0.85;
}

.wig-hero__lede {
  font-size: var(--text-md);
  max-width: 62ch;
  margin-bottom: 0;
  opacity: 0.95;
}

/* Definition section */
.wig-definition {
  align-items: center;
}

.wig-definition__copy {
  grid-column: span 7;
}

.wig-definition__copy p {
  max-width: 70ch;
}

.wig-definition__media {
  grid-column: span 5;
  width: 100%;
  border-radius: var(--radius-lg);
}

@media (max-width: 720px) {
  .wig-definition__copy,
  .wig-definition__media {
    grid-column: auto;
  }
}

/* Layers section */
.wig-layers-grid {
  align-items: center;
}

.wig-layers-copy {
  grid-column: span 6;
}

.wig-layers-copy p {
  max-width: 70ch;
}

/* Pure-CSS layered-map diagram: flattened translucent planes, one per row,
   overlapping vertically to read as a stacked map. No JS, no images. */
.gis-stack {
  grid-column: span 6;
  margin: 0;
  justify-self: center;
}

@media (max-width: 720px) {
  .wig-layers-copy,
  .gis-stack {
    grid-column: auto;
    justify-self: start;
  }
}

.gis-stack__rows {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-4);
}

.gis-stack__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  position: relative;
}

/* Painting order: top layers of the stack sit above the ones beneath. */
.gis-stack__row:nth-child(1) { z-index: 5; }
.gis-stack__row:nth-child(2) { z-index: 4; }
.gis-stack__row:nth-child(3) { z-index: 3; }
.gis-stack__row:nth-child(4) { z-index: 2; }
.gis-stack__row:nth-child(5) { z-index: 1; }

.gis-stack__cell {
  display: grid;
  place-items: center;
  width: 250px;
  height: 84px; /* shorter than the plane, so planes overlap between rows */
  flex-shrink: 0;
}

.gis-stack__plane {
  display: block;
  width: 168px;
  height: 168px;
  border-radius: var(--radius);
  transform: scaleY(0.5) rotate(45deg);
  border: 2px solid;
}

.gis-stack__row:nth-child(1) .gis-stack__plane {
  border-color: var(--color-primary-bright);
  background: color-mix(in srgb, var(--color-primary-bright) 28%, transparent);
}

.gis-stack__row:nth-child(2) .gis-stack__plane {
  border-color: var(--color-accent-violet);
  background: color-mix(in srgb, var(--color-accent-violet) 28%, transparent);
}

.gis-stack__row:nth-child(3) .gis-stack__plane {
  border-color: var(--color-accent-amber);
  background: color-mix(in srgb, var(--color-accent-amber) 28%, transparent);
}

.gis-stack__row:nth-child(4) .gis-stack__plane {
  border-color: var(--color-accent-green);
  background: color-mix(in srgb, var(--color-accent-green) 28%, transparent);
}

.gis-stack__row:nth-child(5) .gis-stack__plane {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.gis-stack__label {
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gis-stack figcaption {
  font-size: var(--text-sm);
  opacity: 0.8;
  max-width: 44ch;
}

@media (max-width: 480px) {
  .gis-stack__cell {
    width: 170px;
    height: 64px;
  }

  .gis-stack__plane {
    width: 116px;
    height: 116px;
  }
}

/* Use-case cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.wig-usecase h3 {
  margin-top: 0;
}

.wig-usecase p {
  margin-bottom: var(--space-2);
}

/* Glossary */
.wig-glossary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.wig-glossary__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.wig-glossary dt {
  font-weight: 700;
  color: var(--color-ink-strong);
  margin-bottom: var(--space-1);
}

.wig-glossary dd {
  margin: 0;
  font-size: var(--text-base);
}

/* FAQ */
.wig-faq {
  max-width: 46rem;
}

.wig-faq__item {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.wig-faq__item:last-child {
  border-bottom: 0;
}

.wig-faq__item h3 {
  font-size: var(--text-md);
  margin-block: 0 var(--space-2);
}

.wig-faq__item p {
  margin-bottom: 0;
  max-width: 70ch;
}

/* Closing CTA */
.wig-closing {
  background: var(--color-surface-alt);
  text-align: center;
  padding-block: var(--space-7);
}

.wig-closing__lede {
  margin-inline: auto;
  margin-bottom: var(--space-4);
  max-width: 60ch;
}