/*
 * HOSTREND GLOBAL RESPONSIVE SYSTEM v1.1
 *
 * Global responsive primitives only. Component-specific breakpoints and
 * visual behavior remain inside their own component stylesheets.
 * Breakpoints:
 *   Wide desktop  : 1440px+
 *   Desktop       : 1280px–1439px
 *   Tablet        : 768px–1279px
 *   Mobile        : 0–767px
 *   Small mobile  : 0–389px
 */

/* Prevent long content from forcing a horizontal viewport overflow. */
:where(p, h1, h2, h3, h4, h5, h6, a, li, td, th, label, span) {
  overflow-wrap: break-word;
}

:where(input, select, textarea, button) {
  max-width: 100%;
}

/* Reusable responsive layout helpers. */
.stack-mobile {
  display: flex;
  gap: var(--space-16);
}

.host-responsive-stack {
  display: flex;
  gap: var(--space-32);
}

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

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

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

.host-flex-wrap {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.host-media-fluid {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.host-no-overflow {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.host-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Responsive visibility helpers. */
.host-hide-mobile,
.host-hide-tablet,
.host-hide-desktop,
.host-show-mobile,
.host-show-tablet,
.host-show-desktop {
  display: none !important;
}

.host-show-desktop {
  display: initial !important;
}

/* Tablet: 768px–1279px */
@media (max-width: 1279px) {
  .host-responsive-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .host-show-desktop {
    display: none !important;
  }

  .host-show-tablet {
    display: initial !important;
  }

  .host-hide-tablet {
    display: none !important;
  }

  .host-responsive-stack {
    gap: var(--space-24);
  }
}

/* Mobile: below 768px */
@media (max-width: 767px) {
  .stack-mobile,
  .host-responsive-stack {
    flex-direction: column;
  }

  .host-responsive-stack {
    gap: var(--space-16);
  }

  .host-responsive-grid,
  .host-responsive-grid--3,
  .host-responsive-grid--4 {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .host-show-desktop,
  .host-show-tablet {
    display: none !important;
  }

  .host-show-mobile {
    display: initial !important;
  }

  .host-hide-mobile {
    display: none !important;
  }

  .host-scroll-x {
    max-width: calc(100vw - (2 * var(--container-padding-mobile)));
  }
}

/* Small mobile: below 390px */
@media (max-width: 389px) {
  .host-scroll-x {
    max-width: calc(100vw - 24px);
  }
}

/* Fluid type utilities for exceptional content only.
 * Primary site typography remains controlled by tokens.css. */
.host-fluid-heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.host-fluid-subheading {
  font-size: clamp(2rem, 3.5vw, 3rem);
}

/*
 * COMPONENT INTEGRATION CONTRACT
 *
 * This stylesheet provides platform-level responsive primitives. Approved
 * components retain their own responsive rules in their component stylesheets:
 *   - components/header/header.css
 *   - components/footer/footer.css
 *   - components/buttons/button/button.css
 *
 * Load order on pages must be:
 *   global tokens -> global -> typography -> layout -> ui -> responsive
 *   -> component styles
 *
 * This keeps the global responsive system available to every component while
 * preserving the locked component-specific responsive behavior.
 */

/* Accessibility: never remove keyboard focus because of responsive styling. */
@media (prefers-reduced-motion: reduce) {
  .host-scroll-x {
    scroll-behavior: auto;
  }
}