/**
 * Author Book Manager Flexbox Grid
 * Author: John Patrick Garvin
 *
 */

/* VARIABLES
=============================================== */

@import "variables.css";


/* UTILITIES
=============================================== */

*, *::after, *::before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* === Optional — image scaling === */

.abm .row > * img {
  max-width: 100%;
  height: auto;
}

/* === Disable smooth scrolling when users have 'prefers-reduced-motion' enabled === */

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ALIGNMENT
=============================================== */

.abm {

  .align-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .align-left {
    text-align: left;
  }

  .align-right {
    text-align: right;
  }

}

@media only screen and (max-width: 900px) {

  .abm {

    .align-left-mobile-lg {
      text-align: left;
    }

    .align-center-mobile-lg {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

  }

}

@media only screen and (max-width: 780px) {

  .abm {

    .align-left-mobile-md {
      text-align: left;
    }

    .align-center-mobile-md {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

  }

}

@media only screen and (max-width: 640px) {

  .abm {

    .align-left-mobile-sm {
      text-align: left;
    }

    .align-center-mobile-sm {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

  }

}

/* GRID
=============================================== */

.abm.container {
  height: 100%;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  row-gap: var(--gap-lg);
  position: relative;
  box-sizing: border-box;
}

@media only screen and (max-width: 1280px) {
  .abm.container {
    padding: 0 var(--padding-lg);
  }
}

/* === Flex Rows === */

.abm {

  .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-bottom: var(--margin-xl);
    width: 100%;
    box-sizing: border-box;
  }

  .row.row-nogutter {
    gap: 0;
    margin: 0;
  }

  .row.row-stretch {
    align-items: stretch;
  }

  .row.row-col {
    flex-direction: column;
    gap: var(--gap-lg);
  }

  .row-start    { justify-content: flex-start; }
  .row-center   { justify-content: center; }
  .row-end      { justify-content: flex-end; }
  .row-around   { justify-content: space-around; }
  .row-between  { justify-content: space-between; }
  .row-reverse  { flex-direction: row-reverse; }

  .row.gap-md { gap: var(--gap-md); }
  .row.gap-lg { gap: var(--gap-lg); }
  .row.gap-xl { gap: var(--gap-xl); }

}

/* === Columns === */

.abm {

  .col {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .col-align-top    { align-self: flex-start; }
  .col-align-middle { align-self: center; }
  .col-align-bottom { align-self: flex-end; }

  .col-top,
  .col-middle,
  .col-bottom {
    display: flex;
    flex-direction: column;
  }

  .col-top    { justify-content: flex-start !important; }
  .col-middle { justify-content: center; }
  .col-bottom { justify-content: flex-end !important; }

  /* 12-column spans */
  .col-1  { flex-basis: calc(8.3333% - var(--gap));  max-width: calc(8.3333% - var(--gap)); }
  .col-2  { flex-basis: calc(16.6667% - var(--gap)); max-width: calc(16.6667% - var(--gap)); }
  .col-3  { flex-basis: calc(25% - var(--gap));      max-width: calc(25% - var(--gap)); }
  .col-4  { flex-basis: calc(33.3333% - var(--gap)); max-width: calc(33.3333% - var(--gap)); }
  .col-5  { flex-basis: calc(41.6667% - var(--gap)); max-width: calc(41.6667% - var(--gap)); }
  .col-6  { flex-basis: calc(50% - var(--gap));      max-width: calc(50% - var(--gap)); }
  .col-7  { flex-basis: calc(58.3333% - var(--gap)); max-width: calc(58.3333% - var(--gap)); }
  .col-8  { flex-basis: calc(66.6667% - var(--gap)); max-width: calc(66.6667% - var(--gap)); }
  .col-9  { flex-basis: calc(75% - var(--gap));      max-width: calc(75% - var(--gap)); }
  .col-10 { flex-basis: calc(83.3333% - var(--gap)); max-width: calc(83.3333% - var(--gap)); }
  .col-11 { flex-basis: calc(91.6667% - var(--gap)); max-width: calc(91.6667% - var(--gap)); }
  .col-12 { flex-basis: 100%; max-width: 100%; }

}

/* === Responsive Breakpoints === */

@media only screen and (max-width: 900px) {
  .abm {
    .col-6-lg  { flex-basis: calc(50% - var(--gap)); max-width: calc(50% - var(--gap)); }
    .col-4-lg  { flex-basis: calc(33.3333% - var(--gap)); max-width: calc(33.3333% - var(--gap)); }
    .col-lg    { flex-basis: 100%; max-width: 100%; }
  }
}

@media only screen and (max-width: 780px) {
  .abm {
    .col-6-md  { flex-basis: calc(50% - var(--gap)); max-width: calc(50% - var(--gap)); }
    .col-4-md  { flex-basis: calc(33.3333% - var(--gap)); max-width: calc(33.3333% - var(--gap)); }
    .col-md    { flex-basis: 100%; max-width: 100%; }
  }
}

@media only screen and (max-width: 640px) {
  .abm {
    .col-6-sm  { flex-basis: calc(50% - var(--gap)); max-width: calc(50% - var(--gap)); }
    .col-sm    { flex-basis: 100%; max-width: 100%; }
  }
}


/* SPACING
=============================================== */

.abm {

  .margin-top--0 {
    margin-top: 0;
  }

  .margin-top--sm {
    margin-top: var(--margin-sm);
  }

  .margin-top--md {
    margin-top: var(--margin-md);
  }

  .margin-top--lg {
    margin-top: var(--margin-lg);
  }

  .margin-top--xl {
    margin-top: var(--margin-xl);
  }

  .margin-top--xxl {
    margin-top: var(--margin-xxl);
  }

  .margin-btm--0 {
    margin-bottom: 0;
  }

  .margin-btm--sm {
    margin-bottom: var(--margin-sm);
  }

  .margin-btm--md {
    margin-bottom: var(--margin-md);
  }

  .margin-btm--lg {
    margin-bottom: var(--margin-lg);
  }

  .margin-btm--xl {
    margin-bottom: var(--margin-xl);
  }

  .margin-btm--xxl {
    margin-bottom: var(--margin-xxl);
  }

  .padding-0 {
    padding: 0;
  }

  .padding-sm {
    padding: var(--padding-sm);
  }

  .padding-md {
    padding: var(--padding-md);
  }

  .padding-lg {
    padding: var(--padding-lg);
  }

  .padding-xl {
    padding: var(--padding-xl);
  }

  .padding-xxl {
    padding: var(--padding-xxl);
  }

}