/**
 * Skins define --twb-hero-base-* only. This file computes final --twb-hero-* via --twb-hero-s.
 * Descendant rules use var(--twb-hero-*) only (no calc on properties).
 * --twb-hero-s = --hero-auto-scale * --hero-user-scale
 */

.hero[data-twb-hero-root] {
  --hero-auto-scale: 1;
  --hero-user-scale: 1;
  --twb-hero-s: calc(var(--hero-auto-scale, 1) * var(--hero-user-scale, 1));
  --hero-scale: var(--twb-hero-s);

  --twb-hero-fs-h1: calc(var(--twb-typo-size-h1, var(--base-h1, 48px)) * var(--twb-hero-s));
  --twb-hero-fs-p: calc(var(--twb-typo-size-p, var(--base-p, 20px)) * var(--twb-hero-s));
  --twb-hero-fs-h3: calc(var(--twb-typo-size-h3, var(--base-h3, 9px)) * var(--twb-hero-s));

  --twb-hero-gap-badge-title: calc(
    var(--twb-typo-gap-badge-title, var(--twb-hero-base-gap-badge-title, 1rem)) * var(--twb-hero-s)
  );
  --twb-hero-gap-title-desc: calc(
    var(--twb-typo-gap-title-desc, var(--twb-hero-base-gap-title-desc, 1rem)) * var(--twb-hero-s)
  );
  --twb-hero-gap-desc-actions: calc(
    var(--twb-typo-gap-desc-actions, var(--twb-hero-base-gap-desc-actions, 1rem)) * var(--twb-hero-s)
  );
  --twb-hero-gap-actions: calc(
    var(--twb-typo-gap-actions, var(--twb-hero-base-gap-actions, 1rem)) * var(--twb-hero-s)
  );

  --twb-hero-btn-font-size: calc(
    var(--twb-typo-btn-font-size, var(--twb-hero-base-btn-font-size, 1.125rem)) * var(--twb-hero-s)
  );
  --twb-hero-btn-pad-y: calc(
    var(--twb-typo-btn-pad-y, var(--twb-hero-base-btn-pad-y, 1.25rem)) * var(--twb-hero-s)
  );
  --twb-hero-btn-pad-x: calc(
    var(--twb-typo-btn-pad-x, var(--twb-hero-base-btn-pad-x, 3rem)) * var(--twb-hero-s)
  );
  --twb-hero-btn-radius: var(--twb-hero-base-btn-radius, 1rem);
  --twb-hero-btn-min-height: calc(var(--twb-hero-base-btn-min-height, 0px) * var(--twb-hero-s));
  --twb-hero-btn-min-w: var(--twb-hero-base-btn-min-w, auto);

  --twb-hero-padding-y: calc(var(--twb-hero-base-padding-y, 0px) * var(--twb-hero-s));
  --twb-hero-padding-x: calc(var(--twb-hero-base-padding-x, 0px) * var(--twb-hero-s));
  --twb-hero-grid-gap: calc(var(--twb-hero-base-grid-gap, 0px) * var(--twb-hero-s));
  --twb-hero-slide-inner-pad-x: calc(var(--twb-hero-base-slide-inner-padding-x, 0px) * var(--twb-hero-s));

  --twb-hero-badge-pad-y: calc(var(--twb-hero-base-badge-pad-y, 0px) * var(--twb-hero-s));
  --twb-hero-badge-pad-x: calc(var(--twb-hero-base-badge-pad-x, 0px) * var(--twb-hero-s));
}

/*
 * hero-center + hero-default + hero-slider: gap + button padding track --twb-hero-fs-* (same visual language).
 * Video background uses hero-default skin.
 */
.hero.twb-hero-center[data-twb-hero-root],
.hero.twb-hero-default[data-twb-hero-root],
.hero.twb-hero-slider[data-twb-hero-root] {
  --twb-hero-gap-badge-title: clamp(
    36px,
    calc(var(--twb-hero-fs-h1, 1rem) * 0.375),
    48px
  );
  --twb-hero-gap-title-desc: clamp(
    36px,
    calc(var(--twb-hero-fs-h1, 1rem) * 0.375),
    48px
  );
  --twb-hero-gap-desc-actions: clamp(
    24px,
    calc(var(--twb-hero-fs-p, 1rem) * 2.6666667),
    64px
  );
  --twb-hero-gap-actions: clamp(
    12px,
    calc(var(--twb-hero-btn-font-size, 1rem) * 1),
    20px
  );
  --twb-hero-btn-pad-y: clamp(
    18px,
    calc(var(--twb-hero-btn-font-size, 1rem) * 1.4),
    28px
  );
  --twb-hero-btn-pad-x: clamp(
    24px,
    calc(var(--twb-hero-btn-font-size, 1rem) * 3),
    60px
  );
}

.hero[data-twb-hero-root][data-scale="auto"] {
  --hero-user-scale: 1;
}
.hero[data-twb-hero-root][data-scale="sm"] {
  --hero-user-scale: 0.9;
}
.hero[data-twb-hero-root][data-scale="md"] {
  --hero-user-scale: 1;
}
.hero[data-twb-hero-root][data-scale="lg"] {
  --hero-user-scale: 1.1;
}

/* —— hero-default —— */
.hero.twb-hero-default .twb-hero-default__title {
  font-size: var(--twb-hero-fs-h1, var(--twb-typo-size-h1, var(--base-h1, 48px)));
  line-height: 1.15;
}

.hero.twb-hero-default .twb-hero-default__desc {
  font-size: var(--twb-hero-fs-p, var(--twb-typo-size-p, var(--base-p, 20px)));
  line-height: 1.5;
}

.hero.twb-hero-default .twb-hero-default__badge {
  font-size: var(--twb-hero-fs-h3, var(--twb-typo-size-h3, var(--base-h3, 9px)));
}

.hero.twb-hero-default .twb-hero-default__btn {
  font-size: var(--twb-hero-btn-font-size, var(--twb-hero-base-btn-font-size, 1.125rem));
  padding: var(--twb-hero-btn-pad-y, var(--twb-hero-base-btn-pad-y, 1.25rem))
    var(--twb-hero-btn-pad-x, var(--twb-hero-base-btn-pad-x, 3rem));
  border-radius: var(--twb-hero-btn-radius, var(--twb-hero-base-btn-radius));
}

.hero.twb-hero-default .twb-hero-default__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero.twb-hero-default .twb-hero-default__content > .twb-hero-default__badge {
  margin-top: 0;
  margin-bottom: var(--twb-hero-gap-badge-title, var(--twb-hero-base-gap-badge-title, 1rem));
}

.hero.twb-hero-default .twb-hero-default__content > .twb-hero-default__title {
  margin-top: 0;
  margin-bottom: var(--twb-hero-gap-title-desc, var(--twb-hero-base-gap-title-desc, 1rem));
}

.hero.twb-hero-default .twb-hero-default__content > .twb-hero-default__desc {
  margin-top: 0;
  margin-bottom: var(--twb-hero-gap-desc-actions, var(--twb-hero-base-gap-desc-actions, 1rem));
}

.hero.twb-hero-default .twb-hero-default__content > .twb-hero-default__actions {
  margin-top: 0;
}

.hero.twb-hero-default .twb-hero-default__actions {
  gap: var(--twb-hero-gap-actions, var(--twb-hero-base-gap-actions, 1rem));
}

/* —— hero-center —— */
.hero.twb-hero-center .twb-hero-center__title {
  font-size: var(--twb-hero-fs-h1, var(--twb-typo-size-h1, var(--base-h1, 48px)));
  line-height: var(--leading-none);
}

.hero.twb-hero-center .twb-hero-center__desc {
  font-size: var(--twb-hero-fs-p, var(--twb-typo-size-p, var(--base-p, 20px)));
  line-height: var(--leading-relaxed);
}

.hero.twb-hero-center .twb-hero-center__badge {
  font-size: var(--twb-hero-fs-h3, var(--twb-typo-size-h3, var(--base-h3, 9px)));
}

.hero.twb-hero-center .twb-hero-center__btn {
  font-size: var(--twb-hero-btn-font-size, var(--twb-hero-base-btn-font-size, 1.125rem));
  padding: var(--twb-hero-btn-pad-y, var(--twb-hero-base-btn-pad-y, 1.25rem))
    var(--twb-hero-btn-pad-x, var(--twb-hero-base-btn-pad-x, 3rem));
  border-radius: var(--twb-hero-btn-radius, var(--radius-2xl, 1rem));
}

.hero.twb-hero-center .twb-hero-center__content {
  gap: 0;
}

.hero.twb-hero-center .twb-hero-center__content > .twb-hero-center__badge {
  margin-top: 0;
  margin-bottom: var(--twb-hero-gap-badge-title, var(--twb-hero-base-gap-badge-title, 1rem));
}

.hero.twb-hero-center .twb-hero-center__content > .twb-hero-center__title {
  margin-top: 0;
  margin-bottom: var(--twb-hero-gap-title-desc, var(--twb-hero-base-gap-title-desc, 1rem));
}

.hero.twb-hero-center .twb-hero-center__content > .twb-hero-center__desc {
  margin-top: 0;
  margin-bottom: var(--twb-hero-gap-desc-actions, var(--twb-hero-base-gap-desc-actions, 1rem));
}

.hero.twb-hero-center .twb-hero-center__content > .twb-hero-center__actions {
  margin-top: 0;
}

.hero.twb-hero-center .twb-hero-center__actions {
  gap: var(--twb-hero-gap-actions, var(--twb-hero-base-gap-actions, 1rem));
  padding-top: 0;
}

/* —— hero-slider —— */
.hero.twb-hero-slider .twb-hero-slider__title {
  font-size: var(--twb-hero-fs-h1, var(--twb-typo-size-h1, var(--base-h1, 48px)));
  line-height: 1;
  margin-bottom: var(--twb-hero-gap-title-desc, var(--twb-hero-base-gap-title-desc, 1rem));
}

.hero.twb-hero-slider .twb-hero-slider__desc {
  font-size: var(--twb-hero-fs-p, var(--twb-typo-size-p, var(--base-p, 20px)));
  line-height: 1.625;
  margin-bottom: var(--twb-hero-gap-desc-actions, var(--twb-hero-base-gap-desc-actions, 1rem));
}

.hero.twb-hero-slider .twb-hero-slider__badge {
  font-size: var(--twb-hero-fs-h3, var(--twb-typo-size-h3, var(--base-h3, 9px)));
  margin-bottom: var(--twb-hero-gap-badge-title, var(--twb-hero-base-gap-badge-title, 1rem));
}

.hero.twb-hero-slider .twb-hero-slider__btn {
  font-size: var(--twb-hero-btn-font-size, var(--twb-hero-base-btn-font-size, 1.125rem));
  padding: var(--twb-hero-btn-pad-y, var(--twb-hero-base-btn-pad-y, 1.25rem))
    var(--twb-hero-btn-pad-x, var(--twb-hero-base-btn-pad-x, 3rem));
  border-radius: var(--twb-hero-btn-radius);
  min-height: var(--twb-hero-btn-min-height, var(--twb-hero-base-btn-min-height, 0px));
}

.hero.twb-hero-slider .twb-hero-slider__actions {
  gap: var(--twb-hero-gap-actions, var(--twb-hero-base-gap-actions, 1rem));
}