/* Creative Automator – Foundation overrides
   Purpose: custom grid container, gutters, widths, and offsets
   Load order: AFTER foundation.min.css, BEFORE theme CSS
*/

/* -------- Container width & padding -------- */
.grid-container {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* -------- Gutters (20px each side on children) -------- */
.grid-margin-x {
  margin-left: -20px;
  margin-right: -20px;
}
.grid-margin-x > .cell {
  margin-left: 20px;
  margin-right: 20px;
}

/* -------- Small widths (12-col) with 20px gutters → net -40px -------- */
.grid-margin-x > .small-1 {
  width: calc(8.33333% - 40px);
}
.grid-margin-x > .small-2 {
  width: calc(16.66667% - 40px);
}
.grid-margin-x > .small-3 {
  width: calc(25% - 40px);
}
.grid-margin-x > .small-4 {
  width: calc(33.33333% - 40px);
}
.grid-margin-x > .small-5 {
  width: calc(41.66667% - 40px);
}
.grid-margin-x > .small-6 {
  width: calc(50% - 40px);
}
.grid-margin-x > .small-7 {
  width: calc(58.33333% - 40px);
}
.grid-margin-x > .small-8 {
  width: calc(66.66667% - 40px);
}
.grid-margin-x > .small-9 {
  width: calc(75% - 40px);
}
.grid-margin-x > .small-10 {
  width: calc(83.33333% - 40px);
}
.grid-margin-x > .small-11 {
  width: calc(91.66667% - 40px);
}
.grid-margin-x > .small-12 {
  width: calc(100% - 40px);
}

/* Small up-* helpers */
.grid-margin-x.small-up-1 > .cell {
  width: calc(100% - 40px);
}
.grid-margin-x.small-up-2 > .cell {
  width: calc(50% - 40px);
}
.grid-margin-x.small-up-3 > .cell {
  width: calc(33.33333% - 40px);
}
.grid-margin-x.small-up-4 > .cell {
  width: calc(25% - 40px);
}

/* -------- Offsets (20px gutters)
   offset(n) = n * (100%/12) + n * 40px
-------------------------------------------------------------- */
.grid-margin-x > .small-offset-1 {
  margin-left: calc(8.33333% + 40px);
}
.grid-margin-x > .small-offset-2 {
  margin-left: calc(16.66667% + 80px);
}
.grid-margin-x > .small-offset-3 {
  margin-left: calc(25% + 120px);
}
.grid-margin-x > .small-offset-4 {
  margin-left: calc(33.33333% + 160px);
}
.grid-margin-x > .small-offset-5 {
  margin-left: calc(41.66667% + 200px);
}
.grid-margin-x > .small-offset-6 {
  margin-left: calc(50% + 240px);
}
.grid-margin-x > .small-offset-7 {
  margin-left: calc(58.33333% + 280px);
}
.grid-margin-x > .small-offset-8 {
  margin-left: calc(66.66667% + 320px);
}
.grid-margin-x > .small-offset-9 {
  margin-left: calc(75% + 360px);
}
.grid-margin-x > .small-offset-10 {
  margin-left: calc(83.33333% + 400px);
}
.grid-margin-x > .small-offset-11 {
  margin-left: calc(91.66667% + 440px);
}

/* -------- Medium breakpoint (≥640px) -------- */
@media (min-width: 640px) {
  /* Widths with 20px gutters → net -40px */
  .grid-margin-x > .medium-1 {
    width: calc(8.33333% - 40px);
  }
  .grid-margin-x > .medium-2 {
    width: calc(16.66667% - 40px);
  }
  .grid-margin-x > .medium-3 {
    width: calc(25% - 40px);
  }
  .grid-margin-x > .medium-4 {
    width: calc(33.33333% - 40px);
  }
  .grid-margin-x > .medium-5 {
    width: calc(41.66667% - 40px);
  }
  .grid-margin-x > .medium-6 {
    width: calc(50% - 40px);
  }
  .grid-margin-x > .medium-7 {
    width: calc(58.33333% - 40px);
  }
  .grid-margin-x > .medium-8 {
    width: calc(66.66667% - 40px);
  }
  .grid-margin-x > .medium-9 {
    width: calc(75% - 40px);
  }
  .grid-margin-x > .medium-10 {
    width: calc(83.33333% - 40px);
  }
  .grid-margin-x > .medium-11 {
    width: calc(91.66667% - 40px);
  }
  .grid-margin-x > .medium-12 {
    width: calc(100% - 40px);
  }

  .grid-margin-x.medium-up-1 > .cell {
    width: calc(100% - 40px);
  }
  .grid-margin-x.medium-up-2 > .cell {
    width: calc(50% - 40px);
  }
  .grid-margin-x.medium-up-3 > .cell {
    width: calc(33.33333% - 40px);
  }
  .grid-margin-x.medium-up-4 > .cell {
    width: calc(25% - 40px);
  }
  .grid-margin-x.medium-up-5 > .cell {
    width: calc(41.66667% - 40px);
  }

  /* Optional wider gutters (40px each side) */
  .medium-gutter-wide.grid-margin-x {
    margin-left: -40px;
    margin-right: -40px;
  }
  .medium-gutter-wide.grid-margin-x > .cell {
    margin-left: 40px;
    margin-right: 40px;
  }

  .medium-gutter-wide.grid-margin-x.medium-up-1 > .cell {
    width: calc(100% - 80px);
  }
  .medium-gutter-wide.grid-margin-x.medium-up-2 > .cell {
    width: calc(50% - 80px);
  }
  .medium-gutter-wide.grid-margin-x.medium-up-3 > .cell {
    width: calc(33.33333% - 80px);
  }
  .medium-gutter-wide.grid-margin-x.medium-up-4 > .cell {
    width: calc(25% - 80px);
  }

  /* Offsets for 20px gutters (same formula as small) */
  .grid-margin-x > .medium-offset-1 {
    margin-left: calc(8.33333% + 40px);
  }
  .grid-margin-x > .medium-offset-2 {
    margin-left: calc(16.66667% + 80px);
  }
  .grid-margin-x > .medium-offset-3 {
    margin-left: calc(25% + 120px);
  }
  .grid-margin-x > .medium-offset-4 {
    margin-left: calc(33.33333% + 160px);
  }
  .grid-margin-x > .medium-offset-5 {
    margin-left: calc(41.66667% + 200px);
  }
  .grid-margin-x > .medium-offset-6 {
    margin-left: calc(50% + 240px);
  }
  .grid-margin-x > .medium-offset-7 {
    margin-left: calc(58.33333% + 280px);
  }
  .grid-margin-x > .medium-offset-8 {
    margin-left: calc(66.66667% + 320px);
  }
  .grid-margin-x > .medium-offset-9 {
    margin-left: calc(75% + 360px);
  }
  .grid-margin-x > .medium-offset-10 {
    margin-left: calc(83.33333% + 400px);
  }
  .grid-margin-x > .medium-offset-11 {
    margin-left: calc(91.66667% + 440px);
  }

  /* Offsets for 40px-each-side gutters (wide) → +80px per skipped column */
  .medium-gutter-wide.grid-margin-x > .medium-offset-1 {
    margin-left: calc(8.33333% + 80px);
  }
  .medium-gutter-wide.grid-margin-x > .medium-offset-2 {
    margin-left: calc(16.66667% + 160px);
  }
  .medium-gutter-wide.grid-margin-x > .medium-offset-3 {
    margin-left: calc(25% + 240px);
  }
  .medium-gutter-wide.grid-margin-x > .medium-offset-4 {
    margin-left: calc(33.33333% + 320px);
  }
  .medium-gutter-wide.grid-margin-x > .medium-offset-5 {
    margin-left: calc(41.66667% + 400px);
  }
  .medium-gutter-wide.grid-margin-x > .medium-offset-6 {
    margin-left: calc(50% + 480px);
  }
  .medium-gutter-wide.grid-margin-x > .medium-offset-7 {
    margin-left: calc(58.33333% + 560px);
  }
  .medium-gutter-wide.grid-margin-x > .medium-offset-8 {
    margin-left: calc(66.66667% + 640px);
  }
  .medium-gutter-wide.grid-margin-x > .medium-offset-9 {
    margin-left: calc(75% + 720px);
  }
  .medium-gutter-wide.grid-margin-x > .medium-offset-10 {
    margin-left: calc(83.33333% + 800px);
  }
  .medium-gutter-wide.grid-margin-x > .medium-offset-11 {
    margin-left: calc(91.66667% + 880px);
  }
}

/* -------- Large breakpoint (≥1024px) -------- */
@media (min-width: 1024px) {
  /* Widths with 20px gutters → net -40px */
  .grid-margin-x > .large-1 {
    width: calc(8.33333% - 40px);
  }
  .grid-margin-x > .large-2 {
    width: calc(16.66667% - 40px);
  }
  .grid-margin-x > .large-3 {
    width: calc(25% - 40px);
  }
  .grid-margin-x > .large-4 {
    width: calc(33.33333% - 40px);
  }
  .grid-margin-x > .large-5 {
    width: calc(41.66667% - 40px);
  }
  .grid-margin-x > .large-6 {
    width: calc(50% - 40px);
  }
  .grid-margin-x > .large-7 {
    width: calc(58.33333% - 40px);
  }
  .grid-margin-x > .large-8 {
    width: calc(66.66667% - 40px);
  }
  .grid-margin-x > .large-9 {
    width: calc(75% - 40px);
  }
  .grid-margin-x > .large-10 {
    width: calc(83.33333% - 40px);
  }
  .grid-margin-x > .large-11 {
    width: calc(91.66667% - 40px);
  }
  .grid-margin-x > .large-12 {
    width: calc(100% - 40px);
  }

  .grid-margin-x.large-up-1 > .cell {
    width: calc(100% - 40px);
  }
  .grid-margin-x.large-up-2 > .cell {
    width: calc(50% - 40px);
  }
  .grid-margin-x.large-up-3 > .cell {
    width: calc(33.33333% - 40px);
  }
  .grid-margin-x.large-up-4 > .cell {
    width: calc(25% - 40px);
  }

  /* Optional wider gutters (40px each side) */
  .large-gutter-wide.grid-margin-x {
    margin-left: -40px;
    margin-right: -40px;
  }
  .large-gutter-wide.grid-margin-x > .cell {
    margin-left: 40px;
    margin-right: 40px;
  }

  .large-gutter-wide.grid-margin-x.large-up-1 > .cell {
    width: calc(100% - 80px);
  }
  .large-gutter-wide.grid-margin-x.large-up-2 > .cell {
    width: calc(50% - 80px);
  }
  .large-gutter-wide.grid-margin-x.large-up-3 > .cell {
    width: calc(33.33333% - 80px);
  }
  .large-gutter-wide.grid-margin-x.large-up-4 > .cell {
    width: calc(25% - 80px);
  }

  /* Offsets for 20px gutters */
  .grid-margin-x > .large-offset-1 {
    margin-left: calc(8.33333% + 40px);
  }
  .grid-margin-x > .large-offset-2 {
    margin-left: calc(16.66667% + 40px);
  }
  .grid-margin-x > .large-offset-3 {
    margin-left: calc(25% + 120px);
  }
  .grid-margin-x > .large-offset-4 {
    margin-left: calc(33.33333% + 160px);
  }
  .grid-margin-x > .large-offset-5 {
    margin-left: calc(41.66667% + 200px);
  }
  .grid-margin-x > .large-offset-6 {
    margin-left: calc(50% + 240px);
  }
  .grid-margin-x > .large-offset-7 {
    margin-left: calc(58.33333% + 280px);
  }
  .grid-margin-x > .large-offset-8 {
    margin-left: calc(66.66667% + 320px);
  }
  .grid-margin-x > .large-offset-9 {
    margin-left: calc(75% + 360px);
  }
  .grid-margin-x > .large-offset-10 {
    margin-left: calc(83.33333% + 400px);
  }
  .grid-margin-x > .large-offset-11 {
    margin-left: calc(91.66667% + 440px);
  }

  /* Offsets for 40px-each-side gutters (wide) */
  .large-gutter-wide.grid-margin-x > .large-offset-1 {
    margin-left: calc(8.33333% + 80px);
  }
  .large-gutter-wide.grid-margin-x > .large-offset-2 {
    margin-left: calc(16.66667% + 160px);
  }
  .large-gutter-wide.grid-margin-x > .large-offset-3 {
    margin-left: calc(25% + 240px);
  }
  .large-gutter-wide.grid-margin-x > .large-offset-4 {
    margin-left: calc(33.33333% + 320px);
  }
  .large-gutter-wide.grid-margin-x > .large-offset-5 {
    margin-left: calc(41.66667% + 400px);
  }
  .large-gutter-wide.grid-margin-x > .large-offset-6 {
    margin-left: calc(50% + 480px);
  }
  .large-gutter-wide.grid-margin-x > .large-offset-7 {
    margin-left: calc(58.33333% + 560px);
  }
  .large-gutter-wide.grid-margin-x > .large-offset-8 {
    margin-left: calc(66.66667% + 640px);
  }
  .large-gutter-wide.grid-margin-x > .large-offset-9 {
    margin-left: calc(75% + 720px);
  }
  .large-gutter-wide.grid-margin-x > .large-offset-10 {
    margin-left: calc(83.33333% + 800px);
  }
  .large-gutter-wide.grid-margin-x > .large-offset-11 {
    margin-left: calc(91.66667% + 880px);
  }
}