/* Page section styling — CSS variables from sectionStyleToCssVars() */

.page-sec-styled {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--sec-bg, transparent);
  background-image: var(--sec-bg-image, none);
  background-size: var(--sec-bg-size, cover);
  background-position: var(--sec-bg-position, center);
  background-repeat: no-repeat;
  padding-top: var(--sec-pad-t-d, 0);
  padding-right: var(--sec-pad-r-d, 0);
  padding-bottom: var(--sec-pad-b-d, 0);
  padding-left: var(--sec-pad-l-d, 0);
  margin-top: var(--sec-mar-t-d, 0);
  margin-right: var(--sec-mar-r-d, 0);
  margin-bottom: var(--sec-mar-b-d, 0);
  margin-left: var(--sec-mar-l-d, 0);
  border-radius: var(--sec-radius, 0);
  border: var(--sec-border-width, 0) solid var(--sec-border-color, transparent);
  box-shadow: var(--sec-shadow, none);
  text-align: var(--sec-text-align-d, inherit);
  font-size: var(--sec-font-size-d, inherit);
}

.page-sec-inner {
  width: 100%;
  box-sizing: border-box;
}

/* Desktop layout mode */
.page-sec-layout-d-container .page-sec-inner {
  max-width: var(--sec-max-width-d, 87.5rem); /* 1400px — match brandscape Tailwind container 2xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sec-container-px-d, 1.5rem);
  padding-right: var(--sec-container-px-d, 1.5rem);
}

.page-sec-layout-d-full .page-sec-inner {
  max-width: var(--sec-max-width-d, none);
  margin-left: auto;
  margin-right: auto;
}

.page-sec-grid {
  display: grid;
  gap: 1.25rem; /* gap-5 — match brandscape card/grid spacing */
  width: 100%;
  min-width: 0;
}

@media (max-width: 1024px) {
  .page-sec-styled {
    padding-top: var(--sec-pad-t-t, var(--sec-pad-t-d, 0));
    padding-right: var(--sec-pad-r-t, var(--sec-pad-r-d, 0));
    padding-bottom: var(--sec-pad-b-t, var(--sec-pad-b-d, 0));
    padding-left: var(--sec-pad-l-t, var(--sec-pad-l-d, 0));
    margin-top: var(--sec-mar-t-t, var(--sec-mar-t-d, 0));
    margin-right: var(--sec-mar-r-t, var(--sec-mar-r-d, 0));
    margin-bottom: var(--sec-mar-b-t, var(--sec-mar-b-d, 0));
    margin-left: var(--sec-mar-l-t, var(--sec-mar-l-d, 0));
    text-align: var(--sec-text-align-t, var(--sec-text-align-d, inherit));
    font-size: var(--sec-font-size-t, var(--sec-font-size-d, inherit));
  }

  .page-sec-layout-t-container .page-sec-inner {
    max-width: var(--sec-max-width-t, var(--sec-max-width-d, 87.5rem));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sec-container-px-t, var(--sec-container-px-d, 1.5rem));
    padding-right: var(--sec-container-px-t, var(--sec-container-px-d, 1.5rem));
  }

  .page-sec-layout-t-full .page-sec-inner {
    max-width: var(--sec-max-width-t, var(--sec-max-width-d, none));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  .page-sec-styled {
    padding-top: var(--sec-pad-t-m, var(--sec-pad-t-t, var(--sec-pad-t-d, 0)));
    padding-right: var(--sec-pad-r-m, var(--sec-pad-r-t, var(--sec-pad-r-d, 0)));
    padding-bottom: var(--sec-pad-b-m, var(--sec-pad-b-t, var(--sec-pad-b-d, 0)));
    padding-left: var(--sec-pad-l-m, var(--sec-pad-l-t, var(--sec-pad-l-d, 0)));
    margin-top: var(--sec-mar-t-m, var(--sec-mar-t-t, var(--sec-mar-t-d, 0)));
    margin-right: var(--sec-mar-r-m, var(--sec-mar-r-t, var(--sec-mar-r-d, 0)));
    margin-bottom: var(--sec-mar-b-m, var(--sec-mar-b-t, var(--sec-mar-b-d, 0)));
    margin-left: var(--sec-mar-l-m, var(--sec-mar-l-t, var(--sec-mar-l-d, 0)));
    text-align: var(--sec-text-align-m, var(--sec-text-align-t, var(--sec-text-align-d, inherit)));
    font-size: var(--sec-font-size-m, var(--sec-font-size-t, var(--sec-font-size-d, inherit)));
  }

  .page-sec-layout-m-container .page-sec-inner {
    max-width: var(--sec-max-width-m, var(--sec-max-width-t, var(--sec-max-width-d, 87.5rem)));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sec-container-px-m, var(--sec-container-px-t, var(--sec-container-px-d, 1.5rem)));
    padding-right: var(--sec-container-px-m, var(--sec-container-px-t, var(--sec-container-px-d, 1.5rem)));
  }

  .page-sec-layout-m-full .page-sec-inner {
    max-width: var(--sec-max-width-m, var(--sec-max-width-t, var(--sec-max-width-d, none)));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Editor: simulate breakpoint without resizing the window (class on same element as .page-sec-styled) */
.page-sec-styled.page-sec-preview--tablet {
  padding-top: var(--sec-pad-t-t, var(--sec-pad-t-d, 0)) !important;
  padding-right: var(--sec-pad-r-t, var(--sec-pad-r-d, 0)) !important;
  padding-bottom: var(--sec-pad-b-t, var(--sec-pad-b-d, 0)) !important;
  padding-left: var(--sec-pad-l-t, var(--sec-pad-l-d, 0)) !important;
  margin-top: var(--sec-mar-t-t, var(--sec-mar-t-d, 0)) !important;
  margin-right: var(--sec-mar-r-t, var(--sec-mar-r-d, 0)) !important;
  margin-bottom: var(--sec-mar-b-t, var(--sec-mar-b-d, 0)) !important;
  margin-left: var(--sec-mar-l-t, var(--sec-mar-l-d, 0)) !important;
  text-align: var(--sec-text-align-t, var(--sec-text-align-d, inherit)) !important;
  font-size: var(--sec-font-size-t, var(--sec-font-size-d, inherit)) !important;
}

.page-sec-styled.page-sec-preview--tablet.page-sec-layout-t-container .page-sec-inner {
  max-width: var(--sec-max-width-t, var(--sec-max-width-d, 87.5rem)) !important;
  padding-left: var(--sec-container-px-t, var(--sec-container-px-d, 1.5rem)) !important;
  padding-right: var(--sec-container-px-t, var(--sec-container-px-d, 1.5rem)) !important;
}

.page-sec-styled.page-sec-preview--tablet.page-sec-layout-t-full .page-sec-inner {
  max-width: var(--sec-max-width-t, var(--sec-max-width-d, none)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-sec-styled.page-sec-preview--mobile {
  padding-top: var(--sec-pad-t-m, var(--sec-pad-t-t, var(--sec-pad-t-d, 0))) !important;
  padding-right: var(--sec-pad-r-m, var(--sec-pad-r-t, var(--sec-pad-r-d, 0))) !important;
  padding-bottom: var(--sec-pad-b-m, var(--sec-pad-b-t, var(--sec-pad-b-d, 0))) !important;
  padding-left: var(--sec-pad-l-m, var(--sec-pad-l-t, var(--sec-pad-l-d, 0))) !important;
  margin-top: var(--sec-mar-t-m, var(--sec-mar-t-t, var(--sec-mar-t-d, 0))) !important;
  margin-right: var(--sec-mar-r-m, var(--sec-mar-r-t, var(--sec-mar-r-d, 0))) !important;
  margin-bottom: var(--sec-mar-b-m, var(--sec-mar-b-t, var(--sec-mar-b-d, 0))) !important;
  margin-left: var(--sec-mar-l-m, var(--sec-mar-l-t, var(--sec-mar-l-d, 0))) !important;
  text-align: var(--sec-text-align-m, var(--sec-text-align-t, var(--sec-text-align-d, inherit))) !important;
  font-size: var(--sec-font-size-m, var(--sec-font-size-t, var(--sec-font-size-d, inherit))) !important;
}

.page-sec-styled.page-sec-preview--mobile.page-sec-layout-m-container .page-sec-inner {
  max-width: var(--sec-max-width-m, var(--sec-max-width-t, var(--sec-max-width-d, 87.5rem))) !important;
  padding-left: var(--sec-container-px-m, var(--sec-container-px-t, var(--sec-container-px-d, 1.5rem))) !important;
  padding-right: var(--sec-container-px-m, var(--sec-container-px-t, var(--sec-container-px-d, 1.5rem))) !important;
}

.page-sec-styled.page-sec-preview--mobile.page-sec-layout-m-full .page-sec-inner {
  max-width: var(--sec-max-width-m, var(--sec-max-width-t, var(--sec-max-width-d, none))) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}