/**
 * HES spacing & grid - container, 12-column grid, and section rhythm.
 * Every value below is a Layer 1 spacing token; nothing here is a new
 * raw pixel value.
 *
 * Breakpoint values match Layer 1's --hes-breakpoint-* tokens exactly
 * (480/768/1024/1280px) - written as literal pixels in the @media
 * conditions below because CSS custom properties cannot be read inside
 * a media query condition (see tokens.css's file header).
 */

:root {
  /* Container - max-width range calibrated against the ConnectWise
     reference's ~1200px container (not its literal value). Deliberately
     less than the "wide" breakpoint token (1280px) so there's always a
     little edge margin before content hits full container width. */
  --hes-container-max-width: 1200px;
  --hes-container-gutter: var(--hes-space-4);

  /* Grid gutter - responsive via the media queries below, not a single
     fixed number. */
  --hes-grid-gutter: var(--hes-space-4);

  /* Section vertical rhythm - a scale of allowed values, not one rigid
     number. The ConnectWise reference showed real section padding
     varying (40/60/70/80px-ish) rather than following a single strict
     rhythm; --hes-section-* names three sanctioned choices instead of
     one, so a component picks the right weight for its content without
     inventing a new value. */
  --hes-section-padding-tight: var(--hes-space-7);
  --hes-section-padding-default: var(--hes-space-8);
  --hes-section-padding-loose: var(--hes-space-9);
}

@media (min-width: 768px) {
  :root { --hes-grid-gutter: var(--hes-space-5); }
}

@media (min-width: 1024px) {
  :root { --hes-grid-gutter: var(--hes-space-6); }
}

.hes-container {
  max-width: var(--hes-container-max-width);
  margin-inline: auto;
  padding-inline: var(--hes-container-gutter);
}

.hes-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--hes-grid-gutter);
}

/* Column span utilities - span-1 through span-12 */
.hes-col-1 { grid-column: span 1; }
.hes-col-2 { grid-column: span 2; }
.hes-col-3 { grid-column: span 3; }
.hes-col-4 { grid-column: span 4; }
.hes-col-5 { grid-column: span 5; }
.hes-col-6 { grid-column: span 6; }
.hes-col-7 { grid-column: span 7; }
.hes-col-8 { grid-column: span 8; }
.hes-col-9 { grid-column: span 9; }
.hes-col-10 { grid-column: span 10; }
.hes-col-11 { grid-column: span 11; }
.hes-col-12 { grid-column: span 12; }

/* Below tablet, every column collapses to full width - stack, don't
   shrink each column's contents into an unreadable strip. */
@media (max-width: 767px) {
  .hes-grid > [class*="hes-col-"] { grid-column: span 12; }
}

.hes-section--tight { padding-block: var(--hes-section-padding-tight); }
.hes-section--default { padding-block: var(--hes-section-padding-default); }
.hes-section--loose { padding-block: var(--hes-section-padding-loose); }

/* Two adjacent sections of the same rhythm each pad both top and
   bottom, doubling the visual gap between them (bottom padding of the
   first + top padding of the second). Confirmed on the homepage: the
   feature-rows section ("Why Choose Us?") sits directly above the
   Case Studies section, showing a 128px gap instead of the intended
   64px. Collapse the second section's top padding so adjacent
   sections read as one consistent rhythm, not doubled stacked panels. */
.hes-section--default + .hes-section--default {
  padding-top: 0;
}