/**
 * @file
 * Container SDC styles.
 *
 * Width rules also live in css/layout/layout.css (global library) so
 * .container classes work theme-wide. Duplicated here so the SDC is
 * self-contained when Canvas attaches only the component library.
 *
 * FND-2 (DONI-542) — THE CONTAINER RULE LIVES IN css/base/variables.css.
 * Default max-width is --page-width (1368px); horizontal padding is
 * --gutter-fluid, which needs no media query.
 *
 * 🔴 THE FALLBACKS MATTER HERE MORE THAN ANYWHERE. This copy is what
 * Canvas uses when it attaches the component library alone, so if
 * base/variables.css is absent these literals are what renders. They
 * used to say 1440px and 84px while the global copy said 1368px and
 * 84px — the same class name resolving to two different widths
 * depending on which stylesheet loaded. Keep them in step.
 */

.container {
  width: 100%;
  max-width: var(--page-width, 1368px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-fluid, 24px);
  padding-right: var(--gutter-fluid, 24px);
  box-sizing: border-box;
  position: relative;
}

/* Width: narrow — 864px content width, same gutter either side */
.container--narrow {
  max-width: calc(var(--container-narrow-max-width, 864px) + var(--gutter-fluid, 24px) * 2);
}

/* Width: full */
.container--full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Background variants — from figma-to-html .section modifiers.
 * Prefixed container--variant-* so they never collide with width modifiers. */
.container--variant-default,
.container--variant-textured,
.container--variant-white {
  position: relative;
  background-color: var(--color-white, #fff);
  isolation: isolate;
}

.container--variant-textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../../images/backgrounds/paper-texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  pointer-events: none;
}

/* Drop shadow checkbox — figma-to-html .section--shadowed
 * Figma: X0 Y8 Blur24 Spread-4 #515861 @ 16% */
.container--shadowed {
  box-shadow: var(--shadow-section-top, 0px 8px 24px -4px rgba(81, 88, 97, 0.16));
}

.container--variant-flush-top {
  padding-top: 0;
}

@media (max-width: 425px) {

  .ole-chart-container-layout {
    padding-inline: 0px !important;

    .chart__main {
      padding-inline: 0px !important;
    }
  }
}

/* Desktop padding */
.container--pt-8   { padding-top: var(--padding-size-xs); }
.container--pt-16  { padding-top: var(--padding-size-sm); }
.container--pt-20  { padding-top: var(--padding-size-md); }
.container--pt-32  { padding-top: var(--padding-size-lg); }
.container--pt-48  { padding-top: var(--padding-size-xl); }
.container--pt-64  { padding-top: var(--padding-size-2xl); }
.container--pt-80  { padding-top: var(--padding-size-3xl); }
.container--pt-96  { padding-top: var(--padding-size-4xl); }
.container--pt-128 { padding-top: var(--padding-size-5xl); }

.container--pb-8   { padding-bottom: var(--padding-size-xs); }
.container--pb-16  { padding-bottom: var(--padding-size-sm); }
.container--pb-20  { padding-bottom: var(--padding-size-md); }
.container--pb-32  { padding-bottom: var(--padding-size-lg); }
.container--pb-48  { padding-bottom: var(--padding-size-xl); }
.container--pb-64  { padding-bottom: var(--padding-size-2xl); }
.container--pb-80  { padding-bottom: var(--padding-size-3xl); }
.container--pb-96  { padding-bottom: var(--padding-size-4xl); }
.container--pb-128 { padding-bottom: var(--padding-size-5xl); }

/* Desktop margin */
.container--mt-8   { margin-top: var(--padding-size-xs); }
.container--mt-16  { margin-top: var(--padding-size-sm); }
.container--mt-20  { margin-top: var(--padding-size-md); }
.container--mt-32  { margin-top: var(--padding-size-lg); }
.container--mt-48  { margin-top: var(--padding-size-xl); }
.container--mt-64  { margin-top: var(--padding-size-2xl); }
.container--mt-80  { margin-top: var(--padding-size-3xl); }
.container--mt-96  { margin-top: var(--padding-size-4xl); }
.container--mt-128 { margin-top: var(--padding-size-5xl); }

.container--mb-8   { margin-bottom: var(--padding-size-xs); }
.container--mb-16  { margin-bottom: var(--padding-size-sm); }
.container--mb-20  { margin-bottom: var(--padding-size-md); }
.container--mb-32  { margin-bottom: var(--padding-size-lg); }
.container--mb-48  { margin-bottom: var(--padding-size-xl); }
.container--mb-64  { margin-bottom: var(--padding-size-2xl); }
.container--mb-80  { margin-bottom: var(--padding-size-3xl); }
.container--mb-96  { margin-bottom: var(--padding-size-4xl); }
.container--mb-128 { margin-bottom: var(--padding-size-5xl); }

/* The 769–1024 tablet and ≤768 mobile GUTTER overrides were removed by
 * FND-2. --gutter-fluid already floors at 24px, so the mobile step was
 * a no-op restating it, and the 48px tablet step made content width
 * non-monotonic — it SHRANK by 48px crossing 768->769 and by 72px
 * crossing 1024->1025. See css/base/variables.css for the evaluated
 * table. The mobile spacing props below are unrelated and stay. */

/* Mobile: spacing prop overrides */
@media (max-width: 768px) {

  .container--mobile-pt-0   { padding-top: 0; }
  .container--mobile-pt-8   { padding-top: var(--padding-size-xs); }
  .container--mobile-pt-16  { padding-top: var(--padding-size-sm); }
  .container--mobile-pt-20  { padding-top: var(--padding-size-md); }
  .container--mobile-pt-32  { padding-top: var(--padding-size-lg); }
  .container--mobile-pt-48  { padding-top: var(--padding-size-xl); }
  .container--mobile-pt-64  { padding-top: var(--padding-size-2xl); }
  .container--mobile-pt-80  { padding-top: var(--padding-size-3xl); }
  .container--mobile-pt-96  { padding-top: var(--padding-size-4xl); }
  .container--mobile-pt-128 { padding-top: var(--padding-size-5xl); }

  .container--mobile-pb-0   { padding-bottom: 0; }
  .container--mobile-pb-8   { padding-bottom: var(--padding-size-xs); }
  .container--mobile-pb-16  { padding-bottom: var(--padding-size-sm); }
  .container--mobile-pb-20  { padding-bottom: var(--padding-size-md); }
  .container--mobile-pb-32  { padding-bottom: var(--padding-size-lg); }
  .container--mobile-pb-48  { padding-bottom: var(--padding-size-xl); }
  .container--mobile-pb-64  { padding-bottom: var(--padding-size-2xl); }
  .container--mobile-pb-80  { padding-bottom: var(--padding-size-3xl); }
  .container--mobile-pb-96  { padding-bottom: var(--padding-size-4xl); }
  .container--mobile-pb-128 { padding-bottom: var(--padding-size-5xl); }

  .container--mobile-mt-0   { margin-top: 0; }
  .container--mobile-mt-8   { margin-top: var(--padding-size-xs); }
  .container--mobile-mt-16  { margin-top: var(--padding-size-sm); }
  .container--mobile-mt-20  { margin-top: var(--padding-size-md); }
  .container--mobile-mt-32  { margin-top: var(--padding-size-lg); }
  .container--mobile-mt-48  { margin-top: var(--padding-size-xl); }
  .container--mobile-mt-64  { margin-top: var(--padding-size-2xl); }
  .container--mobile-mt-80  { margin-top: var(--padding-size-3xl); }
  .container--mobile-mt-96  { margin-top: var(--padding-size-4xl); }
  .container--mobile-mt-128 { margin-top: var(--padding-size-5xl); }

  .container--mobile-mb-0   { margin-bottom: 0; }
  .container--mobile-mb-8   { margin-bottom: var(--padding-size-xs); }
  .container--mobile-mb-16  { margin-bottom: var(--padding-size-sm); }
  .container--mobile-mb-20  { margin-bottom: var(--padding-size-md); }
  .container--mobile-mb-32  { margin-bottom: var(--padding-size-lg); }
  .container--mobile-mb-48  { margin-bottom: var(--padding-size-xl); }
  .container--mobile-mb-64  { margin-bottom: var(--padding-size-2xl); }
  .container--mobile-mb-80  { margin-bottom: var(--padding-size-3xl); }
  .container--mobile-mb-96  { margin-bottom: var(--padding-size-4xl); }
  .container--mobile-mb-128 { margin-bottom: var(--padding-size-5xl); }

}

.neon-horizontal-desktop {
  width: 100%;
  height: fit-content;
}

.neon-vertical-desktop {
  width: auto;
  height: 100%;
}

.neon-vertical-mobile {
  height: 100%;
  width: auto;
}

.neon-vertical-desktop-left,
.neon-vertical-mobile {
  top: 0;
  left: 0; 
  position: absolute;
}

.neon-vertical-desktop-right {
  top: 0;
  right: 0;
  position: absolute;
}

@media (width < 768px) {
  .neon-horizontal-desktop,
  .neon-vertical-desktop {
    display: none;
  }
}

@media (width >= 768px) {
  .neon-vertical-mobile {
    display: none;
  }
}

@media (width < 768px) {
.container:has(>.neon-vertical-mobile){
    padding-left: 32px;
  }
}