/* Stone Collective - Utility Classes */

/* ========================================
   SHADOWS
   ======================================== */

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

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

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

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

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

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

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

/* ========================================
   BORDER RADIUS
   ======================================== */

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

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

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

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

.page-wrapper {
  width: 100%;
  min-height: 100vh;
}

.main-wrapper {
  width: 100%;
}

.container-small {
  max-width: var(--container-small);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.container-medium {
  max-width: var(--container-medium);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.container-large {
  max-width: var(--container-large);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ========================================
   SECTION PADDING
   ======================================== */

.padding-section-small {
  padding-top: var(--padding-section-small);
  padding-bottom: var(--padding-section-small);
}

.padding-section-medium {
  padding-top: var(--padding-section-medium);
  padding-bottom: var(--padding-section-medium);
}

.padding-section-large {
  padding-top: var(--padding-section-large);
  padding-bottom: var(--padding-section-large);
}

.padding-global {
  padding-left: var(--padding-global);
  padding-right: var(--padding-global);
}

/* ========================================
   BUTTON GROUP
   ======================================== */

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* ========================================
   MAX WIDTHS
   ======================================== */

.max-width-full {
  max-width: 100%;
}

.max-width-xxlarge {
  max-width: 80rem; /* 1280px */
}

.max-width-xlarge {
  max-width: 64rem; /* 1024px */
}

.max-width-large {
  max-width: 48rem; /* 768px */
}

.max-width-medium {
  max-width: 32rem; /* 512px */
}

.max-width-small {
  max-width: 24rem; /* 384px */
}

.max-width-xsmall {
  max-width: 16rem; /* 256px */
}

.max-width-xxsmall {
  max-width: 12rem; /* 192px */
}

/* Responsive max-widths */
@media (max-width: 991px) {
  .max-width-full-tablet {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .max-width-full-mobile-landscape {
    max-width: 100%;
  }
}

@media (max-width: 479px) {
  .max-width-full-mobile-portrait {
    max-width: 100%;
  }
}

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

/* Padding values */
.padding-0 {
  padding: 0;
}

.padding-tiny {
  padding: var(--spacing-tiny);
}

.padding-xxsmall {
  padding: var(--spacing-xxsmall);
}

.padding-xsmall {
  padding: var(--spacing-xsmall);
}

.padding-small {
  padding: var(--spacing-small);
}

.padding-medium {
  padding: var(--spacing-medium);
}

.padding-large {
  padding: var(--spacing-large);
}

.padding-xlarge {
  padding: var(--spacing-xlarge);
}

.padding-xxlarge {
  padding: var(--spacing-xxlarge);
}

.padding-huge {
  padding: var(--spacing-huge);
}

.padding-xhuge {
  padding: var(--spacing-xhuge);
}

.padding-xxhuge {
  padding: var(--spacing-xxhuge);
}

/* Padding directions - Vertical */
.padding-vertical {
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
}

.padding-top {
  padding-top: var(--spacing-medium);
}

.padding-bottom {
  padding-bottom: var(--spacing-medium);
}

/* Padding directions - Horizontal */
.padding-horizontal {
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
}

.padding-left {
  padding-left: var(--spacing-medium);
}

.padding-right {
  padding-right: var(--spacing-medium);
}

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

.margin-0 {
  margin: 0;
}

.margin-tiny {
  margin: var(--spacing-tiny);
}

.margin-xxsmall {
  margin: var(--spacing-xxsmall);
}

.margin-xsmall {
  margin: var(--spacing-xsmall);
}

.margin-small {
  margin: var(--spacing-small);
}

.margin-medium {
  margin: var(--spacing-medium);
}

.margin-large {
  margin: var(--spacing-large);
}

.margin-xlarge {
  margin: var(--spacing-xlarge);
}

.margin-xxlarge {
  margin: var(--spacing-xxlarge);
}

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

.spacer-tiny {
  height: var(--spacing-tiny);
}

.spacer-xxsmall {
  height: var(--spacing-xxsmall);
}

.spacer-xsmall {
  height: var(--spacing-xsmall);
}

.spacer-small {
  height: var(--spacing-small);
}

.spacer-medium {
  height: var(--spacing-medium);
}

.spacer-large {
  height: var(--spacing-large);
}

.spacer-xlarge {
  height: var(--spacing-xlarge);
}

.spacer-xxlarge {
  height: var(--spacing-xxlarge);
}

.spacer-huge {
  height: var(--spacing-huge);
}

.spacer-xhuge {
  height: var(--spacing-xhuge);
}

.spacer-xxhuge {
  height: var(--spacing-xxhuge);
}

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

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

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

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

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

.hide {
  display: none;
}

.hide-tablet {
  display: block;
}

.hide-mobile-landscape {
  display: block;
}

.hide-mobile-portrait {
  display: block;
}

@media (max-width: 991px) {
  .hide-tablet {
    display: none;
  }
}

@media (max-width: 767px) {
  .hide-mobile-landscape {
    display: none;
  }
}

@media (max-width: 479px) {
  .hide-mobile-portrait {
    display: none;
  }
}