/**
 * @file
 * Flex wrapper styles for Aotearoa theme.
 */

.flex-wrapper {
  width: 100%;
}

.flex-wrapper__layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (width >= 768px) {
  .flex-wrapper:not(.flex-wrapper--vertical) > .flex-wrapper__layout {
    flex-direction: row;
  }
}

/* ==========================================================================
   Wrap
   ========================================================================== */

.flex-wrapper--wrap > .flex-wrapper__layout {
  flex-wrap: wrap;
}

/* ==========================================================================
   Horizontal alignment (align-items in column, justify-content in row)
   ========================================================================== */

/* Column mode (mobile + vertical) - use align-items for horizontal */
.flex-wrapper--align-x-start > .flex-wrapper__layout {
  align-items: flex-start;
}

.flex-wrapper--align-x-center > .flex-wrapper__layout {
  align-items: center;
}

.flex-wrapper--align-x-end > .flex-wrapper__layout {
  align-items: flex-end;
}

/* Row mode (desktop non-vertical) - use justify-content for horizontal */
@media (width >= 768px) {
  .flex-wrapper:not(.flex-wrapper--vertical).flex-wrapper--align-x-start > .flex-wrapper__layout {
    justify-content: flex-start;
  } 

  .flex-wrapper:not(.flex-wrapper--vertical).flex-wrapper--align-x-center > .flex-wrapper__layout {
    justify-content: center;
  }

  .flex-wrapper:not(.flex-wrapper--vertical).flex-wrapper--align-x-end > .flex-wrapper__layout {
    justify-content: flex-end;
  }

  .flex-wrapper:not(.flex-wrapper--vertical).flex-wrapper--align-x-space-between > .flex-wrapper__layout {
    justify-content: space-between;
  }

  .flex-wrapper:not(.flex-wrapper--vertical).flex-wrapper--align-x-space-around > .flex-wrapper__layout {
    justify-content: space-around;
  }
}

/* ==========================================================================
   Vertical alignment (justify-content in column, align-items in row)
   ========================================================================== */

/* Column mode (mobile + vertical) - use justify-content for vertical */
.flex-wrapper--align-y-top > .flex-wrapper__layout {
  justify-content: flex-start;
}

.flex-wrapper--align-y-center > .flex-wrapper__layout {
  justify-content: center;
}

.flex-wrapper--align-y-bottom > .flex-wrapper__layout {
  justify-content: flex-end;
}

.flex-wrapper--align-y-stretch > .flex-wrapper__layout {
  justify-content: stretch;
}

/* Row mode (desktop non-vertical) - use align-items for vertical */
@media (width >= 768px) {
  .flex-wrapper:not(.flex-wrapper--vertical).flex-wrapper--align-y-top > .flex-wrapper__layout {
    align-items: flex-start;
  }

  .flex-wrapper:not(.flex-wrapper--vertical).flex-wrapper--align-y-center > .flex-wrapper__layout {
    align-items: center;
  }

  .flex-wrapper:not(.flex-wrapper--vertical).flex-wrapper--align-y-bottom > .flex-wrapper__layout {
    align-items: flex-end;
  }

  .flex-wrapper:not(.flex-wrapper--vertical).flex-wrapper--align-y-stretch > .flex-wrapper__layout {
    align-items: stretch;
  }
}

/* ==========================================================================
   Gap
   ========================================================================== */

.flex-wrapper--gap-small > .flex-wrapper__layout {
  gap: var(--sp2);
}

.flex-wrapper--gap-medium > .flex-wrapper__layout {
  gap: var(--sp4);
}

.flex-wrapper--gap-large > .flex-wrapper__layout {
  gap: var(--sp6);
}

/* ==========================================================================
   Margin top
   ========================================================================== */

.flex-wrapper--mt-small {
  margin-block-start: var(--sp2);
}

.flex-wrapper--mt-medium {
  margin-block-start: var(--sp4);
}

.flex-wrapper--mt-large {
  margin-block-start: var(--sp6);
}

/* ==========================================================================
   Margin bottom
   ========================================================================== */

.flex-wrapper--mb-small {
  margin-block-end: var(--sp2);
}

.flex-wrapper--mb-medium {
  margin-block-end: var(--sp4);
}

.flex-wrapper--mb-large {
  margin-block-end: var(--sp6);
}

/* ==========================================================================
   Padding top
   ========================================================================== */

.flex-wrapper--pt-small {
  padding-block-start: var(--sp2);
}

.flex-wrapper--pt-medium {
  padding-block-start: var(--sp4);
}

.flex-wrapper--pt-large {
  padding-block-start: var(--sp6);
}

/* ==========================================================================
   Padding bottom
   ========================================================================== */

.flex-wrapper--pb-small {
  padding-block-end: var(--sp2);
}

.flex-wrapper--pb-medium {
  padding-block-end: var(--sp4);
}

.flex-wrapper--pb-large {
  padding-block-end: var(--sp6);
}

/* ==========================================================================
   Padding left
   ========================================================================== */

.flex-wrapper--pl-small > .flex-wrapper__layout {
  padding-inline-start: var(--sp4);
}

.flex-wrapper--pl-medium > .flex-wrapper__layout {
  padding-inline-start: var(--sp8);
}

.flex-wrapper--pl-large > .flex-wrapper__layout {
  padding-inline-start: var(--sp10);
}

/* ==========================================================================
   Padding right
   ========================================================================== */

.flex-wrapper--pr-small > .flex-wrapper__layout {
  padding-inline-end: var(--sp4);
}

.flex-wrapper--pr-medium > .flex-wrapper__layout {
  padding-inline-end: var(--sp8);
}

.flex-wrapper--pr-large > .flex-wrapper__layout {
  padding-inline-end: var(--sp10);
}