/* ===========================
   ALLIUM HEALTHCARE - 3-TIER SPACING SYSTEM
   Automatic, consistent spacing without utility classes
   =========================== */

/* ===========================
   SPACING VARIABLES
   Three tiers: Compact, Default, Spacious
   =========================== */
:root {
  /* ========== MOBILE SPACING (default) ========== */
  /* Padding for sections */
  --spacing-compact-mobile: 16px;
  --spacing-default-mobile: 24px;
  --spacing-spacious-mobile: 5rem; /* Standardized 80px for consistent mobile sections */
  
  /* Gaps for grids and flex containers */
  --gap-compact-mobile: 16px;
  --gap-default-mobile: 24px;
  --gap-spacious-mobile: 32px;
  
  /* Container padding (horizontal) */
  --container-padding-mobile: 24px;
  
  /* Element spacing (vertical space between elements) */
  --element-spacing-compact-mobile: 12px;
  --element-spacing-default-mobile: 20px;
  --element-spacing-spacious-mobile: 32px;

  /* Default spacing utility */
  --space-default: 68px;

  /* ========== TABLET SPACING (768px+) ========== */
  /* Padding for sections */
  --spacing-compact-tablet: 24px;
  --spacing-default-tablet: 40px;
  --spacing-spacious-tablet: clamp(6rem, 12vw, 8rem); /* Increased for sections */
  
  /* Gaps for grids and flex containers */
  --gap-compact-tablet: 20px;
  --gap-default-tablet: 32px;
  --gap-spacious-tablet: 48px;
  
  /* Container padding (horizontal) */
  --container-padding-tablet: 40px;
  
  /* Element spacing (vertical space between elements) */
  --element-spacing-compact-tablet: 16px;
  --element-spacing-default-tablet: 28px;
  --element-spacing-spacious-tablet: 48px;
  
  /* ========== DESKTOP SPACING (1024px+) ========== */
  /* Padding for sections */
  --spacing-compact-desktop: 32px;
  --spacing-default-desktop: 60px;
  --spacing-spacious-desktop: clamp(8rem, 15vw, 12rem); /* Matches original --space-2xl */
  
  /* Gaps for grids and flex containers */
  --gap-compact-desktop: 24px;
  --gap-default-desktop: 40px;
  --gap-spacious-desktop: 60px;
  
  /* Container padding (horizontal) */
  --container-padding-desktop: 40px;
  
  /* Element spacing (vertical space between elements) */
  --element-spacing-compact-desktop: 20px;
  --element-spacing-default-desktop: 40px;
  --element-spacing-spacious-desktop: 60px;
  
  /* ========== LARGE DESKTOP SPACING (1440px+) ========== */
  /* Gaps can be slightly larger on very wide screens */
  --gap-compact-large: 28px;
  --gap-default-large: 48px;
  --gap-spacious-large: 72px;
}

/* ===========================
   AUTOMATIC SPACING APPLICATION
   Based on class naming patterns
   =========================== */

/* ========== SECTIONS ========== */
/* Default spacing for all sections */
.section {
  padding-top: var(--spacing-default-mobile);
  padding-bottom: var(--spacing-default-mobile);
}

/* Compact spacing modifier */
.section--compact {
  padding-top: var(--spacing-compact-mobile);
  padding-bottom: var(--spacing-compact-mobile);
}

/* Spacious spacing modifier */
.section--spacious {
  padding-top: var(--spacing-spacious-mobile);
  padding-bottom: var(--spacing-spacious-mobile);
}

/* Special case: Hero sections often need custom padding */
.section--hero {
  padding: 0; /* Heroes are usually edge-to-edge */
}

/* ========== CONTAINERS ========== */
/* All containers get consistent horizontal padding */
[class*="container-"] {
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
  max-width: var(--container-max, 1600px);
  margin-left: auto;
  margin-right: auto;
}

/* ========== GRIDS ========== */
/* Default gap for all grids */
[class*="-grid"] {
  display: grid;
  gap: var(--gap-default-mobile);
}

/* Compact gap modifier */
[class*="-grid-compact"],
[class*="-grid"][class*="-compact"] {
  gap: var(--gap-compact-mobile);
}

/* Spacious gap modifier */
[class*="-grid-spacious"],
[class*="-grid"][class*="-spacious"] {
  gap: var(--gap-spacious-mobile);
}

/* ========== CARDS ========== */
/* All cards get consistent internal padding */
[class*="-card"] {
  padding: var(--spacing-default-mobile);
}

[class*="-card-compact"] {
  padding: var(--spacing-compact-mobile);
}

[class*="-card-spacious"] {
  padding: var(--spacing-spacious-mobile);
}

/* ========== ELEMENT SPACING ========== */
/* Automatic spacing between direct children */

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

/* ========== TABLET (768px+) ========== */
@media (min-width: 768px) {
  /* Sections */
  .section {
    padding-top: var(--spacing-default-tablet);
    padding-bottom: var(--spacing-default-tablet);
  }

  .section--compact {
    padding-top: var(--spacing-compact-tablet);
    padding-bottom: var(--spacing-compact-tablet);
  }

  .section--spacious {
    padding-top: var(--spacing-spacious-tablet);
    padding-bottom: var(--spacing-spacious-tablet);
  }
  
  /* Containers */
  [class*="container-"] {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
  
  /* Grids */
  [class*="-grid"] {
    gap: var(--gap-default-tablet);
  }
  
  [class*="-grid-compact"],
  [class*="-grid"][class*="-compact"] {
    gap: var(--gap-compact-tablet);
  }
  
  [class*="-grid-spacious"],
  [class*="-grid"][class*="-spacious"] {
    gap: var(--gap-spacious-tablet);
  }
  
  /* Cards */
  [class*="-card"] {
    padding: var(--spacing-default-tablet);
  }
  
  [class*="-card-compact"] {
    padding: var(--spacing-compact-tablet);
  }
  
  [class*="-card-spacious"] {
    padding: var(--spacing-spacious-tablet);
  }
  
  /* Element spacing */
  .space-default > * + * {
    margin-top: var(--element-spacing-default-tablet);
  }
  
  .space-compact > * + * {
    margin-top: var(--element-spacing-compact-tablet);
  }
  
  .space-spacious > * + * {
    margin-top: var(--element-spacing-spacious-tablet);
  }
}

/* ========== DESKTOP (1024px+) ========== */
@media (min-width: 1024px) {
  /* Sections */
  .section {
    padding-top: var(--spacing-default-desktop);
    padding-bottom: var(--spacing-default-desktop);
  }

  .section--compact {
    padding-top: var(--spacing-compact-desktop);
    padding-bottom: var(--spacing-compact-desktop);
  }

  .section--spacious {
    padding-top: var(--spacing-spacious-desktop);
    padding-bottom: var(--spacing-spacious-desktop);
  }
  
  /* Containers */
  [class*="container-"] {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
  
  /* Grids */
  [class*="-grid"] {
    gap: var(--gap-default-desktop);
  }
  
  [class*="-grid-compact"],
  [class*="-grid"][class*="-compact"] {
    gap: var(--gap-compact-desktop);
  }
  
  [class*="-grid-spacious"],
  [class*="-grid"][class*="-spacious"] {
    gap: var(--gap-spacious-desktop);
  }
  
  /* Cards */
  [class*="-card"] {
    padding: var(--spacing-default-desktop);
  }
  
  [class*="-card-compact"] {
    padding: var(--spacing-compact-desktop);
  }
  
  [class*="-card-spacious"] {
    padding: var(--spacing-spacious-desktop);
  }
  
  /* Element spacing */
  .space-default > * + * {
    margin-top: var(--element-spacing-default-desktop);
  }
  
  .space-compact > * + * {
    margin-top: var(--element-spacing-compact-desktop);
  }
  
  .space-spacious > * + * {
    margin-top: var(--element-spacing-spacious-desktop);
  }
  
  /* Card grid specific - override for 5 columns */
  .card-grid-compact .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px !important;
    transform: none !important;
  }

  .card-grid-compact .swiper-slide {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .card-grid-compact .swiper-scrollbar {
    display: none !important;
  }

  .card-grid-compact {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
}

/* ========== LARGE DESKTOP (1440px+) ========== */
@media (min-width: 1440px) {
  /* Slightly larger gaps on very wide screens */
  [class*="-grid"] {
    gap: var(--gap-default-large);
  }
  
  [class*="-grid-compact"],
  [class*="-grid"][class*="-compact"] {
    gap: var(--gap-compact-large);
  }
  
  [class*="-grid-spacious"],
  [class*="-grid"][class*="-spacious"] {
    gap: var(--gap-spacious-large);
  }
}

/* ===========================
   UTILITY OVERRIDES
   For special cases where automatic spacing needs adjustment
   =========================== */
.no-padding { padding: 0 !important; }
.no-padding-top { padding-top: 0 !important; }
.no-padding-bottom { padding-bottom: 0 !important; }
.no-gap { gap: 0 !important; }
.no-margin { margin: 0 !important; }
.no-margin-top { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* Margin bottom utilities */
.margin-bottom-default {
  margin-bottom: var(--space-default);
}

/* Text alignment utilities */
.text-center {
  text-align: center;
}

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

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

/* Text transform utilities */
.text-uppercase {
  text-transform: uppercase;
}

/* Additional utility classes */
.max-width-900 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.cursor-pointer {
  cursor: pointer !important;
}

.link-margin-top {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Margin top utilities */
.margin-top-lg {
  margin-top: var(--space-lg);
}