/* grid */

/* this is a odd duplicate of c-pro-container 
   swContainer is for Container in custom layout,
  .forceCommunitySection .cb-section_row is the default section in dynamic layouts
  .comm-content-header and footer are for the fixed layouts like the login page
  .siteforceSldsTwoCol66Layout .slds-grid hooks the main content region on the login page
*/

.swContainer,
.forceCommunitySection .cb-section_row,
.siteforceSldsOneColLayout .comm-content-header,
.siteforceSldsOneColLayout .contentRegion,
.siteforceSldsOneColLayout .comm-content-footer,
.siteforceSldsOneColLayout .slds-grid,
.siteforceSldsTwoCol66Layout .comm-content-header,
.siteforceSldsTwoCol66Layout .comm-content-footer,
.siteforceSldsTwoCol66Layout .slds-grid  {
  max-width: calc(1324px + 80px) !important; /* the number comes from the neos implementation*/
  position: relative;
  width: 100%;
  margin: auto;
  padding-left: 8px;
  padding-right: 8px;
}

@media (min-width: 500px) {

  .swContainer,
  .forceCommunitySection .cb-section_row,
  .siteforceSldsOneColLayout .comm-content-header,
  .siteforceSldsOneColLayout .contentRegion,
  .siteforceSldsOneColLayout .comm-content-footer,
  .siteforceSldsOneColLayout .slds-grid,
  .siteforceSldsTwoCol66Layout .comm-content-header,
  .siteforceSldsTwoCol66Layout .comm-content-footer,
  .siteforceSldsTwoCol66Layout .slds-grid  {
    padding-left: 16px;
    padding-right: 16px;
  }
}
  
.siteforceSldsOneColLayout .slds-grid,
.siteforceSldsTwoCol66Layout .slds-grid  {
  /* because of the addditional padding of the grid cols */
  padding-left: 6px;
  padding-right: 6px;
}

@media (min-width: 360px) {
  .swContainer,
  .forceCommunitySection .cb-section_row,
  .siteforceSldsOneColLayout  .comm-content-header,
  .siteforceSldsOneColLayout  .comm-content-footer,
  .siteforceSldsTwoCol66Layout .comm-content-header,
  .siteforceSldsTwoCol66Layout .contentRegion,
  .siteforceSldsTwoCol66Layout .comm-content-footer {
    padding-left: 6px;
    padding-right: 6px;
  }
  
  .siteforceSldsTwoCol66Layout .slds-grid,
  .siteforceSldsOneColLayout .slds-grid {
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media (min-width: 600px) {
  .swContainer,
  .forceCommunitySection .cb-section_row,
  .siteforceSldsOneColLayout  .comm-content-header,
  .siteforceSldsOneColLayout  .comm-content-footer,
  .siteforceSldsTwoCol66Layout .comm-content-header,
  .siteforceSldsTwoCol66Layout .contentRegion,
  .siteforceSldsTwoCol66Layout .comm-content-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .siteforceSldsTwoCol66Layout .slds-grid,
  .siteforceSldsOneColLayout .slds-grid {
    padding-left: 13px;
    padding-right: 13px;
  }
}

@media (min-width: 1024px) {
  .swContainer,
  .forceCommunitySection .cb-section_row,
  .siteforceSldsTwoCol66Layout .comm-content-header,
  .siteforceSldsTwoCol66Layout .comm-content-footer,
  .siteforceSldsOneColLayout .comm-content-header,
  .siteforceSldsOneColLayout .contentRegion,
  .siteforceSldsOneColLayout .comm-content-footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .siteforceSldsTwoCol66Layout .slds-grid,
  .siteforceSldsOneColLayout .slds-grid {
    padding-left: 16px;
    padding-right: 16px;
  }

  .forceCommunitySection .cb-section_column {
      padding-left: 6px;
      padding-right: 6px;
  }
  .forceCommunitySection .cb-section_column:first-child {
    padding-left: 3px;
    padding-right: 6px;
  }
  .forceCommunitySection .cb-section_column:last-child {
    padding-right: 3px;
    padding-left: 6px;
  }

  body {
    --lwc-uiWidgetMarginBottom: 36px;
  }
}

@media (max-width: 600px) {
  .forceCommunitySection .cb-section_column {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
@media (max-width: 1023px) {
  .forceCommunitySection .cb-section_column {
    /* important is not the nice way, but salesforce useses many pseudoclasses to calculate the padding
    which has a variable padding on the side but is allways the same at the top, so why
    do they allways set the top and bottom */
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

@media (min-width: 768px) {
  .forceCommunitySection .cb-section_column {
    padding-left: 14px;
    padding-right: 14px;
  }
  .forceCommunitySection .cb-section_column:first-child {
    padding-left: 7px;
    padding-right: 14px;
  }
  .forceCommunitySection .cb-section_column:last-child {
    padding-right: 7px;
    padding-left: 14px;
  }

  body {
    --lwc-uiWidgetMarginBottom: 24px;
  }
}

@media (min-width: 1024px) {
  .forceCommunitySection .cb-section_column {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }  

  .forceCommunitySection .cb-section_column {
    padding-left: 16px;
    padding-right: 16px;
  }
  .forceCommunitySection .cb-section_column:first-child {
    padding-left: 8px;
    padding-right: 16px;
  }
  .forceCommunitySection .cb-section_column:last-child {
    padding-right: 8px;
    padding-left: 16px;
  }
}
@media (min-width: 1280px) {
  .forceCommunitySection .cb-section_column {
    padding-left: 22px;
    padding-right: 22px;
  }
  .forceCommunitySection .cb-section_column:first-child {
    padding-left: 11px;
    padding-right: 22px;
  }
  .forceCommunitySection .cb-section_column:last-child {
    padding-right: 11px;
    padding-left: 22px;
  }

  body {
    --lwc-uiWidgetMarginBottom: 44px;
  }
}