.gaw-image-left-text-right-row,
.gaw-image-right-text-left-row {
  .et_pb_column {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 980px) {
  .et_pb_row.gaw-image-right-text-left-row {
    display: flex;
    flex-direction: column-reverse;

    .et_pb_column:last-child {
      margin-bottom: 20px;
    }
  }
}

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

  @media (max-width: 768px) {
    & {
      flex-direction: column;
    }
  }
}

/* On rows with equal colum heights, we want to center the column content by default when not in mobile mode */
.et_pb_row.et_pb_equal_columns {
  @media (min-width: 981px) {
    .et_pb_column {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  @media (max-width: 980px) {
    .et_pb_column {
      margin-bottom: 50px;
    }
  }
}

.bvi-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem; /* Negative margin to offset column padding */

  /* Column base styles */
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    padding: 0 1rem;
    box-sizing: border-box;
  }

  /* BVI Column class - provides both width and flex column layout */
  .bvi-col {
    display: flex;
    flex-direction: column;
  }

  /* 12-column grid system */
  .col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Offset classes for positioning */
  .col-offset-1 {
    margin-left: 8.333333%;
  }
  .col-offset-2 {
    margin-left: 16.666667%;
  }
  .col-offset-3 {
    margin-left: 25%;
  }
  .col-offset-4 {
    margin-left: 33.333333%;
  }
  .col-offset-5 {
    margin-left: 41.666667%;
  }
  .col-offset-6 {
    margin-left: 50%;
  }
  .col-offset-7 {
    margin-left: 58.333333%;
  }
  .col-offset-8 {
    margin-left: 66.666667%;
  }
  .col-offset-9 {
    margin-left: 75%;
  }
  .col-offset-10 {
    margin-left: 83.333333%;
  }
  .col-offset-11 {
    margin-left: 91.666667%;
  }

  /* Utility classes */
  .col-auto {
    flex: 0 0 auto;
    max-width: none;
  }
  .col-fill {
    flex: 1 1 0;
    max-width: none;
  }

  /* Alignment classes - work at both row and child level */
  &.align-start,
  .align-start {
    align-items: flex-start;
  }
  &.align-center,
  .align-center {
    align-items: center;
  }
  &.align-end,
  .align-end {
    align-items: flex-end;
  }
  &.align-stretch,
  .align-stretch {
    align-items: stretch;
  }

  &.justify-start,
  .justify-start {
    justify-content: flex-start;
  }
  &.justify-center,
  .justify-center {
    justify-content: center;
  }
  &.justify-end,
  .justify-end {
    justify-content: flex-end;
  }
  &.justify-between,
  .justify-between {
    justify-content: space-between;
  }
  &.justify-around,
  .justify-around {
    justify-content: space-around;
  }

  /* Tablet breakpoint (980px) */
  @media (max-width: 980px) {
    .col-tab-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .col-tab-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .col-tab-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-tab-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .col-tab-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .col-tab-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-tab-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .col-tab-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .col-tab-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-tab-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .col-tab-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .col-tab-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    /* Auto-stack columns that don't have tablet-specific classes */
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11 {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }

  /* Mobile breakpoint (480px) */
  @media (max-width: 480px) {
    .col-mob-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .col-mob-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .col-mob-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-mob-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .col-mob-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .col-mob-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-mob-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .col-mob-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .col-mob-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-mob-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .col-mob-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .col-mob-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    /* Auto-stack all columns to single column on mobile */
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12,
    .col-tab-1,
    .col-tab-2,
    .col-tab-3,
    .col-tab-4,
    .col-tab-5,
    .col-tab-6,
    .col-tab-7,
    .col-tab-8,
    .col-tab-9,
    .col-tab-10,
    .col-tab-11 {
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 1rem;
    }

    /* Remove bottom margin from last child */
    .col-1:last-child,
    .col-2:last-child,
    .col-3:last-child,
    .col-4:last-child,
    .col-5:last-child,
    .col-6:last-child,
    .col-7:last-child,
    .col-8:last-child,
    .col-9:last-child,
    .col-10:last-child,
    .col-11:last-child,
    .col-12:last-child,
    .col-tab-1:last-child,
    .col-tab-2:last-child,
    .col-tab-3:last-child,
    .col-tab-4:last-child,
    .col-tab-5:last-child,
    .col-tab-6:last-child,
    .col-tab-7:last-child,
    .col-tab-8:last-child,
    .col-tab-9:last-child,
    .col-tab-10:last-child,
    .col-tab-11:last-child {
      margin-bottom: 0;
    }
  }

  /* Nested row support */
  .bvi-row {
    margin: 0 -0.5rem; /* Smaller negative margin for nested rows */

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
      padding: 0 0.5rem; /* Smaller padding for nested columns */
    }
  }

  /* Image handling within columns */
  .bvi-row__image {
    img {
      border-radius: var(--radius);
      overflow: hidden;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &.full-images {
    img {
      height: 100%;
      width: 100%;
      max-width: 400px;
      object-fit: cover;
    }
  }
}

.image-row-in-toggle {
  display: flex;
  flex-direction: row;
  gap: 1rem;

  img {
    display: block;
    aspect-ratio: 42/33;
    object-fit: cover;
    border-radius: var(--radius-medium);
    overflow: hidden;
  }
}

.bvi-row-equal-cols-top-aligned {
  @media (min-width: 981px) {
    .et_pb_column {
      justify-content: flex-start !important;
    }
  }

  .et_pb_blurb {
    position: relative;

    &,
    .et_pb_blurb_content {
      height: 100%;
    }

    .et_pb_blurb_content,
    .et_pb_blurb_container {
      display: flex;
      flex-direction: column;

      &.et_pb_blurb_container,
      .et_pb_blurb_description {
        flex-grow: 1;
      }
    }

    .et_pb_blurb_description {
      padding-bottom: 1.5rem;
    }

    .gaw-link-button {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
}