<template>
  <section class="section">
    <div class="container">
      <CommonSectionTitle title="企业文化" />
      <p v-if="culture.core" class="culture-core">{{ culture.core }}</p>
      <div class="values-grid">
        <div v-for="v in culture.values" :key="v.name" class="value-item">
          <h3 class="value-name">{{ v.name }}</h3>
          <p class="value-expr">{{ v.expression }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({ culture: { type: Object, required: true } })
</script>

<style lang="less" scoped>
.culture-core {
  text-align: center; font-size: @font-size-xl; font-weight: 600; color: @color-primary;
  letter-spacing: 0.1em; margin-bottom: @space-2xl;
}
.culture-core {
  text-align: center; font-size: @font-size-xl; font-weight: 600; color: @color-primary;
  letter-spacing: 0.1em; margin-bottom: @space-2xl;
}
.values-grid {
  display: grid; grid-template-columns: 1fr; gap: @space-lg;
  .respond-md({ grid-template-columns: repeat(3, 1fr); });
}
.value-item { text-align: center; padding: @space-xl @space-lg; }
.value-name { font-size: @font-size-xl; color: @color-primary; margin-bottom: @space-sm; }
.value-expr { font-size: @font-size-base; color: @color-text-secondary; }

</style>
