/* 
Bunkscode Framework - Utilities
Version: 0.1

---Table of Contents---
    - Passive Site Styles
        -- CSS Smooth Scroll
    - Typography
    - Grids
        - Layouts
        - Spans
        - Orders
    - Gaps & Spacing
    - Box Shadows
    - Border Radii
    - Images
        -- Aspect Ratio
        -- Object Fit
        -- Object Position
    - Additional Classes
        -- Display
*/

/* === Passive Site Styles ===
html {
    scroll-behavior: smooth;
} */

body.bricks-is-frontend :focus {
    outline: inherit;
}

/*---Typography---*/

.text--primary {
    color: var(--primary-400);
}

.text--secondary {
    color: var(--secondary-400);
}

.text--tertiary {
    color: var(--tertiary-400);
}

.text--shade {
    color: var(--shade-400);
}

.text--black{
    color: var(--neutral-500);
}

.text--white{
    color: var(--neutral-100);
}

/* === Grids === */
[class*="grid--"] {
    display: grid;
    gap: var(--default-grid-gap);
}

.stretch {
    align-items: stretch;
}

.grid--1 {
    grid-template-columns: minmax(0, 1fr);
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid--9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid--2-3 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

/*** Breakpoint - Laptop ***/
@media all and (max-width: 1120px) {
    .grid--xl-1 {
        grid-template-columns: minmax(0, 1fr);
    }
    
    .grid--xl-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid--xl-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .grid--xl-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .grid--xl-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

/*** Breakpoint - Tablet ***/
@media all and (max-width: 991px) {
    .grid--l-1 {
        grid-template-columns: minmax(0, 1fr);
    }
    
    .grid--l-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid--l-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .grid--l-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

/*** Breakpoint - Mobile Landscape ***/
@media all and (max-width: 767px) {
    .grid--m-1 {
        grid-template-columns: minmax(0, 1fr);
    }
    
    .grid--m-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid--m-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .grid--m-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

/*** Breakpoint - Mobile Portrait ***/
@media all and (max-width: 479px) {
    .grid--s-1 {
        grid-template-columns: minmax(0, 1fr);
    }
    
    .grid--s-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid--s-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .grid--s-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

/* Spans */
/* Columns */

.col-span--2 {
    grid-column: span 2;
}

.col-span--3 {
    grid-column: span 3;
}

.col-span--4 {
    grid-column: span 4;
}

.col-span--5 {
    grid-column: span 5;
}

.col-span--6 {
    grid-column: span 6;
}

.col-span--7 {
    grid-column: span 7;
}

.col-span--8 {
    grid-column: span 8;
}

.col-span--9 {
    grid-column: span 9;
}

.col-span--10 {
    grid-column: span 10;
}

.col-span--11 {
    grid-column: span 8;
}

/*** Breakpoint - Laptop ***/
@media all and (max-width: 1120px) {
    .col-span--xl-1 {
        grid-column: span 1;
    }
    
    .col-span--xl-2 {
        grid-column: span 2;
    }
    
    .col-span--xl-3 {
        grid-column: span 3;
    }
    
    .col-span--xl-4 {
        grid-column: span 4;
    }
    
    .col-span--xl-5 {
        grid-column: span 5;
    }
    
    .col-span--xl-6 {
        grid-column: span 6;
    }
    
    .col-span--xl-7 {
        grid-column: span 7;
    }
    
    .col-span--xl-8 {
        grid-column: span 8;
    }
    
    .col-span--xl-9 {
        grid-column: span 9;
    }
    
    .col-span--xl-10 {
        grid-column: span 10;
    }
    
    .col-span--xl-11 {
        grid-column: span 11;
    }
    
    .col-span--xl-12 {
        grid-column: span 12;
    }
}

/*** Breakpoint - Tablet ***/
@media all and (max-width: 991px) {
    .col-span--l-1 {
        grid-column: span 1;
    }
    
    .col-span--l-2 {
        grid-column: span 2;
    }
    
    .col-span--l-3 {
        grid-column: span 3;
    }
    
    .col-span--l-4 {
        grid-column: span 4;
    }
    
    .col-span--l-5 {
        grid-column: span 5;
    }
    
    .col-span--l-6 {
        grid-column: span 6;
    }
    
    .col-span--l-7 {
        grid-column: span 7;
    }
    
    .col-span--l-8 {
        grid-column: span 8;
    }
    
    .col-span--l-9 {
        grid-column: span 9;
    }
    
    .col-span--l-10 {
        grid-column: span 10;
    }
    
    .col-span--l-11 {
        grid-column: span 11;
    }
    
    .col-span--l-12 {
        grid-column: span 12;
    }
}

/*** Breakpoint - Mobile Landscape ***/
@media all and (max-width: 767px) {
    .col-span--m-1 {
        grid-column: span 1;
    }
    
    .col-span--m-2 {
        grid-column: span 2;
    }
    
    .col-span--m-3 {
        grid-column: span 3;
    }
    
    .col-span--m-4 {
        grid-column: span 4;
    }
    
    .col-span--m-5 {
        grid-column: span 5;
    }
    
    .col-span--m-6 {
        grid-column: span 6;
    }
    
    .col-span--m-7 {
        grid-column: span 7;
    }
    
    .col-span--m-8 {
        grid-column: span 8;
    }
    
    .col-span--m-9 {
        grid-column: span 9;
    }
    
    .col-span--m-10 {
        grid-column: span 10;
    }
    
    .col-span--m-11 {
        grid-column: span 11;
    }
    
    .col-span--m-12 {
        grid-column: span 12;
    }
}

/*** Breakpoint - Mobile Portrait ***/
@media all and (max-width: 479px) {
    .col-span--s-1 {
        grid-column: span 1;
    }
    
    .col-span--s-2 {
        grid-column: span 2;
    }
    
    .col-span--s-3 {
        grid-column: span 3;
    }
    
    .col-span--s-4 {
        grid-column: span 4;
    }
    
    .col-span--s-5 {
        grid-column: span 5;
    }
    
    .col-span--s-6 {
        grid-column: span 6;
    }
    
    .col-span--s-7 {
        grid-column: span 7;
    }
    
    .col-span--s-8 {
        grid-column: span 8;
    }
    
    .col-span--s-9 {
        grid-column: span 9;
    }
    
    .col-span--s-10 {
        grid-column: span 10;
    }
    
    .col-span--s-11 {
        grid-column: span 11;
    }
    
    .col-span--s-12 {
        grid-column: span 12;
    }
}

/* Rows */
.row-span--2 {
    grid-row: span 2;
}

.row-span--3 {
    grid-row: span 3;
}

.row-span--4 {
    grid-row: span 4;
}

.row-span--5 {
    grid-row: span 5;
}

.row-span--6 {
    grid-row: span 6;
}

.row-span--7 {
    grid-row: span 7;
}

.row-span--8 {
    grid-row: span 8;
}

.row-span--9 {
    grid-row: span 9;
}

.row-span--10 {
    grid-row: span 10;
}

.row-span--11 {
    grid-row: span 8;
}

/*** Breakpoint - Laptop ***/
@media all and (max-width: 1120px) {
    .row-span--xl-2 {
        grid-row: span 2;
    }
    
    .row-span--xl-3 {
        grid-row: span 3;
    }
    
    .row-span--xl-4 {
        grid-row: span 4;
    }
    
    .row-span--xl-5 {
        grid-row: span 5;
    }
    
    .row-span--xl-6 {
        grid-row: span 6;
    }
    
    .row-span--xl-7 {
        grid-row: span 7;
    }
    
    .row-span--xl-8 {
        grid-row: span 8;
    }
    
    .row-span--xl-9 {
        grid-row: span 9;
    }
    
    .row-span--xl-10 {
        grid-row: span 10;
    }
    
    .row-span--xl-11 {
        grid-row: span 8;
    }
}

/*** Breakpoint - Tablet ***/
@media all and (max-width: 991px) {
    .row-span--l-2 {
        grid-row: span 2;
    }
    
    .row-span--l-3 {
        grid-row: span 3;
    }
    
    .row-span--l-4 {
        grid-row: span 4;
    }
    
    .row-span--l-5 {
        grid-row: span 5;
    }
    
    .row-span--l-6 {
        grid-row: span 6;
    }
    
    .row-span--l-7 {
        grid-row: span 7;
    }
    
    .row-span--l-8 {
        grid-row: span 8;
    }
    
    .row-span--l-9 {
        grid-row: span 9;
    }
    
    .row-span--l-10 {
        grid-row: span 10;
    }
    
    .row-span--l-11 {
        grid-row: span 8;
    }
}

/*** Breakpoint - Mobile Landscape ***/
@media all and (max-width: 767px) {
    .row-span--m-2 {
        grid-row: span 2;
    }
    
    .row-span--m-3 {
        grid-row: span 3;
    }
    
    .row-span--m-4 {
        grid-row: span 4;
    }
    
    .row-span--m-5 {
        grid-row: span 5;
    }
    
    .row-span--m-6 {
        grid-row: span 6;
    }
    
    .row-span--m-7 {
        grid-row: span 7;
    }
    
    .row-span--m-8 {
        grid-row: span 8;
    }
    
    .row-span--m-9 {
        grid-row: span 9;
    }
    
    .row-span--m-10 {
        grid-row: span 10;
    }
    
    .row-span--m-11 {
        grid-row: span 8;
    }
}
    
/*** Breakpoint - Mobile Portrait ***/
@media all and (max-width: 479px) {
    .row-span--s-2 {
        grid-row: span 2;
    }
    
    .row-span--s-3 {
        grid-row: span 3;
    }
    
    .row-span--s-4 {
        grid-row: span 4;
    }
    
    .row-span--s-5 {
        grid-row: span 5;
    }
    
    .row-span--s-6 {
        grid-row: span 6;
    }
    
    .row-span--s-7 {
        grid-row: span 7;
    }
    
    .row-span--s-8 {
        grid-row: span 8;
    }
    
    .row-span--s-9 {
        grid-row: span 9;
    }
    
    .row-span--s-10 {
        grid-row: span 10;
    }
    
    .row-span--s-11 {
        grid-row: span 8;
    }
}

/*** Breakpoint - Tablet ***/
@media all and (max-width: 991px) {
    .row-start--l-1 {
        grid-row-start: 1;
    }
    
    .row-start--l-2 {
        grid-row-start: 2;
    }
}


/* Orders */
/* /// Pending /// */

/*---Spacing---*/

.gap--xxxl {
    gap: var(--space-xxxl);
}

.gap--xxl {
    gap: var(--space-xxl);
}

.gap--xl {
    gap: var(--space-xl);
}

.gap--l {
    gap: var(--space-l);
}

.gap--m {
    gap: var(--space-m);
}

.gap--s {
    gap: var(--space-s);
}

.gap--xs {
    gap: var(--space-xs)
}

.gap--xxs {
    gap: var(--space-xxs)
}

.gap--xxxs {
    gap: var(--space-xxxs)
}

.row-gap--xxxl {
    row-gap: var(--space-xxl);
}

.row-gap--xxl {
    row-gap: var(--space-xxl);
}

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

.row-gap--l {
    row-gap: var(--space-l);
}

.row-gap--m {
    row-gap: var(--space-m);
}

.row-gap--s {
    row-gap: var(--space-s);
}

.row-gap--xs {
    row-gap: var(--space-xs)
}

.row-gap--xxs {
    row-gap: var(--space-xxs)
}

.row-gap--xxxs {
    row-gap: var(--space-xxxs)
}

/*** Breakpoint - Laptop ***/
@media all and (max-width: 1120px) {
    .row-gap--xl-xl {
        row-gap: var(--space-xl);
    }
    
    .row-gap--xl-l {
        row-gap: var(--space-l);
    }
}

/*** Breakpoint - Tablet ***/
@media all and (max-width: 991px) {
    .gap--l-xl {
        gap: var(--space-xl);
    }
    
    .gap--l-l {
        gap: var(--space-l);
    }
    
    .gap--l-m {
        gap: var(--space-m);
    }
    
    .row-gap--l-xl {
        row-gap: var(--space-xl);
    }
    
    .row-gap--l-l {
        row-gap: var(--space-l);
    }
}

/*** Breakpoint - Mobile Landscape ***/
@media all and (max-width: 767px) {
    .row-gap--m-xl {
        row-gap: var(--space-xl);
    }
    .row-gap--m-l {
        row-gap: var(--space-l);
    }
    .row-gap--m-s {
        row-gap: var(--space-s);
    }
}

/*---Box Shadows---*/

.shadow--100 {
    box-shadow: var(--shadow-100);
}

.shadow--200 {
    box-shadow: var(--shadow-200);
}

.shadow--300 {
    box-shadow: var(--shadow-300);
}

.shadow--400 {
    box-shadow: var(--shadow-400);
}

/*---Border Radii---*/

.radius--s {
    border-radius: var(--radius-s);
}

.radius--m {
    border-radius: var(--radius-m);
}

.radius--l {
    border-radius: var(--radius-l);
}

/* === Images === */

/* Aspect Ratios */

.aspect--1-1 {
    aspect-ratio: 1 / 1;
}

.aspect--4-3 {
    aspect-ratio: 4 / 3;
}

.aspect--3-4 {
    aspect-ratio: 3 / 4;
}

.aspect--16-9 {
    aspect-ratio: 16 / 9;
}

.aspect--9-16 {
    aspect-ratio: 9 / 16;
}

/* Object Fit */

.object-fit--cover {
    object-fit: cover;
}

.object-fit--contain {
    object-fit: contain;
}

.object-fit--fill {
    object-fit: contain;
}

.object-fit--none {
    object-fit: contain;
}

.object-fit--scale-down {
    object-fit: contain;
}

/* Object Position */

.object-position--center {
    object-position: center;
}

.object-position--left {
    object-position: left;
}

.object-position--right {
    object-position: right;
}

.object-position--top {
    object-position: top;
}

.object-position--bottom {
    object-position: bottom;
}

/*---Other---*/

.display--none {
    display: none;
}

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 991px) {
    .display--l-none {
        display: none;
    }
}

.list--none {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

a.clickable-parent::after,
.clickable-parent > a::after {
    content: "";
    position: absolute;
    display: flex;
    inset: 0;
    cursor: pointer;
    z-index: 10;
}

/* Disable in Builder */
[data-builder-mode] a.clickable-parent::after,
[data-builder-mode] .clickable-parent > a::after {
    display: none;
}

.visually-hidden {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

.column {
    display: flex;
    flex-direction: column;
}

.column--section {
    display: flex;
    flex-direction: column;
}

.button-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}