/* ==========================================================================
   LEAP.SOLUTIONS — UTILITIES
   File: utilities.css
   Small helper classes that complement Bootstrap's utility set and the
   design tokens defined in style.css.
   ========================================================================== */

/* Spacing helpers keyed to the section rhythm */
.py-section { padding-block: var(--section-py); }
.py-section-sm { padding-block: var(--section-py-sm); }
.pt-section { padding-top: var(--section-py); }
.pb-section { padding-bottom: var(--section-py); }
.mt-section { margin-top: var(--section-py); }
.mb-section { margin-bottom: var(--section-py); }

.gap-brand-xs { gap: var(--gap-xs) !important; }
.gap-brand-sm { gap: var(--gap-sm) !important; }
.gap-brand-md { gap: var(--gap-md) !important; }
.gap-brand-lg { gap: var(--gap-lg) !important; }
.gap-brand-xl { gap: var(--gap-xl) !important; }

/* Backgrounds */
.bg-brand-primary { background-color: var(--color-primary) !important; }
.bg-brand-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-brand-surface { background-color: var(--color-surface) !important; }
.bg-brand-secondary { background-color: var(--color-secondary) !important; }
.bg-brand-gradient {
  background: linear-gradient(120deg, var(--color-primary-darker), var(--color-primary) 55%, var(--color-primary-light)) !important;
}

/* Borders / radius */
.rounded-brand-sm { border-radius: var(--radius-sm) !important; }
.rounded-brand-md { border-radius: var(--radius-md) !important; }
.rounded-brand-lg { border-radius: var(--radius-lg) !important; }
.rounded-brand-xl { border-radius: var(--radius-xl) !important; }
.border-brand { border: 1px solid var(--color-border) !important; }
.border-brand-gold { border-color: var(--color-secondary) !important; }

/* Text */
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fs-lead-brand { font-size: var(--fs-lead) !important; }
.fs-sm-brand { font-size: var(--fs-sm) !important; }
.fs-xs-brand { font-size: var(--fs-xs) !important; }
.ls-wide { letter-spacing: 0.06em !important; }
.text-balance { text-wrap: balance; }

/* Max width helpers for readable content blocks */
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 820px; }
.max-w-xl { max-width: 980px; }

/* Visually hidden but accessible (supplements Bootstrap's .visually-hidden) */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Object-fit helpers */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

/* Aspect ratio placeholders (used until real photography is supplied) */
.ratio-brand-16-9 { aspect-ratio: 16 / 9; }
.ratio-brand-4-3 { aspect-ratio: 4 / 3; }
.ratio-brand-1-1 { aspect-ratio: 1 / 1; }

/* Placeholder media block: labeled gradient tile standing in for real
   photography/video until final assets are supplied by the client. */
.media-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.6rem;
  background: linear-gradient(150deg, rgba(var(--color-primary-rgb), 0.92), rgba(var(--color-primary-rgb), 0.7) 60%, rgba(var(--color-secondary-rgb), 0.55));
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  padding: 1.5rem;
}
.media-placeholder i { font-size: 2.25rem; color: var(--color-secondary); }
.media-placeholder span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

/* Divider dots */
.dot-divider { color: var(--color-secondary); }

/* Z-index helpers */
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }