/* ============================================================
   TOWPATH CREATIVE — UTILITIES
   utilities.css — helper and spacing utilities
   ============================================================ */

/* Display */
.d-block  { display: block; }
.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-none   { display: none; }

/* Flex helpers */
.align-center   { align-items: center; }
.align-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.flex-col       { flex-direction: column; }
.flex-1         { flex: 1; }

/* Spacing — margin */
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing — padding */
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl{ padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.pt-lg { padding-top: var(--space-lg); }
.pb-lg { padding-bottom: var(--space-lg); }

/* Width */
.w-full  { width: 100%; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 960px; }

/* Colors */
.bg-primary      { background: var(--color-primary); }
.bg-primary-dark { background: var(--color-primary-dark); }
.bg-linen        { background: var(--color-linen); }
.bg-light        { background: var(--color-bg-light); }
.bg-white        { background: var(--color-white); }
.bg-gold         { background: var(--color-gold); }

/* Border */
.border-top    { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.border-gold   { border: 2px solid var(--color-gold); }

/* Border radius */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-pill{ border-radius: var(--radius-pill); }

/* Shadow */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

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

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Aspect ratio */
.aspect-video { aspect-ratio: 16/9; }
.aspect-square { aspect-ratio: 1/1; }
.aspect-4-3  { aspect-ratio: 4/3; }

/* Object fit */
.object-cover  { object-fit: cover; }
.object-center { object-position: center; }

/* Divider line */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

.divider-gold {
  border-top-color: var(--color-gold);
  border-top-width: 2px;
}

/* Gold dot separator (for inline use) */
.separator::before {
  content: '·';
  margin: 0 var(--space-sm);
  color: var(--color-gold);
}

/* List with checks */
.check-list {
  list-style: none;
}

.check-list li {
  padding: var(--space-sm) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.check-list li::before {
  content: '✓';
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* Image placeholder */
.img-placeholder {
  background: var(--color-linen);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-stone);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 200px;
}

/* Responsive visibility */
@media (max-width: 768px) {
  .hide-mobile { display: none; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none; }
}

/* Number list (process / how-to) */
.number-list {
  counter-reset: number-list;
  list-style: none;
}

.number-list li {
  counter-increment: number-list;
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.number-list li:last-child { border-bottom: none; }

.number-list li::before {
  content: counter(number-list, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-gold);
  flex-shrink: 0;
  min-width: 36px;
  line-height: 1.1;
}

/* Gold accent divider between sections */
.gold-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 2px;
  margin: var(--space-md) 0;
}

.gold-rule.center { margin-left: auto; margin-right: auto; }