/* ==========================================================================
   Aura Theme - Main Stylesheet
   ========================================================================== */

/* ==========================================================================
   Base Styles
   ========================================================================== */

@import 'base/_variables.css';
@import 'base/_reset.css';
@import 'base/_typography.css';

/* ==========================================================================
   Layout Components
   ========================================================================== */

@import 'layout/_header.css';
@import 'layout/_footer.css';

/* ==========================================================================
   Component Styles
   ========================================================================== */

@import 'components/_hero.css';
@import 'components/_services.css';
@import 'components/_about.css';
@import 'components/_team.css';
@import 'components/_pricing.css';
@import 'components/_partners.css';
@import 'components/_contact.css';
@import 'components/_vouchers.css';
@import 'templates/_single-events.css';

/* ==========================================================================
   Utility Classes
   ========================================================================== */

@import 'utilities/_animations.css';
@import 'utilities/_micromodal.css';

/* ==========================================================================
   Global Layout
   ========================================================================== */

section {
  display: flex;
}

#page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Container System
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--container-padding-desktop);
  }
}

/* ==========================================================================
   Grid System
   ========================================================================== */

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

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

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

@media (max-width: 767px) {
  .grid--2-cols,
  .grid--3-cols {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Button System
   ========================================================================== */

.button {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-light);
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-align: center;
}

a.button:hover {
  color: var(--color-white);
}

.button--primary {
  background: var(--gradient-primary);
  background-size: 200% 200%;
  background-position: 0% 0%;
  color: var(--color-white);
  transition: all var(--transition-normal);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-lg);
}

.button--primary:hover {
  background-position: 50% 50%;
  transform: translateY(-2px);
}

.button--outline {
  background: transparent;
  border: 3px solid var(--color-accent);
  color: var(--color-accent);
}

.button--outline:hover {
  color: var(--color-white);
}

/* ==========================================================================
   Card System
   ========================================================================== */

.card {
  background-color: var(--color-soft);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  padding: var(--spacing-lg);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

.form-input {
  padding: var(--spacing-md);
  border: 1px solid var(--color-accent-light);
  border-radius: var(--border-radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast);
  width: 100%;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-xs); }
.pt-2 { padding-top: var(--spacing-sm); }
.pt-3 { padding-top: var(--spacing-md); }
.pt-4 { padding-top: var(--spacing-lg); }
.pt-5 { padding-top: var(--spacing-xl); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-xs); }
.pb-2 { padding-bottom: var(--spacing-sm); }
.pb-3 { padding-bottom: var(--spacing-md); }
.pb-4 { padding-bottom: var(--spacing-lg); }
.pb-5 { padding-bottom: var(--spacing-xl); }

/* Additional spacing utilities */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-2 { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-3 { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-4 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-5 { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-2 { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-3 { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-4 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-5 { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-2 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-3 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-4 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-5 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

/* ==========================================================================
   Text Utilities
   ========================================================================== */

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

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

.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

/* ==========================================================================
   Display Utilities
   ========================================================================== */

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }

/* Additional display utilities */
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.gap-0 { gap: 0; }
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }
.gap-5 { gap: var(--spacing-xl); }

.w-100 { width: 100%; }
.h-100 { height: 100%; }
.min-h-100 { min-height: 100vh; }

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */

@media (max-width: 767px) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
  .d-md-flex { display: flex; }
  .d-md-grid { display: grid; }
}

@media (min-width: 768px) {
  .d-sm-none { display: none; }
  .d-sm-block { display: block; }
  .d-sm-flex { display: flex; }
  .d-sm-grid { display: grid; }
}

/* ==========================================================================
   Section Utilities
   ========================================================================== */

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

@media (max-width: 767px) {
  .section {
    padding: var(--section-padding-mobile);
  }
}

/* ==========================================================================
   Separator Utilities
   ========================================================================== */

.separator {
  overflow: hidden;
  line-height: 0;
}

.separator svg {
  display: block;
  width: 100%;
  height: 100px;
}

.separator--organic svg {
  height: 120px;
}