/* Fluid Engine Grid System - Adapted from Squarespace */

/* Fluid Engine Container */
.fluid-engine {
  display: grid;
  position: relative;
  width: 100%;
  min-height: min-content;
  grid-auto-rows: minmax(min-content, max-content);
}

/* Mobile Grid: 8 columns */
.fluid-engine {
  --grid-gutter: calc(var(--sqs-mobile-site-gutter, 6vw) - var(--grid-gap-mobile));
  --cell-max-width: calc(
    (var(--sqs-site-max-width, 1357px) - (var(--grid-gap-mobile) * (var(--grid-columns-mobile) - 1))) /
      var(--grid-columns-mobile)
  );

  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(var(--grid-columns-mobile), minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);

  column-gap: var(--grid-gap-mobile);
  row-gap: var(--grid-gap-mobile);
}

/* Desktop Grid: 24 columns @ 768px+ */
@media (min-width: 768px) {
  .fluid-engine {
    --grid-gutter: calc(var(--sqs-site-gutter, 4vw) - var(--grid-gap-desktop));
    --cell-max-width: calc(
      (var(--sqs-site-max-width, 1357px) - (var(--grid-gap-desktop) * (var(--grid-columns-desktop) - 1))) /
        var(--grid-columns-desktop)
    );
    --row-height-scaling-factor: 0.0215;
    --container-width: min(var(--sqs-site-max-width, 1357px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2));

    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(var(--grid-columns-desktop), minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);

    grid-template-rows: repeat(auto-fill, minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto));

    column-gap: var(--grid-gap-desktop);
    row-gap: var(--grid-gap-desktop);
  }
}

/* Grid Block Base */
.fe-block {
  position: relative;
  z-index: 1;
}

/* Utility: Full Bleed (spans all columns including gutters) */
.fe-full-bleed {
  grid-column: 1 / -1;
}

/* Utility: Content Width (spans content columns, respects gutters) */
.fe-content-width {
  grid-column: 2 / -2;
}

/* Grid positioning utilities - Mobile */
/* These can be overridden per block for precise positioning */

/* Example: Centered block on mobile (columns 2-10) */
.fe-block-centered-mobile {
  grid-area: auto / 2 / auto / 10;
}

/* Example: Left aligned block on mobile (columns 2-6) */
.fe-block-left-mobile {
  grid-area: auto / 2 / auto / 6;
}

/* Example: Right aligned block on mobile (columns 6-10) */
.fe-block-right-mobile {
  grid-area: auto / 6 / auto / 10;
}

/* Grid positioning utilities - Desktop */
@media (min-width: 768px) {
  /* Centered block on desktop (columns 7-20, ~50% width) */
  .fe-block-centered-desktop {
    grid-area: auto / 7 / auto / 20;
  }

  /* Left half on desktop (columns 2-13) */
  .fe-block-left-desktop {
    grid-area: auto / 2 / auto / 13;
  }

  /* Right half on desktop (columns 14-26) */
  .fe-block-right-desktop {
    grid-area: auto / 14 / auto / 26;
  }

  /* Wide centered (columns 4-23, ~70% width) */
  .fe-block-wide-desktop {
    grid-area: auto / 4 / auto / 23;
  }

  /* Narrow centered (columns 10-17, ~30% width) */
  .fe-block-narrow-desktop {
    grid-area: auto / 10 / auto / 17;
  }
}

/* Simple Grid Layouts (Non-Fluid Engine) */

/* 2-column grid */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .grid-2-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3-column grid */
.grid-3-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .grid-3-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3-col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4-column grid */
.grid-4-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .grid-4-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4-col {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Auto-fit grid (responsive card grids) */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
}