/*
 * Nomad Stays utility classes.
 *
 * The site runs Bootstrap 3.4.1, which has no flex/gap/spacing utilities.
 * These fill that gap under an ns- prefix so they can't change pages that
 * already carry (inert) Bootstrap 5 class names like d-flex or mb-3.
 *
 * Spacing scale: 0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem
 * Breakpoints follow Bootstrap 3: sm >=768px, md >=992px, lg >=1200px
 */

/* Display */
.ns-d-none { display: none !important; }
.ns-d-block { display: block !important; }
.ns-d-inline { display: inline !important; }
.ns-d-inline-block { display: inline-block !important; }
.ns-flex { display: flex !important; }
.ns-inline-flex { display: inline-flex !important; }
.ns-grid { display: grid !important; }

/* Flex */
.ns-flex-row { flex-direction: row !important; }
.ns-flex-column { flex-direction: column !important; }
.ns-flex-wrap { flex-wrap: wrap !important; }
.ns-flex-nowrap { flex-wrap: nowrap !important; }
.ns-flex-1 { flex: 1 1 0% !important; min-width: 0; }
.ns-flex-shrink-0 { flex-shrink: 0 !important; }

.ns-justify-start { justify-content: flex-start !important; }
.ns-justify-end { justify-content: flex-end !important; }
.ns-justify-center { justify-content: center !important; }
.ns-justify-between { justify-content: space-between !important; }
.ns-justify-around { justify-content: space-around !important; }

.ns-items-start { align-items: flex-start !important; }
.ns-items-end { align-items: flex-end !important; }
.ns-items-center { align-items: center !important; }
.ns-items-baseline { align-items: baseline !important; }
.ns-items-stretch { align-items: stretch !important; }

/* Gap */
.ns-gap-0 { gap: 0 !important; }
.ns-gap-1 { gap: .25rem !important; }
.ns-gap-2 { gap: .5rem !important; }
.ns-gap-3 { gap: 1rem !important; }
.ns-gap-4 { gap: 1.5rem !important; }
.ns-gap-5 { gap: 3rem !important; }

/* Margin */
.ns-m-0 { margin: 0 !important; }
.ns-m-1 { margin: .25rem !important; }
.ns-m-2 { margin: .5rem !important; }
.ns-m-3 { margin: 1rem !important; }
.ns-m-4 { margin: 1.5rem !important; }
.ns-m-5 { margin: 3rem !important; }

.ns-mt-0 { margin-top: 0 !important; }
.ns-mt-1 { margin-top: .25rem !important; }
.ns-mt-2 { margin-top: .5rem !important; }
.ns-mt-3 { margin-top: 1rem !important; }
.ns-mt-4 { margin-top: 1.5rem !important; }
.ns-mt-5 { margin-top: 3rem !important; }

.ns-mb-0 { margin-bottom: 0 !important; }
.ns-mb-1 { margin-bottom: .25rem !important; }
.ns-mb-2 { margin-bottom: .5rem !important; }
.ns-mb-3 { margin-bottom: 1rem !important; }
.ns-mb-4 { margin-bottom: 1.5rem !important; }
.ns-mb-5 { margin-bottom: 3rem !important; }

.ns-ms-0 { margin-left: 0 !important; }
.ns-ms-1 { margin-left: .25rem !important; }
.ns-ms-2 { margin-left: .5rem !important; }
.ns-ms-3 { margin-left: 1rem !important; }
.ns-ms-auto { margin-left: auto !important; }

.ns-me-0 { margin-right: 0 !important; }
.ns-me-1 { margin-right: .25rem !important; }
.ns-me-2 { margin-right: .5rem !important; }
.ns-me-3 { margin-right: 1rem !important; }
.ns-me-auto { margin-right: auto !important; }

.ns-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Padding */
.ns-p-0 { padding: 0 !important; }
.ns-p-1 { padding: .25rem !important; }
.ns-p-2 { padding: .5rem !important; }
.ns-p-3 { padding: 1rem !important; }
.ns-p-4 { padding: 1.5rem !important; }
.ns-p-5 { padding: 3rem !important; }

.ns-px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.ns-px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.ns-px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.ns-py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.ns-py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.ns-py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

/* Sizing */
.ns-w-100 { width: 100% !important; }
.ns-w-auto { width: auto !important; }
.ns-h-100 { height: 100% !important; }
.ns-mw-100 { max-width: 100% !important; }

/* Text */
.ns-text-start { text-align: left !important; }
.ns-text-center { text-align: center !important; }
.ns-text-end { text-align: right !important; }
.ns-text-nowrap { white-space: nowrap !important; }
.ns-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-fw-normal { font-weight: 400 !important; }
.ns-fw-semibold { font-weight: 600 !important; }
.ns-fw-bold { font-weight: 700 !important; }

/* Responsive display/flex: ns-{bp}-{utility} */
@media (min-width: 768px) {
    .ns-sm-d-none { display: none !important; }
    .ns-sm-d-block { display: block !important; }
    .ns-sm-flex { display: flex !important; }
    .ns-sm-flex-row { flex-direction: row !important; }
    .ns-sm-flex-column { flex-direction: column !important; }
}

@media (min-width: 992px) {
    .ns-md-d-none { display: none !important; }
    .ns-md-d-block { display: block !important; }
    .ns-md-flex { display: flex !important; }
    .ns-md-flex-row { flex-direction: row !important; }
    .ns-md-flex-column { flex-direction: column !important; }
}

@media (min-width: 1200px) {
    .ns-lg-d-none { display: none !important; }
    .ns-lg-d-block { display: block !important; }
    .ns-lg-flex { display: flex !important; }
    .ns-lg-flex-row { flex-direction: row !important; }
    .ns-lg-flex-column { flex-direction: column !important; }
}
