/* =============================================================================
   utilities.css — Helper classes
   ============================================================================= */

/* --- Colour text helpers -------------------------------------------------- */
.text-navy       { color: var(--brand-navy) !important; }
.text-gold       { color: var(--brand-gold) !important; }
.text-gold-dim   { color: var(--brand-gold-dim) !important; }
.text-green      { color: var(--brand-green) !important; }
.text-white      { color: var(--brand-white) !important; }
.text-charcoal   { color: var(--brand-charcoal) !important; }
.text-muted-brand{ color: var(--color-text-muted) !important; }

/* --- Font weight helpers -------------------------------------------------- */
.fw-light    { font-weight: var(--fw-light) !important; }
.fw-regular  { font-weight: var(--fw-regular) !important; }
.fw-semibold { font-weight: var(--fw-semibold) !important; }
.fw-bold     { font-weight: var(--fw-bold) !important; }
.fw-extrabold{ font-weight: var(--fw-extrabold) !important; }

/* --- Font size helpers ---------------------------------------------------- */
.text-xs   { font-size: var(--text-xs) !important; }
.text-sm   { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg   { font-size: var(--text-lg) !important; }
.text-2xl  { font-size: var(--text-2xl) !important; }
.text-3xl  { font-size: var(--text-3xl) !important; }
.text-4xl  { font-size: var(--text-4xl) !important; }

/* --- Letter spacing helpers ----------------------------------------------- */
.tracking-wide    { letter-spacing: var(--tracking-wide) !important; }
.tracking-wider   { letter-spacing: var(--tracking-wider) !important; }
.tracking-widest  { letter-spacing: var(--tracking-widest) !important; }

/* --- Line height helpers -------------------------------------------------- */
.leading-tight    { line-height: var(--leading-tight) !important; }
.leading-snug     { line-height: var(--leading-snug) !important; }
.leading-relaxed  { line-height: var(--leading-relaxed) !important; }

/* --- Opacity ---------------------------------------------------------------- */
.opacity-50  { opacity: 0.50; }
.opacity-70  { opacity: 0.70; }
.opacity-80  { opacity: 0.80; }

/* --- Image utilities ------------------------------------------------------- */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.img-grayscale {
    filter: grayscale(100%);
    transition: filter var(--t-slow);
}

.img-grayscale:hover { filter: grayscale(0%); }

/* --- Rounded helpers ------------------------------------------------------- */
.rounded-brand-sm { border-radius: var(--radius-sm); }
.rounded-brand    { border-radius: var(--radius); }
.rounded-brand-lg { border-radius: var(--radius-lg); }
.rounded-brand-xl { border-radius: var(--radius-xl); }
.rounded-full     { border-radius: var(--radius-full); }

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

/* --- Border helpers -------------------------------------------------------- */
.border-gold       { border-color: var(--brand-gold) !important; }
.border-navy       { border-color: var(--brand-navy) !important; }
.border-gold-left  { border-left: 4px solid var(--brand-gold); }
.border-green-left { border-left: 4px solid var(--brand-green); }
.border-gold-top   { border-top: 3px solid var(--brand-gold); }

/* --- Layout helpers -------------------------------------------------------- */
.overflow-x-hidden { overflow-x: hidden; }

.aspect-4-5 {
    aspect-ratio: 4/5;
    object-fit: cover;
}

.aspect-16-9 {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.aspect-square {
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* --- Transition helpers ---------------------------------------------------- */
.transition-base  { transition: all var(--t-base); }
.transition-fast  { transition: all var(--t-fast); }
.transition-slow  { transition: all var(--t-slow); }

/* --- Hover lift ------------------------------------------------------------ */
.hover-lift {
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* --- Scroll reveal (JS-enhanced) ------------------------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--t-slow), transform var(--t-slow);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Stagger children for reveal ------------------------------------------ */
.reveal-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-children.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.reveal-children.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
.reveal-children.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.reveal-children.is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.reveal-children.is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
.reveal-children.is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }

/* --- Section eyebrow line -------------------------------------------------- */
.eyebrow-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.eyebrow-line::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 2px;
    background-color: var(--brand-gold);
    flex-shrink: 0;
}

/* --- Card grid gap helpers ------------------------------------------------- */
.gap-brand-sm { gap: var(--space-sm); }
.gap-brand-md { gap: var(--space-md); }
.gap-brand-lg { gap: var(--gutter); }
.gap-brand-xl { gap: var(--space-xl); }

/* --- Max width content helpers -------------------------------------------- */
.prose-container {
    max-width: 72ch;
}

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