/* ============================================================
   BlueBird Tech — Components (дизайн-система, node 1-12)
   Тільки компоненти, реально використані на головній.
   Кольори/шрифти — виключно через var(--bbt-*).
   ============================================================ */

.bbt-icon {
  display: inline-block;
  flex-shrink: 0;
  inline-size: 16px;
  block-size: 16px;
}

.bbt-icon--sm { inline-size: 11px; block-size: 11px; }
.bbt-icon--md { inline-size: 15px; block-size: 15px; }
.bbt-icon--lg { inline-size: 17px; block-size: 17px; }

.bbt-btn {
  display: inline-flex;
  align-items: stretch;
  font-family: var(--bbt-font-mono);
  font-weight: 500;
  text-transform: uppercase;
  background: var(--bbt-bg-brand);
  color: var(--bbt-fg-on-brand);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.bbt-btn__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding-inline: 16px;
  font-size: var(--bbt-button-md-size);
  line-height: var(--bbt-button-md-lh);
  letter-spacing: var(--bbt-button-md-ls);
}

.bbt-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bbt-bg-accent);
  color: var(--bbt-fg-on-accent);
}

.bbt-btn--sm { block-size: 36px; }
.bbt-btn--sm .bbt-btn__label { padding-inline: 12px; }
.bbt-btn--sm .bbt-btn__arrow { inline-size: 36px; }

.bbt-btn--md { block-size: 44px; }
.bbt-btn--md .bbt-btn__arrow { inline-size: 44px; }

.bbt-btn--lg { block-size: 52px; }
.bbt-btn--lg .bbt-btn__label {
  padding-inline: 18px;
  font-size: var(--bbt-button-lg-size);
  line-height: var(--bbt-button-lg-lh);
  letter-spacing: var(--bbt-button-lg-ls);
}
.bbt-btn--lg .bbt-btn__arrow { inline-size: 52px; }

.bbt-btn--xl { block-size: 60px; }
.bbt-btn--xl .bbt-btn__label {
  padding-inline: 24px;
  font-size: var(--bbt-button-xl-size);
  line-height: var(--bbt-button-xl-lh);
  letter-spacing: var(--bbt-button-xl-ls);
}
.bbt-btn--xl .bbt-btn__arrow { inline-size: 60px; }

.bbt-btn--primary { background: var(--bbt-bg-brand); color: var(--bbt-fg-on-brand); }
.bbt-btn--primary:hover { background: color-mix(in srgb, var(--bbt-bg-brand) 88%, white); }

.bbt-btn--accent { background: var(--bbt-bg-accent); color: var(--bbt-fg-on-accent); }
.bbt-btn--accent:hover { background: color-mix(in srgb, var(--bbt-bg-accent) 88%, white); }

.bbt-btn--secondary {
  background: var(--bbt-bg-surface);
  color: var(--bbt-fg-primary);
  border: 1px solid var(--bbt-border-default);
}
.bbt-btn--secondary:hover { border-color: var(--bbt-border-strong); }

.bbt-btn--inverse {
  background: var(--bbt-overlay-white-10);
  color: var(--bbt-fg-inverse);
  border: 1px solid var(--bbt-overlay-white-38);
}
.bbt-btn--inverse:hover { background: var(--bbt-overlay-white-24); }

.bbt-btn--ink {
  background: var(--bbt-bg-inverse);
  color: var(--bbt-fg-inverse);
}
.bbt-btn--ink:hover { background: color-mix(in srgb, var(--bbt-bg-inverse) 82%, white); }
.bbt-btn--ink .bbt-btn__arrow {
  background: var(--bbt-bg-brand);
  color: var(--bbt-fg-on-brand);
}

.bbt-btn--arrow-ink .bbt-btn__arrow {
  background: var(--bbt-bg-inverse);
  color: var(--bbt-fg-inverse);
}

.bbt-btn--arrow-brand .bbt-btn__arrow {
  background: var(--bbt-bg-brand);
  color: var(--bbt-fg-on-brand);
}

.bbt-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 767px) {
  .bbt-btn--block { inline-size: 100%; }
  .bbt-btn--block .bbt-btn__label { flex: 1 0 0; justify-content: center; }
}

.bbt-eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.bbt-eyebrow__num {
  display: inline-block;
  white-space: nowrap;
  padding: 4px 8px;
  background: var(--bbt-bg-inverse);
  color: var(--bbt-fg-inverse);
  font-family: var(--bbt-font-mono);
  font-weight: 500;
  font-size: var(--bbt-mono-label-sm-size);
  line-height: var(--bbt-mono-label-sm-lh);
  letter-spacing: var(--bbt-mono-label-sm-ls);
  text-transform: uppercase;
}

.bbt-eyebrow__label {
  font-family: var(--bbt-font-mono);
  font-weight: 500;
  font-size: var(--bbt-mono-label-sm-size);
  line-height: var(--bbt-mono-label-sm-lh);
  letter-spacing: var(--bbt-mono-label-md-ls);
  text-transform: uppercase;
  color: var(--bbt-fg-secondary);
}

.bbt-eyebrow--on-dark .bbt-eyebrow__label { color: var(--bbt-fg-on-brand); }

.bbt-boxed-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-family: var(--bbt-font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: var(--bbt-mono-label-md-ls);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.bbt-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.bbt-section__head-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-inline-size: 0;
}

.bbt-section__title {
  font-size: var(--bbt-heading-xl-size);
  line-height: var(--bbt-heading-xl-lh);
  letter-spacing: var(--bbt-heading-xl-ls);
  font-weight: var(--bbt-heading-weight);
}

@media (max-width: 767px) {
  .bbt-section__head { flex-direction: column; align-items: stretch; }
  .bbt-section__title {
    font-size: var(--bbt-heading-sm-size);
    line-height: var(--bbt-heading-sm-lh);
    letter-spacing: var(--bbt-heading-sm-ls);
  }
}

.bbt-trust-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--bbt-border-inverse);
  font-family: var(--bbt-font-mono);
  font-weight: 500;
  font-size: var(--bbt-mono-label-xs-size);
  line-height: var(--bbt-mono-label-xs-lh);
  letter-spacing: var(--bbt-mono-label-sm-ls);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Page hero — верхня секція внутрішньої сторінки.
   Тон задається модифікатором на корені: --dark (брендовий градієнт,
   світлий текст) або --light (панельний градієнт, темний текст).
   Відхилення окремих сторінок — у blocks.css по хуку .bbt-{page}-hero.
   ------------------------------------------------------------ */

.bbt-page-hero--dark {
  background: var(--bbt-hero-gradient);
  color: var(--bbt-fg-on-brand);
}

.bbt-page-hero--light {
  background: var(--bbt-panel-gradient);
}

.bbt-page-hero__inner {
  max-inline-size: var(--bbt-container-max);
  margin-inline: auto;
  padding: 40px var(--bbt-container-pad) 52px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.bbt-page-hero__grid {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.bbt-page-hero__main {
  flex: 1 0 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.bbt-page-hero__title {
  font-size: var(--bbt-display-sm-size);
  line-height: var(--bbt-display-sm-lh);
  letter-spacing: var(--bbt-display-sm-ls);
  font-weight: var(--bbt-display-weight);
}

.bbt-page-hero__lead {
  font-size: var(--bbt-body-lg-size);
  line-height: var(--bbt-body-lg-lh);
}

.bbt-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-block-start: 6px;
}

.bbt-page-hero__facts {
  inline-size: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.bbt-page-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0 16px 20px;
  border-inline-start: 2px solid var(--bbt-border-default);
}

.bbt-page-hero__fact-value {
  font-size: var(--bbt-heading-md-size);
  line-height: var(--bbt-heading-md-lh);
  letter-spacing: var(--bbt-heading-md-ls);
  font-weight: var(--bbt-heading-weight);
}

.bbt-page-hero__fact-label {
  font-family: var(--bbt-font-mono);
  font-weight: 500;
  font-size: var(--bbt-mono-label-xs-size);
  line-height: var(--bbt-mono-label-xs-lh);
  letter-spacing: var(--bbt-mono-label-xs-ls);
  text-transform: uppercase;
}

.bbt-page-hero--light .bbt-page-hero__title { color: var(--bbt-fg-primary); }
.bbt-page-hero--light .bbt-page-hero__lead { color: var(--bbt-fg-secondary); }
.bbt-page-hero--light .bbt-page-hero__fact-value { color: var(--bbt-fg-primary); }
.bbt-page-hero--light .bbt-page-hero__fact-label { color: var(--bbt-fg-tertiary); }

.bbt-page-hero--dark .bbt-page-hero__lead { opacity: 0.8; }
.bbt-page-hero--dark .bbt-page-hero__fact { border-inline-start-color: var(--bbt-overlay-white-28); }
.bbt-page-hero--dark .bbt-page-hero__fact-label { opacity: 0.6; }
.bbt-page-hero--dark .bbt-breadcrumbs__link,
.bbt-page-hero--dark .bbt-breadcrumbs [aria-current='page'] { color: var(--bbt-fg-on-brand); }
.bbt-page-hero--dark .bbt-breadcrumbs__link:hover { color: var(--bbt-fg-on-brand); opacity: 0.8; }
.bbt-page-hero--dark .bbt-breadcrumbs__item + .bbt-breadcrumbs__item::before { color: var(--bbt-overlay-white-38); }

@media (max-width: 1023px) {
  .bbt-page-hero__grid { flex-direction: column; align-items: stretch; }
  .bbt-page-hero__facts { inline-size: 100%; }
}

@media (max-width: 767px) {
  .bbt-page-hero__inner { padding: 24px var(--bbt-container-pad-m) 40px; gap: 24px; }
  .bbt-page-hero__title {
    font-size: var(--bbt-heading-lg-size);
    line-height: var(--bbt-heading-lg-lh);
    letter-spacing: var(--bbt-heading-lg-ls);
  }
  .bbt-page-hero--title-fluid .bbt-page-hero__title {
    font-size: clamp(30px, 8.5vw, var(--bbt-display-sm-size));
    line-height: 1.2;
    letter-spacing: -1.2px;
  }
  .bbt-page-hero__lead { font-size: var(--bbt-body-md-size); line-height: var(--bbt-body-md-lh); }
  .bbt-page-hero--lead-lg .bbt-page-hero__lead {
    font-size: var(--bbt-body-lg-size);
    line-height: var(--bbt-body-lg-lh);
  }
  .bbt-page-hero__actions { flex-direction: column; align-items: stretch; }
  .bbt-page-hero__actions--stretch { align-self: stretch; }
  .bbt-page-hero__actions .bbt-btn__label { flex: 1 0 0; justify-content: center; }
}

/* ---------- Chip (фільтр-чіпи каталогу, медіа, мерчу, пошуку) ---------- */

.bbt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 767px) {
  /* патерн M2: чіпи горизонтальним scroll-row до країв екрана */
  .bbt-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--bbt-container-pad-m));
    padding-inline: var(--bbt-container-pad-m);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .bbt-chips::-webkit-scrollbar {
    display: none;
  }

  .bbt-chips .bbt-chip {
    flex: 0 0 auto;
  }
}

.bbt-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  block-size: 36px;
  padding-inline: 14px;
  background: var(--bbt-bg-surface);
  border: 1px solid var(--bbt-border-default);
  font-family: var(--bbt-font-mono);
  font-weight: 500;
  font-size: var(--bbt-mono-label-md-size);
  line-height: var(--bbt-mono-label-md-lh);
  letter-spacing: var(--bbt-mono-label-md-ls);
  text-transform: uppercase;
  color: var(--bbt-fg-primary);
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bbt-chip:hover {
  border-color: var(--bbt-border-strong);
}

.bbt-chip.is-active {
  background: var(--bbt-bg-inverse);
  border-color: var(--bbt-bg-inverse);
  color: var(--bbt-fg-inverse);
}

/* ---------- Empty (секції zero-result: каталог, вакансії, мерч,
   референси, кошик, пошук). Корінь без фону, фон задає модифікатор. ---------- */

.bbt-empty--canvas {
  background: var(--bbt-bg-canvas);
  border-block-start: 1px dashed var(--bbt-border-subtle);
}

.bbt-empty--panel { background: var(--bbt-panel-gradient); }

.bbt-empty--surface { background: var(--bbt-bg-surface); }

.bbt-empty__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 72px;
}

.bbt-empty--tall .bbt-empty__inner { padding-block: 80px; }

.bbt-empty__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.bbt-empty__state {
  flex: 1 0 0;
  min-inline-size: 0;
}

.bbt-empty__cross {
  inline-size: 420px;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  /* bbt:responsive-assumption: планшетного макета немає: стек,
     cross-card на всю ширину */
  .bbt-empty__row {
    flex-direction: column;
    align-items: stretch;
  }

  .bbt-empty__cross {
    inline-size: 100%;
  }
}

@media (max-width: 767px) {
  .bbt-empty__inner,
  .bbt-empty--tall .bbt-empty__inner {
    padding-block: 48px;
    gap: 24px;
  }
}

/* ---------- Mono table (матриці і специфікації: mono-шапка, пунктирні
   рядки). Модифікатор --rows перебудовує таблицю в мобілі в рядки
   «label : value» (патерн M3): thead ховається, підпис клітинки
   малює ::before з data-label. Таблиці, що на вузькому екрані їдуть
   горизонтальним скролом, модифікатора не мають. ---------- */

.bbt-mono-table {
  inline-size: 100%;
  border-collapse: collapse;
}

.bbt-mono-table th,
.bbt-mono-table td {
  text-align: start;
  vertical-align: middle;
  padding-inline-end: 16px;
}

.bbt-mono-table th:last-child,
.bbt-mono-table td:last-child {
  padding-inline-end: 0;
}

.bbt-mono-table thead th {
  padding-block: 10px;
  border-block-end: 1px solid var(--bbt-border-strong);
  font-family: var(--bbt-font-mono);
  font-weight: 500;
  font-size: var(--bbt-mono-label-xs-size);
  line-height: var(--bbt-mono-label-xs-lh);
  letter-spacing: var(--bbt-mono-label-sm-ls);
  text-transform: uppercase;
  color: var(--bbt-fg-tertiary);
}

.bbt-mono-table tbody th,
.bbt-mono-table tbody td {
  padding-block: 13px;
  border-block-end: 1px dashed var(--bbt-border-subtle);
}

@media (max-width: 767px) {
  .bbt-mono-table--rows thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .bbt-mono-table--rows,
  .bbt-mono-table--rows tbody,
  .bbt-mono-table--rows tr,
  .bbt-mono-table--rows tbody th,
  .bbt-mono-table--rows td {
    display: block;
    inline-size: 100%;
  }

  .bbt-mono-table--rows tr {
    padding-block: 13px;
    border-block-end: 1px dashed var(--bbt-border-subtle);
  }

  .bbt-mono-table--rows tbody th,
  .bbt-mono-table--rows td {
    padding: 0;
    border: 0;
  }

  .bbt-mono-table--rows tbody th { margin-block-end: 6px; }

  .bbt-mono-table--rows td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-block: 3px;
    text-align: end;
  }

  .bbt-mono-table--rows td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-family: var(--bbt-font-mono);
    font-weight: 500;
    font-size: var(--bbt-mono-label-xs-size);
    line-height: var(--bbt-mono-label-xs-lh);
    letter-spacing: var(--bbt-mono-label-sm-ls);
    text-transform: uppercase;
    color: var(--bbt-fg-tertiary);
  }
}