/**
 * Recommended section presets.
 *
 * Vertical spacing uses the existing gap scale. Horizontal section space is
 * intentionally independent and retains the historical breakpoint steps.
 */

:root {
  --section-side-space: clamp(1.5rem, 4vw, 5rem);
  --tsds-section-side-space-boxed: calc(var(--section-side-space) * var(--tsds-section-side-factor-boxed));
  --tsds-section-side-space-full: calc(var(--section-side-space) * var(--tsds-section-side-factor-full));
  --tsds-section-content-inset-boxed: max(var(--tsds-section-side-space-boxed), calc((100% - var(--tsds-content-width)) / 2));
  --tsds-section-content-inset-full: max(var(--tsds-section-side-space-full), calc((100% - var(--tsds-content-width)) / 2));
  --section-header-offset: 80px;
}

@media (max-width: 1330px) {
  :root {
    --section-side-space: clamp(1.25rem, 3.5vw, 4rem);
  }
}

@media (max-width: 1024px) {
  :root {
    --section-side-space: clamp(1rem, 4vw, 2.5rem);
  }
}

@media (max-width: 767px) {
  :root {
    --section-side-space: clamp(0.3rem, 1.5vw, 0.6rem);
  }
}

.sec-xxxs { --tsds-section-block-space: calc(var(--gap-xxxs) * var(--tsds-section-vertical-factor)); }
.sec-xxs { --tsds-section-block-space: calc(var(--gap-xxs) * var(--tsds-section-vertical-factor)); }
.sec-xs { --tsds-section-block-space: calc(var(--gap-xs) * var(--tsds-section-vertical-factor)); }
.sec-s { --tsds-section-block-space: calc(var(--gap-s) * var(--tsds-section-vertical-factor)); }
.sec-m { --tsds-section-block-space: calc(var(--gap-m) * var(--tsds-section-vertical-factor)); }
.sec-l { --tsds-section-block-space: calc(var(--gap-l) * var(--tsds-section-vertical-factor)); }
.sec-xl { --tsds-section-block-space: calc(var(--gap-xl) * var(--tsds-section-vertical-factor)); }
.sec-xxl { --tsds-section-block-space: calc(var(--gap-xxl) * var(--tsds-section-vertical-factor)); }
.sec-xxxl { --tsds-section-block-space: calc(var(--gap-xxxl) * var(--tsds-section-vertical-factor)); }

/*
 * The former Elementor content-width Global Class used width: 100%, a
 * centered auto margin and a 85rem maximum. Sections reuse that contract via
 * the central px token. Existing Elementor content wrappers receive the
 * maximum directly; wrapperless Sections create the same centered content
 * area through their inline inset so their background remains full width.
 */
.elementor .elementor-element:is(.sec, .sec-xxxs, .sec-xxs, .sec-xs, .sec-s, .sec-m, .sec-l, .sec-xl, .sec-xxl, .sec-xxxl) > :is(.e-con-inner, .elementor-container) {
  width: 100%;
  max-width: var(--tsds-content-width) !important;
  margin-inline: auto;
}

/* Normal HTML owns its Section geometry directly and uses the Boxed side role. */
:where(.sec-xxxs, .sec-xxs, .sec-xs, .sec-s, .sec-m, .sec-l, .sec-xl, .sec-xxl, .sec-xxxl) {
  padding-block: var(--tsds-section-block-space);
  padding-inline: var(--tsds-section-content-inset-boxed);
}

.sec {
  padding-inline: var(--tsds-section-content-inset-boxed);
}

.sec-header {
  padding-block: calc(var(--gap-xs) * var(--tsds-section-vertical-factor));
  padding-inline: var(--tsds-section-side-space-boxed);
}

.sec-hero {
  min-height: 100vh;
  justify-content: center;
}

.sec-hero:not(.elementor-element) {
  display: flex;
  flex-direction: column;
}

.sec-offset {
  padding-top: calc(var(--section-header-offset) + var(--gap-xxl) * var(--tsds-section-vertical-factor));
}

.elementor .elementor-element.sec-xxxs,
.elementor .elementor-element.sec-xxxs > .e-con-inner,
.elementor .elementor-element.sec-xxxs > .elementor-container,
.elementor .elementor-element.sec-xxs,
.elementor .elementor-element.sec-xxs > .e-con-inner,
.elementor .elementor-element.sec-xxs > .elementor-container,
.elementor .elementor-element.sec-xs,
.elementor .elementor-element.sec-xs > .e-con-inner,
.elementor .elementor-element.sec-xs > .elementor-container,
.elementor .elementor-element.sec-s,
.elementor .elementor-element.sec-s > .e-con-inner,
.elementor .elementor-element.sec-s > .elementor-container,
.elementor .elementor-element.sec-m,
.elementor .elementor-element.sec-m > .e-con-inner,
.elementor .elementor-element.sec-m > .elementor-container,
.elementor .elementor-element.sec-l,
.elementor .elementor-element.sec-l > .e-con-inner,
.elementor .elementor-element.sec-l > .elementor-container,
.elementor .elementor-element.sec-xl,
.elementor .elementor-element.sec-xl > .e-con-inner,
.elementor .elementor-element.sec-xl > .elementor-container,
.elementor .elementor-element.sec-xxl,
.elementor .elementor-element.sec-xxl > .e-con-inner,
.elementor .elementor-element.sec-xxl > .elementor-container,
.elementor .elementor-element.sec-xxxl,
.elementor .elementor-element.sec-xxxl > .e-con-inner,
.elementor .elementor-element.sec-xxxl > .elementor-container {
  padding-block: var(--tsds-section-block-space) !important;
  padding-inline: var(--tsds-section-content-inset-full) !important;
}

.elementor .elementor-element.sec,
.elementor .elementor-element.sec > .e-con-inner,
.elementor .elementor-element.sec > .elementor-container {
  padding-inline: var(--tsds-section-content-inset-full) !important;
}

.elementor .elementor-element.sec-header,
.elementor .elementor-element.sec-header > .e-con-inner,
.elementor .elementor-element.sec-header > .elementor-container {
  padding-block: calc(var(--gap-xs) * var(--tsds-section-vertical-factor)) !important;
  padding-inline: var(--tsds-section-side-space-full) !important;
}

.elementor .elementor-element.sec-hero {
  min-height: 100vh !important;
  justify-content: center !important;
}

.elementor .elementor-element.sec-hero > .e-con-inner,
.elementor .elementor-element.sec-hero > .elementor-container {
  justify-content: center !important;
}

.elementor .elementor-element.sec-offset {
  padding-top: calc(var(--section-header-offset) + var(--gap-xxl) * var(--tsds-section-vertical-factor)) !important;
}