/* Reference pages: shared styling extracted from include/reference_page_template.php
   Theme-safe: relies on Bootstrap CSS variables (no hard-coded palette). */

.references-page .hero-section {
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
    color: var(--bs-light);
    padding: 5.5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.references-page .hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.85) 0%,
        rgba(var(--bs-info-rgb), 0.70) 100%
    );
    z-index: 1;
    opacity: 0.85;
}

.references-page .hero-section::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(15deg);
    z-index: 1;
    pointer-events: none;
}

.references-page .hero-content {
    position: relative;
    z-index: 2;
}