/* =========================================================
   RBX Layout Framework
   Dependency-Free Responsive Utility Layout System
   Version: 1.0
   ========================================================= */

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

:root {

  /* container widths */
  --rbx-container-sm: 540px;
  --rbx-container-md: 720px;
  --rbx-container-lg: 960px;
  --rbx-container-xl: 1140px;
  --rbx-container-xxl: 1320px;

  /* spacing scale */
  --rbx-space-0: 0;
  --rbx-space-1: .25rem;
  --rbx-space-2: .5rem;
  --rbx-space-3: .75rem;
  --rbx-space-4: 1rem;
  --rbx-space-5: 1.5rem;
  --rbx-space-6: 2rem;
  --rbx-space-7: 3rem;
  --rbx-space-8: 4rem;

  /* gap defaults */
  --rbx-gap: 1.5rem;

  /* border radius */
  --rbx-radius-sm: 4px;
  --rbx-radius-md: 8px;
  --rbx-radius-lg: 16px;

}

/* =========================================================
   SAFE SCOPING
   ========================================================= */

.rbx-scope,
.rbx-scope * {
  box-sizing: border-box;
}

/* =========================================================
   CONTAINERS
   ========================================================= */

.rbx-container,
.rbx-container-sm,
.rbx-container-md,
.rbx-container-lg,
.rbx-container-xl,
.rbx-container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}

.rbx-container-sm {
  max-width: var(--rbx-container-sm);
}

.rbx-container-md {
  max-width: var(--rbx-container-md);
}

.rbx-container-lg {
  max-width: var(--rbx-container-lg);
}

.rbx-container-xl {
  max-width: var(--rbx-container-xl);
}

.rbx-container {
  max-width: var(--rbx-container-xxl);
}

.rbx-container-fluid {
  max-width: 100%;
}

/* =========================================================
   FLEX ROW SYSTEM
   ========================================================= */

.rbx-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rbx-gap);
}

/* auto columns */

.rbx-col {
  flex: 1 1 0;
  min-width: 0;
}

/* fixed columns */

.rbx-col-1  { flex: 0 0 calc(8.333% - var(--rbx-gap)); }
.rbx-col-2  { flex: 0 0 calc(16.666% - var(--rbx-gap)); }
.rbx-col-3  { flex: 0 0 calc(25% - var(--rbx-gap)); }
.rbx-col-4  { flex: 0 0 calc(33.333% - var(--rbx-gap)); }
.rbx-col-5  { flex: 0 0 calc(41.666% - var(--rbx-gap)); }
.rbx-col-6  { flex: 0 0 calc(50% - var(--rbx-gap)); }
.rbx-col-7  { flex: 0 0 calc(58.333% - var(--rbx-gap)); }
.rbx-col-8  { flex: 0 0 calc(66.666% - var(--rbx-gap)); }
.rbx-col-9  { flex: 0 0 calc(75% - var(--rbx-gap)); }
.rbx-col-10 { flex: 0 0 calc(83.333% - var(--rbx-gap)); }
.rbx-col-11 { flex: 0 0 calc(91.666% - var(--rbx-gap)); }
.rbx-col-12 { flex: 0 0 100%; }

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

.rbx-grid {
  display: grid;
  gap: var(--rbx-gap);
}

.rbx-grid-1 {
  grid-template-columns: 1fr;
}

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

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

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

.rbx-grid-auto {
  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));
}

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

.rbx-d-flex {
  display: flex;
}

.rbx-flex-wrap {
  flex-wrap: wrap;
}

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

.rbx-justify-start {
  justify-content: flex-start;
}

.rbx-justify-center {
  justify-content: center;
}

.rbx-justify-end {
  justify-content: flex-end;
}

.rbx-justify-between {
  justify-content: space-between;
}

.rbx-align-start {
  align-items: flex-start;
}

.rbx-align-center {
  align-items: center;
}

.rbx-align-end {
  align-items: flex-end;
}

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

.rbx-order-1 { order: 1; }
.rbx-order-2 { order: 2; }
.rbx-order-3 { order: 3; }
.rbx-order-4 { order: 4; }
.rbx-order-5 { order: 5; }

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

.rbx-gap-0 { gap: var(--rbx-space-0); }
.rbx-gap-1 { gap: var(--rbx-space-1); }
.rbx-gap-2 { gap: var(--rbx-space-2); }
.rbx-gap-3 { gap: var(--rbx-space-3); }
.rbx-gap-4 { gap: var(--rbx-space-4); }
.rbx-gap-5 { gap: var(--rbx-space-5); }
.rbx-gap-6 { gap: var(--rbx-space-6); }

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

/* margin */

.rbx-m-0 { margin: 0; }
.rbx-m-1 { margin: var(--rbx-space-1); }
.rbx-m-2 { margin: var(--rbx-space-2); }
.rbx-m-3 { margin: var(--rbx-space-3); }
.rbx-m-4 { margin: var(--rbx-space-4); }
.rbx-m-5 { margin: var(--rbx-space-5); }

.rbx-mt-0 { margin-top: 0; }
.rbx-mt-1 { margin-top: var(--rbx-space-1); }
.rbx-mt-2 { margin-top: var(--rbx-space-2); }
.rbx-mt-3 { margin-top: var(--rbx-space-3); }
.rbx-mt-4 { margin-top: var(--rbx-space-4); }
.rbx-mt-5 { margin-top: var(--rbx-space-5); }

.rbx-mb-0 { margin-bottom: 0; }
.rbx-mb-1 { margin-bottom: var(--rbx-space-1); }
.rbx-mb-2 { margin-bottom: var(--rbx-space-2); }
.rbx-mb-3 { margin-bottom: var(--rbx-space-3); }
.rbx-mb-4 { margin-bottom: var(--rbx-space-4); }
.rbx-mb-5 { margin-bottom: var(--rbx-space-5); }

/* padding */

.rbx-p-0 { padding: 0; }
.rbx-p-1 { padding: var(--rbx-space-1); }
.rbx-p-2 { padding: var(--rbx-space-2); }
.rbx-p-3 { padding: var(--rbx-space-3); }
.rbx-p-4 { padding: var(--rbx-space-4); }
.rbx-p-5 { padding: var(--rbx-space-5); }

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

.rbx-text-center {
  text-align: center;
}

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

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

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

.rbx-w-100 {
  width: 100%;
}

.rbx-h-100 {
  height: 100%;
}

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

.rbx-hidden {
  display: none;
}

.rbx-block {
  display: block;
}

/* =========================================================
   CARD / CONTENT HELPERS
   ========================================================= */

.rbx-card {
  padding: 1.5rem;
  border-radius: var(--rbx-radius-md);
  background: #fff;
}

.rbx-rounded {
  border-radius: var(--rbx-radius-md);
}

.rbx-shadow-sm {
  box-shadow:
    0 2px 4px rgba(0,0,0,.06);
}

.rbx-shadow-md {
  box-shadow:
    0 6px 18px rgba(0,0,0,.12);
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* sm */
@media (min-width: 576px) {

  .rbx-col-sm-6 {
    flex: 0 0 calc(50% - var(--rbx-gap));
  }

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

}

/* md */
@media (min-width: 768px) {

  .rbx-col-md-4 {
    flex: 0 0 calc(33.333% - var(--rbx-gap));
  }

  .rbx-col-md-6 {
    flex: 0 0 calc(50% - var(--rbx-gap));
  }

  .rbx-col-md-8 {
    flex: 0 0 calc(66.666% - var(--rbx-gap));
  }

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

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

}

/* lg */
@media (min-width: 992px) {

  .rbx-col-lg-3 {
    flex: 0 0 calc(25% - var(--rbx-gap));
  }

  .rbx-col-lg-4 {
    flex: 0 0 calc(33.333% - var(--rbx-gap));
  }

  .rbx-col-lg-6 {
    flex: 0 0 calc(50% - var(--rbx-gap));
  }

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

}

/* xl */
@media (min-width: 1200px) {

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

}

/* =========================================================
   MOBILE HELPERS
   ========================================================= */

@media (max-width: 767px) {

  .rbx-mobile-stack {
    flex-direction: column;
  }

  .rbx-mobile-full {
    flex: 0 0 100%;
  }

  .rbx-hide-mobile {
    display: none;
  }

}

/* =========================================================
   END
   ========================================================= */
   
   




/* =========================================================
   DOCUMENT CARD COMPONENTS
   Version: 1.0
   ========================================================= */

.rbx-doc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;

  background: #f7f3e7;

  border: 1px solid #c9bfa8;

  border-radius: 4px;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;

}

.rbx-doc-card:hover {

  transform: translateY(-2px);

  border-color: #b85b1d;

  box-shadow:
    0 10px 24px rgba(0,0,0,.10);

}

.rbx-doc-title {

  margin: 0 0 1rem;

  font-size: 1.05rem;

  line-height: 1.35;

  text-align: center;

  color: #6a4b2f;

  font-weight: 700;

  min-height: 3.5rem;

}

.rbx-doc-image-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1rem;

  background: #fff;

  border: 1px solid #d8cfbb;

}

.rbx-doc-image {

  width: 100%;

  max-width: 220px;

  height: auto;

  object-fit: contain;

  display: block;

}

.rbx-doc-spacer {

  flex-grow: 1;

}

.rbx-doc-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-top: 1.25rem;

  padding:
    .85rem
    1.25rem;

  background: #b85b1d;

  color: #fff;

  text-decoration: none;

  text-transform: uppercase;

  font-size: .8rem;

  font-weight: 700;

  letter-spacing: .04em;

  border-radius: 2px;

  transition:
    background .2s ease,
    transform .2s ease;

}

.rbx-doc-button:hover {

  background: #963f0f;

  transform: translateY(-1px);

}

/* =========================================================
   RESPONSIVE TUNING
   ========================================================= */

@media (max-width: 767px) {

  .rbx-doc-card {

    padding: 1rem;

  }

}
/* =========================================================
   END
   ========================================================= */