/*
 * SVOPA Metal Profi – Bootstrap 5 compatible grid layer for Concrete CMS layouts.
 * Concrete 9.5.2's bootstrap asset contains JavaScript only; a Bedrock-based
 * theme is expected to ship the matching Bootstrap/Bedrock CSS itself.
 * This file intentionally contains only the grid rules needed by Concrete's
 * bootstrap5 GridFramework (12 columns, md breakpoint, gutters and offsets).
 */

.ccm-page .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.ccm-page .row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
  min-width: 0;
}

.ccm-page .col { flex: 1 0 0%; }
.ccm-page .col-1 { flex: 0 0 auto; width: 8.33333333%; }
.ccm-page .col-2 { flex: 0 0 auto; width: 16.66666667%; }
.ccm-page .col-3 { flex: 0 0 auto; width: 25%; }
.ccm-page .col-4 { flex: 0 0 auto; width: 33.33333333%; }
.ccm-page .col-5 { flex: 0 0 auto; width: 41.66666667%; }
.ccm-page .col-6 { flex: 0 0 auto; width: 50%; }
.ccm-page .col-7 { flex: 0 0 auto; width: 58.33333333%; }
.ccm-page .col-8 { flex: 0 0 auto; width: 66.66666667%; }
.ccm-page .col-9 { flex: 0 0 auto; width: 75%; }
.ccm-page .col-10 { flex: 0 0 auto; width: 83.33333333%; }
.ccm-page .col-11 { flex: 0 0 auto; width: 91.66666667%; }
.ccm-page .col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 768px) {
  .ccm-page .col-md { flex: 1 0 0%; }
  .ccm-page .col-md-auto { flex: 0 0 auto; width: auto; }
  .ccm-page .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
  .ccm-page .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
  .ccm-page .col-md-3 { flex: 0 0 auto; width: 25%; }
  .ccm-page .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .ccm-page .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
  .ccm-page .col-md-6 { flex: 0 0 auto; width: 50%; }
  .ccm-page .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
  .ccm-page .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
  .ccm-page .col-md-9 { flex: 0 0 auto; width: 75%; }
  .ccm-page .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .ccm-page .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .ccm-page .col-md-12 { flex: 0 0 auto; width: 100%; }

  .ccm-page .offset-md-0 { margin-left: 0; }
  .ccm-page .offset-md-1 { margin-left: 8.33333333%; }
  .ccm-page .offset-md-2 { margin-left: 16.66666667%; }
  .ccm-page .offset-md-3 { margin-left: 25%; }
  .ccm-page .offset-md-4 { margin-left: 33.33333333%; }
  .ccm-page .offset-md-5 { margin-left: 41.66666667%; }
  .ccm-page .offset-md-6 { margin-left: 50%; }
  .ccm-page .offset-md-7 { margin-left: 58.33333333%; }
  .ccm-page .offset-md-8 { margin-left: 66.66666667%; }
  .ccm-page .offset-md-9 { margin-left: 75%; }
  .ccm-page .offset-md-10 { margin-left: 83.33333333%; }
  .ccm-page .offset-md-11 { margin-left: 91.66666667%; }
}

/*
 * Concrete's edit-mode UI can add rules around layout wrappers. Keep the
 * Bootstrap row/column geometry authoritative only for actual grid classes.
 * Free Layout remains untouched because it does not use col-md-* classes.
 */
html.ccm-edit-mode .ccm-page .row {
  display: flex !important;
  flex-wrap: wrap !important;
}

@media (min-width: 768px) {
  html.ccm-edit-mode .ccm-page .row > .col-md-1 { flex: 0 0 auto !important; width: 8.33333333% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-2 { flex: 0 0 auto !important; width: 16.66666667% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-3 { flex: 0 0 auto !important; width: 25% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-4 { flex: 0 0 auto !important; width: 33.33333333% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-5 { flex: 0 0 auto !important; width: 41.66666667% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-6 { flex: 0 0 auto !important; width: 50% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-7 { flex: 0 0 auto !important; width: 58.33333333% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-8 { flex: 0 0 auto !important; width: 66.66666667% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-9 { flex: 0 0 auto !important; width: 75% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-10 { flex: 0 0 auto !important; width: 83.33333333% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-11 { flex: 0 0 auto !important; width: 91.66666667% !important; }
  html.ccm-edit-mode .ccm-page .row > .col-md-12 { flex: 0 0 auto !important; width: 100% !important; }
}