/*
 * HOSTREND GLOBAL SPACING & LAYOUT SYSTEM v1.0
 *
 * Foundation: 8px spacing grid + 4px micro-step.
 * Containers, gutters, section rhythm and responsive grid are centralized
 * here. Component-specific layout remains inside component CSS.
 */

.host-container,
.container {
  width: min(100%, var(--container-md));
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

.host-container--xl {
  width: min(100%, var(--container-xl));
}

.host-container--wide {
  width: min(100%, var(--container-lg));
}

.host-container--narrow {
  width: min(100%, var(--container-sm));
}

.host-container--content {
  width: min(100%, var(--container-content));
}

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

.host-content-measure {
  width: min(100%, var(--content-measure));
}

/* Section rhythm helpers. */
.host-section {
  width: 100%;
  padding-block: var(--section-space-normal);
}

.host-section--hero {
  padding-block: var(--section-space-hero);
}

.host-section--large {
  padding-block: var(--section-space-large);
}

.host-section--small {
  padding-block: var(--section-space-small);
}

.host-section--compact {
  padding-block: var(--section-space-small);
}

.host-section--spacious {
  padding-block: var(--section-space-hero);
}

/* Standard responsive 12/8/4 column grid. */
.host-layout-grid,
.host-grid--system {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr));
  column-gap: var(--grid-column-gap);
  row-gap: var(--grid-row-gap);
  min-width: 0;
}

.host-grid--12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.host-grid--8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

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

/* Existing grid helpers retained for compatibility. */
.host-grid {
  display: grid;
  min-width: 0;
}

.host-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.host-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.host-grid--gap-xs { gap: var(--space-8); }
.host-grid--gap-sm { gap: var(--space-16); }
.host-grid--gap-md { gap: var(--space-32); }
.host-grid--gap-lg { gap: var(--space-48); }

/* Token-based gap utilities. */
.host-gap-4 { gap: var(--space-4); }
.host-gap-8 { gap: var(--space-8); }
.host-gap-12 { gap: var(--space-12); }
.host-gap-16 { gap: var(--space-16); }
.host-gap-24 { gap: var(--space-24); }
.host-gap-32 { gap: var(--space-32); }
.host-gap-48 { gap: var(--space-48); }
.host-gap-64 { gap: var(--space-64); }

/* Flex layout primitives. */
.host-stack {
  display: flex;
  flex-direction: column;
  gap: var(--element-space);
}

.host-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}

.host-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-48);
  min-width: 0;
}

/* Component padding primitives. */
.host-card-padding-sm { padding: var(--card-padding-small); }
.host-card-padding { padding: var(--card-padding-default); }
.host-card-padding-lg { padding: var(--card-padding-large); }

.host-element-stack > * + * {
  margin-block-start: var(--element-space);
}

@media (max-width: 1023px) {
  .host-container,
  .container {
    padding-inline: var(--gutter-tablet);
  }

  .host-layout-grid,
  .host-grid--system {
    grid-template-columns: repeat(var(--grid-columns-tablet), minmax(0, 1fr));
  }

  .host-section {
    padding-block: var(--section-space-normal-tablet);
  }

  .host-section--hero {
    padding-block: var(--section-space-hero-tablet);
  }

  .host-section--large {
    padding-block: var(--section-space-large-tablet);
  }

  .host-section--small,
  .host-section--compact {
    padding-block: var(--section-space-small-tablet);
  }

  .host-section--spacious {
    padding-block: var(--section-space-hero-tablet);
  }

  .host-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .host-container,
  .container {
    padding-inline: var(--gutter-mobile);
  }

  .host-layout-grid,
  .host-grid--system {
    grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
    column-gap: var(--grid-column-gap-mobile);
    row-gap: var(--grid-row-gap-mobile);
  }

  .host-section {
    padding-block: var(--section-space-normal-mobile);
  }

  .host-section--hero {
    padding-block: var(--section-space-hero-mobile);
  }

  .host-section--large {
    padding-block: var(--section-space-large-mobile);
  }

  .host-section--small,
  .host-section--compact {
    padding-block: var(--section-space-small-mobile);
  }

  .host-section--spacious {
    padding-block: var(--section-space-hero-mobile);
  }

  .host-split {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .host-cluster {
    gap: var(--space-12);
  }

  .host-grid--2,
  .host-grid--3,
  .host-grid--4 {
    grid-template-columns: 1fr;
  }
}