/**
 * PX Content — shared FE tokens + section chrome (module-owned).
 *
 * @copyright (C) 2026 The Pixel (https://thepixel.dev)
 * @author    The Pixel <info@thepixel.dev>
 * @link      https://thepixel.dev
 *
 * Spacing scale (--px-space-*) is self-contained so non-T4 templates work.
 * Override --px-* in the active template :root for brand metrics.
 * Block CSS must reuse these vars — do not invent new globals there.
 * Brand decoration stays in templates/<tpl>/blocks/ and template SCSS.
 */

:root {
  /* Section spacing scale (module-owned; mirrors T4 gutter rhythm) */
  --px-space-sm: 24px;
  --px-space-md: 32px;
  --px-space-lg: 64px;
  --px-space-xl: 128px;

  --px-section-pad-y: var(--px-space-lg);
  --px-section-pad-x: var(--gutter-sm, 1rem);

  --px-gap: var(--gutter-sm, 1rem);
  --px-gap-xs: 0.5rem;
  --px-gap-sm: 0.75rem;
  --px-gap-lg: 2.25rem;
  --px-gap-xl: 3rem;

  /* Type scale — body/heading steps follow T4 vars when the template sets them */
  --px-fs-xs: 0.75rem;                              /* badges, eyebrows, tags */
  --px-fs-sm: 0.875rem;                             /* meta, captions, roles */
  --px-fs-md: 0.9375rem;                            /* card body copy */
  --px-fs-base: var(--body-font-size, 1rem);
  --px-fs-lg: 1.125rem;                             /* lead / intro copy */
  --px-fs-xl: var(--h5-font-size, 1.25rem);         /* card titles, values */

  /* Icon glyph sizes */
  --px-icon-sm: 1.125rem;
  --px-icon-md: 1.5rem;
  --px-icon-lg: 2.25rem;
  --px-icon-xl: 3rem;

  --px-color-primary: var(--color-primary, #0d6efd);
  --px-color-soft: color-mix(in srgb, var(--px-color-primary) 12%, #fff);
  --px-color-muted: color-mix(in srgb, var(--body-text-color, #212529) 65%, transparent);
  --px-color-border: color-mix(in srgb, var(--body-text-color, #212529) 18%, transparent);
  --px-color-dark: var(--color-dark, #212529);
  --px-color-on-dark: var(--color-white, #fff);
  --px-color-white: var(--color-white, #fff);
  --px-color-light: var(--color-light, #f8f9fa);

  --px-muted: var(--px-color-muted);
  --px-ink-strong: var(--headings-color, var(--body-text-color, #212529));
  --px-border-light: var(--px-color-border);

  --px-radius: var(--border-radius-lg, 0.5rem);
  --px-radius-sm: 0.25rem;
  --px-radius-lg: 1rem;
  --px-radius-section: 1.5rem;
  --px-radius-pill: 999px;

  --px-title-mark-height: 34%;
  --px-title-mark-bottom: 6%;
  --px-title-mark-height-dark: 7px;
  --px-title-mark-bottom-dark: -8px;

  --px-hero-title-size: clamp(2.25rem, 5vw, 3.5rem);
  --px-sec-title-size: clamp(1.75rem, 3.5vw, 2.5rem);

  /* Block metrics — kept on :root so templates can override them there */
  --px-step-num-size: 3.25rem;          /* features-intro, testimonials */
  --px-step-num-font: 1.0625rem;        /* features-intro */
  --px-choose-icon-size: 3rem;          /* features-intro */
  --px-service-card-min: 14rem;         /* features-intro */
  --px-case-min: 20rem;                 /* features-intro */
  --px-about-media-min: 26rem;          /* features-intro */
  --px-hero-min-height: 26.25rem;       /* hero style-1 */
  --px-hero-min-visual: 20rem;          /* hero style-2 */
  --px-case-img-h: 26.25rem;            /* gallery */
  --px-timeline-dot: 0.75rem;           /* timeline */
  --px-logo-max-h: 3rem;                /* clients */
  --px-marquee-duration: 28s;           /* clients */
  --px-marquee-gap: 2.5rem;             /* clients */

  /* Dark-section ink (neutral defaults; templates override for brand) */
  --px-surface-elevated: color-mix(in srgb, var(--px-color-dark) 92%, #fff);
  --px-ink-on-dark: var(--px-color-on-dark);
  --px-muted-on-dark: color-mix(in srgb, var(--px-color-on-dark) 80%, transparent);
  --px-border-on-dark: color-mix(in srgb, var(--px-color-on-dark) 8%, transparent);
  --px-border-on-dark-strong: color-mix(in srgb, var(--px-color-on-dark) 18%, transparent);
  --px-border-on-dark-soft: color-mix(in srgb, var(--px-color-on-dark) 20%, transparent);
}

/* ≤xxl — tablet landscape / small desktop */
@media (max-width: 1400px) {
  :root {
    --px-space-lg: 32px;
    --px-space-xl: 64px;
  }
}

/* ≤lg — tablet / large phone landscape */
@media (max-width: 992px) {
  :root {
    --px-space-xl: 32px;
  }
}

/* ≤sm — phone */
@media (max-width: 576px) {
  :root {
    --px-space-sm: 16px;
    --px-space-md: 24px;
    --px-space-lg: 24px;
    --px-space-xl: 24px;
  }
}

/* Spacing utilities — PX Content + chrome t4section (.t4-mod-wrap) */
.px-space-t-none { --px-space-t: 0; }
.px-space-t-sm { --px-space-t: var(--px-space-sm, 1.5rem); }
.px-space-t-md { --px-space-t: var(--px-space-md, 2rem); }
.px-space-t-lg { --px-space-t: var(--px-space-lg, 4rem); }
.px-space-t-xl { --px-space-t: var(--px-space-xl, 8rem); }

.px-space-b-none { --px-space-b: 0; }
.px-space-b-sm { --px-space-b: var(--px-space-sm, 1.5rem); }
.px-space-b-md { --px-space-b: var(--px-space-md, 2rem); }
.px-space-b-lg { --px-space-b: var(--px-space-lg, 4rem); }
.px-space-b-xl { --px-space-b: var(--px-space-xl, 8rem); }

.px-block,
.t4-mod-wrap {
  padding-top: var(--px-space-t, var(--px-section-pad-y, 4rem));
  padding-bottom: var(--px-space-b, var(--px-section-pad-y, 4rem));
}

/* Shared section chrome (portable; templates may refine) */
.px-sec-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--px-gap-xs);
  margin: 0 0 var(--px-gap-sm);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--px-color-border, var(--px-border-light));
  border-radius: var(--px-radius-pill);
  background: transparent;
  font-size: var(--px-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}

.px-sec-badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--px-color-primary);
  flex-shrink: 0;
}

.px-sec-title {
  margin: var(--px-gap-sm) 0 var(--px-gap-sm);
  font-family: var(--heading-font-family, inherit);
  font-size: var(--px-sec-title-size);
  font-weight: var(--heading-font-weight, 700);
  line-height: var(--heading-line-height, 1.15);
  letter-spacing: var(--heading-letter-spacing, -0.02em);
  color: var(--headings-color, var(--px-ink-strong));
}

.px-sec-title b {
  position: relative;
  z-index: 1;
  display: inline;
  padding: 0;
  font-weight: inherit;
  background: none;
  border-radius: 0;
  color: inherit;
  white-space: nowrap;
}

.px-sec-title b::after {
  content: "";
  position: absolute;
  left: -2%;
  bottom: var(--px-title-mark-bottom);
  width: 104%;
  height: var(--px-title-mark-height);
  background-color: var(--px-color-primary);
  z-index: -1;
  border-radius: var(--px-radius-sm);
}

.px-sec-desc {
  margin: 0;
  max-width: 36rem;
  color: var(--px-muted, var(--px-color-muted));
}

/* Dark palette hooks (host: .t4-palette-dark or Bootstrap .bg-dark on section) */
.t4-palette-dark .px-sec-badge,
.t4-section.t4-palette-dark .px-sec-badge,
.t4-section.bg-dark .px-sec-badge {
  border-color: var(--px-border-on-dark-soft);
  color: var(--px-ink-on-dark);
}

.t4-palette-dark .px-sec-title,
.t4-section.t4-palette-dark .px-sec-title,
.t4-section.bg-dark .px-sec-title {
  color: var(--px-ink-on-dark);
}

.t4-palette-dark .px-sec-title b::after,
.t4-section.t4-palette-dark .px-sec-title b::after,
.t4-section.bg-dark .px-sec-title b::after {
  height: var(--px-title-mark-height-dark);
  bottom: var(--px-title-mark-bottom-dark);
  border-radius: 3px;
}

.t4-palette-dark .px-sec-desc,
.t4-section.t4-palette-dark .px-sec-desc,
.t4-section.bg-dark .px-sec-desc {
  color: var(--px-muted-on-dark);
}

/* Decorative FA icons (replace unicode ↗ / →) */
.px-icon-ne {
  display: inline-block;
  margin-inline-start: 0.35em;
  font-size: 0.85em;
  line-height: 1;
  vertical-align: -0.05em;
  transform: rotate(45deg);
}

.px-icon-arrow {
  display: inline-block;
  margin-inline-start: 0.35em;
  font-size: 0.85em;
  line-height: 1;
  vertical-align: -0.05em;
}