/**
 * @file
 * Columns component styles.
 */

/* Base: outer container is full-width for backgrounds */
.columns {
  width: 100%;
}

/* Inner wrapper is the grid only — place Columns inside a Container SDC for page width/gutter. */
.columns__wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

/* 2-column layout */
@media (min-width: 768px) {
  .columns--cols-2 .columns__wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Unequal widths (e.g. 360 + 800) — ratio scales with the container. */
  .columns--cols-2.columns--custom-widths .columns__wrapper {
    grid-template-columns: minmax(0, var(--columns-c1)) minmax(0, var(--columns-c2));
  }
}

/* Custom-width 2-col: stack on tablet so chart cards keep reading width. */
/* @media (min-width: 768px) and (max-width: 1023px) {
  .columns--cols-2.columns--custom-widths .columns__wrapper {
    grid-template-columns: 1fr;
  }
} */

/* 3- and 4-column: 2-up at tablet */
@media (min-width: 768px) {
  .columns--cols-3 .columns__wrapper,
  .columns--cols-4 .columns__wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3- and 4-column: full count at desktop */
@media (min-width: 1024px) {
  .columns--cols-3 .columns__wrapper {
    grid-template-columns: repeat(3, 1fr);
  }

  .columns--cols-4 .columns__wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Gap modifiers (desktop) */
.columns--gap-0  .columns__wrapper { gap: 0; }
.columns--gap-4  .columns__wrapper { gap: var(--gap-size-xs); }   /*  4px */
.columns--gap-8  .columns__wrapper { gap: var(--gap-size-sm); }   /*  8px */
.columns--gap-16 .columns__wrapper { gap: var(--gap-size-md); }   /* 16px */
.columns--gap-24 .columns__wrapper { gap: var(--gap-size-lg); }   /* 24px */
.columns--gap-32 .columns__wrapper { gap: var(--gap-size-xl); }   /* 32px */
.columns--gap-40 .columns__wrapper { gap: 2.5rem; }               /* 40px – Figma 2-col chart layouts */
.columns--gap-48 .columns__wrapper { gap: var(--gap-size-2xl); }  /* 48px */
.columns--gap-64 .columns__wrapper { gap: 4rem; }                 /* 64px – no design token exists */

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

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

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

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

/* Stretch content — flex columns for bottom-aligned items */
.columns--stretch .columns__col {
  display: flex;
  flex-direction: column;
}

/* Vertical alignment modifiers */
.columns--valign-center .columns__wrapper { align-items: center; }
.columns--valign-bottom .columns__wrapper { align-items: end; }

/* Mobile overrides (< 768px) */
@media (max-width: 767px) {

  /* Column reversal */
  .columns--reverse-mobile .columns__wrapper {
    display: flex;
    flex-direction: column-reverse;
  }

  /* Mobile gap */
  .columns--mobile-gap-0  .columns__wrapper { gap: 0; }
  .columns--mobile-gap-4  .columns__wrapper { gap: var(--gap-size-xs); }
  .columns--mobile-gap-8  .columns__wrapper { gap: var(--gap-size-sm); }
  .columns--mobile-gap-16 .columns__wrapper { gap: var(--gap-size-md); }
  .columns--mobile-gap-24 .columns__wrapper { gap: var(--gap-size-lg); }
  .columns--mobile-gap-32 .columns__wrapper { gap: var(--gap-size-xl); }
  .columns--mobile-gap-40 .columns__wrapper { gap: 2.5rem; }
  .columns--mobile-gap-48 .columns__wrapper { gap: var(--gap-size-2xl); }
  .columns--mobile-gap-64 .columns__wrapper { gap: 4rem; }

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

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

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

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

}