/**
 * sections.css
 * Shared "company profile" sections: About, Vision & Mission, Core Values,
 * Statistics, Why Choose Us (advantages), and Technology.
 */

/* --- About --------------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.about-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  background: var(--gradient-accent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-frame__pattern {
  position: absolute;
  inset: 0;
  color: var(--color-white);
  opacity: 0.5;
}

.about-frame__badge {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
  color: var(--color-white);
}

.about-frame__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1;
}

.about-frame__label {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  opacity: 0.9;
}

.about__paragraph {
  color: var(--color-ink-600);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-sm);
}

.about__paragraph:last-child {
  margin-bottom: 0;
}

/* --- Vision & Mission ------------------------------------------------------ */
.vision-mission__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.vision-mission__card {
  min-width: 0;
  padding: var(--space-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.vision-mission__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-50);
  color: var(--color-accent-600);
  margin-bottom: var(--space-sm);
}

.vision-mission__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
}

.vision-mission__text {
  color: var(--color-ink-600);
  line-height: var(--lh-relaxed);
}

.vision-mission__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.vision-mission__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  color: var(--color-ink-600);
  line-height: var(--lh-normal);
}

.vision-mission__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-50);
  color: var(--color-accent-600);
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Core Values ----------------------------------------------------------- */
.core-values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.core-value-card {
  min-width: 0;
  padding: var(--space-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.core-value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-50);
  color: var(--color-accent-600);
  margin-bottom: var(--space-sm);
}

.core-value-card__title {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2xs);
}

.core-value-card__desc {
  color: var(--color-ink-500);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* --- Stats ------------------------------------------------------------------ */
.stats {
  background: var(--gradient-accent);
  overflow: hidden;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  text-align: center;
}

.stat-card {
  min-width: 0;
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  overflow-wrap: anywhere;
}

.stat-card__label {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

/* --- Advantages (Why Choose Us) --------------------------------------------- */
.advantages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.advantage-card {
  display: flex;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.advantage-card > div {
  min-width: 0;
  flex: 1;
}

.advantage-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-50);
  color: var(--color-accent-600);
  flex-shrink: 0;
}

.advantage-card__title {
  font-size: var(--fs-md);
  margin-bottom: var(--space-3xs);
}

.advantage-card__desc {
  color: var(--color-ink-500);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* --- Technology -------------------------------------------------------------- */
.technology__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.technology__intro {
  max-width: 560px;
}

.technology__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  min-width: 0;
}

.tech-item {
  display: flex;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-md);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.tech-item > div {
  min-width: 0;
  flex: 1;
}

.tech-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-ink-900);
  color: var(--color-white);
  flex-shrink: 0;
}

.tech-item__title {
  font-size: var(--fs-base);
  margin-bottom: 2px;
}

.tech-item__desc {
  color: var(--color-ink-500);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* --- Responsive ---------------------------------------------------------------- */
@media (max-width: 399px) {
  .stats__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
}

@media (min-width: 700px) {
  .vision-mission__grid,
  .core-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advantages__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .technology__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

@media (min-width: 1024px) {
  .core-values__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .advantages__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}