/* Flexbox helper utilities */

.flex {
  display: flex;
  gap: var(--gap);
}

.inline-flex {
  display: inline-flex;
  gap: var(--gap);
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-between {
  justify-content: space-between;
}

.flex-justify-around {
  justify-content: space-around;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-center {
  align-items: center !important;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-stretch {
  align-items: stretch;
}

.flex-align-baseline {
  align-items: baseline;
}

.flex-gap-none {
  gap: 0;
}

.flex-gap-tight {
  gap: var(--gap9);
}

.flex-gap-loose {
  gap: var(--gap48);
}

.flex-fill-width {
    flex-basis: 100%;
}

.flex-fit-content {
    flex-basis: fit-content;
}

.flex-1-3 {
    flex: 0 1 calc(100%/3) !important;
}

.flex-2-3 {
    flex: 0 1 calc(100%/3*2) !important;
}

.flex-40 {
  flex: 0 1 40% !important;
}

.flex-45 {
  flex: 0 1 45% !important;
}

.flex-60 {
  flex: 0 1 60% !important;
}

.flex-55 {
  flex: 0 1 55% !important;
}

.flex-grow {
    flex-grow: 1;
}

.flex-shrink {
    flex-shrink: 1;
}

/* Gap spacing helpers */
.gap {
  gap: var(--gap);
}

.gap-6 {
  gap: var(--gap6);
}

.gap-9 {
  gap: var(--gap9);
}

.gap-12 {
  gap: var(--gap12);
}

.gap-18 {
  gap: var(--gap18);
}

.gap-24 {
  gap: var(--gap24);
}

.gap-36 {
  gap: var(--gap);
}

.gap-48 {
  gap: var(--gap48);
}

.gap-72 {
  gap: var(--gap72);
}

.gap-108 {
  gap: var(--gap108);
}

/* Padding helpers */
.pad-none,
section.pad-none {
  padding: 0;
}

.pad,
section.pad {
  padding: var(--gap);
}

.pad-6,
section.pad-6 {
  padding: var(--gap6);
}

.pad-9,
section.pad-9 {
  padding: var(--gap9);
}

.pad-12,
section.pad-12 {
  padding: var(--gap12);
}

.pad-18,
section.pad-18 {
  padding: var(--gap18);
}

.pad-24,
section.pad-24 {
  padding: var(--gap24);
}

.pad-48,
section.pad-48 {
  padding: var(--gap48);
}

.pad-72,
section.pad-72 {
  padding: var(--gap72);
}

.pad-108,
section.pad-108 {
  padding: var(--gap108);
}

.pad-block-none,
section.pad-block-none {
  padding-block: 0;
}

.pad-block,
section.pad-block {
  padding-block: var(--gap);
}

.pad-block-6,
section.pad-block-6 {
  padding-block: var(--gap6);
}

.pad-block-9,
section.pad-block-9 {
  padding-block: var(--gap9);
}

.pad-block-12,
section.pad-block-12 {
  padding-block: var(--gap12);
}

.pad-block-18,
section.pad-block-18 {
  padding-block: var(--gap18);
}

.pad-block-24,
section.pad-block-24 {
  padding-block: var(--gap24);
}

.pad-block-48,
section.pad-block-48 {
  padding-block: var(--gap48);
}

.pad-block-72,
section.pad-block-72 {
  padding-block: var(--gap72);
}

.pad-block-108,
section.pad-block-108 {
  padding-block: var(--gap108);
}

.pad-inline-none,
section.pad-inline-none {
  padding-inline: 0;
}

.pad-inline,
section.pad-inline {
  padding-inline: var(--gap);
}

.pad-inline-6,
section.pad-inline-6 {
  padding-inline: var(--gap6);
}

.pad-inline-9,
section.pad-inline-9 {
  padding-inline: var(--gap9);
}

.pad-inline-12,
section.pad-inline-12 {
  padding-inline: var(--gap12);
}

.pad-inline-18,
section.pad-inline-18 {
  padding-inline: var(--gap18);
}

.pad-inline-24,
section.pad-inline-24 {
  padding-inline: var(--gap24);
}

.pad-inline-36,
section.pad-inline-36 {
  padding-inline: var(--gap);
}

.pad-inline-48,
section.pad-inline-48 {
  padding-inline: var(--gap48);
}

.pad-inline-72,
section.pad-inline-72 {
  padding-inline: var(--gap72);
}

.pad-inline-108,
section.pad-inline-108 {
  padding-inline: var(--gap108);
}

/* Directional padding helpers */
.pad-top,
section.pad-top {
  padding-top: var(--gap);
}

.pad-top-0,
section.pad-top-0 {
  padding-top: 0 !important;
}

.pad-top-6,
section.pad-top-6 {
  padding-top: var(--gap6);
}

.pad-top-9,
section.pad-top-9 {
  padding-top: var(--gap9);
}

.pad-top-12,
section.pad-top-12 {
  padding-top: var(--gap12);
}

.pad-top-18,
section.pad-top-18 {
  padding-top: var(--gap18);
}

.pad-top-24,
section.pad-top-24 {
  padding-top: var(--gap24);
}

.pad-top-48,
section.pad-top-48 {
  padding-top: var(--gap48);
}

.pad-top-72,
section.pad-top-72 {
  padding-top: var(--gap72);
}

.pad-top-108,
section.pad-top-108 {
  padding-top: var(--gap108);
}

.pad-bottom-0,
section.pad-bottom-0 {
  padding-bottom: 0 !important;
}

.pad-bottom,
section.pad-bottom {
  padding-bottom: var(--gap);
}

.pad-bottom-6,
section.pad-bottom-6 {
  padding-bottom: var(--gap6);
}

.pad-bottom-9,
section.pad-bottom-9 {
  padding-bottom: var(--gap9);
}

.pad-bottom-12,
section.pad-bottom-12 {
  padding-bottom: var(--gap12);
}

.pad-bottom-18,
section.pad-bottom-18 {
  padding-bottom: var(--gap18);
}

.pad-bottom-24,
section.pad-bottom-24 {
  padding-bottom: var(--gap24);
}

.pad-bottom-48,
section.pad-bottom-48 {
  padding-bottom: var(--gap48);
}

.pad-bottom-72,
section.pad-bottom-72 {
  padding-bottom: var(--gap72);
}

.pad-bottom-108,
section.pad-bottom-108 {
  padding-bottom: var(--gap108);
}

.pad-left,
section.pad-left {
  padding-left: var(--gap);
}

.pad-left-6,
section.pad-left-6 {
  padding-left: var(--gap6);
}

.pad-left-9,
section.pad-left-9 {
  padding-left: var(--gap9);
}

.pad-left-12,
section.pad-left-12 {
  padding-left: var(--gap12);
}

.pad-left-18,
section.pad-left-18 {
  padding-left: var(--gap18);
}

.pad-left-24,
section.pad-left-24 {
  padding-left: var(--gap24);
}

.pad-left-48,
section.pad-left-48 {
  padding-left: var(--gap48);
}

.pad-left-72,
section.pad-left-72 {
  padding-left: var(--gap72);
}

.pad-left-108,
section.pad-left-108 {
  padding-left: var(--gap108);
}

.pad-right,
section.pad-right {
  padding-right: var(--gap);
}

.pad-right-6,
section.pad-right-6 {
  padding-right: var(--gap6);
}

.pad-right-9,
section.pad-right-9 {
  padding-right: var(--gap9);
}

.pad-right-12,
section.pad-right-12 {
  padding-right: var(--gap12);
}

.pad-right-18,
section.pad-right-18 {
  padding-right: var(--gap18);
}

.pad-right-24,
section.pad-right-24 {
  padding-right: var(--gap24);
}

.pad-right-48,
section.pad-right-48 {
  padding-right: var(--gap48);
}

.pad-right-72,
section.pad-right-72 {
  padding-right: var(--gap72);
}

.pad-right-108,
section.pad-right-108 {
  padding-right: var(--gap108);
}

.pad-top-bottom,
section.pad-top-bottom {
  padding-block: var(--gap);
}

.pad-top-bottom-6,
section.pad-top-bottom-6 {
  padding-block: var(--gap6);
}

.pad-top-bottom-9,
section.pad-top-bottom-9 {
  padding-block: var(--gap9);
}

.pad-top-bottom-12,
section.pad-top-bottom-12 {
  padding-block: var(--gap12);
}

.pad-top-bottom-18,
section.pad-top-bottom-18 {
  padding-block: var(--gap18);
}

.pad-top-bottom-24,
section.pad-top-bottom-24 {
  padding-block: var(--gap24);
}

.pad-top-bottom-48,
section.pad-top-bottom-48 {
  padding-block: var(--gap48);
}

.pad-top-bottom-72,
section.pad-top-bottom-72 {
  padding-block: var(--gap72);
}

.pad-top-bottom-108,
section.pad-top-bottom-108 {
  padding-block: var(--gap108);
}

.pad-left-right,
section.pad-left-right {
  padding-inline: var(--gap);
}

.pad-left-right-6,
section.pad-left-right-6 {
  padding-inline: var(--gap6);
}

.pad-left-right-9,
section.pad-left-right-9 {
  padding-inline: var(--gap9);
}

.pad-left-right-12,
section.pad-left-right-12 {
  padding-inline: var(--gap12);
}

.pad-left-right-18,
section.pad-left-right-18 {
  padding-inline: var(--gap18);
}

.pad-left-right-24,
section.pad-left-right-24 {
  padding-inline: var(--gap24);
}

.pad-left-right-48,
section.pad-left-right-48 {
  padding-inline: var(--gap48);
}

.pad-left-right-72,
section.pad-left-right-72 {
  padding-inline: var(--gap72);
}

.pad-left-right-108,
section.pad-left-right-108 {
  padding-inline: var(--gap108);
}

.full-width {
    width: 100%;
}

.z-2 {
    z-index: 2;
}

.narrow-width {
    width: 100%;
    max-width: var(--narrow-width);
}

.medium-width {
    width: 100%;
    max-width: var(--medium-width);
}

.limit-width {
    width: 100%;
    max-width: var(--limit-width);
}

.max-width {
    width: 100%;
    max-width: var(--max-width);
}

.wide-width {
    width: 100%;
    max-width: var(--wide-width);
}



/* Aspect ratio helpers */
.ratio-auto {
  aspect-ratio: auto;
}

.ratio-1-1,
figure.ratio-1-1 {
  aspect-ratio: 1 / 1 !;
}

.ratio-3-4,
figure.ratio-3-4 {
  aspect-ratio: 3 / 4;
}

.ratio-4-3,
figure.ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.ratio-4-5,
figure.ratio-4-5 {
  aspect-ratio: 4 / 5;
}

.ratio-5-4,
figure.ratio-5-4 {
  aspect-ratio: 5 / 4;
}

.ratio-3-2,
figure.ratio-3-2 {
  aspect-ratio: 3 / 2;
}

.ratio-2-3,
figure.ratio-2-3 {
  aspect-ratio: 2 / 3;
}

.ratio-16-9,
figure.ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.ratio-9-16,
figure.ratio-9-16 {
  aspect-ratio: 9 / 16;
}

.divider-top {
    border-top: 1px solid var(--color-brand-light-gray);
}