/* ==============================================
   Hdev Section Heading
   ============================================== */

.hdev-heading {
  margin-bottom: 40px;
  text-align: left;
}

.hdev-heading--center {
  text-align: center;
}

.hdev-heading__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--hdev-orange-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hdev-heading__eyebrow.is-pill {
  padding: 7px 16px;
  border-radius: 999px;
  background-color: var(--hdev-orange-soft);
  color: var(--hdev-orange-darker);
  font-size: 12px;
}

/* ── Nhãn giữ 1 dòng (thuần CSS) ─────────────────────────
   Khối tiêu đề là container → 100cqi = bề ngang cột.
   Cỡ chữ = (bề ngang cột − padding 2 bên) / (số ký tự × độ rộng TB 1 ký tự),
   không vượt cỡ gốc, không nhỏ hơn 8px.
   --hdev-eyebrow-chars do PHP truyền vào; --eb-factor đo thực tế với font Archivo in hoa. */
.hdev-heading.has-nowrap-eyebrow {
  container-type: inline-size;
}

.hdev-heading__eyebrow.is-nowrap {
  --eb-max: 13px;
  --eb-pad: 0px;
  --eb-factor: 0.7;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: max(8px, min(var(--eb-max), calc((100cqi - 2 * var(--eb-pad)) / (var(--hdev-eyebrow-chars, 40) * var(--eb-factor)))));
}

.hdev-heading__eyebrow.is-nowrap.is-pill {
  --eb-max: 12px;
  --eb-pad: 16px;
}

@media (max-width: 549px) {
  .hdev-heading__eyebrow.is-nowrap {
    --eb-factor: 0.66;
    letter-spacing: 0.04em;
  }

  .hdev-heading__eyebrow.is-nowrap.is-pill {
    --eb-pad: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

.hdev-heading__title {
  margin: 0;
  color: var(--hdev-text);
  font-weight: 700;
  line-height: 1.25;
}

.hdev-heading--size-large .hdev-heading__title {
  font-size: 52px;
  line-height: 1.15;
}

.hdev-heading--size-small .hdev-heading__title {
  font-size: 1.1em;
}

.hdev-heading__desc {
  max-width: var(--hdev-heading-desc-width, none);
  margin-top: 14px;
  color: var(--hdev-muted);
  font-size: 16px;
  line-height: 1.6;
}

.hdev-heading--center .hdev-heading__desc {
  margin-left: auto;
  margin-right: auto;
}

/* Tablet & mobile */
@media (max-width: 849px) {
  .hdev-heading {
    margin-bottom: 30px;
  }

  .hdev-heading--size-large .hdev-heading__title {
    font-size: 36px;
  }

  .hdev-heading--sm-left {
    text-align: left;
  }

  .hdev-heading--sm-left .hdev-heading__desc {
    margin-left: 0;
  }

  .hdev-heading--sm-center {
    text-align: center;
  }

  .hdev-heading--sm-center .hdev-heading__desc {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 549px) {
  .hdev-heading--size-large .hdev-heading__title {
    font-size: 30px;
  }

  .hdev-heading__desc {
    font-size: 15px;
  }
}