/* your custom styles here */

/* ------------------------------
 * Home banner aspect ratio 1350:400
 * Works with the hero unit section on index.html
 * ------------------------------ */
.hero-unit.hero-fullwidth.fullwidth-image {
  position: relative;
  width: 100%;
  /* Modern browsers: keep aspect ratio */
  aspect-ratio: 1350 / 400;
  /* If a background is used on this section, ensure proper covering */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Fallback for browsers not supporting aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .hero-unit.hero-fullwidth.fullwidth-image::before {
    content: "";
    display: block;
    /* 400 / 1350 = 0.296296... => 29.6296% */
    padding-top: 29.6296%;
  }
}

/* Place the content over the ratio box */
.hero-unit.hero-fullwidth.fullwidth-image > .hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* optional backdrop tweaks if background image exists */
  /* color: #fff; */
}

/* Ensure inner container doesn't introduce unwanted max-width issues on small screens */
@media screen and (max-width: 768px) {
  .hero-unit.hero-fullwidth.fullwidth-image > .hero-content {
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 4px;
    overflow: hidden; /* 防止文字或按钮溢出容器 */
  }

  .hero-unit.hero-fullwidth.fullwidth-image > .hero-content .container {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 文本压缩：标题/副标题在小屏的字号与行高 */
  .hero-unit .heading {
    font-size: clamp(18px, 5.2vw, 28px);
    line-height: 1.2;
    margin: 0 0 6px;
    letter-spacing: 0.2px;
  }
  .hero-unit .lead,
  .hero-unit p.lead {
    font-size: clamp(12px, 3.8vw, 18px);
    line-height: 1.3;
    margin: 0 0 10px;
  }
  /* 旋转词允许换行，避免超出 */
  #rotating-words,
  .rotating-words {
    display: inline;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 按钮缩小并紧凑排列 */
  .hero-unit .btn {
    font-size: clamp(12px, 3.6vw, 16px);
    padding: 6px 12px;
    line-height: 1.2;
    border-radius: 4px;
  }
  .hero-unit .btn-lg {
    padding: 8px 14px;
  }
  .hero-unit .btn + .btn {
    margin-left: 8px;
  }

  /* 保持容器自动高度（不改变视觉高度比例的前提下允许内容更紧凑）*/
  .hero-unit.hero-fullwidth {
    height: auto;
  }
}

/* 极小屏进一步优化：按钮堆叠，增加可点区域 */
@media screen and (max-width: 480px) {
  .hero-unit .btn {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .hero-unit .btn + .btn {
    margin-left: 0;
    margin-top: 6px;
  }
  /* 在小屏隐藏次按钮，保留主要CTA */
  .hero-unit .btn-default {
    display: none;
  }

  /* 再次微缩标题与副标题，提升容纳 */
  .hero-unit .heading {
    font-size: clamp(16px, 4.8vw, 24px);
  }
  .hero-unit .lead,
  .hero-unit p.lead {
    font-size: clamp(11px, 3.4vw, 16px);
  }
}

/* 超小屏设备下（如 320–360px 宽）：进一步压缩内容，隐藏次要元素 */
@media screen and (max-width: 360px) {
  .hero-unit .heading {
    font-size: clamp(16px, 4.6vw, 22px);
    line-height: 1.15;
    margin-bottom: 4px;
  }
  .hero-unit .lead,
  .hero-unit p.lead {
    font-size: clamp(11px, 3.4vw, 14px);
    line-height: 1.2;
    margin-bottom: 6px;
  }
  /* 在极小屏隐藏副标题以保证主要标题与按钮可见 */
  .hero-unit .lead {
    display: none;
  }

  .hero-unit .btn {
    font-size: clamp(11px, 3.4vw, 14px);
    padding: 6px 10px;
  }
  /* 隐藏次按钮，保留主按钮（默认主题下 .btn-primary 为主按钮，.btn-default 为次按钮） */
  .hero-unit .btn-default {
    display: none;
  }

  /* 进一步压缩容器内边距 */
  .hero-unit.hero-fullwidth.fullwidth-image > .hero-content .container {
    padding-left: 8px;
    padding-right: 8px;
  }
}