/* GIS Structure Block - Frontend Styles */

.synpact-gis-structure {
  margin: 2vh 0 5vh 0;
}

/* ── Desktop: 4 columns, chevron arrows ── */
.gis-structure-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
}

.gis-structure-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Arrow base */
.gis-structure-arrow {
  color: #f1f2eb;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 28px;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.4vw, 20px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

/* Arrow 1: flat left, point right */
.gis-arrow-col-1 {
  background-color: #564147;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 50%, calc(100% - 32px) 100%, 0 100%);
}

/* Arrows 2–3: notch left, point right */
.gis-arrow-col-2 {
  background-color: #76877d;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 50%, calc(100% - 32px) 100%, 0 100%, 32px 50%);
}

.gis-arrow-col-3 {
  background-color: #6684a1;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 50%, calc(100% - 32px) 100%, 0 100%, 32px 50%);
}

/* Arrow 4: notch left, flat right */
.gis-arrow-col-4 {
  background-color: #bb8092;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 50%, calc(100% - 32px) 100%, 0 100%, 32px 50%);
}

/* Bullet list */
.gis-structure-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gis-structure-list li {
  font-family: "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: clamp(13px, 1.1vw, 15px);
  color: #333;
  line-height: 1.5;
  padding-right: 8px;
}

/* ── Tablet: 2×2 grid, same chevron shape ── */
@media (max-width: 900px) {
  .gis-structure-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .gis-structure-column {
    gap: 14px;
  }

  .gis-structure-arrow {
    height: auto;
    min-height: 60px;
    padding: 12px 20px;
    font-size: clamp(15px, 2.5vw, 18px);
  }

  .gis-structure-list li {
    font-size: 14px;
  }
}

/* ── Mobile: single column ── */
@media (max-width: 480px) {
  .gis-structure-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}