/* ОБЩИ ЕЛЕМЕНТИ — заглавие на секция, бутон, връзка „ПОВЕЧЕ“. */

/* ---------- заглавие на секция + тънката черта под него ---------- */

.section-title {
  font-family: var(--ff-head);
  font-weight: 350;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--c-ink);
  letter-spacing: 0;
}

.section-title::after {
  content: '';
  display: block;
  width: calc(100 * var(--k));
  height: calc(2 * var(--k));
  margin-top: calc(29 * var(--k));
  background: var(--c-brand);
  opacity: .55;
}

.section-title--center { text-align: center; }
.section-title--plain::after { display: none; }
.section-title--center::after { margin-inline: auto; }

/* ---------- бутон ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(199 * var(--k));
  height: calc(64 * var(--k));
  padding-inline: calc(18 * var(--k));
  background: var(--c-brand);
  border-radius: var(--r-btn);
  color: var(--c-white);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: max(13px, calc(18 * var(--k)));
  line-height: 1;
  letter-spacing: .4px;
  box-shadow: var(--shadow-rest);
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn:hover {
  background: var(--c-brand-hi);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.btn--sm {
  min-width: 0;
  width: 100%;
  height: calc(67 * var(--k));
  font-size: max(13px, calc(17 * var(--k)));
}

/* ---------- връзка „ПОВЕЧЕ →“ ---------- */

.more {
  display: inline-flex;
  align-items: center;
  gap: calc(5.6 * var(--k));
  color: var(--c-brand);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: max(13px, calc(13.4 * var(--k)));
  line-height: 1;
  letter-spacing: 0;
  transition: color var(--dur) var(--ease);
}

.more img {
  width: calc(17.6 * var(--k));
  height: calc(8.5 * var(--k));
  object-fit: contain;
  transition: transform var(--dur) var(--ease);
}

.more:hover { color: var(--c-brand-dark); }
.more:hover img { transform: translateX(4px); }

/* ---------- таблет и телефон ---------- */

@media (max-width: 1024px) {
  .btn {
    min-width: 0;
    width: auto;
    min-height: 48px;
    height: auto;
    padding: 14px 26px;
    font-size: 16px;
  }
  .btn--sm { width: 100%; height: auto; min-height: 48px; font-size: 16px; }

  .more { min-height: 48px; font-size: 15px; }
  .more img { width: 20px; height: 10px; }

  .section-title::after { width: 84px; height: 2px; margin-top: 18px; }
}

/* дума с тире, която НЕ бива да се пренася на тирето — макетът не я пренася */
.nb { white-space: nowrap; }


/* ---------- МИКРО-ВЗАИМОДЕЙСТВИЯ ---------- */

/* Появяване при скрол.
   Скритото начално състояние се включва САМО когато страницата има JavaScript
   (`scripting: enabled`) и САМО ако човекът не е поискал по-малко движение —
   без JS съдържанието стои видимо, нищо не изчезва.
   `tools/shot.mjs` и `tools/audit.mjs` вкарват [data-reveal] в КРАЙНО състояние
   преди да мерят, затова нито сравнението с макета, нито одитът виждат
   полупрозрачен или изместен кадър. */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }

  [data-reveal="up"]    { transform: translate3d(0, 38px, 0); }
  [data-reveal="left"]  { transform: translate3d(-28px, 0, 0); }
  [data-reveal="right"] { transform: translate3d(28px, 0, 0); }
  [data-reveal="zoom"]  { transform: scale(.96); }

  [data-reveal].is-in { opacity: 1; transform: none; }

  /* разчупване — съседите в една група тръгват един след друг, не вкупом */
  [data-stagger] > :nth-child(2)   { transition-delay: .09s; }
  [data-stagger] > :nth-child(3)   { transition-delay: .18s; }
  [data-stagger] > :nth-child(4)   { transition-delay: .27s; }
  [data-stagger] > :nth-child(5)   { transition-delay: .36s; }
  [data-stagger] > :nth-child(n+6) { transition-delay: .45s; }
}

/* На тясно редът е вертикален — там забавянето само би карало човека да чака. */
@media (max-width: 1024px) {
  [data-stagger] > * { transition-delay: 0s; }
}

/* ---------- голяма снимка: лека сянка и повдигане при посочване ---------- */

.lift {
  box-shadow: var(--shadow-rest);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}