/* Explain: CSS for section padding and responsive layout utilities. */
.section-pad {
    padding-top: clamp(4.5rem, 9vw, 7.5rem);
    padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(31, 46, 35, 0.9), rgba(31, 46, 35, 0.58) 55%, rgba(31, 46, 35, 0.28));
    pointer-events: none;
}

.hero-overlay-soft {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(31, 46, 35, 0.9), rgba(31, 46, 35, 0.22) 62%);
    pointer-events: none;
}

html[dir="ltr"] .hero-overlay {
    background: linear-gradient(to right, rgba(31, 46, 35, 0.9), rgba(31, 46, 35, 0.58) 55%, rgba(31, 46, 35, 0.28));
}