/**
 * @file
 * General theme and research areas (Figma: 04 … Area Explorer).
 */

.sra-research {
  background: var(--sra-white);
}

.sra-research .sra-section__title {
  margin-bottom: 40px;
}

.sra-research__explorer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  padding: 12px 12px 0;
  border-radius: var(--sra-radius-lg);
  background: var(--sra-white);
  box-shadow: 0 0 32px -8px rgba(2, 45, 48, 0.12), 0 0 4px rgba(2, 45, 48, 0.04);
}

/* Theme feature. */
.sra-research__feature {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 32px;
  border-radius: var(--sra-radius-md);
  background: linear-gradient(119.14deg, var(--sra-secondary-600) 0%, var(--sra-primary-700) 107.87%);
}

.sra-research__feature-copy {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 16px;
  width: 560px;
}

.sra-research__eyebrow {
  color: var(--sra-primary-400);
  font-weight: 700;
}

.sra-research__theme {
  margin-top: -16px;
  color: var(--sra-white);
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
}

.sra-research__theme-text {
  color: var(--sra-white);
  font-size: 18px;
  line-height: 28px;
}

.sra-research__context {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sra-research__context-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sra-radius-md);
  background: rgba(255, 255, 255, 0.1);
}

.sra-research__context-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.sra-research__context-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sra-research__context-label {
  color: var(--sra-primary-300);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.sra-research__context-value {
  color: var(--sra-white);
}

/* Areas explorer. */
.sra-research__areas {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 12px;
  border-radius: var(--sra-radius-lg);
  background: var(--sra-white);
}

.sra-research__rail {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
  width: 389px;
  min-height: 369px;
  padding: 28px 20px;
  border-radius: var(--sra-radius-md);
  background: var(--sra-gray-50);
}

.sra-research__rail-heading {
  padding: 0 8px;
  text-transform: uppercase;
  color: var(--sra-secondary-950);
  font-weight: 700;
}

.sra-research__tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sra-research__tab {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 14px;
  border: 1px solid transparent;
  border-radius: var(--sra-radius-md);
  background: transparent;
  color: var(--sra-gray-500);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.3s var(--sra-ease-out), border-color 0.3s, box-shadow 0.3s;
}

.sra-research__tab[aria-selected="true"] {
  border-color: var(--sra-secondary-200);
  background: var(--sra-white);
  box-shadow: 0 2px 8px rgba(2, 45, 48, 0.04), 0 1px 2px rgba(2, 45, 48, 0.06);
  color: var(--sra-secondary-950);
}

.sra-research__tab-number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--sra-radius-sm);
  background: var(--sra-secondary-400);
  color: var(--sra-white);
  font-size: 18px;
  line-height: 26px;
  transition: background-color 0.3s;
}

.sra-research__tab[aria-selected="true"] .sra-research__tab-number {
  background: var(--sra-secondary-950);
}

.sra-research__tab-label {
  flex: 1 1 auto;
}

.sra-research__tab-arrow {
  flex: none;
  width: 20px;
  height: 20px;
  background: url("../images/research/arrow.svg") center / contain no-repeat;
}

.sra-research__tab[aria-selected="true"] .sra-research__tab-arrow {
  background-image: url("../images/research/arrow-active.svg");
}

[dir="rtl"] .sra-research__tab-arrow {
  transform: scaleX(-1);
}

.sra-research__panels {
  position: relative;
  flex: 1 1 auto;
  padding: 20px;
}

.sra-research__decoration {
  position: absolute;
  top: 214px;
  right: -39px;
  width: 236px;
  max-width: none;
  pointer-events: none;
  transform: rotate(180deg) scaleY(-1);
}

[dir="rtl"] .sra-research__decoration {
  right: auto;
  left: -39px;
  transform: rotate(180deg);
}

.sra-research__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.sra-research__panel.is-entering {
  animation: sra-panel-in 0.5s var(--sra-ease-out);
}

@keyframes sra-panel-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

.sra-research__panel-title {
  color: var(--sra-tertiary-950);
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}

.sra-research__panel-text {
  color: var(--sra-gray-500);
  font-size: 18px;
  line-height: 28px;
}

/* Target research groups. */
.sra-research__groups {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 20px;
  padding: 32px;
  border-radius: var(--sra-radius-lg);
  background: var(--sra-gray-50);
}

.sra-research__groups-heading {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 6px;
  width: 375px;
}

.sra-research__groups-title {
  color: var(--sra-tertiary-950);
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}

.sra-research__groups-note {
  color: var(--sra-gray-500);
  font-size: 14px;
  line-height: 20px;
}

.sra-research__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sra-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--sra-line);
  border-radius: var(--sra-radius-full);
  background: var(--sra-white);
}

[dir="rtl"] .sra-chip {
  padding: 8px 8px 8px 18px;
}

.sra-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sra-tertiary-50);
}

.sra-chip__label {
  color: var(--sra-gray-500);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .sra-research__feature {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .sra-research__feature-copy {
    width: auto;
  }
}

@media (max-width: 1023px) {
  .sra-research__areas,
  .sra-research__groups {
    flex-direction: column;
    align-items: stretch;
  }

  .sra-research__rail,
  .sra-research__groups-heading {
    width: auto;
    min-height: 0;
  }

  .sra-research__feature {
    padding: 24px;
  }

  .sra-research__theme {
    font-size: 28px;
    line-height: 36px;
  }

  .sra-research__decoration {
    display: none;
  }

  .sra-research__explorer,
  .sra-research__areas {
    padding: 8px;
  }

  .sra-research__rail {
    padding: 20px 12px;
  }

  .sra-research__panels,
  .sra-research__panel {
    padding: 8px;
  }

  .sra-research__panel-title {
    font-size: 22px;
    line-height: 30px;
  }

  .sra-research__panel-text {
    font-size: 16px;
    line-height: 26px;
  }

  .sra-research__groups {
    padding: 24px;
  }

  .sra-chip__label {
    white-space: normal;
  }
}