// ============================================
// 呼籁旅行官网 - Less混入
// ============================================

// 响应式断点
.respond-md(@rules) {
  @media (min-width: @breakpoint-md) {
    @rules();
  }
}

.respond-lg(@rules) {
  @media (min-width: @breakpoint-lg) {
    @rules();
  }
}

.respond-xl(@rules) {
  @media (min-width: @breakpoint-xl) {
    @rules();
  }
}

// 容器
.container() {
  width: 100%;
  max-width: @container-max-width;
  margin-left: auto;
  margin-right: auto;
  padding-left: @container-padding;
  padding-right: @container-padding;

  .respond-lg({
    padding-left: @container-padding-desktop;
    padding-right: @container-padding-desktop;
  });
}

// 段落间距 — 更大的呼吸感
.section-padding() {
  padding-top: @space-2xl;
  padding-bottom: @space-2xl;

  .respond-md({
    padding-top: @space-3xl;
    padding-bottom: @space-3xl;
  });

  .respond-lg({
    padding-top: 100px;
    padding-bottom: 100px;
  });
}

// 响应式网格：移动1列 → 平板2列 → 桌面3列
.grid-responsive(@gap: @space-lg; @md-cols: 2; @lg-cols: 3) {
  display: grid;
  grid-template-columns: 1fr;
  gap: @gap;

  .respond-md({
    grid-template-columns: repeat(@md-cols, 1fr);
  });

  .respond-lg({
    grid-template-columns: repeat(@lg-cols, 1fr);
  });
}

// 多行截断
.text-clamp(@lines: 3) {
  display: -webkit-box;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}