/* ==========================================================================
   VIU DESIGN SYSTEM — 05 UTILITIES
   Layout helpers + WordPress alignment conventions (.alignfull / .alignwide).
   ========================================================================== */

/* Content frame — the 1440px max-width band with responsive gutters.
   Mirrors WP's content/wide width model; pair with .alignfull bands. */
.container {
  width: 100%;
  max-width: var(--viu-container-max);
  margin-inline: auto;
  padding-inline: var(--viu-gutter);
}

@media (min-width: 640px) {
  .container { padding-inline: var(--viu-gutter-sm); }
}
@media (min-width: 768px) {
  .container { padding-inline: var(--viu-gutter-md); }
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--viu-gutter-lg); }
}

/* WordPress alignment: full-bleed colored band that still centers its content
   via an inner .container. Used on hero, stats, and dark sections. */
.alignfull {
  width: 100%;
}

/* Vertical section rhythm — discrete breakpoints matching the source's
   py-12 md:py-16 lg:py-20 (48/64/80) and py-16 md:py-20 (64/80). A clamp()
   under-pads at md/lg, so we use explicit steps. */
.section    { padding-block: var(--viu-space-12); }  /* 48 */
.section--lg { padding-block: var(--viu-space-16); } /* 64 */
@media (min-width: 768px) {
  .section    { padding-block: var(--viu-space-16); } /* 64 */
  .section--lg { padding-block: var(--viu-space-20); }/* 80 */
}
@media (min-width: 1024px) {
  .section { padding-block: var(--viu-space-20); }    /* 80 */
}

/* Background band helpers */
.bg-surface     { background: var(--viu-color-surface); }
.bg-surface-alt { background: var(--viu-color-surface-alt); }
.bg-surface-alt-2 { background: var(--viu-color-surface-alt-2); }
.bg-primary     { background: var(--viu-color-primary); }
.bg-primary-dark { background: var(--viu-color-primary-dark); }

/* Accessibility helper */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced-motion: neutralise all reveal/parallax/transition motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .viu-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}