/* ==========================================================================
   UTILITIES
   --------------------------------------------------------------------------
   PURPOSE:
   This file contains SMALL, SINGLE-PURPOSE helper classes.
   Utilities do ONE thing and do it predictably.

   Utilities are:
   - reusable
   - opt-in
   - safe to stack

   WHY THIS FILE EXISTS:
   - Prevents copy/paste CSS across sections
   - Keeps templates readable
   - Avoids one-off “hack” classes in sections

   RULES:
   - Utilities should be atomic (one job only)
   - No deep nesting
   - No section-specific styling
   - Can override Bootstrap utilities intentionally (if chosen)

   COMMON USE CASES:
   - spacing helpers
   - colour helpers
   - radius helpers
   - text helpers
   - visibility helpers

   EXAMPLES OF WHAT BELONGS HERE:
   .pt-small
   .pb-large
   .text-primary (if overriding Bootstrap)
   .bg-accent
   .play-icon

   EXAMPLES OF WHAT DOES NOT BELONG HERE:
   Header layout
   Buttons
   Cards
   Forms
   Section-specific styles
   ========================================================================== */



/* Lenis (manual version of lenis.css) */



/* Bootstrap utility overrides (your current approach) */
.text-primary   { color: var(--brand-primary) !important; }
.text-secondary { color: var(--brand-secondary) !important; }
.text-white     { color: var(--brand-white) !important; }
.text-dark      { color: var(--brand-black) !important; }

.text-accent    { color: var(--brand-accent) !important; }

.bg-primary   { background-color: var(--brand-primary) !important; }
.bg-secondary { background-color: var(--brand-secondary) !important; }
.bg-accent    { background-color: var(--brand-accent) !important; }
.bg-light     { background-color: var(--bg-light) !important; }
.bg-dark      { background-color: var(--brand-secondary) !important; }

a.text-primary:hover { color: var(--brand-secondary) !important; }


.radius-xl { border-radius: var(--radius-xl) !important; }
.radius-lg { border-radius: var(--radius-lg) !important; }
.radius-md { border-radius: var(--radius-md) !important; }
.radius-sm { border-radius: var(--radius-sm) !important; }

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

/* Section spacing */
.layout-section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  position: relative;
}

/* Semantic padding helpers */
.pt-none { padding-top: 0 !important; }
.pb-none { padding-bottom: 0 !important; }

.pt-small { padding-top: var(--section-gap-sm) !important; }
.pb-small { padding-bottom: var(--section-gap-sm) !important; }

.pt-large { padding-top: calc(var(--section-gap) * 1.5) !important; }
.pb-large { padding-bottom: calc(var(--section-gap) * 1.5) !important; }

/* Existing utility backgrounds */
.greybg { background-color: var(--bg-light); }

.hero-overlay {
   background: linear-gradient(
0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.90) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
}

.fw-bold {
  font-weight: 800 !important;
}

b, strong {
    font-weight: 700;
}
/* Position helpers you use */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.play-icon {
   width: 70px;
   height: 70px;
}


@media (min-width: 992px) {
   
.hero-overlay {
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.97) 45%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
}

.play-icon {
   width: auto;
   height: auto;
}


.pt-only-lg {
        padding-top: var(--section-gap) !important;
        padding-bottom: 0 !important;
    }

.pb-only-lg {
        padding-bottom: var(--section-gap) !important;
        padding-top: 0 !important;
    }


   
}


/* Mobile only: Top padding only */
@media (max-width: 991.98px) {
    .pt-only-sm {
        padding-top: var(--section-gap) !important;
        padding-bottom: 0 !important;
    }
    .pb-only-sm {
        padding-bottom: var(--section-gap) !important;
        padding-top: 0 !important;
    }
    .py-none-sm {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}